Svelte參考

svelte/legacy

這個模組提供在遷移期間使用的各種函式，因為某些功能無法與新功能一對一替換。所有導入都被標記為已棄用，應該隨著時間的推移而遷移掉。

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。

接收元件函式並返回 Svelte 4 相容的元件建構子。

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 中自動委派的事件。

該函式用於建立一個 `bubble` 函式，以模擬 svelte 4 中沒有處理器的 `on:click` 的行為。

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

createClassComponent

僅將此作為臨時解決方案，將您的命令式元件程式碼遷移到 Svelte 5。

接收與 Svelte 4 元件相同的選項和元件函式，並返回 Svelte 4 相容的元件。

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 handlers(
	...handlers: EventListener[]
): EventListener;

nonpassive

`nonpassive` 事件修飾符的替代品，作為一個動作實作

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

once

`once` 事件修飾符的替代品

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

passive

`passive` 事件修飾符的替代品，作為一個動作實作

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

preventDefault

`preventDefault` 事件修飾符的替代品

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

run

僅將此作為臨時解決方案，以將您的元件程式碼遷移到 Svelte 5。

在伺服器上立即執行給定的函式一次，並在客戶端上像 `$effect.pre` 一樣工作。

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

self

`self` 事件修飾符的替代品

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

stopImmediatePropagation

`stopImmediatePropagation` 事件修飾符的替代品

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

stopPropagation

`stopPropagation` 事件修飾符的替代品

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

trusted

`trusted` 事件修飾符的替代品

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

LegacyComponentType

在過渡期間，支援將元件用作類別和函式

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

在 GitHub 上編輯此頁面

svelte/events svelte/motion