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 @@ -{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} - + \ 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(`