More tests

test/runtime/samples/$$slot-dynamic/A.svelte

@@ -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}

test/runtime/samples/$$slot-dynamic/_config.js

@@ -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>
+	`
+};

test/runtime/samples/$$slot-dynamic/main.svelte

@@ -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>

test/runtime/samples/await-then-catch-in-dynamic-slot/Foo.svelte

@@ -0,0 +1,8 @@
+<script>
+  const states = ["pending", "then", "catch"];
+</script>
+{#each states as state} 
+  {#if $$slots[state]}
+    <slot name={state}></slot>
+  {/if}
+{/each}

test/runtime/samples/await-then-catch-in-dynamic-slot/_config.js

@@ -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>
+				`);
+			});
+	}
+};

test/runtime/samples/await-then-catch-in-dynamic-slot/main.svelte

@@ -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>

test/runtime/samples/component-dynamic-slot-attribute-order/Component.svelte

@@ -0,0 +1 @@
+<slot name={String(undefined)} />

test/runtime/samples/component-dynamic-slot-attribute-order/_config.js

@@ -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);
+	}
+};

test/runtime/samples/component-dynamic-slot-attribute-order/main.svelte

@@ -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>

test/runtime/samples/component-slot-dynamic-slot/Component.svelte

@@ -0,0 +1,6 @@
+<script>
+  export let slot_name;
+</script>
+<div>
+	<slot name={slot_name} />
+</div>

test/runtime/samples/component-slot-dynamic-slot/Forward.svelte

@@ -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>

test/runtime/samples/component-slot-dynamic-slot/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: '<div><span slot="prop-prop">lol</span></div>'
+};

test/runtime/samples/component-slot-dynamic-slot/main.svelte

@@ -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>

test/runtime/samples/component-slot-let-in-dynamic-slot/Inner.svelte

@@ -0,0 +1 @@
+<slot/>

test/runtime/samples/component-slot-let-in-dynamic-slot/Outer.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let prop
+</script>
+
+<slot name={prop} value={prop} />

test/runtime/samples/component-slot-let-in-dynamic-slot/_config.js

@@ -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']);
+	}
+};

test/runtime/samples/component-slot-let-in-dynamic-slot/main.svelte

@@ -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>

test/runtime/samples/componet-dynamic-slot-fallback/Nested.svelte

@@ -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>

test/runtime/samples/componet-dynamic-slot-fallback/_config.js

@@ -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>
+	`
+};

test/runtime/samples/componet-dynamic-slot-fallback/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<p slot='baz'>not fallback</p>
+</Nested>

test/runtime/samples/dynamic-component-dynamic-slot/Bar.svelte

@@ -0,0 +1,3 @@
+<h1>Bar</h1>
+<slot></slot>
+<slot name='bar'></slot>

test/runtime/samples/dynamic-component-dynamic-slot/Baz.svelte

@@ -0,0 +1 @@
+<div>baz</div>

test/runtime/samples/dynamic-component-dynamic-slot/Foo.svelte

@@ -0,0 +1,3 @@
+<h1>Foo</h1>
+<slot name='foo'></slot>
+<slot></slot>

test/runtime/samples/dynamic-component-dynamic-slot/_config.js

@@ -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>
+		`);
+	}
+};

test/runtime/samples/dynamic-component-dynamic-slot/main.svelte

@@ -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>