From 243c4b78b163140c81095483bb1121b1c988baf3 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:54:21 +0200
Subject: [PATCH] fix: ensure `$effect.root` is ignored on the server (#12332)

Ignore the contents of the effect root, just return a noop where necessary

fixes #12322
---
 .changeset/wicked-emus-drive.md                |  5 +++++
 .../3-transform/server/transform-server.js     |  7 ++-----
 packages/svelte/tests/runtime-legacy/shared.ts |  3 ++-
 .../samples/effect-root-4/_config.js           | 18 ++++++++++++++++++
 .../samples/effect-root-4/main.svelte          | 10 ++++++++++
 .../samples/effect-root/_config.js             |  3 +++
 .../event-store-no-hoisting/main.svelte        |  3 +--
 7 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/wicked-emus-drive.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-root-4/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-root-4/main.svelte

diff --git a/.changeset/wicked-emus-drive.md b/.changeset/wicked-emus-drive.md
new file mode 100644
index 0000000000..96629d079d
--- /dev/null
+++ b/.changeset/wicked-emus-drive.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure `$effect.root` is ignored on the server
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index 4c77aa7ffe..d5c9c790b7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -412,11 +412,8 @@ const global_visitors = {
 		}
 
 		if (rune === '$effect.root') {
-			const args = /** @type {import('estree').Expression[]} */ (
-				node.arguments.map((arg) => context.visit(arg))
-			);
-			// Just call the function directly
-			return b.call(args[0]);
+			// ignore $effect.root() calls, just return a noop which mimics the cleanup function
+			return b.arrow([], b.block([]));
 		}
 
 		if (rune === '$state.snapshot') {
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index ed32d2f0c1..62a85c182f 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -61,7 +61,7 @@ export interface RuntimeTest<Props extends Record<string, any> = Record<string,
 		warnings: any[];
 		hydrate: Function;
 	}) => void | Promise<void>;
-	test_ssr?: (args: { assert: Assert }) => void | Promise<void>;
+	test_ssr?: (args: { logs: any[]; assert: Assert }) => void | Promise<void>;
 	accessors?: boolean;
 	immutable?: boolean;
 	intro?: boolean;
@@ -285,6 +285,7 @@ async function run_test_variant(
 
 			if (config.test_ssr) {
 				await config.test_ssr({
+					logs,
 					// @ts-expect-error
 					assert: {
 						...assert,
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root-4/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-root-4/_config.js
new file mode 100644
index 0000000000..4aac5eed85
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root-4/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>cleanup</button>',
+
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['effect1', 'effect2']);
+	},
+	test_ssr({ assert, logs }) {
+		assert.deepEqual(logs, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-root-4/main.svelte
new file mode 100644
index 0000000000..2239445619
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root-4/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	$effect.root(() => {
+		console.log('effect1');
+	});
+	const cleanup = $effect.root(() => {
+		console.log('effect2');
+	});
+</script>
+
+<button onclick={cleanup}>cleanup</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-root/_config.js
index fe2a8bb499..cd072d087f 100644
--- a/packages/svelte/tests/runtime-runes/samples/effect-root/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root/_config.js
@@ -24,5 +24,8 @@ export default test({
 		});
 
 		assert.deepEqual(logs, [0, 1, 'cleanup 1', 'cleanup 2']);
+	},
+	test_ssr({ assert, logs }) {
+		assert.deepEqual(logs, []);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/event-store-no-hoisting/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-store-no-hoisting/main.svelte
index b895081916..e827a9bfe9 100644
--- a/packages/svelte/tests/runtime-runes/samples/event-store-no-hoisting/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/event-store-no-hoisting/main.svelte
@@ -5,8 +5,7 @@
 
 	function setStore() {
 		store = writable(0, () => {
-			console.log('start');
-			return () => console.log('stop');
+			return () => {};
 		});
 	}
 </script>