update tests to account for removal of observe

pull/1348/head
Rich Harris 7 years ago
parent daa2635cd3
commit 2f86bd339d

@ -580,16 +580,8 @@ export default class Element extends Node {
}); });
`); `);
if (generator.options.dev) {
block.builders.hydrate.addBlock(deindent`
if (${handlerName}.teardown) {
console.warn("Return 'destroy()' from custom event handlers. Returning 'teardown()' has been deprecated and will be unsupported in Svelte 2");
}
`);
}
block.builders.destroy.addLine(deindent` block.builders.destroy.addLine(deindent`
${handlerName}[${handlerName}.destroy ? 'destroy' : 'teardown'](); ${handlerName}.destroy();
`); `);
} else { } else {
const handler = deindent` const handler = deindent`

@ -86,16 +86,8 @@ export default class Window extends Node {
}); });
`); `);
if (generator.options.dev) {
block.builders.hydrate.addBlock(deindent`
if (${handlerName}.teardown) {
console.warn("Return 'destroy()' from custom event handlers. Returning 'teardown()' has been deprecated and will be unsupported in Svelte 2");
}
`);
}
block.builders.destroy.addLine(deindent` block.builders.destroy.addLine(deindent`
${handlerName}[${handlerName}.destroy ? 'destroy' : 'teardown'](); ${handlerName}.destroy();
`); `);
} else { } else {
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`

@ -65,8 +65,6 @@ export function init(component, options) {
} }
export function on(eventName, handler) { export function on(eventName, handler) {
if (eventName === 'teardown') return this.on('destroy', handler);
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
handlers.push(handler); handlers.push(handler);
@ -78,17 +76,6 @@ export function on(eventName, handler) {
}; };
} }
export function onDev(eventName, handler) {
if (eventName === 'teardown') {
console.warn(
"Use component.on('destroy', ...) instead of component.on('teardown', ...) which has been deprecated and will be unsupported in Svelte 2"
);
return this.on('destroy', handler);
}
return on.call(this, eventName, handler);
}
export function run(fn) { export function run(fn) {
fn(); fn();
} }
@ -176,7 +163,7 @@ export var protoDev = {
destroy: destroyDev, destroy: destroyDev,
get, get,
fire, fire,
on: onDev, on,
set: setDev, set: setDev,
_recompute: noop, _recompute: noop,
_set, _set,

@ -5,7 +5,7 @@ export default function (target) {
target.innerHTML = '<custom-element name="world"></custom-element>'; target.innerHTML = '<custom-element name="world"></custom-element>';
const el = target.querySelector('custom-element'); const el = target.querySelector('custom-element');
assert.equal(el.get('name'), 'world'); assert.equal(el.get().name, 'world');
const h1 = el.shadowRoot.querySelector('h1'); const h1 = el.shadowRoot.querySelector('h1');
assert.equal(h1.textContent, 'Hello world!'); assert.equal(h1.textContent, 'Hello world!');

@ -20,7 +20,7 @@ export default {
input.value = 'everybody'; input.value = 'everybody';
input.dispatchEvent(new window.Event('input')); input.dispatchEvent(new window.Event('input'));
assert.equal(component.get('name'), 'everybody'); assert.equal(component.get().name, 'everybody');
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input> <input>
<p>Hello everybody!</p> <p>Hello everybody!</p>

@ -17,7 +17,7 @@ export default {
button.dispatchEvent(new window.MouseEvent('click')); button.dispatchEvent(new window.MouseEvent('click'));
assert.ok(component.get('clicked')); assert.ok(component.get().clicked);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>click me</button> <button>click me</button>
<p>clicked!</p> <p>clicked!</p>

@ -4,7 +4,5 @@ export default {
test ( assert, component, target ) { test ( assert, component, target ) {
component.set({ id: 'bar' }); component.set({ id: 'bar' });
assert.equal( target.innerHTML, `<div id="bar"></div>` ); assert.equal( target.innerHTML, `<div id="bar"></div>` );
component.teardown();
} }
}; };

@ -26,7 +26,7 @@ export default {
const click = new window.MouseEvent('click'); const click = new window.MouseEvent('click');
button.dispatchEvent(click); button.dispatchEvent(click);
assert.equal(component.get('clicked'), 42); assert.equal(component.get().clicked, 42);
thePromise = Promise.resolve(43); thePromise = Promise.resolve(43);
component.set({ thePromise }); component.set({ thePromise });
@ -39,7 +39,7 @@ export default {
const click = new window.MouseEvent('click'); const click = new window.MouseEvent('click');
button.dispatchEvent(click); button.dispatchEvent(click);
assert.equal(component.get('clicked'), 43); assert.equal(component.get().clicked, 43);
}); });
} }
}; };

@ -5,10 +5,10 @@ export default {
skip: true, skip: true,
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
assert.equal( component.get( 't' ), 0 ); assert.equal( component.get().t, 0 );
assert.equal( component.get( 'd' ), 0 ); assert.equal( component.get().d, 0 );
assert.equal( component.get( 'v' ), 0.5 ); assert.equal( component.get().v, 0.5 );
assert.equal( component.get( 'paused' ), true ); assert.equal( component.get().paused, true );
const audio = target.querySelector( 'audio' ); const audio = target.querySelector( 'audio' );
const timeupdate = new window.Event( 'timeupdate' ); const timeupdate = new window.Event( 'timeupdate' );
@ -23,10 +23,10 @@ export default {
audio.dispatchEvent( volumechange ); audio.dispatchEvent( volumechange );
audio.play(); audio.play();
assert.equal( component.get( 't' ), 10 ); assert.equal( component.get().t, 10 );
assert.equal( component.get( 'd' ), 0 ); // not 20, because read-only. Not sure how to test this! assert.equal( component.get().d, 0 ); // not 20, because read-only. Not sure how to test this!
assert.equal( component.get( 'v' ), 0.75 ); assert.equal( component.get().v, 0.75 );
assert.equal( component.get( 'paused' ), true ); // ditto... assert.equal( component.get().paused, true ); // ditto...
component.destroy(); component.destroy();
} }
}; };

@ -18,7 +18,7 @@ export default {
options[1].selected = true; options[1].selected = true;
select.dispatchEvent(change); select.dispatchEvent(change);
assert.equal(component.get('selected').letter, 'B'); assert.equal(component.get().selected.letter, 'B');
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<select> <select>
<option value='A'>A</option> <option value='A'>A</option>

@ -42,7 +42,7 @@ export default {
input.checked = true; input.checked = true;
input.dispatchEvent(change); input.dispatchEvent(change);
assert.ok(component.get('tasks')[0].done); assert.ok(component.get().tasks[0].done);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<select> <select>
<option value='[object Object]'>put your left leg in</option> <option value='[object Object]'>put your left leg in</option>
@ -63,13 +63,13 @@ export default {
options[1].selected = true; options[1].selected = true;
select.dispatchEvent(change); select.dispatchEvent(change);
assert.equal(component.get('selected'), tasks[1]); assert.equal(component.get().selected, tasks[1]);
assert.ok(!input.checked); assert.ok(!input.checked);
input.checked = true; input.checked = true;
input.dispatchEvent(change); input.dispatchEvent(change);
assert.ok(component.get('tasks')[1].done); assert.ok(component.get().tasks[1].done);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<select> <select>
<option value='[object Object]'>put your left leg in</option> <option value='[object Object]'>put your left leg in</option>

@ -24,13 +24,13 @@ export default {
inputs[1].checked = true; inputs[1].checked = true;
inputs[1].dispatchEvent( event ); inputs[1].dispatchEvent( event );
assert.equal( component.get( 'numCompleted' ), 2 ); assert.equal( component.get().numCompleted, 2 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div> <div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
<p>2 completed</p> <p>2 completed</p>
` ); ` );
const items = component.get( 'items' ); const items = component.get().items;
items[2].completed = true; items[2].completed = true;
component.set({ items }); component.set({ items });

@ -22,8 +22,8 @@ export default {
input.indeterminate = false; input.indeterminate = false;
input.dispatchEvent(event); input.dispatchEvent(event);
assert.equal(component.get('indeterminate'), false); assert.equal(component.get().indeterminate, false);
assert.equal(component.get('checked'), true); assert.equal(component.get().checked, true);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input type="checkbox"> <input type="checkbox">
<p>checked? true</p> <p>checked? true</p>

@ -17,7 +17,7 @@ export default {
input.value = '43'; input.value = '43';
input.dispatchEvent( event ); input.dispatchEvent( event );
assert.equal( component.get( 'count' ), 43 ); assert.equal( component.get().count, 43 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<input type='number'> <input type='number'>
<p>number 43</p> <p>number 43</p>
@ -34,7 +34,7 @@ export default {
input.value = ''; input.value = '';
input.dispatchEvent( event ); input.dispatchEvent( event );
assert.equal( component.get( 'count' ), undefined ); assert.equal( component.get().count, undefined );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<input type='number'> <input type='number'>
<p>undefined undefined</p> <p>undefined undefined</p>

@ -17,7 +17,7 @@ export default {
input.value = '43'; input.value = '43';
input.dispatchEvent( event ); input.dispatchEvent( event );
assert.equal( component.get( 'count' ), 43 ); assert.equal( component.get().count, 43 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<input type='range'> <input type='range'>
<p>number 43</p> <p>number 43</p>

@ -17,7 +17,7 @@ export default {
input.value = '43'; input.value = '43';
input.dispatchEvent( event ); input.dispatchEvent( event );
assert.equal( component.get( 'count' ), 43 ); assert.equal( component.get().count, 43 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<input type='range'> <input type='range'>
<p>number 43</p> <p>number 43</p>

@ -9,7 +9,7 @@ export default {
html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`, html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
const inputs = [ ...target.querySelectorAll( 'input' ) ]; const inputs = [ ...target.querySelectorAll( 'input' ) ];
const items = component.get( 'items' ); const items = component.get().items;
const event = new window.Event( 'input' ); const event = new window.Event( 'input' );
assert.equal( inputs[0].value, 'one' ); assert.equal( inputs[0].value, 'one' );

