Runtime

svelte

svelte パッケージは、ライフサイクル関数と context API を公開します。

onMountpermalink

ts
function onMount<T>(
	fn: () =>
		| NotFunction<T>
		| Promise<NotFunction<T>>
		| (() => any)
): void;

onMount 関数は、コンポーネントが DOM にマウントされるとすぐに実行されるコールバックをスケジュールします。これはコンポーネントの初期化中に呼び出されなければなりません (ただし、コンポーネントの中にに置く必要はありません。外部モジュールから呼び出すことができます)。

onMount はサーバーサイドコンポーネントの内部では実行されません。

<script>
	import { onMount } from 'svelte';

	onMount(() => {
		console.log('the component has mounted');
	});
</script>

onMount から関数が返された場合、それはコンポーネントがアンマウントされたときに呼び出されます。

<script>
	import { onMount } from 'svelte';

	onMount(() => {
		const interval = setInterval(() => {
			console.log('beep');
		}, 1000);

		return () => clearInterval(interval);
	});
</script>

この挙動は、onMount に渡された関数が 同期的に 値を返す場合にのみ動作します。async の関数は常に Promise を返すため、 同期的に 値を返すことはできません。

beforeUpdatepermalink

ts
function beforeUpdate(fn: () => any): void;

状態(state)が変化した後、コンポーネントが更新される直前に実行されるコールバックをスケジュールします。

このコールバックが最初に実行されるのは、最初の onMount の前になります。

<script>
	import { beforeUpdate } from 'svelte';

	beforeUpdate(() => {
		console.log('the component is about to update');
	});
</script>

afterUpdatepermalink

ts
function afterUpdate(fn: () => any): void;

コンポーネントが更新された直後に実行するコールバックをスケジュールします。

このコールバックが最初に実行されるのは、最初の onMount の後になります。

<script>
	import { afterUpdate } from 'svelte';

	afterUpdate(() => {
		console.log('the component just updated');
	});
</script>

onDestroypermalink

ts
function onDestroy(fn: () => any): void;

コンポーネントがアンマウントされる直前に実行されるコールバックをスケジュールします。

onMount, beforeUpdate, afterUpdate, onDestroy のうち、onDestroy だけがサーバサイドコンポーネントの中で動作します。

<script>
	import { onDestroy } from 'svelte';

	onDestroy(() => {
		console.log('the component is being destroyed');
	});
</script>

tickpermalink

ts
function tick(): Promise<void>;

保留中の状態(pending state)の変更が適用されると resolve する promise を返すか、何もない場合は、その次のマイクロタスクで実行されます。

<script>
	import { beforeUpdate, tick } from 'svelte';

	beforeUpdate(async () => {
		console.log('the component is about to update');
		await tick();
		console.log('the component just updated');
	});
</script>

setContextpermalink

ts
function setContext<T>(key: any, context: T): T;

任意の context オブジェクトを、現在のコンポーネントと指定された key に関連付け、そのオブジェクトを返します。その context は、コンポーネントの子 (slot のコンテンツを含む) で、getContext を使用して利用できるようになります。

ライフサイクル関数と同様に、これはコンポーネントの初期化時に呼ばれなければなりません。

<script>
	import { setContext } from 'svelte';

	setContext('answer', 42);
</script>

context は本質的にリアクティブではありません。context にリアクティブな値が必要な場合は、context にストアを渡すことができます。これはリアクティブになります。

getContextpermalink

ts
function getContext<T>(key: any): T;

指定された key を持つ、最も近い親コンポーネントに属する context を取得します。コンポーネントの初期化中に呼び出されなければなりません。

<script>
	import { getContext } from 'svelte';

	const answer = getContext('answer');
</script>

hasContextpermalink

ts
function hasContext(key: any): boolean;

与えられた key が親コンポーネントの context に設定されているかどうかをチェックします。コンポーネントの初期化時に呼び出されなければなりません。

<script>
	import { hasContext } from 'svelte';

	if (hasContext('answer')) {
		// do something
	}
</script>

getAllContextspermalink

ts
function getAllContexts<
	T extends Map<any, any> = Map<any, any>
>(): T;

最も近い親コンポーネントにある全ての context マップを取得します。これはコンポーネントの初期化中に呼び出す必要があります。例えば、プログラムでコンポーネントを作成し、既存の context を渡したい場合などに便利です。

<script>
	import { getAllContexts } from 'svelte';

	const contexts = getAllContexts();
</script>

createEventDispatcherpermalink

ts
function createEventDispatcher<
	EventMap extends Record<string, any> = any
>(): EventDispatcher<EventMap>;

