diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index de46586d36..21390fa4e0 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -2918,6 +2918,7 @@ export function unwrap(value) { * @param {{ * target: Node; * props?: Props; + * events?: Events; * context?: Map; * intro?: boolean; * immutable?: boolean; 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 26ae9903ed..848ac5320f 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 @@ -9,17 +9,23 @@ While Svelte 5 is a complete rewrite, we have done our best to ensure that most In Svelte 3 and 4, components are classes. In Svelte 5 they are functions and should be instantiated differently. If you need to manually instantiate components, you should use `mount` or `createRoot` (imported from `svelte`) instead. If you see this error using SvelteKit, try updating to the latest version of SvelteKit first, which adds support for Svelte 5. If you're using Svelte without SvelteKit, you'll likely have a `main.js` file (or similar) which you need to adjust: ```diff -+ import { mount } from 'svelte'; ++ import { createRoot } from 'svelte'; import App from './App.svelte' - const app = new App({ target: document.getElementById("app") }); -+ const app = mount(App, { target: document.getElementById("app") }); ++ const app = createRoot(App, { target: document.getElementById("app") }); export default app; ``` +`createRoot` returns an object with a `$set` and `$destroy` method on it. It does not come with an `$on` method you may know from the class component API. Instead, pass them via the `events` property on the options argument. If you don't need to interact with the component instance after creating it, you can use `mount` instead, which saves some bytes. + +> Note that using `events` is discouraged — instead, [use callbacks](https://svelte-5-preview.vercel.app/docs/event-handlers) + As a stop-gap-solution, you can also use `createClassComponent` or `asClassComponent` (imported from `svelte/legacy`) instead to keep the same API after instantiating. If this component is not under your control, you can use the `legacy.componentApi` compiler option for auto-applied backwards compatibility (note that this adds a bit of overhead to each component). +### Server API changes + Similarly, components no longer have a `render` method when compiled for server side rendering. Instead, pass the function to `render` from `svelte/server`: ```diff @@ -32,6 +38,10 @@ import App from './App.svelte'; `render` also no longer returns CSS; it should be served separately from a CSS file. +### bind:this changes + +Because components are no longer classes, using `bind:this` no longer returns a class instance with `$set`, `$on` and `$destroy` methods on it. It only returns the instance exports (`export function/const`) and, if you're using the `accessors` option, a getter/setter-pair for each property. + ## Whitespace handling changed Previously, Svelte employed a very complicated algorithm to determine if whitespace should be kept or not. Svelte 5 simplifies this which makes it easier to reason about as a developer. The rules are: