mirror of https://github.com/sveltejs/svelte
Nguyen Tran
3 years ago
parent
0a37190ffe
commit
728b13d834
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
function toString(data) {
|
||||
const result = {};
|
||||
const sortedKeys = Object.keys(data).sort();
|
||||
sortedKeys.forEach(key => result[key] = data[key]);
|
||||
return JSON.stringify(result);
|
||||
}
|
||||
|
||||
const slot_1 = 'a'.repeat(5);
|
||||
const slot_2 = 'ab'.repeat(2);
|
||||
</script>
|
||||
|
||||
$$slots: {toString($$slots)}
|
||||
|
||||
{#if $$slots[slot_1]}
|
||||
<slot name={slot_1}></slot>
|
||||
{:else}
|
||||
Slot aaaaa is not available
|
||||
{/if}
|
||||
|
||||
{#if $$slots[slot_2]}
|
||||
<div>
|
||||
<slot name={slot_2}></slot>
|
||||
</div>
|
||||
{:else}
|
||||
Slot abab is not available
|
||||
{/if}
|
||||
@ -0,0 +1,15 @@
|
||||
export default {
|
||||
html: `
|
||||
$$slots: {"aaaaa":true}
|
||||
<span slot="aaaaa">hello aaaaa</span>
|
||||
Slot abab is not available
|
||||
|
||||
$$slots: {"abab":true}
|
||||
Slot aaaaa is not available
|
||||
|
||||
<div><span slot="abab">hello abab</span></div>
|
||||
$$slots: {"aaaaa":true,"abab":true}
|
||||
<span slot="aaaaa">hello aaaaa</span>
|
||||
<div><span slot="abab">hello abab</span></div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import A from "./A.svelte";
|
||||
</script>
|
||||
|
||||
<A>
|
||||
<span slot="aaaaa">hello aaaaa</span>
|
||||
</A>
|
||||
|
||||
<A>
|
||||
<span slot="abab">hello abab</span>
|
||||
</A>
|
||||
|
||||
<A>
|
||||
<span slot="aaaaa">hello aaaaa</span>
|
||||
<span slot="abab">hello abab</span>
|
||||
</A>
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
const states = ["pending", "then", "catch"];
|
||||
</script>
|
||||
{#each states as state}
|
||||
{#if $$slots[state]}
|
||||
<slot name={state}></slot>
|
||||
{/if}
|
||||
{/each}
|
||||
@ -0,0 +1,53 @@
|
||||
let fulfil;
|
||||
|
||||
let thePromise = new Promise(f => {
|
||||
fulfil = f;
|
||||
});
|
||||
|
||||
export default {
|
||||
props: {
|
||||
thePromise
|
||||
},
|
||||
|
||||
html: `
|
||||
<p slot="pending">loading pending...</p>
|
||||
<p>loading then...</p>
|
||||
<p>loading catch...</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
fulfil(42);
|
||||
|
||||
return thePromise
|
||||
.then(() => {
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p slot="pending">loading pending...</p>
|
||||
<p>the value is 42</p>
|
||||
`);
|
||||
|
||||
let reject;
|
||||
|
||||
thePromise = new Promise((f, r) => {
|
||||
reject = r;
|
||||
});
|
||||
|
||||
component.thePromise = thePromise;
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p slot="pending">loading pending...</p>
|
||||
<p>loading then...</p>
|
||||
<p>loading catch...</p>
|
||||
`);
|
||||
|
||||
reject(new Error('something broke'));
|
||||
|
||||
return thePromise.catch(() => {});
|
||||
})
|
||||
.then(() => {
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p slot="pending">loading pending...</p>
|
||||
<p>oh no! something broke</p>
|
||||
`);
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
|
||||
export let thePromise;
|
||||
const pending = 'pending';
|
||||
const then = 'then';
|
||||
const the_catch = 'catch';
|
||||
</script>
|
||||
|
||||
<Foo>
|
||||
<p slot={pending}>loading pending...</p>
|
||||
<svelte:fragment slot={then}>
|
||||
{#await thePromise}
|
||||
<p>loading then...</p>
|
||||
{:then theValue}
|
||||
<p>the value is {theValue}</p>
|
||||
{/await}
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot={the_catch}>
|
||||
{#await thePromise}
|
||||
<p>loading catch...</p>
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
||||
</svelte:fragment>
|
||||
|
||||
</Foo>
|
||||
@ -0,0 +1 @@
|
||||
<slot name={String(undefined)} />
|
||||
@ -0,0 +1,15 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>Disable</button>
|
||||
<button slot="undefined">Button</button>
|
||||
<button slot="undefined">Button</button>
|
||||
`,
|
||||
async test({ assert, target, window }) {
|
||||
const [btn, btn1, btn2] = target.querySelectorAll('button');
|
||||
|
||||
await btn.dispatchEvent(new window.MouseEvent('click'));
|
||||
|
||||
assert.equal(btn1.disabled, true);
|
||||
assert.equal(btn2.disabled, true);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import Component from './Component.svelte';
|
||||
|
||||
let disabled = false;
|
||||
const undef = String(undefined);
|
||||
</script>
|
||||
|
||||
<button on:click={() => disabled = !disabled}>Disable</button>
|
||||
|
||||
<Component>
|
||||
<button slot={undef} disabled={disabled}>Button</button>
|
||||
</Component>
|
||||
|
||||
<Component>
|
||||
<button disabled={disabled} slot={undef}>Button</button>
|
||||
</Component>
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let slot_name;
|
||||
</script>
|
||||
<div>
|
||||
<slot name={slot_name} />
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import Component from './Component.svelte';
|
||||
export let prop;
|
||||
|
||||
const slot_name = 'test';
|
||||
</script>
|
||||
|
||||
<Component {slot_name}>
|
||||
<slot name={`${prop}-${prop}`} slot={slot_name} />
|
||||
</Component>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
html: '<div><span slot="prop-prop">lol</span></div>'
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import Forward from './Forward.svelte';
|
||||
|
||||
const name = 'prop';
|
||||
const slot = `${name}-${name}`;
|
||||
</script>
|
||||
|
||||
<Forward prop={name} >
|
||||
<span {slot}>
|
||||
lol
|
||||
</span>
|
||||
</Forward>
|
||||
@ -0,0 +1 @@
|
||||
<slot/>
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let prop
|
||||
</script>
|
||||
|
||||
<slot name={prop} value={prop} />
|
||||
@ -0,0 +1,25 @@
|
||||
let logs;
|
||||
function log(value) {
|
||||
logs.push(value);
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
prop: 'a',
|
||||
log
|
||||
},
|
||||
html: '<button></button>',
|
||||
before_test() {
|
||||
logs = [];
|
||||
},
|
||||
async test({ assert, component, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
|
||||
assert.deepEqual(logs, ['a']);
|
||||
|
||||
component.prop = 'b';
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
assert.deepEqual(logs, ['a', 'b']);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import Outer from './Outer.svelte'
|
||||
import Inner from './Inner.svelte'
|
||||
|
||||
export let prop
|
||||
export let log;
|
||||
</script>
|
||||
|
||||
<Outer {prop} let:value>
|
||||
<Inner slot={prop}><button on:click={() => { log(value); }} /></Inner>
|
||||
</Outer>
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
const slot_names = ['foo', 'bar', 'baz', 'spam', 'eggs'];
|
||||
</script>
|
||||
<div>
|
||||
<slot><p class='default'>default fallback content</p></slot>
|
||||
{#each slot_names as slot}
|
||||
<slot name={slot}><p class='default'>{slot} fallback content</p></slot>
|
||||
{/each}
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>
|
||||
<p class='default'>default fallback content</p>
|
||||
<p class='default'>foo fallback content</p>
|
||||
<p class='default'>bar fallback content</p>
|
||||
<p slot='baz'>not fallback</p>
|
||||
<p class='default'>spam fallback content</p>
|
||||
<p class='default'>eggs fallback content</p>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
</script>
|
||||
|
||||
<Nested>
|
||||
<p slot='baz'>not fallback</p>
|
||||
</Nested>
|
||||
@ -0,0 +1,3 @@
|
||||
<h1>Bar</h1>
|
||||
<slot></slot>
|
||||
<slot name='bar'></slot>
|
||||
@ -0,0 +1 @@
|
||||
<div>baz</div>
|
||||
@ -0,0 +1,3 @@
|
||||
<h1>Foo</h1>
|
||||
<slot name='foo'></slot>
|
||||
<slot></slot>
|
||||
@ -0,0 +1,35 @@
|
||||
export default {
|
||||
props: {
|
||||
x: true
|
||||
},
|
||||
|
||||
html: `
|
||||
<h1>Foo</h1>
|
||||
<div slot='foo'>what goes up must come down</div>
|
||||
<p>element</p>
|
||||
you're it
|
||||
<p>neither foo nor bar</p>
|
||||
text
|
||||
<span>a</span>
|
||||
<span>b</span>
|
||||
<span>c</span>
|
||||
<div>baz</div>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.x = false;
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<h1>Bar</h1>
|
||||
<p>element</p>
|
||||
you're it
|
||||
<p>neither foo nor bar</p>
|
||||
text
|
||||
<span>a</span>
|
||||
<span>b</span>
|
||||
<span>c</span>
|
||||
<div>baz</div>
|
||||
<div slot='bar'>what goes up must come down</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
import Bar from './Bar.svelte';
|
||||
import Baz from './Baz.svelte';
|
||||
|
||||
export let x;
|
||||
export let tag = 'you\'re it';
|
||||
export let foo;
|
||||
export let bar;
|
||||
export let things = ['a', 'b', 'c'];
|
||||
</script>
|
||||
|
||||
<svelte:component this="{ x ? Foo : Bar }" x='{x}'>
|
||||
<p>element</p>
|
||||
|
||||
{tag}
|
||||
|
||||
{#if foo}
|
||||
<p>foo</p>
|
||||
{:else if bar}
|
||||
<p>bar</p>
|
||||
{:else}
|
||||
<p>neither foo nor bar</p>
|
||||
{/if}
|
||||
|
||||
text
|
||||
|
||||
{#each things as thing}
|
||||
<span>{thing}</span>
|
||||
{/each}
|
||||
|
||||
<Baz/>
|
||||
|
||||
<div slot={x ? 'foo' : 'bar'}>what goes up must come down</div>
|
||||
</svelte:component>
|
||||
Loading…
Reference in new issue