migration patterns

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Svelte 2 used this.set method for state changes

In Svelte 2, state changes were triggered by calling the this.set method with an object containing the updated state values. For example, incrementing a count required calling this.set({ count: count + 1 }).

Svelte 3 replaced this.set with direct variable assignment

Svelte 3 moved away from the this.set API. Instead of calling methods, developers simply assign to variables directly. The compiler instruments assignments behind the scenes using an $$invalidate function to track reactivity, eliminating the need for explicit API calls.

Svelte 3 migration from version 2 requires manual changes

Upgrading from Svelte 2 to Svelte 3 involves significant breaking changes that cannot be fully automated. A migration guide and updated svelte-upgrade tool were planned to assist but manual work is necessary due to the fundamental design changes.

TypeScript support in Sapper projects

TypeScript support was added to Sapper in version 0.28. Users on older versions should upgrade to use TypeScript.

Svelte 6 string coercion for quoted singular expressions

Quoting a singular expression does not affect how the value is parsed in Svelte 5, but in Svelte 6 it will cause the value to be coerced to a string. Example: <button disabled="{number !== 42}">...</button>

SvelteComponent is deprecated in Svelte 5

SvelteComponent was the base class for Svelte 4 components. Svelte 5+ components are completely different under the hood. For typing, use Component instead. To instantiate components, use mount instead.

afterUpdate is deprecated, use $effect instead

afterUpdate schedules a callback to run immediately after the component has been updated. The first callback runs after the initial onMount. In runes mode, use $effect instead.

beforeUpdate is deprecated, use $effect.pre instead

beforeUpdate schedules a callback to run immediately before the component is updated after any state change. The first callback runs before the initial onMount. In runes mode, use $effect.pre instead.

createEventDispatcher is deprecated in Svelte 5

createEventDispatcher is deprecated. Use callback props and/or the $host() rune instead. createEventDispatcher creates an event dispatcher that dispatches CustomEvent objects. These events do not bubble. The detail argument corresponds to CustomEvent.detail and can contain any type of data. The dispatcher can be typed to narrow event names and detail argument types.

ComponentConstructorOptions is deprecated in Svelte 5

ComponentConstructorOptions is deprecated. In Svelte 4, components are classes. In Svelte 5, they are functions. Use mount instead to instantiate components.

ComponentType is obsolete with new Component type

ComponentType is obsolete when working with the new Component type.

component_api_changed error

The error 'Calling `%method%` on a component instance is no longer valid in Svelte 5' occurs when trying to call methods on a component instance. This is no longer valid in Svelte 5; see the migration guide for more information.

component_api_invalid_new error

The error 'Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5' occurs when trying to use the `new` keyword to instantiate a component. This is no longer valid in Svelte 5. Set the `compatibility.componentApi` compiler option to `4` to keep Svelte 4 components working.

Give your agent this brain