Version: 5.x

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.

  1. import singleSpaSvelte from 'single-spa-svelte';
  2. import myRootSvelteComponent from 'my-root-svelte-component.js';
  3. const svelteLifecycles = singleSpaSvelte({
  4. component: myRootSvelteComponent,
  5. domElementGetter: () => document.getElementById('svelte-app'),
  6. props: { someData: 'data' }
  7. });
  8. export const bootstrap = svelteLifecycles.bootstrap;
  9. export const mount = svelteLifecycles.mount;
  10. 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.

Svelte - 图1Edit this page