多个应用。 统一体验。
Tuvix.js 把 React、Vue、Svelte、Angular 和原生 JS 微应用挂载到同一个宿主页面。路由、事件总线、沙箱和服务端渲染都是独立的包，需要时再添加。
npx create-tuvix-appimport { createOrchestrator } from 'tuvix.js';const orchestrator = createOrchestrator({ router: { mode: 'history', routes: [ { path: '/dashboard/*', app: 'dashboard' }, { path: '/settings/*', app: 'settings' }, ], },});orchestrator.register({ name: 'dashboard', entry: 'https://cdn.example.com/dashboard/main.js', container: '#main-content', activeWhen: '/dashboard/*',});orchestrator.start();/dashboard/overview- React 18+已挂载
name: 'dashboard'activeWhen: '/dashboard/*' - Vue 3
name: 'catalog'activeWhen: '/shop/*' - Svelte 3–5
name: 'checkout'activeWhen: '/checkout/*' - Angular 15+
name: 'settings'activeWhen: '/settings/*'
@tuvix.js/event-busTuvix.js 包含什么
八个构建模块。安装 tuvix.js 聚合包即可获得其中五个核心模块，也可以随着 shell 的增长逐个添加单独的包。
框架无关
在同一个 shell 中并排运行 React、Vue、Svelte、Angular 和原生 JS 微应用。
微应用指南没有第三方运行时依赖
每个包只依赖其他 @tuvix.js 包。你只需安装自己导入的包。
所有包内置路由
路由器随 URL 变化挂载和卸载应用，支持 history 和 hash 模式。
@tuvix.js/router事件总线
应用之间发布和订阅带类型的事件，无需共享全局变量。
@tuvix.js/event-busCSS 与 JS 沙箱
Shadow DOM 把每个应用的样式限制在它的容器内。JsSandbox 让脚本在一个可随时丢弃的 Proxy window 上运行。
@tuvix.js/sandbox动态加载
加载器按需获取应用 bundle，缓存它们，并重试失败的加载。
@tuvix.js/loaderDevTools
页面内面板列出已注册的应用、当前路由和事件总线的消息流。
@tuvix.js/devtools服务端渲染
在服务端渲染微应用，并把它们的 HTML 拼接进 shell 模板，可输出字符串或流。
@tuvix.js/server
选择你的框架
每个适配器把一个组件变成微应用，编排器可以挂载、更新和卸载它。
React
createReactMicroApp 包装一个组件。useTuvixProps 和 useTuvixBus 读取 props 和事件。
npm i @tuvix.js/reactVue
createVueMicroApp 挂载一个 Vue 3 应用，并提供读取 props 和事件总线的 composable。
npm i @tuvix.js/vueSvelte
createSvelteMicroApp 挂载 Svelte 3、4 和 5 组件。
npm i @tuvix.js/svelteAngular
createAngularMicroApp 把 Angular 15+ 组件初始化到它的容器中。
npm i @tuvix.js/angularVanilla JS
defineMicroApp 为原生 JavaScript 提供 mount、unmount 和 update 钩子。
npm i @tuvix.js/core
15 个包，各自独立发版
从聚合包开始。想要更小的安装体积时，再换成单独的包。
- tuvix.js
聚合包，包含 core、router、event bus、loader 和 sandbox。
- @tuvix.js/core
编排器。注册微应用并运行它们的生命周期。
- @tuvix.js/router
按 URL 激活微应用，支持 history 和 hash 模式。
- @tuvix.js/event-bus
微应用之间带类型的发布/订阅。
- @tuvix.js/loader
按需加载应用 bundle，支持缓存和重试。
- @tuvix.js/sandbox
通过 Shadow DOM 隔离 CSS，通过 Proxy 隔离 JS。
- @tuvix.js/server
宿主页面的服务端组合与流式输出。
- @tuvix.js/module-federation
从 Webpack Module Federation remote 加载微应用。
- @tuvix.js/devtools
页面内调试面板，查看应用、路由和事件。
- @tuvix.js/react
React 适配器、hooks 和服务端渲染辅助函数。
- @tuvix.js/vue
Vue 3 适配器、composable 和服务端渲染辅助函数。
- @tuvix.js/svelte
支持服务端渲染的 Svelte 适配器。
- @tuvix.js/angular
支持服务端渲染的 Angular 适配器。
- @tuvix.js/vite
Vite 插件，把 island 的 CSS 和 modulepreload 链接写入 SSR 的 head，让服务端渲染的微应用在首次绘制时就带有样式。
- create-tuvix-app
通过命令行搭建新的宿主和微应用项目。