From 144269a86b235a6e2f6ee92b6fda3833c24ffa49 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 4 Jul 2024 10:38:24 +0200 Subject: [PATCH] breaking: rename `legacy.componentApi` to `compatibility.legacyComponent` closes #12112 --- .changeset/sour-tomatoes-knock.md | 5 +++++ packages/svelte/messages/client-errors/errors.md | 2 +- packages/svelte/src/compiler/phases/2-analyze/index.js | 2 +- .../phases/3-transform/client/transform-client.js | 4 ++-- .../phases/3-transform/server/transform-server.js | 2 +- packages/svelte/src/compiler/types/index.d.ts | 4 ++-- packages/svelte/src/compiler/validate-options.js | 8 ++++++-- packages/svelte/src/internal/client/dom/legacy/misc.js | 4 ++-- packages/svelte/src/internal/client/errors.js | 4 ++-- .../samples/binding-this-legacy-component-api/_config.js | 4 ++-- .../samples/legacy-class-transformation/_config.js | 4 ++-- packages/svelte/types/index.d.ts | 8 ++++---- .../docs/content/03-appendix/02-breaking-changes.md | 4 ++-- sites/svelte-5-preview/svelte.config.js | 4 ++-- 14 files changed, 34 insertions(+), 25 deletions(-) create mode 100644 .changeset/sour-tomatoes-knock.md diff --git a/.changeset/sour-tomatoes-knock.md b/.changeset/sour-tomatoes-knock.md new file mode 100644 index 0000000000..6b349da7fc --- /dev/null +++ b/.changeset/sour-tomatoes-knock.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +breaking: rename `legacy.componentApi` to `compatibility.legacyComponent` diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md index 3e64b90899..d4e4021d94 100644 --- a/packages/svelte/messages/client-errors/errors.md +++ b/packages/svelte/messages/client-errors/errors.md @@ -16,7 +16,7 @@ ## component_api_invalid_new -> Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `legacy.componentApi` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information +> Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.legacyComponent` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information ## each_key_duplicate diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js index 06cb49b1bc..a65584cff9 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/index.js +++ b/packages/svelte/src/compiler/phases/2-analyze/index.js @@ -390,7 +390,7 @@ export function analyze_component(root, source, options) { ? true : (runes ? false : !!options.accessors) || // because $set method needs accessors - !!options.legacy?.componentApi, + !!options.compatibility?.legacyComponent, reactive_statements: new Map(), binding_groups: new Map(), slot_names: new Map(), 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 d0dd2315a5..c41a02bb32 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 @@ -259,7 +259,7 @@ export function client_component(source, analysis, options) { } } - if (options.legacy.componentApi) { + if (options.compatibility.legacyComponent) { component_returned_object.push( b.init('$set', b.id('$.update_legacy_props')), b.init( @@ -450,7 +450,7 @@ export function client_component(source, analysis, options) { body.unshift(b.imports([], 'svelte/internal/disclose-version')); } - if (options.legacy.componentApi) { + if (options.compatibility.legacyComponent) { body.unshift(b.imports([['createClassComponent', '$$_createClassComponent']], 'svelte/legacy')); component_block.body.unshift( b.if( 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 b9d6a5bc4d..3445757746 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 @@ -2148,7 +2148,7 @@ export function server_component(analysis, options) { should_inject_props ? [b.id('$$payload'), b.id('$$props')] : [b.id('$$payload')], component_block ); - if (options.legacy.componentApi) { + if (options.compatibility.legacyComponent) { body.unshift(b.imports([['render', '$$_render']], 'svelte/server')); body.push( component_function, diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts index 129b5da175..155d9a4cd5 100644 --- a/packages/svelte/src/compiler/types/index.d.ts +++ b/packages/svelte/src/compiler/types/index.d.ts @@ -149,14 +149,14 @@ export interface CompileOptions extends ModuleCompileOptions { /** * @deprecated Use these only as a temporary solution before migrating your code */ - legacy?: { + compatibility?: { /** * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 — * as a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`) * or as an object with a `.render(...)` method when compiling for the server * @default false */ - componentApi?: boolean; + legacyComponent?: boolean; }; /** * An initial sourcemap that will be merged into the final output sourcemap. diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js index bd997a36ab..c91d51a9e9 100644 --- a/packages/svelte/src/compiler/validate-options.js +++ b/packages/svelte/src/compiler/validate-options.js @@ -78,8 +78,12 @@ export const validate_component_options = immutable: deprecate(w.options_deprecated_immutable, boolean(false)), - legacy: object({ - componentApi: boolean(false) + legacy: removed( + 'The legacy option has been removed. If you are using this because of legacy.componentApi, use compatibility.legacyComponent instead' + ), + + compatibility: object({ + legacyComponent: boolean(false) }), loopGuardTimeout: warn_removed(w.options_removed_loop_guard_timeout), diff --git a/packages/svelte/src/internal/client/dom/legacy/misc.js b/packages/svelte/src/internal/client/dom/legacy/misc.js index b9ef9fc53a..2969f4c31b 100644 --- a/packages/svelte/src/internal/client/dom/legacy/misc.js +++ b/packages/svelte/src/internal/client/dom/legacy/misc.js @@ -41,7 +41,7 @@ export function bubble_event($$props, event) { } /** - * Used to simulate `$on` on a component instance when `legacy.componentApi` is `true` + * Used to simulate `$on` on a component instance when `compatibility.legacyComponent` is `true` * @param {Record} $$props * @param {string} event_name * @param {Function} event_callback @@ -53,7 +53,7 @@ export function add_legacy_event_listener($$props, event_name, event_callback) { } /** - * Used to simulate `$set` on a component instance when `legacy.componentApi` is `true`. + * Used to simulate `$set` on a component instance when `compatibility.legacyComponent` is `true`. * Needs component accessors so that it can call the setter of the prop. Therefore doesn't * work for updating props in `$$props` or `$$restProps`. * @this {Record} diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js index ba41a560c3..62cf5e0cf2 100644 --- a/packages/svelte/src/internal/client/errors.js +++ b/packages/svelte/src/internal/client/errors.js @@ -76,14 +76,14 @@ export function component_api_changed(parent, method, component) { } /** - * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `legacy.componentApi` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information + * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.legacyComponent` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information * @param {string} component * @param {string} name * @returns {never} */ export function component_api_invalid_new(component, name) { if (DEV) { - const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`legacy.componentApi\` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information`); + const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`compatibility.legacyComponent\` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information`); error.name = 'Svelte error'; throw error; diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-this-legacy-component-api/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-this-legacy-component-api/_config.js index a4ab247250..f196dd0f82 100644 --- a/packages/svelte/tests/runtime-legacy/samples/binding-this-legacy-component-api/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/binding-this-legacy-component-api/_config.js @@ -3,8 +3,8 @@ import { test } from '../../test'; export default test({ compileOptions: { - legacy: { - componentApi: true + compatibility: { + legacyComponent: true } }, html: '', diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/_config.js index e271e4f9b2..21888462a5 100644 --- a/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/_config.js @@ -2,8 +2,8 @@ import { test } from '../../test'; export default test({ compileOptions: { - legacy: { - componentApi: true + compatibility: { + legacyComponent: true } }, diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 305e1240db..e4da6047ad 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -808,14 +808,14 @@ declare module 'svelte/compiler' { /** * @deprecated Use these only as a temporary solution before migrating your code */ - legacy?: { + compatibility?: { /** * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 — * as a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`) * or as an object with a `.render(...)` method when compiling for the server * @default false */ - componentApi?: boolean; + legacyComponent?: boolean; }; /** * An initial sourcemap that will be merged into the final output sourcemap. @@ -2631,14 +2631,14 @@ declare module 'svelte/types/compiler/interfaces' { /** * @deprecated Use these only as a temporary solution before migrating your code */ - legacy?: { + compatibility?: { /** * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 — * as a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`) * or as an object with a `.render(...)` method when compiling for the server * @default false */ - componentApi?: boolean; + legacyComponent?: boolean; }; /** * An initial sourcemap that will be merged into the final output sourcemap. diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md index 5b08103d80..189d982772 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md @@ -70,13 +70,13 @@ import App from './App.svelte' export default app; ``` -If this component is not under your control, you can use the `legacy.componentApi` compiler option for auto-applied backwards compatibility, which means code using `new Component(...)` keeps working without adjustments (note that this adds a bit of overhead to each component). This will also add `$set` and `$on` methods for all component instances you get through `bind:this`. +If this component is not under your control, you can use the `compatibility.legacyComponent` compiler option for auto-applied backwards compatibility, which means code using `new Component(...)` keeps working without adjustments (note that this adds a bit of overhead to each component). This will also add `$set` and `$on` methods for all component instances you get through `bind:this`. ```js /// svelte.config.js export default { compilerOptions: { - legacy: { componentApi: true } + compatibility: { legacyComponent: true } } }; ``` diff --git a/sites/svelte-5-preview/svelte.config.js b/sites/svelte-5-preview/svelte.config.js index de3e5cfa05..77cb526bed 100644 --- a/sites/svelte-5-preview/svelte.config.js +++ b/sites/svelte-5-preview/svelte.config.js @@ -3,9 +3,9 @@ import adapter from '@sveltejs/adapter-vercel'; /** @type {import('@sveltejs/kit').Config} */ export default { compilerOptions: { - legacy: { + compatibility: { // site-kit manually instantiates components inside an action - componentApi: true + legacyComponent: true } }, kit: {