Svelteランタイム

命令型コンポーネントAPI

すべての Svelte アプリケーションは、ルートコンポーネントを命令的に作成することから始まります。クライアント側では、このコンポーネントは特定の要素にマウントされます。サーバー側では、レンダリングできる HTML 文字列を取得します。以下の関数は、これらのタスクを実現するのに役立ちます。

mount

コンポーネントをインスタンス化し、指定されたターゲットにマウントします

import { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.
Transitions will play during the initial render unless the intro option is set to false.
mount } from 'svelte';
import type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentTypeApp from './App.svelte';

const const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>app = mount<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: MountOptions<...>): {
    ...;
} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.
Transitions will play during the initial render unless the intro option is set to false.
mount(const App: LegacyComponentTypeApp, {
	target: Document | Element | ShadowRootTarget element where the component will be mounted.
target: var document: DocumentMDN Reference
document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.
MDN Reference
querySelector('#app'),
	props?: Record<string, any> | undefinedComponent properties.
props: { some: stringsome: 'property' }
});

ページごとに複数のコンポーネントをマウントできます。また、アプリケーション内からマウントすることもできます。たとえば、ツールチップコンポーネントを作成して、ホバーされた要素にアタッチする場合などです。

Svelte 4 での `new App(...)` の呼び出しとは異なり、`mount` 中はエフェクト ( `onMount` コールバックやアクション関数を含む) は実行されません。保留中のエフェクトを強制的に実行する必要がある場合 (たとえば、テストのコンテキストで) は、 `flushSync()` を使用して実行できます。

unmount

`mount` または `hydrate` で作成されたコンポーネントをアンマウントします

import { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.
Transitions will play during the initial render unless the intro option is set to false.
mount, function unmount(component: Record<string, any>): voidUnmounts a component that was previously mounted using mount or hydrate.
unmount } from 'svelte';
import type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentTypeApp from './App.svelte';

const const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>app = mount<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: MountOptions<...>): {
    ...;
} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.
Transitions will play during the initial render unless the intro option is set to false.
mount(const App: LegacyComponentTypeApp, {...});

// later
function unmount(component: Record<string, any>): voidUnmounts a component that was previously mounted using mount or hydrate.
unmount(const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>app);

render

サーバー上、かつ `server` オプションでコンパイルする場合にのみ使用可能です。コンポーネントを受け取り、`body` と `head` プロパティを持つオブジェクトを返します。これは、アプリをサーバーレンダリングする際に HTML を入力するために使用できます

import { function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {
    props?: Omit<Props, "$$slots" | "$$events">;
    context?: Map<any, any>;
}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {
    props: Omit<Props, "$$slots" | "$$events">;
    context?: Map<any, any>;
}]): RenderOutputOnly available on the server and when compiling with the server option.
Takes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.
render } from 'svelte/server';
import type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentTypeApp from './App.svelte';

const const result: RenderOutputresult = render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {
    ...;
} | undefined): RenderOutputOnly available on the server and when compiling with the server option.
Takes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.
render(const App: LegacyComponentTypeApp, {
	props?: Omit<Record<string, any>, "$$slots" | "$$events"> | undefinedprops: { some: stringsome: 'property' }
});
const result: RenderOutputresult.RenderOutput.body: stringHTML that goes somewhere into the &#x3C;body>
body; // HTML for somewhere in this <body> tag
const result: RenderOutputresult.RenderOutput.head: stringHTML that goes into the &#x3C;head>
head; // HTML for somewhere in this <head> tag

hydrate

`mount` と同様ですが、ターゲット内で Svelte の SSR 出力 (`render` 関数から) によってレンダリングされた HTML を再利用し、インタラクティブにします

import { function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {
    target: Document | Element | ShadowRoot;
    props?: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: boolean;
} : {
    target: Document | Element | ShadowRoot;
    props: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: boolean;
}): ExportsHydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component
hydrate } from 'svelte';
import type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentTypeApp from './App.svelte';

const const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>app = hydrate<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: {
    ...;
}): {
    ...;
} & Record<...>Hydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component
hydrate(const App: LegacyComponentTypeApp, {
	target: Document | Element | ShadowRoottarget: var document: DocumentMDN Reference
document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.
MDN Reference
querySelector('#app'),
	props?: Record<string, any> | undefinedprops: { some: stringsome: 'property' }
});

`mount` と同様に、`hydrate` 中はエフェクトは実行されません。実行する必要がある場合は、直後に `flushSync()` を使用してください。

GitHub でこのページを編集する

前へ次へ

ライフサイクルフックテスト