Skip to content
a single-spa plugin for svelte applications
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
LICENSE
README.md initial pass to allow svelte 3 support May 13, 2019
package.json
yarn.lock

README.md

single-spa-svelte

Generic lifecycle hooks for Svelte applications that are registered as applications of single-spa.

Example

In addition to this Readme, example usage of single-spa-svelte can be found in the single-spa-examples project.

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'),
  data: { 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: (required) A function which will return a dom element. The root component will be mounted in this element.

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
You can’t perform that action at this time.