svelte

The svelte package exposes lifecycle functions and the context API.

onMountpermalink

onMount(callback: () => void)

onMount(callback: () => () => void)

The onMount function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live inside the component; it can be called from an external module).

onMount does not run inside a server-side component.

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

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

If a function is returned from onMount, it will be called when the component is unmounted.

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

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

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

This behaviour will only work when the function passed to onMount synchronously returns a value. async functions always return a Promise, and as such cannot synchronously return a function.

beforeUpdatepermalink

beforeUpdate(callback: () => void)

Schedules a callback to run immediately before the component is updated after any state change.

The first time the callback runs will be before the initial onMount

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

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

afterUpdatepermalink

afterUpdate(callback: () => void)

Schedules a callback to run immediately after the component has been updated.

The first time the callback runs will be after the initial onMount

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

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

onDestroypermalink

onDestroy(callback: () => void)

Schedules a callback to run immediately before the component is unmounted.

Out of onMount, beforeUpdate, afterUpdate and onDestroy, this is the only one that runs inside a server-side component.

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

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

tickpermalink

promise: Promise = tick();

Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.

<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

setContext(key: any, context: any)

Associates an arbitrary context object with the current component and the specified key and returns that object. The context is then available to children of the component (including slotted content) with getContext.

Like lifecycle functions, this must be called during component initialisation.

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

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

Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which will be reactive.

getContextpermalink

context: any = getContext(key: any)

Retrieves the context that belongs to the closest parent component with the specified key. Must be called during component initialisation.

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

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

hasContextpermalink

hasContext: boolean = hasContext(key: any)

Checks whether a given key has been set in the context of a parent component. Must be called during component initialisation.

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

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

getAllContextspermalink

contexts: Map<any, any> = getAllContexts()

Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it.

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

  const contexts = getAllContexts();
</script>

createEventDispatcherpermalink

dispatch: ((name: string, detail?: any, options?: DispatchOptions) => boolean) = createEventDispatcher();

Creates an event dispatcher that can be used to dispatch component events. Event dispatchers are functions that can take two arguments: name and detail.

Component events created with createEventDispatcher create a CustomEvent. These events do not bubble. The detail argument corresponds to the CustomEvent.detail property and can contain any type of data.

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

  const dispatch = createEventDispatcher();
</script>

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

Events dispatched from child components can be listened to in their parent. Any data provided when the event was dispatched is available on the detail property of the event object.

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

<Child on:notify={callbackFunction} />

Events can be cancelable by passing a third parameter to the dispatch function. The function returns false if the event is cancelled with event.preventDefault(), otherwise it returns 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>