add some missing legacy tests (#10875)

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -753,10 +753,11 @@ const legacy_scope_tweaker = {
 					state.scope.get(specifier.local.name)
 				);
 				if (
-					binding.kind === 'state' ||
+					binding !== null &&
+					(binding.kind === 'state' ||
 						binding.kind === 'frozen_state' ||
 						(binding.kind === 'normal' &&
-						(binding.declaration_kind === 'let' || binding.declaration_kind === 'var'))
+							(binding.declaration_kind === 'let' || binding.declaration_kind === 'var')))
 				) {
 					binding.kind = 'prop';
 					if (specifier.exported.name !== specifier.local.name) {

packages/svelte/tests/runtime-legacy/samples/prop-const/Nested.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let a;
+	export const b = 2;
+</script>
+
+<p>a: {a}</p>
+<p>b: {b}</p>

packages/svelte/tests/runtime-legacy/samples/prop-const/_config.js

@@ -0,0 +1,27 @@
+import { test } from '../../test';
+
+export default test({
+	get props() {
+		return { a: 3, b: 4 };
+	},
+
+	html: `
+		<p>a: 3</p>
+		<p>b: 2</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.$set({
+			a: 5,
+			b: 6
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>a: 5</p>
+			<p>b: 2</p>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/prop-const/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let a;
+	export let b;
+</script>
+
+<Nested a={a} b={b}/>

packages/svelte/tests/runtime-legacy/samples/props-reactive-b/_config.js

@@ -0,0 +1,37 @@
+import { test } from '../../test';
+
+export default test({
+	get props() {
+		return { a: 1, b: 2 };
+	},
+
+	html: `
+		<p>a: 1</p>
+		<p>b: 2</p>
+		<p>c: 3</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.$set({ a: 4 });
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>a: 4</p>
+			<p>b: 2</p>
+			<p>c: 6</p>
+		`
+		);
+
+		await component.$set({ b: 5 });
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>a: 4</p>
+			<p>b: 5</p>
+			<p>c: 9</p>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/props-reactive-b/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let a;
+	$: c = a + $$props.b;
+</script>
+
+<p>a: {a}</p>
+<p>b: {$$props.b}</p>
+<p>c: {c}</p>

packages/svelte/tests/runtime-legacy/samples/spread-from-import/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<div>
+		<p class="tooltip">static stuff</p>
+	</div>
+	<div>
+		<p class="tooltip">dynamic stuff</p>
+	</div>
+	<button>unused</button>
+	`
+});

packages/svelte/tests/runtime-legacy/samples/spread-from-import/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { spread } from './spread.js';
+	let dynamic = 'dynamic';
+</script>
+
+<div>
+	<p {...spread()}>static stuff</p>
+</div>
+
+<div>
+	<p {...spread()}>{dynamic} stuff</p>
+</div>
+
+<button on:click={() => dynamic = ''}>unused</button>

packages/svelte/tests/runtime-legacy/samples/spread-from-import/spread.js

@@ -0,0 +1,6 @@
+export function spread() {
+	return {
+		class: 'tooltip',
+		id: null
+	};
+}

packages/svelte/tests/runtime-legacy/samples/target-dom-detached/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	let name = 'World';
+</script>
+
+<div>Hello {name}</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>

packages/svelte/tests/runtime-legacy/samples/target-dom-detached/_config.js

@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	skip_if_ssr: true,
+	compileOptions: {
+		cssHash: () => 'svelte-xyz'
+	},
+	async test({ assert, component, window }) {
+		assert.htmlEqual(
+			window.document.head.innerHTML,
+			'<style>div.svelte-xyz\n{\ncolor:\nred;\n}</style>'
+		);
+		assert.htmlEqual(component.div.innerHTML, '<div class="svelte-xyz">Hello World</div>');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/target-dom-detached/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	import App from './App.svelte';
+	import { onMount, mount, unmount } from 'svelte';
+
+	export let div;
+
+	onMount(() => {
+		div = document.createElement('div');
+
+		const app = mount(App, {
+			target: div
+		});
+
+		return () => {
+			unmount(app);
+		}
+	});
+</script>

packages/svelte/tests/runtime-legacy/samples/target-dom/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	let name = 'World';
+</script>
+
+<div>Hello {name}</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>

packages/svelte/tests/runtime-legacy/samples/target-dom/_config.js

@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	skip_if_ssr: true,
+	compileOptions: {
+		cssHash: () => 'svelte-xyz'
+	},
+	async test({ assert, component, window }) {
+		assert.htmlEqual(
+			window.document.head.innerHTML,
+			'<style>div.svelte-xyz\n{\ncolor:\nred;\n}</style>'
+		);
+		assert.htmlEqual(component.div.innerHTML, '<div class="svelte-xyz">Hello World</div>');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/target-dom/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	import App from './App.svelte';
+	import { onMount, mount, unmount } from 'svelte';
+
+	export let div;
+
+	onMount(() => {
+		const app = mount(App, {
+			target: div
+		});
+
+		return () => {
+			unmount(app);
+		}
+	});
+</script>
+
+<div bind:this={div} />

packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	let name = 'World';
+</script>
+
+<div>Hello {name}</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>

packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/_config.js

@@ -0,0 +1,18 @@
+import { test } from '../../test';
+
+export default test({
+	skip_if_ssr: true,
+	compileOptions: {
+		cssHash: () => 'svelte-xyz'
+	},
+	async test({ assert, component, window }) {
+		assert.htmlEqual(
+			window.document.head.innerHTML,
+			'<style>div.svelte-xyz\n{\ncolor:\nred;\n}</style>'
+		);
+		assert.htmlEqual(
+			component.div.shadowRoot.innerHTML,
+			'<div class="svelte-xyz">Hello World</div>'
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/main.svelte

@@ -0,0 +1,19 @@
+<script>
+	import App from './App.svelte';
+	import { onMount, mount, unmount } from 'svelte';
+
+	export let div;
+	onMount(() => {
+		const root = div.attachShadow({ mode: 'open' });
+
+		const app = mount(App, {
+			target: root
+		});
+
+		return () => {
+			unmount(app);
+		}
+	});
+</script>
+
+<div bind:this={div} />