跳到主要内容
版本:5.x

single-spa-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的属性做合并。