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.
Quickstart
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;
Options
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 bydomElementGetter
to render the component immediately beforehydrate
: (optional) See the svelte Creating a component documentationintro
: (optional) Iftrue
, will play transitions on initial render, rather than waiting for subsequent state changesprops
: (optional) An object of properties to supply to the component
single-spa props
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.