core/component-structure

84 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

bind:this no longer returns class instance methods

Because components are functions not classes, bind:this no longer returns $set, $on, and $destroy methods. It only returns instance exports and property accessors (if accessors option is enabled).

Dot notation indicates a component, not an element

In Svelte 5, <foo.bar> is treated as a component rather than an element with tag name 'foo.bar'. This is useful in each blocks: <item.component {...item.props} />

Attribute/prop syntax requires quotes for complex values

In runes mode, complex attribute values must be quoted. Example: <Component prop="this{is}valid" /> instead of <Component prop=this{is}valid />

beforeUpdate no longer runs twice on initial render

In Svelte 5, beforeUpdate does not run twice on initial render if it modifies a variable referenced in the template, unlike Svelte 4.

afterUpdate runs after child component updates

In Svelte 5, afterUpdate callbacks in a parent component run after afterUpdate callbacks in any child components.

beforeUpdate/afterUpdate disabled in runes mode

Both beforeUpdate and afterUpdate functions are disallowed in runes mode. Use $effect.pre() and $effect() instead.

beforeUpdate/afterUpdate skip when slot content updates

In Svelte 5, beforeUpdate/afterUpdate no longer run when the component contains a <slot> and its content is updated.

mount plays transitions by default

In Svelte 5, the mount function plays transitions by default unless the intro option is set to false. This differs from Svelte 4 class components which didn't play transitions by default when manually instantiated.

bind_invalid_export error: cannot bind to component exports

A component property cannot be accessed using bind:property if it is exported. Instead, use bind:this to bind to the component instance and then access the property on the bound component instance directly (e.g., component.property).

Compile warning: svelte_self_deprecated

The svelte_self_deprecated warning is triggered when `<svelte:self>` is used. This is deprecated in Svelte 5. Instead, use self-imports by importing the component from its own file (e.g., `import Button from './Button.svelte'`).

ComponentConstructorOptions deprecated for Svelte 5

ComponentConstructorOptions was used in Svelte 4 with class-based components. In Svelte 5, components are functions. Use mount instead to instantiate components. MountOptions is the equivalent for Svelte 5.

SvelteComponentTyped deprecated, use Component instead

SvelteComponentTyped extended SvelteComponent in Svelte 4 for typing. It is deprecated in Svelte 5. Use Component instead.

ComponentInternals type for internal implementation

ComponentInternals is a branded type representing internal implementation details that vary between environments. It is passed to components but should not be used or modified directly.

ComponentProps type extracts component props

ComponentProps is a convenience type to get the props the given component expects. Example: const props: ComponentProps<typeof MyComponent> = { foo: 'bar' }. Works with both SvelteComponent and the new Component type.

Component type for typing Svelte components

Component can be used to create strongly typed Svelte components. It is an interface that accepts Props, Exports, and Bindings type parameters. It replaces SvelteComponent from Svelte 4 for typing purposes. The component accepts ComponentInternals and Props and returns an object that may contain $on and $set methods (deprecated) plus exports.

ComponentEvents type deprecated

ComponentEvents was used to extract the Events type from a SvelteComponent in Svelte 4. In Svelte 5, the new Component type does not have a dedicated Events type. Use ComponentProps instead.

ComponentType deprecated in Svelte 5

ComponentType is obsolete when working with the new Component type in Svelte 5.

asClassComponent converts Svelte 5 component to Svelte 4 compatible constructor

asClassComponent takes a component function and returns a Svelte 4 compatible component constructor. It is marked as deprecated and should only be used as a temporary solution to migrate imperative component code to Svelte 5. Type signature: function asClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(component: SvelteComponent<Props, Events, Slots> | Component<Props>): ComponentType<SvelteComponent<Props, Events, Slots> & Exports>.

createClassComponent converts Svelte 5 component to Svelte 4 compatible instance

createClassComponent takes the same options as a Svelte 4 component and a component function, and returns a Svelte 4 compatible component instance. It is marked as deprecated and should only be used as a temporary solution to migrate imperative component code to Svelte 5. Type signature: function createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & { component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props> }): SvelteComponent<Props, Events, Slots> & Exports.

LegacyComponentType allows dual class and function component usage

LegacyComponentType is a type that supports using a component as both a class and a function during the transition period from Svelte 4 to Svelte 5. Type signature: type LegacyComponentType = { new (o: ComponentConstructorOptions): SvelteComponent; (...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>; }.

component_name_lowercase warning

The `component_name_lowercase` warning alerts that a component name beginning with a lowercase letter will be treated as an HTML element.

custom_element_props_identifier warning

The `custom_element_props_identifier` warning indicates that using a rest element or non-destructured declaration with `$props()` prevents Svelte from inferring what properties to expose when creating a custom element. Instead, destructure all props or explicitly specify the `customElement.props` option.

legacy_component_creation warning

The `legacy_component_creation` warning alerts that Svelte 5 components are no longer classes. Components should be instantiated using `mount` or `hydrate` imported from 'svelte' instead. See the migration guide for more information.

export_let_unused warning

The `export_let_unused` warning alerts when a component has an unused export property. If it is only for external reference, consider using `export const %name%` instead.

Give your agent this brain