コンポーネントイベントをディスパッチするのに使用できるイベントディスパッチャを作成します。イベントディスパッチャは、name と detail の2つの引数を取る関数です。

createEventDispatcher で作成されたコンポーネントイベントは CustomEvent を作成します。これらのイベントはバブリング(Bubbling)しません。引数 detail は CustomEvent.detail プロパティに対応し、任意のタイプのデータを含むことができます。

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('notify', 'detail value')}>Fire Event</button>

子コンポーネントからディスパッチされたイベントは、親でリスンできます。イベントがディスパッチされたときに提供されたデータはすべて、イベントオブジェクトの detail プロパティで利用できます。

<script>
	function callbackFunction(event) {
		console.log(`Notify fired! Detail: ${event.detail}`);
	}
</script>

<Child on:notify={callbackFunction} />

dispatch 関数に3番目のパラメータを渡すことで、イベントがキャンセルできるようになります。もしイベントが event.preventDefault() によってキャンセルされると、その関数は false を返します。それ以外の場合は true を返します。

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function notify() {
		const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
		if (shouldContinue) {
			// no one called preventDefault
		} else {
			// a listener called preventDefault
		}
	}
</script>

イベントディスパッチャを型付けすることで、受け取るイベントを定義することができます。これにより、コンポーネント内でも(間違った呼び出しはフラグが立つ)、コンポーネントを使用する場合でも(イベントの型が絞れる)、コードがより型安全になります。その方法についてはこちらをご参照ください。

Typespermalink

ComponentConstructorOptionspermalink

ts
interface ComponentConstructorOptions<
	Props extends Record<string, any> = Record<string, any>
> {…}

ts
target: Element | Document | ShadowRoot;

ts
anchor?: Element;

ts
props?: Props;

ts
context?: Map<any, any>;

ts
hydrate?: boolean;

ts
intro?: boolean;

ts
$$inline?: boolean;

ComponentEventspermalink

Convenience type to get the events the given component expects. Example:

<script lang="ts">
   import type { ComponentEvents } from 'svelte';
   import Component from './Component.svelte';

   function handleCloseEvent(event: ComponentEvents<Component>['close']) {
	  console.log(event.detail);
   }
</script>

<Component on:close={handleCloseEvent} />

ts
type ComponentEvents<Component extends SvelteComponent_1> =
	Component extends SvelteComponent<any, infer Events>
		? Events
		: never;

ComponentPropspermalink

Convenience type to get the props the given component expects. Example:

<script lang="ts">
	import type { ComponentProps } from 'svelte';
	import Component from './Component.svelte';

	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
</script>

ts
type ComponentProps<Component extends SvelteComponent_1> =
	Component extends SvelteComponent<infer Props>
		? Props
		: never;

ComponentTypepermalink

Convenience type to get the type of a Svelte component. Useful for example in combination with dynamic components using <svelte:component>.

Example:

<script lang="ts">
	import type { ComponentType, SvelteComponent } from 'svelte';
	import Component1 from './Component1.svelte';
	import Component2 from './Component2.svelte';

	const component: ComponentType = someLogic() ? Component1 : Component2;
	const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
</script>

<svelte:component this={component} />
<svelte:component this={componentOfCertainSubType} needsThisProp="hello" />

ts
type ComponentType<
	Component extends SvelteComponent = SvelteComponent
> = (new (
	options: ComponentConstructorOptions<
		Component extends SvelteComponent<infer Props>
			? Props
			: Record<string, any>
	>
) => Component) & {
	/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
	element?: typeof HTMLElement;
};

SvelteComponentpermalink

Base class for Svelte components with some minor dev-enhancements. Used when dev=true.

Can be used to create strongly typed Svelte components.

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

ts
import { SvelteComponent } from "svelte";
export class MyComponent extends SvelteComponent<{foo: string}> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />

ts
class SvelteComponent<
	Props extends Record<string, any> = any,
	Events extends Record<string, any> = any,
	Slots extends Record<string, any> = any
> extends SvelteComponent_1<Props, Events> {…}

ts
[prop: string]: any;

ts
constructor(options: ComponentConstructorOptions<Props>);

ts
$capture_state(): void;

ts
$inject_state(): void;

SvelteComponentTypedpermalink

Use SvelteComponent instead. See PR for more information: https://github.com/sveltejs/svelte/pull/8512

ts
class SvelteComponentTyped<
	Props extends Record<string, any> = any,
	Events extends Record<string, any> = any,
	Slots extends Record<string, any> = any
> extends SvelteComponent<Props, Events, Slots> {}

previous Special elements

next svelte/store