mirror of https://github.com/sveltejs/svelte
Conduitry
8 years ago
commit
4b4737af9f
@ -0,0 +1,12 @@
|
|||||||
|
const svgAttributes = 'accent-height accumulate additive alignment-baseline allowReorder alphabetic amplitude arabic-form ascent attributeName attributeType autoReverse azimuth baseFrequency baseline-shift baseProfile bbox begin bias by calcMode cap-height class clip clipPathUnits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominant-baseline dur dx dy edgeMode elevation enable-background end exponent externalResourcesRequired fill fill-opacity fill-rule filter filterRes filterUnits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphRef gradientTransform gradientUnits hanging height href horiz-adv-x horiz-origin-x id ideographic image-rendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lang lengthAdjust letter-spacing lighting-color limitingConeAngle local marker-end marker-mid marker-start markerHeight markerUnits markerWidth mask maskContentUnits maskUnits mathematical max media method min mode name numOctaves offset onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload opacity operator order orient orientation origin overflow overline-position overline-thickness panose-1 paint-order pathLength patternContentUnits patternTransform patternUnits pointer-events points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY rendering-intent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shape-rendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfaceScale systemLanguage tabindex tableValues target targetX targetY text-anchor text-decoration text-rendering textLength to transform type u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical values version vert-adv-y vert-origin-x vert-origin-y viewBox viewTarget visibility width widths word-spacing writing-mode x x-height x1 x2 xChannelSelector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y1 y2 yChannelSelector z zoomAndPan'.split(' ');
|
||||||
|
|
||||||
|
const svgAttributeLookup = new Map();
|
||||||
|
|
||||||
|
svgAttributes.forEach(name => {
|
||||||
|
svgAttributeLookup.set(name.toLowerCase(), name);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function fixAttributeCasing(name) {
|
||||||
|
name = name.toLowerCase();
|
||||||
|
return svgAttributeLookup.get(name) || name;
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
// Adapted from https://github.com/acornjs/acorn/blob/6584815dca7440e00de841d1dad152302fdd7ca5/src/tokenize.js
|
||||||
|
// Reproduced under MIT License https://github.com/acornjs/acorn/blob/master/LICENSE
|
||||||
|
|
||||||
|
export default function fullCharCodeAt(str: string, i: number): number {
|
||||||
|
let code = str.charCodeAt(i)
|
||||||
|
if (code <= 0xd7ff || code >= 0xe000) return code;
|
||||||
|
|
||||||
|
let next = str.charCodeAt(i + 1);
|
||||||
|
return (code << 10) + next - 0x35fdc00;
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import { isIdentifierStart, isIdentifierChar } from 'acorn';
|
||||||
|
import fullCharCodeAt from './fullCharCodeAt';
|
||||||
|
|
||||||
|
export default function isValidIdentifier(str: string): boolean {
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
while (i < str.length) {
|
||||||
|
const code = fullCharCodeAt(str, i);
|
||||||
|
if (!(i === 0 ? isIdentifierStart : isIdentifierChar)(code, true)) return false;
|
||||||
|
|
||||||
|
i += code <= 0xffff ? 1 : 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
@ -0,0 +1,221 @@
|
|||||||
|
function noop() {}
|
||||||
|
|
||||||
|
function assign(target) {
|
||||||
|
var k,
|
||||||
|
source,
|
||||||
|
i = 1,
|
||||||
|
len = arguments.length;
|
||||||
|
for (; i < len; i++) {
|
||||||
|
source = arguments[i];
|
||||||
|
for (k in source) target[k] = source[k];
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function blankObject() {
|
||||||
|
return Object.create(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function destroy(detach) {
|
||||||
|
this.destroy = noop;
|
||||||
|
this.fire('destroy');
|
||||||
|
this.set = this.get = noop;
|
||||||
|
|
||||||
|
if (detach !== false) this._fragment.u();
|
||||||
|
this._fragment.d();
|
||||||
|
this._fragment = this._state = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function differs(a, b) {
|
||||||
|
return a !== b || ((a && typeof a === 'object') || typeof a === 'function');
|
||||||
|
}
|
||||||
|
|
||||||
|
function dispatchObservers(component, group, changed, newState, oldState) {
|
||||||
|
for (var key in group) {
|
||||||
|
if (!changed[key]) continue;
|
||||||
|
|
||||||
|
var newValue = newState[key];
|
||||||
|
var oldValue = oldState[key];
|
||||||
|
|
||||||
|
var callbacks = group[key];
|
||||||
|
if (!callbacks) continue;
|
||||||
|
|
||||||
|
for (var i = 0; i < callbacks.length; i += 1) {
|
||||||
|
var callback = callbacks[i];
|
||||||
|
if (callback.__calling) continue;
|
||||||
|
|
||||||
|
callback.__calling = true;
|
||||||
|
callback.call(component, newValue, oldValue);
|
||||||
|
callback.__calling = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fire(eventName, data) {
|
||||||
|
var handlers =
|
||||||
|
eventName in this._handlers && this._handlers[eventName].slice();
|
||||||
|
if (!handlers) return;
|
||||||
|
|
||||||
|
for (var i = 0; i < handlers.length; i += 1) {
|
||||||
|
handlers[i].call(this, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function get(key) {
|
||||||
|
return key ? this._state[key] : this._state;
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(component, options) {
|
||||||
|
component._observers = { pre: blankObject(), post: blankObject() };
|
||||||
|
component._handlers = blankObject();
|
||||||
|
component._bind = options._bind;
|
||||||
|
|
||||||
|
component.options = options;
|
||||||
|
component.root = options.root || component;
|
||||||
|
component.store = component.root.store || options.store;
|
||||||
|
}
|
||||||
|
|
||||||
|
function observe(key, callback, options) {
|
||||||
|
var group = options && options.defer
|
||||||
|
? this._observers.post
|
||||||
|
: this._observers.pre;
|
||||||
|
|
||||||
|
(group[key] || (group[key] = [])).push(callback);
|
||||||
|
|
||||||
|
if (!options || options.init !== false) {
|
||||||
|
callback.__calling = true;
|
||||||
|
callback.call(this, this._state[key]);
|
||||||
|
callback.__calling = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
cancel: function() {
|
||||||
|
var index = group[key].indexOf(callback);
|
||||||
|
if (~index) group[key].splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function on(eventName, handler) {
|
||||||
|
if (eventName === 'teardown') return this.on('destroy', handler);
|
||||||
|
|
||||||
|
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
|
||||||
|
handlers.push(handler);
|
||||||
|
|
||||||
|
return {
|
||||||
|
cancel: function() {
|
||||||
|
var index = handlers.indexOf(handler);
|
||||||
|
if (~index) handlers.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function set(newState) {
|
||||||
|
this._set(assign({}, newState));
|
||||||
|
if (this.root._lock) return;
|
||||||
|
this.root._lock = true;
|
||||||
|
callAll(this.root._beforecreate);
|
||||||
|
callAll(this.root._oncreate);
|
||||||
|
callAll(this.root._aftercreate);
|
||||||
|
this.root._lock = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _set(newState) {
|
||||||
|
var oldState = this._state,
|
||||||
|
changed = {},
|
||||||
|
dirty = false;
|
||||||
|
|
||||||
|
for (var key in newState) {
|
||||||
|
if (differs(newState[key], oldState[key])) changed[key] = dirty = true;
|
||||||
|
}
|
||||||
|
if (!dirty) return;
|
||||||
|
|
||||||
|
this._state = assign({}, oldState, newState);
|
||||||
|
this._recompute(changed, this._state);
|
||||||
|
if (this._bind) this._bind(changed, this._state);
|
||||||
|
|
||||||
|
if (this._fragment) {
|
||||||
|
dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
|
||||||
|
this._fragment.p(changed, this._state);
|
||||||
|
dispatchObservers(this, this._observers.post, changed, this._state, oldState);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function callAll(fns) {
|
||||||
|
while (fns && fns.length) fns.shift()();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _mount(target, anchor) {
|
||||||
|
this._fragment.m(target, anchor);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _unmount() {
|
||||||
|
if (this._fragment) this._fragment.u();
|
||||||
|
}
|
||||||
|
|
||||||
|
var proto = {
|
||||||
|
destroy: destroy,
|
||||||
|
get: get,
|
||||||
|
fire: fire,
|
||||||
|
observe: observe,
|
||||||
|
on: on,
|
||||||
|
set: set,
|
||||||
|
teardown: destroy,
|
||||||
|
_recompute: noop,
|
||||||
|
_set: _set,
|
||||||
|
_mount: _mount,
|
||||||
|
_unmount: _unmount
|
||||||
|
};
|
||||||
|
|
||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
function data_1() {
|
||||||
|
return {
|
||||||
|
foo: 'bar'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function oncreate() {
|
||||||
|
alert(JSON.stringify(data()));
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_main_fragment(state, component) {
|
||||||
|
|
||||||
|
return {
|
||||||
|
c: noop,
|
||||||
|
|
||||||
|
m: noop,
|
||||||
|
|
||||||
|
p: noop,
|
||||||
|
|
||||||
|
u: noop,
|
||||||
|
|
||||||
|
d: noop
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function SvelteComponent(options) {
|
||||||
|
init(this, options);
|
||||||
|
this._state = assign(data_1(), options.data);
|
||||||
|
|
||||||
|
var _oncreate = oncreate.bind(this);
|
||||||
|
|
||||||
|
if (!options.root) {
|
||||||
|
this._oncreate = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
this._fragment = create_main_fragment(this._state, this);
|
||||||
|
|
||||||
|
this.root._oncreate.push(_oncreate);
|
||||||
|
|
||||||
|
if (options.target) {
|
||||||
|
this._fragment.c();
|
||||||
|
this._fragment.m(options.target, options.anchor || null);
|
||||||
|
|
||||||
|
callAll(this._oncreate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
assign(SvelteComponent.prototype, proto);
|
||||||
|
|
||||||
|
export default SvelteComponent;
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import { assign, callAll, init, noop, proto } from "svelte/shared.js";
|
||||||
|
|
||||||
|
function data_1() {
|
||||||
|
return {
|
||||||
|
foo: 'bar'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function oncreate() {
|
||||||
|
alert(JSON.stringify(data()));
|
||||||
|
};
|
||||||
|
|
||||||
|
function create_main_fragment(state, component) {
|
||||||
|
|
||||||
|
return {
|
||||||
|
c: noop,
|
||||||
|
|
||||||
|
m: noop,
|
||||||
|
|
||||||
|
p: noop,
|
||||||
|
|
||||||
|
u: noop,
|
||||||
|
|
||||||
|
d: noop
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function SvelteComponent(options) {
|
||||||
|
init(this, options);
|
||||||
|
this._state = assign(data_1(), options.data);
|
||||||
|
|
||||||
|
var _oncreate = oncreate.bind(this);
|
||||||
|
|
||||||
|
if (!options.root) {
|
||||||
|
this._oncreate = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
this._fragment = create_main_fragment(this._state, this);
|
||||||
|
|
||||||
|
this.root._oncreate.push(_oncreate);
|
||||||
|
|
||||||
|
if (options.target) {
|
||||||
|
this._fragment.c();
|
||||||
|
this._fragment.m(options.target, options.anchor || null);
|
||||||
|
|
||||||
|
callAll(this._oncreate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
assign(SvelteComponent.prototype, proto);
|
||||||
|
export default SvelteComponent;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data: () => ({
|
||||||
|
foo: 'bar'
|
||||||
|
}),
|
||||||
|
|
||||||
|
oncreate() {
|
||||||
|
alert(JSON.stringify(data()));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -1 +1 @@
|
|||||||
<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused/>
|
<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume/>
|
||||||
|
|||||||
@ -0,0 +1,3 @@
|
|||||||
|
{{#each things as 𐊧}}
|
||||||
|
<p>{{𐊧}}</p>
|
||||||
|
{{/each}}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"hash": 795130236,
|
||||||
|
"html": {
|
||||||
|
"start": 0,
|
||||||
|
"end": 47,
|
||||||
|
"type": "Fragment",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 0,
|
||||||
|
"end": 47,
|
||||||
|
"type": "EachBlock",
|
||||||
|
"expression": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 8,
|
||||||
|
"end": 14,
|
||||||
|
"name": "things"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 24,
|
||||||
|
"end": 37,
|
||||||
|
"type": "Element",
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 27,
|
||||||
|
"end": 33,
|
||||||
|
"type": "MustacheTag",
|
||||||
|
"expression": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 29,
|
||||||
|
"end": 31,
|
||||||
|
"name": "𐊧"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"context": "𐊧"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"css": null,
|
||||||
|
"js": null
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
html: `<textarea></textarea>`,
|
||||||
|
test (assert, component, target) {
|
||||||
|
const textarea = target.querySelector('textarea');
|
||||||
|
assert.ok(textarea.readOnly === false);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<textarea readonly="{{false}}"></textarea>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
html: `<textarea readonly></textarea>`,
|
||||||
|
test (assert, component, target) {
|
||||||
|
const textarea = target.querySelector('textarea');
|
||||||
|
assert.ok(textarea.readOnly);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<textarea readonly="{{true}}"></textarea>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div class='SHOUTY'>YELL</div>
|
||||||
|
|
||||||
|
<svg viewBox='0 0 100 100' id='one'>
|
||||||
|
<text textLength=100>hellooooo</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox='0 0 100 100' id='two'>
|
||||||
|
<text textLength=100>hellooooo</text>
|
||||||
|
</svg>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test(assert, component, target) {
|
||||||
|
const attr = sel => target.querySelector(sel).attributes[0].name;
|
||||||
|
|
||||||
|
assert.equal(attr('div'), 'class');
|
||||||
|
assert.equal(attr('svg#one'), 'viewBox');
|
||||||
|
assert.equal(attr('svg#one text'), 'textLength');
|
||||||
|
assert.equal(attr('svg#two'), 'viewBox');
|
||||||
|
assert.equal(attr('svg#two text'), 'textLength');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<div CLASS='SHOUTY'>YELL</div>
|
||||||
|
|
||||||
|
<svg viewbox='0 0 100 100' id='one'>
|
||||||
|
<text textlength=100>hellooooo</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox='0 0 100 100' id='two'>
|
||||||
|
<text textLength=100>hellooooo</text>
|
||||||
|
</svg>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<p>{{value}}</p>
|
||||||
|
<p>{{called}}</p>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return { called: false };
|
||||||
|
},
|
||||||
|
|
||||||
|
oncreate() {
|
||||||
|
this.set({ called: true });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
const promise = Promise.resolve(42);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data: {
|
||||||
|
promise
|
||||||
|
},
|
||||||
|
|
||||||
|
test(assert, component, target) {
|
||||||
|
return promise.then(() => {
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>42</p>
|
||||||
|
<p>true</p>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
{{#await promise then value}}
|
||||||
|
<Foo :value />
|
||||||
|
{{/await}}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Foo from './Foo.html';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Foo
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
test(assert, component, target) {
|
||||||
|
const promise = Promise.resolve().then(() => component.set({ answer: 42 }));
|
||||||
|
|
||||||
|
component.set({ promise });
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<p>wait for it...</p>`);
|
||||||
|
|
||||||
|
return promise
|
||||||
|
.then(() => {
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>the answer is 42!</p>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
{{#if promise}}
|
||||||
|
{{#await promise}}
|
||||||
|
<p>wait for it...</p>
|
||||||
|
{{then _}}
|
||||||
|
<p>the answer is {{answer}}!</p>
|
||||||
|
{{catch error}}
|
||||||
|
<p>well that's odd</p>
|
||||||
|
{{/await}}
|
||||||
|
{{/if}}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
<audio bind:currentTime='t' bind:duration='d' bind:paused bind:volume='v'
|
||||||
|
src='music.mp3'></audio>
|
||||||
@ -1 +0,0 @@
|
|||||||
<audio bind:currentTime='t' bind:duration='d' bind:paused src='music.mp3'></audio>
|
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>0: foo</button>
|
||||||
|
<button>1: bar</button>
|
||||||
|
<button>2: baz</button>
|
||||||
|
|
||||||
|
<p>first: </p>
|
||||||
|
<p>second: </p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test ( assert, component, target, window ) {
|
||||||
|
const event = new window.MouseEvent( 'click' );
|
||||||
|
|
||||||
|
const buttons = target.querySelectorAll( 'button' );
|
||||||
|
|
||||||
|
buttons[1].dispatchEvent( event );
|
||||||
|
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<button>0: foo</button>
|
||||||
|
<button>1: bar</button>
|
||||||
|
<button>2: baz</button>
|
||||||
|
|
||||||
|
<p>first: 1</p>
|
||||||
|
<p>second: bar</p>
|
||||||
|
` );
|
||||||
|
|
||||||
|
assert.equal( component.get( 'first' ), '1' );
|
||||||
|
assert.equal( component.get( 'second' ), 'bar' );
|
||||||
|
|
||||||
|
component.destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
{{#each items as [item0, item1]}}
|
||||||
|
<button on:tap='set({ first: item0, second: item1 })'>
|
||||||
|
{{item0}}: {{item1}}
|
||||||
|
</button>
|
||||||
|
{{/each}}
|
||||||
|
|
||||||
|
<p>first: {{first}}</p>
|
||||||
|
<p>second: {{second}}</p>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data: () => ({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
first: '',
|
||||||
|
second: '',
|
||||||
|
items: [ [0, 'foo'], [1, 'bar'], [2, 'baz'] ]
|
||||||
|
}),
|
||||||
|
|
||||||
|
events: {
|
||||||
|
tap ( node, callback ) {
|
||||||
|
function clickHandler ( event ) {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener( 'click', clickHandler, false );
|
||||||
|
|
||||||
|
return {
|
||||||
|
teardown () {
|
||||||
|
node.addEventListener( 'click', clickHandler, false );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
export default {
|
||||||
|
data: {
|
||||||
|
color: 'red',
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
foo
|
||||||
|
</div>`,
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<div>
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
color: {{color}};
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
foo
|
||||||
|
</div>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<p>{{name}}</p>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import result from './result.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
oncreate() {
|
||||||
|
result.push(`oncreate ${this.get('name')}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import result from './result.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
test(assert) {
|
||||||
|
assert.deepEqual(result, [
|
||||||
|
'oncreate foo',
|
||||||
|
'oncreate bar'
|
||||||
|
]);
|
||||||
|
|
||||||
|
result.pop();
|
||||||
|
result.pop();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<Nested name='foo'/>
|
||||||
|
<Nested name='bar'/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Nested from './Nested.html';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Nested
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export default [];
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<h1>Hello, {{$name}}!</h1>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Store } from '../../../../store.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
store () {
|
||||||
|
return new Store({
|
||||||
|
name: 'world'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
store: true, // TODO remove this in v2
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<h1>Hello, world!</h1>
|
||||||
|
`,
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<Nested/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Nested from './Nested.html';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Nested
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -1,2 +1,2 @@
|
|||||||
div[svelte-1408461649],[svelte-1408461649] div{color:red}
|
div[svelte-724714405],[svelte-724714405] div{color:red}
|
||||||
div[svelte-1580141456],[svelte-1580141456] div{color:green}
|
div[svelte-300476157],[svelte-300476157] div{color:green}
|
||||||
@ -1,8 +1,8 @@
|
|||||||
<div svelte-1408461649>red</div>
|
<div svelte-724714405>red</div>
|
||||||
<div svelte-1580141456>green: foo</div>
|
<div svelte-300476157>green: foo</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div svelte-1580141456>green: bar</div>
|
<div svelte-300476157>green: bar</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
div[svelte-1408461649],[svelte-1408461649] div{color:red}
|
div[svelte-724714405],[svelte-724714405] div{color:red}
|
||||||
div[svelte-1580141456],[svelte-1580141456] div{color:green}
|
div[svelte-300476157],[svelte-300476157] div{color:green}
|
||||||
@ -1,8 +1,8 @@
|
|||||||
<div svelte-1408461649>red</div>
|
<div svelte-724714405>red</div>
|
||||||
<div svelte-1580141456>green: foo</div>
|
<div svelte-300476157>green: foo</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div svelte-1580141456>green: bar</div>
|
<div svelte-300476157>green: bar</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
div[svelte-2278551596],[svelte-2278551596] div{color:red}
|
div[svelte-724714405],[svelte-724714405] div{color:red}
|
||||||
@ -1 +1 @@
|
|||||||
<div svelte-2278551596>red</div>
|
<div svelte-724714405>red</div>
|
||||||
@ -1 +1 @@
|
|||||||
div[svelte-2278551596],[svelte-2278551596] div{color:red}
|
div[svelte-724714405],[svelte-724714405] div{color:red}
|
||||||
@ -1 +1 @@
|
|||||||
<div svelte-2278551596>red</div>
|
<div svelte-724714405>red</div>
|
||||||
@ -1,2 +1,2 @@
|
|||||||
.foo[svelte-2772200924]{color:red}
|
.foo[svelte-1719932608]{color:red}
|
||||||
/*# sourceMappingURL=output.css.map */
|
/*# sourceMappingURL=output.css.map */
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue