From 2cabc884ca8e9169c6cdc1491e0dfb32604dcda1 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Fri, 22 Mar 2024 15:41:53 +0000
Subject: [PATCH] add some missing legacy tests (#10875)

---
 .../src/compiler/phases/2-analyze/index.js    |  9 +++--
 .../samples/prop-const/Nested.svelte          |  7 ++++
 .../samples/prop-const/_config.js             | 27 ++++++++++++++
 .../samples/prop-const/main.svelte            |  8 ++++
 .../samples/props-reactive-b/_config.js       | 37 +++++++++++++++++++
 .../samples/props-reactive-b/main.svelte      |  8 ++++
 .../samples/spread-from-import/_config.js     | 13 +++++++
 .../samples/spread-from-import/main.svelte    | 14 +++++++
 .../samples/spread-from-import/spread.js      |  6 +++
 .../samples/target-dom-detached/App.svelte    | 11 ++++++
 .../samples/target-dom-detached/_config.js    | 15 ++++++++
 .../samples/target-dom-detached/main.svelte   | 18 +++++++++
 .../samples/target-dom/App.svelte             | 11 ++++++
 .../samples/target-dom/_config.js             | 15 ++++++++
 .../samples/target-dom/main.svelte            | 18 +++++++++
 .../samples/target-shadow-dom/App.svelte      | 11 ++++++
 .../samples/target-shadow-dom/_config.js      | 18 +++++++++
 .../samples/target-shadow-dom/main.svelte     | 19 ++++++++++
 18 files changed, 261 insertions(+), 4 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/prop-const/Nested.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/prop-const/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/prop-const/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/props-reactive-b/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/props-reactive-b/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/spread-from-import/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/spread-from-import/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/spread-from-import/spread.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-dom-detached/App.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-dom-detached/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-dom-detached/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-dom/App.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-dom/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-dom/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/App.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/main.svelte

diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 20d4cc4644..8140439145 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/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.kind === 'frozen_state' ||
-					(binding.kind === 'normal' &&
-						(binding.declaration_kind === 'let' || binding.declaration_kind === 'var'))
+					binding !== null &&
+					(binding.kind === 'state' ||
+						binding.kind === 'frozen_state' ||
+						(binding.kind === 'normal' &&
+							(binding.declaration_kind === 'let' || binding.declaration_kind === 'var')))
 				) {
 					binding.kind = 'prop';
 					if (specifier.exported.name !== specifier.local.name) {
diff --git a/packages/svelte/tests/runtime-legacy/samples/prop-const/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/prop-const/Nested.svelte
new file mode 100644
index 0000000000..392bc7555d
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-legacy/samples/prop-const/_config.js b/packages/svelte/tests/runtime-legacy/samples/prop-const/_config.js
new file mode 100644
index 0000000000..040b911cc6
--- /dev/null
+++ b/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>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/prop-const/main.svelte b/packages/svelte/tests/runtime-legacy/samples/prop-const/main.svelte
new file mode 100644
index 0000000000..e9184c8da4
--- /dev/null
+++ b/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}/>
diff --git a/packages/svelte/tests/runtime-legacy/samples/props-reactive-b/_config.js b/packages/svelte/tests/runtime-legacy/samples/props-reactive-b/_config.js
new file mode 100644
index 0000000000..b92d81bd53
--- /dev/null
+++ 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>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/props-reactive-b/main.svelte b/packages/svelte/tests/runtime-legacy/samples/props-reactive-b/main.svelte
new file mode 100644
index 0000000000..1c40f4a344
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-legacy/samples/spread-from-import/_config.js b/packages/svelte/tests/runtime-legacy/samples/spread-from-import/_config.js
new file mode 100644
index 0000000000..d81175494f
--- /dev/null
+++ b/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>
+	`
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/spread-from-import/main.svelte b/packages/svelte/tests/runtime-legacy/samples/spread-from-import/main.svelte
new file mode 100644
index 0000000000..5cec0ebb08
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-legacy/samples/spread-from-import/spread.js b/packages/svelte/tests/runtime-legacy/samples/spread-from-import/spread.js
new file mode 100644
index 0000000000..8ecf7628f3
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/spread-from-import/spread.js
@@ -0,0 +1,6 @@
+export function spread() {
+	return {
+		class: 'tooltip',
+		id: null
+	};
+}
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-dom-detached/App.svelte b/packages/svelte/tests/runtime-legacy/samples/target-dom-detached/App.svelte
new file mode 100644
index 0000000000..4ec51de6d5
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-dom-detached/_config.js b/packages/svelte/tests/runtime-legacy/samples/target-dom-detached/_config.js
new file mode 100644
index 0000000000..a8330e86b0
--- /dev/null
+++ b/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>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-dom-detached/main.svelte b/packages/svelte/tests/runtime-legacy/samples/target-dom-detached/main.svelte
new file mode 100644
index 0000000000..eb2d6c0ee6
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-dom/App.svelte b/packages/svelte/tests/runtime-legacy/samples/target-dom/App.svelte
new file mode 100644
index 0000000000..4ec51de6d5
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-dom/_config.js b/packages/svelte/tests/runtime-legacy/samples/target-dom/_config.js
new file mode 100644
index 0000000000..a8330e86b0
--- /dev/null
+++ b/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>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-dom/main.svelte b/packages/svelte/tests/runtime-legacy/samples/target-dom/main.svelte
new file mode 100644
index 0000000000..4d5a825ad3
--- /dev/null
+++ b/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} />
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/App.svelte b/packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/App.svelte
new file mode 100644
index 0000000000..4ec51de6d5
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/_config.js b/packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/_config.js
new file mode 100644
index 0000000000..34f10f4652
--- /dev/null
+++ b/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>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/main.svelte b/packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/main.svelte
new file mode 100644
index 0000000000..8674130bb8
--- /dev/null
+++ b/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} />