Svelte参考

svelte/legacy

此模块提供各种函数供迁移期间使用，因为某些功能无法用新功能一对一替换。所有导入都标记为已弃用，应随着时间的推移而迁移。

¥This module provides various functions for use during the migration, since some features can’t be replaced one to one with new features. All imports are marked as deprecated and should be migrated away from over time.

import {
	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>Takes the component function and returns a Svelte 4 compatible component constructor.
@deprecatedUse this only as a temporary solution to migrate your imperative component code to Svelte 5.asClassComponent,
	function createBubbler(): (type: string) => (event: Event) => booleanFunction to create a bubble function that mimic the behavior of on:click without handler available in svelte 4.
@deprecatedUse this only as a temporary solution to migrate your automatically delegated events in Svelte 5.createBubbler,
	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> & ExportsTakes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
@deprecatedUse this only as a temporary solution to migrate your imperative component code to Svelte 5.createClassComponent,
	function handlers(...handlers: EventListener[]): EventListenerFunction to mimic the multiple listeners available in svelte 4
@deprecated
handlers,
	function nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): voidSubstitute for the nonpassive event modifier, implemented as an action
@deprecatednonpassive,
	function once(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the once event modifier
@deprecatedonce,
	function passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): voidSubstitute for the passive event modifier, implemented as an action
@deprecatedpassive,
	function preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the preventDefault event modifier
@deprecatedpreventDefault,
	function run(fn: () => void | (() => void)): voidRuns the given function once immediately on the server, and works like $effect.pre on the client.
@deprecatedUse this only as a temporary solution to migrate your component code to Svelte 5.run,
	function self(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the self event modifier
@deprecatedself,
	function stopImmediatePropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the stopImmediatePropagation event modifier
@deprecatedstopImmediatePropagation,
	function stopPropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the stopPropagation event modifier
@deprecatedstopPropagation,
	function trusted(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the trusted event modifier
@deprecatedtrusted
} from 'svelte/legacy';

asClassComponent

仅将其用作将命令式组件代码迁移到 Svelte 5 的临时解决方案。

¥Use this only as a temporary solution to migrate your imperative component code to Svelte 5.

获取组件函数并返回与 Svelte 4 兼容的组件构造函数。

¥Takes the component function and returns a Svelte 4 compatible component constructor.

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
>;

createBubbler

仅将其用作在 Svelte 5 中迁移自动委托事件的临时解决方案。

¥Use this only as a temporary solution to migrate your automatically delegated events in Svelte 5.

用于创建 bubble 函数的函数，该函数模仿 svelte 4 中可用的无处理程序的 on:click 的行为。

¥Function to create a bubble function that mimic the behavior of on:click without handler available in svelte 4.

function createBubbler(): (
	type: string
) => (event: Event) => boolean;

createClassComponent

仅将其用作将命令式组件代码迁移到 Svelte 5 的临时解决方案。

¥Use this only as a temporary solution to migrate your imperative component code to Svelte 5.

获取与 Svelte 4 组件和组件函数相同的选项并返回与 Svelte 4 兼容的组件。

¥Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.

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;

handlers

用于模仿 svelte 4 中可用的多个监听器的函数

¥Function to mimic the multiple listeners available in svelte 4

function handlers(
	...handlers: EventListener[]
): EventListener;

nonpassive

替代 nonpassive 事件修饰符，作为操作实现

¥Substitute for the nonpassive event modifier, implemented as an action

function nonpassive(
	node: HTMLElement,
	[event, handler]: [
		event: string,
		handler: () => EventListener
	]
): void;

once

替代 once 事件修饰符

¥Substitute for the once event modifier

function once(
	fn: (event: Event, ...args: Array<unknown>) => void
): (event: Event, ...args: unknown[]) => void;

passive

替代 passive 事件修饰符，作为操作实现

¥Substitute for the passive event modifier, implemented as an action

function passive(
	node: HTMLElement,
	[event, handler]: [
		event: string,
		handler: () => EventListener
	]
): void;

preventDefault

替代 preventDefault 事件修饰符

¥Substitute for the preventDefault event modifier

function preventDefault(
	fn: (event: Event, ...args: Array<unknown>) => void
): (event: Event, ...args: unknown[]) => void;

run

仅将其用作将组件代码迁移到 Svelte 5 的临时解决方案。

¥Use this only as a temporary solution to migrate your component code to Svelte 5.

立即在服务器上运行一次给定的函数，并在客户端上像 $effect.pre 一样工作。

¥Runs the given function once immediately on the server, and works like $effect.pre on the client.

function run(fn: () => void | (() => void)): void;

self

替代 self 事件修饰符

¥Substitute for the self event modifier

function self(
	fn: (event: Event, ...args: Array<unknown>) => void
): (event: Event, ...args: unknown[]) => void;

stopImmediatePropagation

替代 stopImmediatePropagation 事件修饰符

¥Substitute for the stopImmediatePropagation event modifier

function stopImmediatePropagation(
	fn: (event: Event, ...args: Array<unknown>) => void
): (event: Event, ...args: unknown[]) => void;

stopPropagation

替代 stopPropagation 事件修饰符

¥Substitute for the stopPropagation event modifier

function stopPropagation(
	fn: (event: Event, ...args: Array<unknown>) => void
): (event: Event, ...args: unknown[]) => void;

trusted

替代 trusted 事件修饰符

¥Substitute for the trusted event modifier

function trusted(
	fn: (event: Event, ...args: Array<unknown>) => void
): (event: Event, ...args: unknown[]) => void;

LegacyComponentType

支持在过渡期间将组件用作类和函数

¥Support using the component as both a class and function during the transition period

type LegacyComponentType = {
	new (o: ComponentConstructorOptions): SvelteComponent;
	(
		...args: Parameters<Component<Record<string, any>>>
	): ReturnType<
		Component<Record<string, any>, Record<string, any>>
	>;
};

svelte/events svelte/motion