feat: adds legacy mode flag

.changeset/warm-snakes-remain.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: adds legacy mode flag

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"
     },

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'));
 	}

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;

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,

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;
+}

packages/svelte/src/internal/legacy-component.js

@@ -0,0 +1,3 @@
+import { enable_legacy_mode_flag } from './feature-flags.js';
+
+enable_legacy_mode_flag();

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}

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} />

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) {

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) {

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>`);

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>`);

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';
 

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);