diff --git a/.changeset/cold-dingos-dream.md b/.changeset/cold-dingos-dream.md new file mode 100644 index 000000000000..c48414abc2b7 --- /dev/null +++ b/.changeset/cold-dingos-dream.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: use fine grained for template if the component is not explicitly in legacy mode diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js index fded183b86c3..80adc10c1ab7 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/index.js +++ b/packages/svelte/src/compiler/phases/2-analyze/index.js @@ -431,6 +431,29 @@ export function analyze_component(root, source, options) { template, elements: [], runes, + // if we are not in runes mode but we have no reserved references ($$props, $$restProps) + // and no `export let` we might be in a wannabe runes component that is using runes in an external + // module...we need to fallback to the runic behavior + maybe_runes: + !runes && + // if they explicitly disabled runes, use the legacy behavior + options.runes !== false && + ![...module.scope.references.keys()].some((name) => + ['$$props', '$$restProps'].includes(name) + ) && + !instance.ast.body.some( + (node) => + node.type === 'LabeledStatement' || + (node.type === 'ExportNamedDeclaration' && + ((node.declaration && + node.declaration.type === 'VariableDeclaration' && + node.declaration.kind === 'let') || + node.specifiers.some( + (specifier) => + specifier.local.type === 'Identifier' && + instance.scope.get(specifier.local.name)?.declaration_kind === 'let' + ))) + ), tracing: false, classes: new Map(), immutable: runes || options.immutable, diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js index 15982899c9d7..c861a51b7df2 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js @@ -370,7 +370,10 @@ export function validate_mutation(node, context, expression) { export function build_expression(context, expression, metadata, state = context.state) { const value = /** @type {Expression} */ (context.visit(expression, state)); - if (context.state.analysis.runes) { + // Components not explicitly in legacy mode might be expected to be in runes mode (especially since we didn't + // adjust this behavior until recently, which broke people's existing components), so we also bail in this case. + // Kind of an in-between-mode. + if (context.state.analysis.runes || context.state.analysis.maybe_runes) { return value; } diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts index 67cbd75ff86f..8fa4bff61943 100644 --- a/packages/svelte/src/compiler/phases/types.d.ts +++ b/packages/svelte/src/compiler/phases/types.d.ts @@ -51,6 +51,7 @@ export interface ComponentAnalysis extends Analysis { /** Used for CSS pruning and scoping */ elements: Array; runes: boolean; + maybe_runes: boolean; tracing: boolean; exports: Array<{ name: string; alias: string | null }>; /** Whether the component uses `$$props` */ diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts index 11ea9f6dda89..126992a0c070 100644 --- a/packages/svelte/tests/runtime-legacy/shared.ts +++ b/packages/svelte/tests/runtime-legacy/shared.ts @@ -158,7 +158,10 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run ...config.compileOptions, immutable: config.immutable, accessors: 'accessors' in config ? config.accessors : true, - runes + runes: + config.compileOptions && 'runes' in config.compileOptions + ? config.compileOptions.runes + : runes }; // load_compiled can be used for debugging a test. It means the compiler will not run on the input diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js new file mode 100644 index 000000000000..904fea3f653c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + compileOptions: { + runes: undefined + }, + async test({ assert, target }) { + const p = target.querySelector('p'); + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.equal(p?.innerHTML, '0'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte new file mode 100644 index 000000000000..cb5837dcd6da --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte @@ -0,0 +1,8 @@ + + + +

{get()}

+ + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js new file mode 100644 index 000000000000..f0e7181c29cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js @@ -0,0 +1,9 @@ +let count = $state(0); + +export function get() { + return count; +} + +export function set() { + count++; +} diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js new file mode 100644 index 000000000000..904fea3f653c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + compileOptions: { + runes: undefined + }, + async test({ assert, target }) { + const p = target.querySelector('p'); + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.equal(p?.innerHTML, '0'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte new file mode 100644 index 000000000000..a7370b48d6d2 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte @@ -0,0 +1,9 @@ + + +

{get()}

+ + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js new file mode 100644 index 000000000000..f0e7181c29cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js @@ -0,0 +1,9 @@ +let count = $state(0); + +export function get() { + return count; +} + +export function set() { + count++; +} diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js new file mode 100644 index 000000000000..904fea3f653c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + compileOptions: { + runes: undefined + }, + async test({ assert, target }) { + const p = target.querySelector('p'); + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.equal(p?.innerHTML, '0'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte new file mode 100644 index 000000000000..ccf9bd28642c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte @@ -0,0 +1,9 @@ + + +

{get()}

+ + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js new file mode 100644 index 000000000000..f0e7181c29cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js @@ -0,0 +1,9 @@ +let count = $state(0); + +export function get() { + return count; +} + +export function set() { + count++; +} diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js new file mode 100644 index 000000000000..2d72de6d134d --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + compileOptions: { + runes: undefined + }, + async test({ assert, target }) { + const p = target.querySelector('p'); + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.equal(p?.innerHTML, '1'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte new file mode 100644 index 000000000000..49aef8151845 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte @@ -0,0 +1,9 @@ + + +

{get()}

+ + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js new file mode 100644 index 000000000000..f0e7181c29cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js @@ -0,0 +1,9 @@ +let count = $state(0); + +export function get() { + return count; +} + +export function set() { + count++; +} diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js new file mode 100644 index 000000000000..904fea3f653c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + compileOptions: { + runes: undefined + }, + async test({ assert, target }) { + const p = target.querySelector('p'); + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.equal(p?.innerHTML, '0'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte new file mode 100644 index 000000000000..f7cd0ede2e39 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte @@ -0,0 +1,9 @@ + + +

{get()}

+ + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js new file mode 100644 index 000000000000..f0e7181c29cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js @@ -0,0 +1,9 @@ +let count = $state(0); + +export function get() { + return count; +} + +export function set() { + count++; +} diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js new file mode 100644 index 000000000000..904fea3f653c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + compileOptions: { + runes: undefined + }, + async test({ assert, target }) { + const p = target.querySelector('p'); + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.equal(p?.innerHTML, '0'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte new file mode 100644 index 000000000000..36becde4a300 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte @@ -0,0 +1,10 @@ + + +{x} +

{get()}

+ + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js new file mode 100644 index 000000000000..f0e7181c29cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js @@ -0,0 +1,9 @@ +let count = $state(0); + +export function get() { + return count; +} + +export function set() { + count++; +} diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js new file mode 100644 index 000000000000..904fea3f653c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + compileOptions: { + runes: undefined + }, + async test({ assert, target }) { + const p = target.querySelector('p'); + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.equal(p?.innerHTML, '0'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte new file mode 100644 index 000000000000..1449b7d5824c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte @@ -0,0 +1,12 @@ + + +{x} +

{get()}

+ + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js new file mode 100644 index 000000000000..f0e7181c29cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js @@ -0,0 +1,9 @@ +let count = $state(0); + +export function get() { + return count; +} + +export function set() { + count++; +} diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js new file mode 100644 index 000000000000..2d72de6d134d --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + compileOptions: { + runes: undefined + }, + async test({ assert, target }) { + const p = target.querySelector('p'); + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.equal(p?.innerHTML, '1'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte new file mode 100644 index 000000000000..698a852ac927 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte @@ -0,0 +1,7 @@ + + +

{get()}

+ + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js new file mode 100644 index 000000000000..f0e7181c29cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js @@ -0,0 +1,9 @@ +let count = $state(0); + +export function get() { + return count; +} + +export function set() { + count++; +} 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 da6fdf44d881..a351851875ed 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 @@ -8,13 +8,11 @@ export default function Purity($$anchor) { var fragment = root(); var p = $.first_child(fragment); - p.textContent = ( - $.untrack(() => Math.max(0, Math.min(0, 100))) - ); + p.textContent = '0'; var p_1 = $.sibling(p, 2); - p_1.textContent = ($.untrack(() => location.href)); + p_1.textContent = location.href; var node = $.sibling(p_1, 2);