mirror of https://github.com/sveltejs/svelte
introduce $$restProps (#4489)
parent
48721520bd
commit
91d758e35b
@ -0,0 +1,5 @@
|
|||||||
|
export const reserved_keywords = new Set(["$$props", "$$restProps"]);
|
||||||
|
|
||||||
|
export function is_reserved_keyword(name) {
|
||||||
|
return reserved_keywords.has(name);
|
||||||
|
}
|
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let a;
|
||||||
|
export function b() {}
|
||||||
|
export let c = 1;
|
||||||
|
|
||||||
|
$: length = Object.keys($$restProps).length;
|
||||||
|
$: values = Object.values($$restProps);
|
||||||
|
</script>
|
||||||
|
<div>Length: {length}</div>
|
||||||
|
<div>Values: {values.join(',')}</div>
|
||||||
|
|
||||||
|
<div {...$$restProps} />
|
@ -0,0 +1,54 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
a: 3,
|
||||||
|
b: 4,
|
||||||
|
c: 5,
|
||||||
|
d: 6
|
||||||
|
},
|
||||||
|
html: `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 4,5,1</div>
|
||||||
|
<div d="4" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`,
|
||||||
|
async test({ assert, target, window, }) {
|
||||||
|
const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||||
|
const clickEvent = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await btn1.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 4,5,1</div>
|
||||||
|
<div d="4" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn2.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 34,5,1</div>
|
||||||
|
<div d="34" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn3.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 34,5,31</div>
|
||||||
|
<div d="34" e="5" foo="31"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn4.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 4</div>
|
||||||
|
<div>Values: 34,5,31,2</div>
|
||||||
|
<div d="34" e="5" foo="31" bar="2"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
let a = 1, b = 2, c = 3, d = 4, e = 5;
|
||||||
|
let f = { foo: 1 };
|
||||||
|
|
||||||
|
function updateProps() {
|
||||||
|
a = 31;
|
||||||
|
b = 32;
|
||||||
|
}
|
||||||
|
function updateRest() {
|
||||||
|
d = 34;
|
||||||
|
}
|
||||||
|
function updateSpread() {
|
||||||
|
f.foo = 31;
|
||||||
|
}
|
||||||
|
function updateSpread2() {
|
||||||
|
f.bar = 2;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<App {a} {b} {c} {d} {e} {...f} />
|
||||||
|
<button on:click={updateProps}></button>
|
||||||
|
<button on:click={updateRest}></button>
|
||||||
|
<button on:click={updateSpread}></button>
|
||||||
|
<button on:click={updateSpread2}></button>
|
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
export let a;
|
||||||
|
export function b() {}
|
||||||
|
export let c = 1;
|
||||||
|
|
||||||
|
$: length = Object.keys($$restProps).length;
|
||||||
|
$: values = Object.values($$restProps);
|
||||||
|
</script>
|
||||||
|
<div>Length: {length}</div>
|
||||||
|
<div>Values: {values.join(',')}</div>
|
||||||
|
|
||||||
|
<div {...$$restProps} />
|
||||||
|
<div {...$$props} />
|
@ -0,0 +1,60 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
a: 3,
|
||||||
|
b: 4,
|
||||||
|
c: 5,
|
||||||
|
d: 6
|
||||||
|
},
|
||||||
|
html: `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 4,5,1</div>
|
||||||
|
<div d="4" e="5" foo="1"></div>
|
||||||
|
<div a="1" b="2" c="3" d="4" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, target, window, }) {
|
||||||
|
const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||||
|
const clickEvent = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await btn1.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 4,5,1</div>
|
||||||
|
<div d="4" e="5" foo="1"></div>
|
||||||
|
<div a="31" b="32" c="3" d="4" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn2.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 34,5,1</div>
|
||||||
|
<div d="34" e="5" foo="1"></div>
|
||||||
|
<div a="31" b="32" c="3" d="34" e="5" foo="1"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn3.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 3</div>
|
||||||
|
<div>Values: 34,5,31</div>
|
||||||
|
<div d="34" e="5" foo="31"></div>
|
||||||
|
<div a="31" b="32" c="3" d="34" e="5" foo="31"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await btn4.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>Length: 4</div>
|
||||||
|
<div>Values: 34,5,31,2</div>
|
||||||
|
<div d="34" e="5" foo="31" bar="2"></div>
|
||||||
|
<div a="31" b="32" c="3" d="34" e="5" foo="31" bar="2"></div>
|
||||||
|
<button></button><button></button><button></button><button></button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
let a = 1, b = 2, c = 3, d = 4, e = 5;
|
||||||
|
let f = { foo: 1 };
|
||||||
|
|
||||||
|
function updateProps() {
|
||||||
|
a = 31;
|
||||||
|
b = 32;
|
||||||
|
}
|
||||||
|
function updateRest() {
|
||||||
|
d = 34;
|
||||||
|
}
|
||||||
|
function updateSpread() {
|
||||||
|
f.foo = 31;
|
||||||
|
}
|
||||||
|
function updateSpread2() {
|
||||||
|
f.bar = 2;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<App {a} {b} {c} {d} {e} {...f} />
|
||||||
|
<button on:click={updateProps}></button>
|
||||||
|
<button on:click={updateRest}></button>
|
||||||
|
<button on:click={updateSpread}></button>
|
||||||
|
<button on:click={updateSpread2}></button>
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let foo = undefined;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{foo}</div>
|
||||||
|
<div>{JSON.stringify($$props)}</div>
|
@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
|
||||||
|
warnings: []
|
||||||
|
};
|
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
import Foo from './Foo.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Foo fo="sho"/>
|
Loading…
Reference in new issue