mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
committed by
GitHub
commit
f1e5c1a955
@ -0,0 +1,14 @@
|
||||
import usesThisOrArguments from '../utils/usesThisOrArguments';
|
||||
import { Validator } from '../../index';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function onstate(validator: Validator, prop: Node) {
|
||||
if (prop.value.type === 'ArrowFunctionExpression') {
|
||||
if (usesThisOrArguments(prop.value.body)) {
|
||||
validator.error(prop, {
|
||||
code: `invalid-onstate-property`,
|
||||
message: `'onstate' should be a function expression, not an arrow function expression`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import usesThisOrArguments from '../utils/usesThisOrArguments';
|
||||
import { Validator } from '../../index';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function onupdate(validator: Validator, prop: Node) {
|
||||
if (prop.value.type === 'ArrowFunctionExpression') {
|
||||
if (usesThisOrArguments(prop.value.body)) {
|
||||
validator.error(prop, {
|
||||
code: `invalid-onupdate-property`,
|
||||
message: `'onupdate' should be a function expression, not an arrow function expression`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
'skip-ssr': true,
|
||||
|
||||
test(assert, component, target) {
|
||||
assert.ok(component.onstateRanBeforeOncreate);
|
||||
assert.ok(!component.onupdateRanBeforeOncreate);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
export default {
|
||||
onstate() {
|
||||
this.onstateRan = true;
|
||||
},
|
||||
|
||||
onupdate() {
|
||||
this.onupdateRan = true;
|
||||
},
|
||||
|
||||
oncreate() {
|
||||
this.onstateRanBeforeOncreate = this.onstateRan;
|
||||
this.onupdateRanBeforeOncreate = this.onupdateRan;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,49 @@
|
||||
export default {
|
||||
'skip-ssr': true,
|
||||
|
||||
data: {
|
||||
foo: 'woo!'
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>woo!</p>
|
||||
<p>undefined</p>
|
||||
`,
|
||||
|
||||
test(assert, component, target) {
|
||||
const history = [];
|
||||
|
||||
component.on('state', ({ changed, current, previous }) => {
|
||||
history.push({ changed, current, previous });
|
||||
component.set({ bar: current.foo.toUpperCase() });
|
||||
});
|
||||
|
||||
component.set({ foo: 'yeah!' });
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>yeah!</p>
|
||||
<p>YEAH!</p>
|
||||
`);
|
||||
|
||||
component.set({ unused: 'x' });
|
||||
|
||||
assert.deepEqual(history, [
|
||||
{
|
||||
changed: { foo: true },
|
||||
current: { foo: 'yeah!' },
|
||||
previous: { foo: 'woo!' }
|
||||
},
|
||||
// this is NOT received, because Svelte will not allow
|
||||
// an event handler to trigger itself recursively
|
||||
// {
|
||||
// changed: { bar: true },
|
||||
// current: { foo: 'yeah!', bar: 'YEAH!' },
|
||||
// previous: { foo: 'yeah!' }
|
||||
// },
|
||||
{
|
||||
changed: { unused: true },
|
||||
current: { foo: 'yeah!', bar: 'YEAH!', unused: 'x' },
|
||||
previous: { foo: 'yeah!', bar: 'YEAH!' }
|
||||
}
|
||||
]);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,2 @@
|
||||
<p>{{foo}}</p>
|
||||
<p>{{bar}}</p>
|
||||
@ -0,0 +1,20 @@
|
||||
export default {
|
||||
'skip-ssr': true,
|
||||
|
||||
data: {
|
||||
foo: 'woo!'
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>woo!</p>
|
||||
<p>WOO!</p>
|
||||
`,
|
||||
|
||||
test(assert, component, target) {
|
||||
component.set({ foo: 'yeah!' });
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>yeah!</p>
|
||||
<p>YEAH!</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
<p>{{foo}}</p>
|
||||
<p>{{bar}}</p>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onstate({ current }) {
|
||||
this.set({ bar: current.foo.toUpperCase() });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,20 @@
|
||||
export default {
|
||||
'skip-ssr': true,
|
||||
|
||||
data: {
|
||||
value: 'hello!'
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>hello!</p>
|
||||
<p>hello!</p>
|
||||
`,
|
||||
|
||||
test(assert, component, target) {
|
||||
component.set({ value: 'goodbye!' });
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>goodbye!</p>
|
||||
<p>goodbye!</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
<p ref:a>{{value}}</p>
|
||||
<p ref:b></p>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onupdate({ changed, current, previous }) {
|
||||
if (changed.value) {
|
||||
this.refs.b.textContent = this.refs.a.textContent;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
[]
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export default {
|
||||
onstate: () => console.log('updating')
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
[{
|
||||
"code": "invalid-onstate-property",
|
||||
"message": "'onstate' should be a function expression, not an arrow function expression",
|
||||
"pos": 29,
|
||||
"loc": {
|
||||
"line": 3,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 3
|
||||
}
|
||||
}]
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export default {
|
||||
onstate: () => {
|
||||
this.set({ a: 1 });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
[]
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export default {
|
||||
onupdate: () => console.log('updating')
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
[{
|
||||
"code": "invalid-onupdate-property",
|
||||
"message": "'onupdate' should be a function expression, not an arrow function expression",
|
||||
"pos": 29,
|
||||
"loc": {
|
||||
"line": 3,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 3
|
||||
}
|
||||
}]
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export default {
|
||||
onupdate: () => {
|
||||
this.set({ a: 1 });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue