single-spa-svelte

single-spa-svelte is a helper library that helps implement single-spa registered application lifecycle functions (bootstrap, mount and unmount) for for use with svelte. Check out the single-spa-svelte github.

First, in the single-spa application, run npm install --save single-spa-svelte. Then, create an entry file with the following.

import singleSpaSvelte from 'single-spa-svelte';
import myRootSvelteComponent from 'my-root-svelte-component.js';
const svelteLifecycles = singleSpaSvelte({
  component: myRootSvelteComponent,
  domElementGetter: () => document.getElementById('svelte-app'),
  props: { someData: 'data' }
});
export const bootstrap = svelteLifecycles.bootstrap;
export const mount = svelteLifecycles.mount;
export const unmount = svelteLifecycles.unmount;

All options are passed to single-spa-svelte via the opts parameter when calling singleSpaSvelte(opts). The following options are available:

component: (required) The root component that will be rendered. This component should be compiled by svelte and not an iife.
domElementGetter: (optional) A function which will return a dom element. The root component will be mounted in this element. If not provided, a default dom element will be provided.

Svelte-specific options

anchor: (optional) A child of the dom element identified by domElementGetter to render the component immediately before
hydrate: (optional) See the svelte Creating a component documentation
intro: (optional) If true, will play transitions on initial render, rather than waiting for subsequent state changes
props: (optional) An object of properties to supply to the component

All single-spa props are passed to the svelte component as props. The props provided to singleSpaSvelte({props: {...}}) are merged with the single-spa props.

Edit this page