From f9fe9f042a8fc07e9558e657d2312e1ad5b716b4 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 6 Nov 2024 12:17:00 +0000
Subject: [PATCH] feat: adds legacy mode flag

---
 .changeset/warm-snakes-remain.md                             | 5 +++++
 packages/svelte/package.json                                 | 3 +++
 .../compiler/phases/3-transform/client/transform-client.js   | 4 ++++
 packages/svelte/src/internal/client/reactivity/props.js      | 3 ++-
 packages/svelte/src/internal/client/runtime.js               | 5 +++--
 packages/svelte/src/internal/feature-flags.js                | 5 +++++
 packages/svelte/src/internal/legacy-component.js             | 3 +++
 .../svelte/tests/migrate/samples/derivations/output.svelte   | 2 +-
 packages/svelte/tests/migrate/samples/props-ts/output.svelte | 2 +-
 .../samples/bind-this/_expected/client/index.svelte.js       | 1 +
 .../each-string-template/_expected/client/index.svelte.js    | 1 +
 .../samples/hello-world/_expected/client/index.svelte.js     | 1 +
 .../snapshot/samples/hmr/_expected/client/index.svelte.js    | 1 +
 .../imports-in-modules/_expected/client/index.svelte.js      | 1 +
 .../snapshot/samples/purity/_expected/client/index.svelte.js | 1 +
 15 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/warm-snakes-remain.md
 create mode 100644 packages/svelte/src/internal/feature-flags.js
 create mode 100644 packages/svelte/src/internal/legacy-component.js

diff --git a/.changeset/warm-snakes-remain.md b/.changeset/warm-snakes-remain.md
new file mode 100644
index 000000000000..5d7ef6e5f5cc
--- /dev/null
+++ b/.changeset/warm-snakes-remain.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: adds legacy mode flag
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 5234e334b681..94b5d8baf093 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -53,6 +53,9 @@
     "./internal/disclose-version": {
       "default": "./src/internal/disclose-version.js"
     },
+    "./internal/legacy-component": {
+      "default": "./src/internal/legacy-component.js"
+    },
     "./internal/server": {
       "default": "./src/internal/server/index.js"
     },
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 4daff53efb0f..c0d2694b0b6b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -531,6 +531,10 @@ export function client_component(analysis, options) {
 		body.push(b.stmt(b.call(b.id('$.mark_module_end'), b.id(analysis.name))));
 	}
 
+	if (!analysis.runes) {
+		body.unshift(b.imports([], 'svelte/internal/legacy-component'));
+	}
+
 	if (options.discloseVersion) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index e24deb5a20c2..43a8182527e6 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -23,6 +23,7 @@ import * as e from '../errors.js';
 import { BRANCH_EFFECT, LEGACY_DERIVED_PROP, ROOT_EFFECT } from '../constants.js';
 import { proxy } from '../proxy.js';
 import { capture_store_binding } from './store.js';
+import { legacy_mode_flag } from '../../feature-flags.js';
 
 /**
  * @param {((value?: number) => number)} fn
@@ -270,7 +271,7 @@ function with_parent_branch(fn) {
  */
 export function prop(props, key, flags, fallback) {
 	var immutable = (flags & PROPS_IS_IMMUTABLE) !== 0;
-	var runes = (flags & PROPS_IS_RUNES) !== 0;
+	var runes = !legacy_mode_flag || (flags & PROPS_IS_RUNES) !== 0;
 	var bindable = (flags & PROPS_IS_BINDABLE) !== 0;
 	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;
 	var is_store_sub = false;
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index bd4d23dd15b6..797d97403d65 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -33,6 +33,7 @@ import { destroy_derived, execute_derived, update_derived } from './reactivity/d
 import * as e from './errors.js';
 import { lifecycle_outside_component } from '../shared/errors.js';
 import { FILENAME } from '../../constants.js';
+import { legacy_mode_flag } from '../feature-flags.js';
 
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;
@@ -162,7 +163,7 @@ export function increment_version() {
 
 /** @returns {boolean} */
 export function is_runes() {
-	return component_context !== null && component_context.l === null;
+	return !legacy_mode_flag || (component_context !== null && component_context.l === null);
 }
 
 /**
@@ -1025,7 +1026,7 @@ export function push(props, runes = false, fn) {
 		l: null
 	};
 
-	if (!runes) {
+	if (legacy_mode_flag && !runes) {
 		component_context.l = {
 			s: null,
 			u: null,
diff --git a/packages/svelte/src/internal/feature-flags.js b/packages/svelte/src/internal/feature-flags.js
new file mode 100644
index 000000000000..767a40a76543
--- /dev/null
+++ b/packages/svelte/src/internal/feature-flags.js
@@ -0,0 +1,5 @@
+export let legacy_mode_flag = false;
+
+export function enable_legacy_mode_flag() {
+	legacy_mode_flag = true;
+}
diff --git a/packages/svelte/src/internal/legacy-component.js b/packages/svelte/src/internal/legacy-component.js
new file mode 100644
index 000000000000..7a02002f763c
--- /dev/null
+++ b/packages/svelte/src/internal/legacy-component.js
@@ -0,0 +1,3 @@
+import { enable_legacy_mode_flag } from './feature-flags.js';
+
+enable_legacy_mode_flag();
diff --git a/packages/svelte/tests/migrate/samples/derivations/output.svelte b/packages/svelte/tests/migrate/samples/derivations/output.svelte
index 79ff089018f8..5200b7f8a733 100644
--- a/packages/svelte/tests/migrate/samples/derivations/output.svelte
+++ b/packages/svelte/tests/migrate/samples/derivations/output.svelte
@@ -13,4 +13,4 @@
 	
 </script>
 
-{count} / {doubled} / {quadrupled} / {time_8} / {time_16}
+{count} / {doubled} / {quadrupled} / {time_8} / {time_16}
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/props-ts/output.svelte b/packages/svelte/tests/migrate/samples/props-ts/output.svelte
index e9deea13846d..b75f4383f52f 100644
--- a/packages/svelte/tests/migrate/samples/props-ts/output.svelte
+++ b/packages/svelte/tests/migrate/samples/props-ts/output.svelte
@@ -39,4 +39,4 @@
 {readonly}
 {optional}
 <input bind:value={binding} />
-<input bind:value={bindingOptional} />
+<input bind:value={bindingOptional} />
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
index bd24eca96227..3ba3c9a0cfbb 100644
--- a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/legacy-component";
 import * as $ from "svelte/internal/client";
 
 export default function Bind_this($$anchor) {
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
index 81c06f23ec3a..b7fa8fa6cf33 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/legacy-component";
 import * as $ from "svelte/internal/client";
 
 export default function Each_string_template($$anchor) {
diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
index 92354d8f1483..5d80754ad243 100644
--- a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/legacy-component";
 import * as $ from "svelte/internal/client";
 
 var root = $.template(`<h1>hello world</h1>`);
diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
index 01daada7acd0..d21e6c3ff8f2 100644
--- a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/legacy-component";
 import * as $ from "svelte/internal/client";
 
 var root = $.template(`<h1>hello world</h1>`);
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
index 464ef519afa0..6a0a38a702cc 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/legacy-component";
 import * as $ from "svelte/internal/client";
 import { random } from './module.svelte';
 
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 305e9aa0d772..09f4e61e4be9 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/legacy-component";
 import * as $ from "svelte/internal/client";
 
 var root = $.template(`<p></p> <p></p> <!>`, 1);