From db305a07f25ad7370e7ee96f5d3d73ba575ea712 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 7 Oct 2024 21:46:07 +0200
Subject: [PATCH] fix: allow imports from `svelte/legacy` in SSR (#13523)

Apps could crash if they import it in a way that is not treeshaken
---
 .changeset/two-chefs-lie.md                   |  5 ++
 packages/svelte/src/legacy/legacy-server.js   | 16 ++++
 .../samples/legacy-imports/Button.svelte      |  0
 .../samples/legacy-imports/_expected.html     |  1 +
 .../samples/legacy-imports/main.svelte        | 82 +++++++++++++++++++
 5 files changed, 104 insertions(+)
 create mode 100644 .changeset/two-chefs-lie.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/legacy-imports/Button.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/legacy-imports/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/legacy-imports/main.svelte

diff --git a/.changeset/two-chefs-lie.md b/.changeset/two-chefs-lie.md
new file mode 100644
index 0000000000..cc4be41843
--- /dev/null
+++ b/.changeset/two-chefs-lie.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow imports from `svelte/legacy` in SSR
diff --git a/packages/svelte/src/legacy/legacy-server.js b/packages/svelte/src/legacy/legacy-server.js
index 35acc61526..60bd8c9fc6 100644
--- a/packages/svelte/src/legacy/legacy-server.js
+++ b/packages/svelte/src/legacy/legacy-server.js
@@ -48,3 +48,19 @@ export function asClassComponent(component) {
 export function run(fn) {
 	fn();
 }
+
+const noop = () => {};
+
+// event stuff, no need to worry about it for SSR but needs to be there or it will crash
+export {
+	noop as handlers,
+	noop as createBubbler,
+	noop as once,
+	noop as preventDefault,
+	noop as self,
+	noop as stopImmediatePropagation,
+	noop as stopPropagation,
+	noop as trusted,
+	noop as passive,
+	noop as nonpassive
+};
diff --git a/packages/svelte/tests/server-side-rendering/samples/legacy-imports/Button.svelte b/packages/svelte/tests/server-side-rendering/samples/legacy-imports/Button.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/svelte/tests/server-side-rendering/samples/legacy-imports/_expected.html b/packages/svelte/tests/server-side-rendering/samples/legacy-imports/_expected.html
new file mode 100644
index 0000000000..b9727af449
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/legacy-imports/_expected.html
@@ -0,0 +1 @@
+<!--[--><button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <!----> <div><button>click me</button> <button>click me</button> <button>click me</button></div><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/legacy-imports/main.svelte b/packages/svelte/tests/server-side-rendering/samples/legacy-imports/main.svelte
new file mode 100644
index 0000000000..b6cd7566ca
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/legacy-imports/main.svelte
@@ -0,0 +1,82 @@
+<script>
+	import Button from "./Button.svelte"
+	import { createBubbler, handlers, preventDefault, stopPropagation, stopImmediatePropagation, self, trusted, once, passive, nonpassive } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+</script>
+
+<button onclick={handlers(() => console.log('hi'), bubble('click'))}>click me</button>
+<button onclick={handlers(function(){ console.log('hi') }, bubble('click'))}>click me</button>
+<button onclick={handlers(() => console.log('before'), bubble('click'), () => console.log('after'))}
+	>click me</button
+>
+<button onclick={handlers(bubble('click'), foo)}>click me</button>
+<button onclick={bubble('click')}>click me</button>
+
+<button ondblclick={() => console.log('hi')}>click me</button>
+<button ontoggle={bubble('toggle')}>click me</button>
+<button oncustom-event={() => 'hi'}>click me</button>
+<button oncustom-event-bubble={bubble('custom-event-bubble')}>click me</button>
+
+<button onclick={preventDefault(() => (searching = true))}>click me</button>
+<button onclick={preventDefault(() => '')}>click me</button>
+<button onclick={stopPropagation(() => {})}>click me</button>
+<button onclick={stopImmediatePropagation(() => '')}>click me</button>
+<button onclickcapture={() => ''}>click me</button>
+<button onclick={self(() => '')}>click me</button>
+<button onclick={trusted(() => '')}>click me</button>
+<button onclick={once(() => '')}>click me</button>
+
+<button onclick={stopPropagation(preventDefault(() => ''))}>click me</button>
+<button onclick={stopImmediatePropagation(stopPropagation(() => {}))}>click me</button>
+<button onclick={self(stopImmediatePropagation(() => ''))}>click me</button>
+<button onclick={trusted(self(() => ''))}>click me</button>
+<button onclick={trusted(self(() => ''))}>click me</button>
+<button onclick={once(trusted(() => ''))}>click me</button>
+<button onclick={once(preventDefault(() => ''))}>click me</button>
+
+<button use:passive={['click', () => bubble('click')]}>click me</button>
+<button use:nonpassive={['click', () => bubble('click')]}>click me</button>
+<button use:passive={['click', () => ()=>'']}>click me</button>
+<button use:nonpassive={['click', () => ()=>'']}>click me</button>
+<button use:passive={['click', () => foo]}>click me</button>
+<button use:nonpassive={['click', () => foo]}>click me</button>
+<button use:passive={['click', () => stopPropagation(()=>'')]}>click me</button>
+<button use:nonpassive={['click', () => trusted(()=>'')]}>click me</button>
+
+<button
+	use:passive={['click', () => ()=>'']}
+	onclick={handlers(bubble('click'), ()=>'')}
+>click me</button>
+
+<button
+	use:nonpassive={['click', () => ()=>'']}
+	onclick={handlers(bubble('click'), ()=>{
+		return 'multiline';
+	})}
+>click me</button>
+
+
+<button
+	onclick={handlers(bubble('click'), foo, ()=>'', once(trusted(preventDefault(()=>''))))}
+	onblur={handlers(foo, once(trusted(preventDefault(bubble('blur')))))}
+>
+	click me
+</button>
+
+
+<Button on:click={() => 'leave untouched'} on:click>click me</Button>
+
+<div>
+	<button
+		onclick={() => {
+			console.log('hi');
+		}}>click me</button
+	>
+	<button
+		onclick={preventDefault(() => {
+			console.log('hi');
+		})}>click me</button
+	>
+	<button onclick={preventDefault(() => (count += 1))}>click me</button>
+</div>
\ No newline at end of file