id: ecosystem-svelte title: single-spa-svelte

sidebar_label: Svelte

single-spa-svelte是个帮助类库，通过实现生命周期函数 (bootstrap, mount and unmount)，可以帮助开发者在single-spa中快速注册 svelte应用。仓库地址见 single-spa-preact github 。

快速开始

首先，在single-spa 应用中执行npm install --save single-spa-svelte命令。在项目的入口文件添加如下代码：

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;

选项

在调用singleSpaPreact(opts)方法时，opts参数会将所有选项传递给single-spa-svelte。选项如下：

• component: (必填) 将要被渲染的根组件。这个组件需要被svelte编译过，且不能是一个立即调用函数表达式(IIFE)
• domElementGetter: (可选) 该参数是一个函数，返回值是一个DOM元素。根组件会挂载在这个DOM元素上，如果没有提供的话，会生成一个默认的DOM元素。

Svelte相关选项

• anchor: (可选) 是domElementGetter返回DOM元素的子元素，具体介绍可查看svelte关于创建一个组件 的文档
• hydrate: (可选) 具体介绍可查看svelte关于创建一个组件 的文档
• intro: (可选) 如果为true，会在初次渲染时展示动画而不是等待后续状态改变
• props: (可选) 一个对象，包含各个需要向组件提供的属性

single-spa 属性

所有的single-spa 属性都会传递给svelte组件。通过singleSpaSvelte({props: {...}})传的属性会和single-spa的属性做合并。