@ -20,7 +20,7 @@ export default {
assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` ); assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` );
const user = component.get( 'user' ); const user = component.get().user;
user.name = 'carol'; user.name = 'carol';
component.set({ user }); component.set({ user });

@ -19,7 +19,7 @@ export default {
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` ); assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
const items = component.get( 'items' ); const items = component.get().items;
items[2].description = 'five'; items[2].description = 'five';
component.set({ items }); component.set({ items });

@ -19,7 +19,7 @@ export default {
assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` ); assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` );
const user = component.get( 'user' ); const user = component.get().user;
user.name = 'carol'; user.name = 'carol';
component.set({ user }); component.set({ user });

@ -13,7 +13,7 @@ export default {
input.dispatchEvent( event ); input.dispatchEvent( event );
assert.equal( input.value, '43' ); assert.equal( input.value, '43' );
assert.equal( component.get( 'a' ), 43 ); assert.equal( component.get().a, 43 );
component.destroy(); component.destroy();
} }

@ -19,14 +19,14 @@ export default {
const options = [...target.querySelectorAll('option')]; const options = [...target.querySelectorAll('option')];
assert.ok(options[1].selected); assert.ok(options[1].selected);
assert.equal(component.get('foo'), 2); assert.equal(component.get().foo, 2);
const change = new window.Event('change'); const change = new window.Event('change');
options[2].selected = true; options[2].selected = true;
select.dispatchEvent(change); select.dispatchEvent(change);
assert.equal(component.get('foo'), 3); assert.equal(component.get().foo, 3);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<select> <select>
<option value='1'>1</option> <option value='1'>1</option>

@ -25,7 +25,7 @@ export default {
selects[1].options[0].selected = true; selects[1].options[0].selected = true;
selects[1].dispatchEvent(change); selects[1].dispatchEvent(change);
assert.deepEqual(component.get('items'), [ assert.deepEqual(component.get().items, [
{ value: 'hullo' }, { value: 'hullo' } { value: 'hullo' }, { value: 'hullo' }
]); ]);
} }

@ -12,7 +12,7 @@
methods: { methods: {
toggle () { toggle () {
this.set({ this.set({
hidden: !this.get('hidden') hidden: !this.get().hidden
}); });
} }
} }

@ -23,7 +23,7 @@ export default {
select.options[2].selected = true; select.options[2].selected = true;
select.dispatchEvent(change); select.dispatchEvent(change);
assert.equal(component.get('letter'), 'c'); assert.equal(component.get().letter, 'c');
assert.deepEqual(Array.from(select.options).map(o => o.selected), [ assert.deepEqual(Array.from(select.options).map(o => o.selected), [
false, false,

@ -24,7 +24,7 @@ export default {
options[1].selected = false; options[1].selected = false;
select.dispatchEvent( change ); select.dispatchEvent( change );
assert.deepEqual( component.get( 'selected' ), [ 'three' ] ); assert.deepEqual( component.get().selected, [ 'three' ] );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<select multiple> <select multiple>
<option>one</option> <option>one</option>
@ -38,7 +38,7 @@ export default {
options[0].selected = true; options[0].selected = true;
select.dispatchEvent( change ); select.dispatchEvent( change );
assert.deepEqual( component.get( 'selected' ), [ 'one', 'three' ] ); assert.deepEqual( component.get().selected, [ 'one', 'three' ] );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<select multiple> <select multiple>
<option>one</option> <option>one</option>

@ -17,14 +17,14 @@ export default {
const options = [...target.querySelectorAll('option')]; const options = [...target.querySelectorAll('option')];
assert.deepEqual(options, select.options); assert.deepEqual(options, select.options);
assert.equal(component.get('name'), 'Harry'); assert.equal(component.get().name, 'Harry');
const change = new window.Event('change'); const change = new window.Event('change');
options[1].selected = true; options[1].selected = true;
select.dispatchEvent(change); select.dispatchEvent(change);
assert.equal(component.get('name'), 'World'); assert.equal(component.get().name, 'World');
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<h1>Hello World!</h1> <h1>Hello World!</h1>

@ -20,14 +20,14 @@ export default {
const options = [ ...target.querySelectorAll( 'option' ) ]; const options = [ ...target.querySelectorAll( 'option' ) ];
assert.deepEqual( options, select.options ); assert.deepEqual( options, select.options );
assert.equal( component.get( 'selected' ), 'one' ); assert.equal( component.get().selected, 'one' );
const change = new window.Event( 'change' ); const change = new window.Event( 'change' );
options[1].selected = true; options[1].selected = true;
select.dispatchEvent( change ); select.dispatchEvent( change );
assert.equal( component.get( 'selected' ), 'two' ); assert.equal( component.get().selected, 'two' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<p>selected: two</p> <p>selected: two</p>

@ -9,7 +9,7 @@
}, },
oncreate() { oncreate() {
this.snapshot = this.get('foo'); this.snapshot = this.get().foo;
} }
}; };
</script> </script>

@ -12,7 +12,7 @@
export default { export default {
oncreate() { oncreate() {
this.set({ value: initialValues[this.get('id')] }); this.set({ value: initialValues[this.get().id] });
} }
}; };
</script> </script>

@ -12,7 +12,7 @@
export default { export default {
oncreate() { oncreate() {
this.set({ value: initialValues[this.get('id')] }); this.set({ value: initialValues[this.get().id] });
} }
}; };
</script> </script>

@ -1,14 +1,12 @@
export default { export default {
test ( assert, component ) { test(assert, component) {
let count = 0; let count = 0;
component.observe( 'bar', () => { component.on('state', ({ changed }) => {
count += 1; if (changed.bar) count += 1;
}); });
component.set({ x: true }); component.set({ x: true });
assert.equal( count, 1 ); assert.equal(count, 0);
component.destroy();
} }
}; };

@ -10,14 +10,14 @@ export default {
inputs[0].value = 'Ada'; inputs[0].value = 'Ada';
inputs[0].dispatchEvent(input); inputs[0].dispatchEvent(input);
assert.deepEqual(component.get('values'), { assert.deepEqual(component.get().values, {
firstname: 'Ada', firstname: 'Ada',
lastname: '' lastname: ''
}); });
inputs[1].value = 'Lovelace'; inputs[1].value = 'Lovelace';
inputs[1].dispatchEvent(input); inputs[1].dispatchEvent(input);
assert.deepEqual(component.get('values'), { assert.deepEqual(component.get().values, {
firstname: 'Ada', firstname: 'Ada',
lastname: 'Lovelace' lastname: 'Lovelace'
}); });

@ -37,7 +37,7 @@ export default {
textarea.value = 'one source changed'; textarea.value = 'one source changed';
textarea.dispatchEvent( event ); textarea.dispatchEvent( event );
assert.equal( component.get( 'compiled' ), 'ONE SOURCE CHANGED\nTWO SOURCE' ); assert.equal( component.get().compiled, 'ONE SOURCE CHANGED\nTWO SOURCE' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<select> <select>
<option value='[object Object]'>One.html</option> <option value='[object Object]'>One.html</option>
@ -67,7 +67,7 @@ export default {
textarea.value = 'two source changed'; textarea.value = 'two source changed';
textarea.dispatchEvent( event ); textarea.dispatchEvent( event );
assert.equal( component.get( 'compiled' ), 'ONE SOURCE CHANGED\nTWO SOURCE CHANGED' ); assert.equal( component.get().compiled, 'ONE SOURCE CHANGED\nTWO SOURCE CHANGED' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<select> <select>
<option value='[object Object]'>One.html</option> <option value='[object Object]'>One.html</option>

@ -1,5 +1,5 @@
<ComponentSelector :components bind:selectedComponent/> <ComponentSelector :components bind:selectedComponent/>
<Editor bind:code='selectedComponent.source'/> <Editor bind:code='selectedComponent.source' />
<pre> <pre>
{{compiled}} {{compiled}}
@ -15,25 +15,27 @@
Editor Editor
}, },
oncreate () { onstate({ changed, current }) {
this.observe( 'components', components => { const { selectedComponent } = this.get();
components.forEach( component => {
if ( component === this.get( 'selectedComponent' ) ) return; if (changed.components) {
components.forEach(component => {
if (component === selectedComponent) return;
component.compiled = component.source.toUpperCase(); component.compiled = component.source.toUpperCase();
}); });
}); }
this.observe( 'selectedComponent', component => { if (changed.selectedComponent) {
component.compiled = component.source.toUpperCase(); selectedComponent.compiled = selectedComponent.source.toUpperCase();
this.updateBundle(); this.updateBundle();
}); }
}, },
methods: { methods: {
updateBundle () { updateBundle() {
const components = this.get( 'components' ); const components = this.get('components');
const compiled = components.map( component => component.compiled ).join( '\n' ); const compiled = components.map(component => component.compiled).join('\n');
this.set({ compiled }); this.set({ compiled });
} }

@ -11,7 +11,7 @@ export default {
input.value = 'blah'; input.value = 'blah';
input.dispatchEvent( event ); input.dispatchEvent( event );
assert.deepEqual( component.get( 'deep' ), { name: 'blah' } ); assert.deepEqual( component.get().deep, { name: 'blah' } );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<input> <input>
<p>blah</p> <p>blah</p>

@ -11,12 +11,12 @@ export default {
inputs[0].value = 'blah'; inputs[0].value = 'blah';
inputs[0].dispatchEvent( event ); inputs[0].dispatchEvent( event );
assert.deepEqual( component.get( 'a' ), [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }] ); assert.deepEqual( component.get().a, [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }] );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<input><input><input> <input><input><input>
<p>blah, bar, baz</p> <p>blah, bar, baz</p>
` ); ` );
component.destroy(); component.destroy();
} }
}; };

@ -11,7 +11,7 @@ export default {
inputs[0].value = 'blah'; inputs[0].value = 'blah';
inputs[0].dispatchEvent( event ); inputs[0].dispatchEvent( event );
assert.deepEqual( component.get( 'a' ), [ 'blah', 'bar', 'baz' ] ); assert.deepEqual( component.get().a, [ 'blah', 'bar', 'baz' ] );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<input><input><input> <input><input><input>
<p>blah, bar, baz</p> <p>blah, bar, baz</p>

@ -12,10 +12,10 @@ export default {
}, },
methods: { methods: {
toggle() { toggle() {
const isCurrentlySelected = this.get('isCurrentlySelected') const isCurrentlySelected = this.get().isCurrentlySelected
this.set({ this.set({
currentIdentifier: isCurrentlySelected ? null : this.get('identifier') currentIdentifier: isCurrentlySelected ? null : this.get().identifier
}) })
} }
} }

@ -31,7 +31,7 @@ export default {
spans[0].dispatchEvent( click ); spans[0].dispatchEvent( click );
assert.equal( component.get( 'currentIdentifier' ), 1 ); assert.equal( component.get().currentIdentifier, 1 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<p><span class='selected'>1</span></p> <p><span class='selected'>1</span></p>
<p><span class=''>2</span></p> <p><span class=''>2</span></p>
@ -60,7 +60,7 @@ export default {
spans[0].dispatchEvent( click ); spans[0].dispatchEvent( click );
assert.equal( component.get( 'currentIdentifier' ), null ); assert.equal( component.get().currentIdentifier, null );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<p><span class=''>1</span></p> <p><span class=''>1</span></p>
<p><span class=''>2</span></p> <p><span class=''>2</span></p>

@ -21,7 +21,7 @@ export default {
buttons[0].dispatchEvent( click ); buttons[0].dispatchEvent( click );
assert.equal( component.get( 'x' ), 'p' ); assert.equal( component.get().x, 'p' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<p>x: p</p> <p>x: p</p>
<button class="foo">foo</button> <button class="foo">foo</button>
@ -34,7 +34,7 @@ export default {
buttons[1].dispatchEvent( click ); buttons[1].dispatchEvent( click );
assert.equal( component.get( 'x' ), 'q' ); assert.equal( component.get().x, 'q' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<p>x: q</p> <p>x: q</p>
<button class="foo">foo</button> <button class="foo">foo</button>
@ -47,7 +47,7 @@ export default {
buttons[2].dispatchEvent( click ); buttons[2].dispatchEvent( click );
assert.equal( component.get( 'x' ), 'r' ); assert.equal( component.get().x, 'r' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<p>x: r</p> <p>x: r</p>
<button class="foo">foo</button> <button class="foo">foo</button>

@ -10,7 +10,7 @@ export default {
button.dispatchEvent( click ); button.dispatchEvent( click );
assert.equal( component.get( 'x' ), 11 ); assert.equal( component.get().x, 11 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<button>+1</button> <button>+1</button>
<p>count: 11</p> <p>count: 11</p>
@ -18,7 +18,7 @@ export default {
button.dispatchEvent( click ); button.dispatchEvent( click );
assert.equal( component.get( 'x' ), 12 ); assert.equal( component.get().x, 12 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<button>+1</button> <button>+1</button>
<p>count: 12</p> <p>count: 12</p>

@ -12,14 +12,14 @@ export default {
target.querySelector('button').dispatchEvent(click); target.querySelector('button').dispatchEvent(click);
assert.equal(component.get('show'), false); assert.equal(component.get().show, false);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>Show</button> <button>Show</button>
`); `);
target.querySelector('button').dispatchEvent(click); target.querySelector('button').dispatchEvent(click);
assert.equal(component.get('show'), true); assert.equal(component.get().show, true);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>Hide</button> <button>Hide</button>
`); `);

@ -12,7 +12,7 @@ export default {
button.dispatchEvent( click ); button.dispatchEvent( click );
assert.equal( component.get( 'x' ), 1 ); assert.equal( component.get().x, 1 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<button>+1</button> <button>+1</button>
<p>count: 1</p> <p>count: 1</p>
@ -20,7 +20,7 @@ export default {
button.dispatchEvent( click ); button.dispatchEvent( click );
assert.equal( component.get( 'x' ), 2 ); assert.equal( component.get().x, 2 );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<button>+1</button> <button>+1</button>
<p>count: 2</p> <p>count: 2</p>

@ -11,7 +11,5 @@ export default {
}); });
assert.equal( target.innerHTML, `<div><p>foo: 99</p></div>` ); assert.equal( target.innerHTML, `<div><p>foo: 99</p></div>` );
component.teardown();
} }
}; };

@ -1,6 +1,6 @@
<div> <div>
{{#if visible}} {{#if visible}}
<Widget on:teardown='fire("widgetTornDown")'/> <Widget on:destroy='fire("widgetTornDown")'/>
{{/if}} {{/if}}
</div> </div>

@ -4,7 +4,7 @@ export default {
test ( assert, component, target ) { test ( assert, component, target ) {
const widget = component.refs.widget; const widget = component.refs.widget;
assert.equal( widget.get( 'show' ), false ); assert.equal( widget.get().show, false );
widget.set({show: true}); widget.set({show: true});
assert.htmlEqual( target.innerHTML, '<div><p>Hello</p></div>' ); assert.htmlEqual( target.innerHTML, '<div><p>Hello</p></div>' );

@ -4,10 +4,10 @@ export default {
`, `,
test ( assert, component, target ) { test ( assert, component, target ) {
assert.equal( component.get( 'data' ), 'Hello' ); assert.equal( component.get().data, 'Hello' );
component.set({ data: 'World' }); component.set({ data: 'World' });
assert.equal( component.get( 'data' ), 'World' ); assert.equal( component.get().data, 'World' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<div><p>World</p></div> <div><p>World</p></div>
` ); ` );

@ -1,7 +1,7 @@
export default { export default {
html: '<div>empty</div>', html: '<div>empty</div>',
test ( assert, component, target ) { test ( assert, component, target ) {
assert.equal( component.get( 'created' ), true ); assert.equal( component.get().created, true );
assert.equal( target.innerHTML, '<div>empty</div>' ); assert.equal( target.innerHTML, '<div>empty</div>' );
component.destroy(); component.destroy();
} }

@ -3,7 +3,7 @@ export default {
test ( assert, component, target ) { test ( assert, component, target ) {
component.set({ y: 2 }); component.set({ y: 2 });
assert.equal( component.get( 'x' ), 4 ); assert.equal( component.get().x, 4 );
assert.equal( target.innerHTML, '<p>4</p>' ); assert.equal( target.innerHTML, '<p>4</p>' );
component.destroy(); component.destroy();
} }

@ -2,8 +2,8 @@ export default {
html: '<p>1 + 2 = 3</p>\n<p>3 * 3 = 9</p>', html: '<p>1 + 2 = 3</p>\n<p>3 * 3 = 9</p>',
test ( assert, component, target ) { test ( assert, component, target ) {
component.set({ a: 3 }); component.set({ a: 3 });
assert.equal( component.get( 'c' ), 5 ); assert.equal( component.get().c, 5 );
assert.equal( component.get( 'cSquared' ), 25 ); assert.equal( component.get().cSquared, 25 );
assert.equal( target.innerHTML, '<p>3 + 2 = 5</p>\n<p>5 * 5 = 25</p>' ); assert.equal( target.innerHTML, '<p>3 + 2 = 5</p>\n<p>5 * 5 = 25</p>' );
component.destroy(); component.destroy();
} }

@ -5,11 +5,11 @@ export default {
const event = new window.MouseEvent( 'click' ); const event = new window.MouseEvent( 'click' );
button.dispatchEvent( event ); button.dispatchEvent( event );
assert.equal( component.get( 'counter' ), 1 ); assert.equal( component.get().counter, 1 );
assert.equal( target.innerHTML, '<button>+1</button>\n\n<p>1</p>' ); assert.equal( target.innerHTML, '<button>+1</button>\n\n<p>1</p>' );
button.dispatchEvent( event ); button.dispatchEvent( event );
assert.equal( component.get( 'counter' ), 2 ); assert.equal( component.get().counter, 2 );
assert.equal( target.innerHTML, '<button>+1</button>\n\n<p>2</p>' ); assert.equal( target.innerHTML, '<button>+1</button>\n\n<p>2</p>' );
assert.equal( component.foo(), 42 ); assert.equal( component.foo(), 42 );

@ -10,7 +10,7 @@
methods: { methods: {
add1 () { add1 () {
this.set({ counter: this.get( 'counter' ) + 1 }); this.set({ counter: this.get().counter + 1 });
}, },
foo () { foo () {

@ -2,7 +2,7 @@ export default {
html: `<span>got</span>`, html: `<span>got</span>`,
test ( assert, component ) { test ( assert, component ) {
assert.equal( component.get( 'foo' ), 'got' ); assert.equal( component.get().foo, 'got' );
component.destroy(); component.destroy();
} }
}; };

@ -2,7 +2,7 @@ export default {
html: `ABCD`, html: `ABCD`,
test ( assert, component ) { test ( assert, component ) {
assert.equal( component.get( 'compute' ), 'ABCD' ); assert.equal( component.get().compute, 'ABCD' );
component.destroy(); component.destroy();
} }
}; };

@ -1,7 +0,0 @@
export default {
dev: true,
error ( assert, err ) {
assert.equal( err.message, `The first argument to component.observe(...) must be the name of a top-level property, i.e. 'nested' rather than 'nested.data'` );
}
};

@ -1,9 +0,0 @@
<script>
export default {
oncreate () {
this.observe( 'nested.data', data => {
console.log( 'nope' );
});
}
};
</script>

@ -1,7 +0,0 @@
export default {
dev: true,
warnings: [
`Return 'destroy()' from custom event handlers. Returning 'teardown()' has been deprecated and will be unsupported in Svelte 2`
]
};

@ -1,16 +0,0 @@
<button on:foo='foo()'>foo</button>
<script>
export default {
methods: {
foo() {}
},
events: {
foo(node, callback) {
return {
teardown() {}
}
}
}
};
</script>

@ -1,7 +0,0 @@
export default {
dev: true,
warnings: [
`Use component.on('destroy', ...) instead of component.on('teardown', ...) which has been deprecated and will be unsupported in Svelte 2`
]
};

@ -1,9 +0,0 @@
<script>
export default {
oncreate () {
this.on( 'teardown', () => {
this.destroyed = true;
});
}
};
</script>

@ -13,7 +13,7 @@ export default {
input.value = 'abc'; input.value = 'abc';
input.dispatchEvent(new window.Event('input')); input.dispatchEvent(new window.Event('input'));
assert.equal(component.get('y'), 'abc'); assert.equal(component.get().y, 'abc');
component.set({ component.set({
x: false x: false
@ -28,6 +28,6 @@ export default {
input.checked = true; input.checked = true;
input.dispatchEvent(new window.Event('change')); input.dispatchEvent(new window.Event('change'));
assert.equal(component.get('z'), true); assert.equal(component.get().z, true);
} }
}; };

@ -11,7 +11,7 @@ export default {
const click = new window.MouseEvent('click'); const click = new window.MouseEvent('click');
target.querySelector('button').dispatchEvent(click); target.querySelector('button').dispatchEvent(click);
assert.equal(component.get('selected'), 'foo'); assert.equal(component.get().selected, 'foo');
component.set({ component.set({
x: false x: false
@ -22,6 +22,6 @@ export default {
`); `);
target.querySelector('button').dispatchEvent(click); target.querySelector('button').dispatchEvent(click);
assert.equal(component.get('selected'), 'bar'); assert.equal(component.get().selected, 'bar');
} }
}; };

@ -14,6 +14,6 @@ export default {
const event = new window.MouseEvent('click'); const event = new window.MouseEvent('click');
button.dispatchEvent(event); button.dispatchEvent(event);
assert.equal(component.get('clicked'), 'racoon'); assert.equal(component.get().clicked, 'racoon');
}, },
}; };

@ -1,6 +1,6 @@
export default { export default {
test ( assert, component, target ) { test ( assert, component, target ) {
const items = component.get( 'items' ); const items = component.get().items;
items.forEach( item => item.completed = false ); items.forEach( item => item.completed = false );
component.set({ currentFilter: 'all' }); component.set({ currentFilter: 'all' });

@ -11,14 +11,14 @@
tap ( node, callback ) { tap ( node, callback ) {
const clickHandler = event => { const clickHandler = event => {
callback({ callback({
answer: this.get( 'answer' ) answer: this.get().answer
}); });
}; };
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
return { return {
teardown () { destroy () {
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
} }
}; };

@ -24,8 +24,8 @@ export default {
<p>second: bar</p> <p>second: bar</p>
` ); ` );
assert.equal( component.get( 'first' ), '1' ); assert.equal( component.get().first, '1' );
assert.equal( component.get( 'second' ), 'bar' ); assert.equal( component.get().second, 'bar' );
component.destroy(); component.destroy();
} }

@ -26,7 +26,7 @@
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
return { return {
teardown () { destroy () {
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
} }
}; };

@ -24,8 +24,8 @@ export default {
<p>fromState: bar</p> <p>fromState: bar</p>
` ); ` );
assert.equal( component.get( 'fromDom' ), 'bar' ); assert.equal( component.get().fromDom, 'bar' );
assert.equal( component.get( 'fromState' ), 'bar' ); assert.equal( component.get().fromState, 'bar' );
component.destroy(); component.destroy();
} }

@ -24,7 +24,7 @@
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
return { return {
teardown () { destroy () {
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
} }
}; };

@ -15,7 +15,7 @@
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
return { return {
teardown () { destroy () {
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
} }
}; };

@ -19,7 +19,7 @@
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
return { return {
teardown () { destroy () {
node.addEventListener( 'click', clickHandler, false ); node.addEventListener( 'click', clickHandler, false );
} }
}; };

@ -16,7 +16,7 @@ export default {
const event = new window.MouseEvent( 'click' ); const event = new window.MouseEvent( 'click' );
buttons[0].dispatchEvent( event ); buttons[0].dispatchEvent( event );
assert.equal( component.get( 'clicked' ), 'foo' ); assert.equal( component.get().clicked, 'foo' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<button>foo</button> <button>foo</button>
<button>bar</button> <button>bar</button>
@ -24,7 +24,7 @@ export default {
` ); ` );
buttons[1].dispatchEvent( event ); buttons[1].dispatchEvent( event );
assert.equal( component.get( 'clicked' ), 'bar' ); assert.equal( component.get().clicked, 'bar' );
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<button>foo</button> <button>foo</button>
<button>bar</button> <button>bar</button>

@ -6,7 +6,7 @@ export default {
allow.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) ); allow.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) );
stop.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) ); stop.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) );
assert.equal( component.get( 'foo' ), true ); assert.equal( component.get().foo, true );
assert.equal( component.get( 'bar' ), false ); assert.equal( component.get().bar, false );
} }
}; };

@ -7,13 +7,13 @@ export default {
// this should NOT trigger blur event // this should NOT trigger blur event
component.set({ visible: false }); component.set({ visible: false });
assert.ok( !component.get( 'blurred' ) ); assert.ok( !component.get().blurred );
component.set({ visible: true }); component.set({ visible: true });
component.refs.input.focus(); component.refs.input.focus();
// this SHOULD trigger blur event // this SHOULD trigger blur event
component.refs.input.blur(); component.refs.input.blur();
assert.ok( component.get( 'blurred' ) ); assert.ok( component.get().blurred );
} }
}; };

@ -9,7 +9,7 @@ export default {
`, `,
test(assert, component) { test(assert, component) {
const visibleThings = component.get('visibleThings'); const visibleThings = component.get().visibleThings;
assert.deepEqual(visibleThings, ['first thing', 'second thing']); assert.deepEqual(visibleThings, ['first thing', 'second thing']);
const snapshots = component.snapshots; const snapshots = component.snapshots;

@ -14,11 +14,15 @@
Nested Nested
}, },
oncreate() { onstate({ current, changed, previous }) {
this.snapshots = []; if (!this.snapshots) {
this.observe('visibleThings', things => { // first run
this.snapshots.push(things); this.snapshots = [];
}); }
if (changed.visibleThings) {
this.snapshots.push(current.visibleThings);
}
} }
}; };
</script> </script>

@ -1,7 +1,7 @@
export default { export default {
test ( assert, component ) { test ( assert, component ) {
assert.equal( component.get('a'), 1 ); assert.equal( component.get().a, 1 );
assert.equal( component.get('c'), 3 ); assert.equal( component.get().c, 3 );
assert.deepEqual( component.get(), { a: 1, b: 2, c: 3 }); assert.deepEqual( component.get(), { a: 1, b: 2, c: 3 });
} }
}; };

@ -40,7 +40,7 @@ export default {
input.checked = true; input.checked = true;
input.dispatchEvent(change); input.dispatchEvent(change);
assert.ok(component.get('todos').third.done); assert.ok(component.get().todos.third.done);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<div class="todo done"> <div class="todo done">
<input type="checkbox"> <input type="checkbox">

@ -1,13 +1,13 @@
<h3>Called {{count}} times.</h3> <h3>Called {{count}} times.</h3>
<script> <script>
export default { export default {
immutable: false, immutable: false,
data() { data() {
return { return {
count: 0, count: 0,
foo: { bar: 'baz' } foo: { bar: 'baz' }
}; };
} }
} }
</script> </script>

@ -4,13 +4,15 @@ export default {
test(assert, component, target, window) { test(assert, component, target, window) {
var nested = component.refs.nested; var nested = component.refs.nested;
nested.observe('foo', foo => { nested.on('state', ({ changed }) => {
nested.set({ count: nested.get('count') + 1 }); if (changed.foo) {
nested.set({ count: nested.get().count + 1 });
}
}); });
assert.htmlEqual(target.innerHTML, `<div><h3>Called 1 times.</h3></div>`); assert.htmlEqual(target.innerHTML, `<div><h3>Called 0 times.</h3></div>`);
nested.set({ foo: nested.get('foo') }); nested.set({ foo: nested.get().foo });
assert.htmlEqual(target.innerHTML, `<div><h3>Called 2 times.</h3></div>`); assert.htmlEqual(target.innerHTML, `<div><h3>Called 1 times.</h3></div>`);
} }
}; };

@ -4,13 +4,15 @@ export default {
test(assert, component, target, window) { test(assert, component, target, window) {
var nested = component.refs.nested; var nested = component.refs.nested;
nested.observe('foo', foo => { nested.on('state', ({ changed }) => {
nested.set({ count: nested.get('count') + 1 }); if (changed.foo) {
nested.set({ count: nested.get().count + 1 });
}
}); });
assert.htmlEqual(target.innerHTML, `<div><h3>Called 1 times.</h3></div>`); assert.htmlEqual(target.innerHTML, `<div><h3>Called 0 times.</h3></div>`);
nested.set({ foo: nested.get('foo') }); nested.set({ foo: nested.get().foo });
assert.htmlEqual(target.innerHTML, `<div><h3>Called 1 times.</h3></div>`); assert.htmlEqual(target.innerHTML, `<div><h3>Called 0 times.</h3></div>`);
} }
}; };

@ -3,13 +3,15 @@ export default {
html: `<div><h3>Called 0 times.</h3></div>`, html: `<div><h3>Called 0 times.</h3></div>`,
test(assert, component, target, window) { test(assert, component, target, window) {
component.observe('foo', foo => { component.on('state', ({ changed }) => {
component.set({ count: component.get('count') + 1 }); if (changed.foo) {
component.set({ count: component.get().count + 1 });
}
}); });
assert.htmlEqual(target.innerHTML, `<div><h3>Called 1 times.</h3></div>`); assert.htmlEqual(target.innerHTML, `<div><h3>Called 0 times.</h3></div>`);
component.set({ foo: component.get('foo') }); component.set({ foo: component.get().foo });
assert.htmlEqual(target.innerHTML, `<div><h3>Called 1 times.</h3></div>`); assert.htmlEqual(target.innerHTML, `<div><h3>Called 0 times.</h3></div>`);
} }
}; };

@ -7,9 +7,9 @@ export default {
test(assert, component, target, window) { test(assert, component, target, window) {
let triggered = false; let triggered = false;
component.refs.nested.observe('field2', () => { component.refs.nested.on('state', ({ changed }) => {
triggered = true; if (changed.field2) triggered = true;
}, { init: false }); });
const input = target.querySelector('input'); const input = target.querySelector('input');
const event = new window.Event('input'); const event = new window.Event('input');

@ -1,15 +1,15 @@
export default { export default {
test ( assert, component ) { test(assert, component) {
const foo = component.refs.foo; const foo = component.refs.foo;
let count = 0; let count = 0;
foo.observe( 'x', () => { foo.on('state', ({ changed }) => {
count += 1; if (changed.foo) count += 1;
}); });
assert.equal( count, 1 ); assert.equal(count, 0);
component.set({ y: {} }); component.set({ y: {} });
assert.equal( count, 1 ); assert.equal(count, 0);
} }
}; };

@ -3,11 +3,11 @@
<script> <script>
export default { export default {
oncreate () { oncreate() {
this.observe( 'value', () => { this.on('update', ({ changed }) => {
this.refs.b.textContent = this.refs.a.textContent; if (changed.value) {
}, { this.refs.b.textContent = this.refs.a.textContent;
defer: true }
}); });
} }
}; };

@ -3,23 +3,25 @@ export default {
thing: { a: 1 } thing: { a: 1 }
}, },
test ( assert, component ) { test(assert, component) {
const thing = component.get( 'thing' ); const thing = component.get().thing;
component.observe( 'thing', function ( thing ) { component.on('state', ({ changed, current }) => {
thing.b = thing.a * 2; if (changed.thing) {
this.set({ thing }); // triggers infinite loop, unless observer breaks it const { thing } = current;
thing.b = thing.a * 2;
component.set({ thing }); // triggers infinite loop, unless event handler breaks it
}
}); });
assert.deepEqual( thing, { assert.deepEqual(thing, {
a: 1, a: 1
b: 2
}); });
thing.a = 3; thing.a = 3;
component.set({ thing }); component.set({ thing });
assert.deepEqual( thing, { assert.deepEqual(thing, {
a: 3, a: 3,
b: 6 b: 6
}); });

@ -5,7 +5,7 @@
export default { export default {
oncreate() { oncreate() {
result.push(`oncreate ${this.get('name')}`); result.push(`oncreate ${this.get().name}`);
} }
}; };
</script> </script>

@ -2,15 +2,13 @@
<script> <script>
export default { export default {
data () { data() {
return { return {
foo: 'XX' foo: 'XX'
}; };
}, },
oncreate () { onstate({ changed, current }) {
this.observe( 'item', item => { this.set({ foo: current.item });
this.set({ foo: item });
});
} }
}; };
</script> </script>

@ -8,7 +8,7 @@ export default {
}, },
test ( assert, component, target ) { test ( assert, component, target ) {
const items = component.get('items'); const items = component.get().items;
assert.equal( items[0].id, 'a' ); assert.equal( items[0].id, 'a' );
assert.equal( items[1].id, 'b' ); assert.equal( items[1].id, 'b' );

@ -14,8 +14,8 @@ export default {
select.dispatchEvent( event ); select.dispatchEvent( event );
assert.equal( select.value, 'c' ); assert.equal( select.value, 'c' );
assert.equal( component.get( 'lastChangedTo' ), 'c' ); assert.equal( component.get().lastChangedTo, 'c' );
assert.equal( component.get( 'selected' ), 'c' ); assert.equal( component.get().selected, 'c' );
component.destroy(); component.destroy();
} }

@ -10,6 +10,6 @@ export default {
selects[1].value = 'b'; selects[1].value = 'b';
selects[1].dispatchEvent(event2); selects[1].dispatchEvent(event2);
assert.deepEqual( component.get( 'log' ), [ 1, 2 ] ); assert.deepEqual( component.get().log, [ 1, 2 ] );
} }
}; };

@ -1,17 +0,0 @@
<div>{{foo.x}}</div>
<script>
export default {
oncreate () {
this.observe( 'foo', foo => {
const bar = this.get( 'bar' );
if ( foo.x !== bar.x ) throw new Error( 'mismatch' );
});
this.observe( 'bar', bar => {
const foo = this.get( 'foo' );
if ( foo.x !== bar.x ) throw new Error( 'mismatch' );
});
}
};
</script>

@ -11,16 +11,16 @@ export default {
component.on('destroy', () => { component.on('destroy', () => {
component.set({ foo: 2 }); component.set({ foo: 2 });
valueOnDestroy = component.get('foo'); valueOnDestroy = component.get().foo;
}); });
component.observe('foo', foo => { component.on('state', ({ current }) => {
values.push(foo); values.push(current.foo);
}); });
component.destroy(); component.destroy();
assert.deepEqual(values, [1, 2]); assert.deepEqual(values, [2]);
assert.equal(valueOnDestroy, 2); assert.equal(valueOnDestroy, 2);
} }
}; };

@ -0,0 +1,13 @@
<div>{{foo.x}}</div>
<script>
export default {
onstate({ current, changed }) {
if (changed.foo || changed.bar) {
if (current.foo.x !== current.bar.x) {
throw new Error('mismatch');
}
}
}
};
</script>

@ -11,10 +11,10 @@
} }
}, },
oncreate () { onstate({ changed, current }) {
this.observe( 'foo', foo => { if (changed.foo) {
this.set({ bar: foo }); this.set({ bar: current.foo });
}); }
}, },
components: { components: {

@ -7,10 +7,10 @@
foo: 1 foo: 1
}), }),
oncreate () { onstate({ changed, current }) {
this.observe( 'foo', foo => { if (changed.foo) {
this.set({ bar: foo * 2 }); this.set({ bar: current.foo * 2 });
}); }
} }
}; };
</script> </script>

@ -19,7 +19,7 @@ export default {
input.value = 'everybody'; input.value = 'everybody';
input.dispatchEvent(event); input.dispatchEvent(event);
assert.equal(store.get('name'), 'everybody'); assert.equal(store.get().name, 'everybody');
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<h1>Hello everybody!</h1> <h1>Hello everybody!</h1>
<input> <input>

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save