Muchas apps. Una sola experiencia.
Tuvix.js monta micro apps de React, Vue, Svelte, Angular y vanilla JS en una sola página host. El enrutamiento, un event bus, el sandboxing y el renderizado en el servidor llegan como paquetes separados que añades cuando los necesitas.
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+montada
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-busQué incluye Tuvix.js
Ocho piezas. Instala el paquete paraguas tuvix.js para obtener las cinco principales, o añade paquetes sueltos a medida que crece tu shell.
Independiente del framework
Ejecuta micro apps de React, Vue, Svelte, Angular y vanilla JS lado a lado en una sola shell.
Guía de micro appsSin dependencias de runtime de terceros
Cada paquete depende solo de otros paquetes @tuvix.js. Instalas los que importas.
Todos los paquetesEnrutamiento integrado
El router monta y desmonta apps cuando cambia la URL, en modo history o hash.
@tuvix.js/routerEvent bus
Las apps publican y se suscriben a eventos tipados sin compartir globales.
@tuvix.js/event-busSandbox de CSS y JS
El shadow DOM mantiene los estilos de cada app dentro de su contenedor. JsSandbox ejecuta un script contra un window Proxy que puedes descartar.
@tuvix.js/sandboxCarga dinámica
El loader descarga los bundles de las apps bajo demanda, los guarda en caché y reintenta las cargas fallidas.
@tuvix.js/loaderDevTools
Un panel dentro de la página lista las apps registradas, la ruta activa y el tráfico del event bus.
@tuvix.js/devtoolsRenderizado en el servidor
Renderiza micro apps en el servidor y une su HTML en la plantilla de la shell, como string o como stream.
@tuvix.js/server
Elige tu framework
Cada adaptador convierte un componente en una micro app que el orquestador puede montar, actualizar y desmontar.
React
createReactMicroApp envuelve un componente. useTuvixProps y useTuvixBus leen props y eventos.
npm i @tuvix.js/reactVue
createVueMicroApp monta una app de Vue 3, con composables para props y el event bus.
npm i @tuvix.js/vueSvelte
createSvelteMicroApp monta componentes de Svelte 3, 4 y 5.
npm i @tuvix.js/svelteAngular
createAngularMicroApp inicializa un componente de Angular 15+ dentro de su contenedor.
npm i @tuvix.js/angularVanilla JS
defineMicroApp da a JavaScript plano los hooks mount, unmount y update.
npm i @tuvix.js/core
15 paquetes, cada uno con su propia versión
Empieza con el paquete paraguas. Cambia a paquetes sueltos cuando quieras una instalación más pequeña.
- tuvix.js
Paquete paraguas con core, router, event bus, loader y sandbox.
- @tuvix.js/core
El orquestador. Registra micro apps y ejecuta sus ciclos de vida.
- @tuvix.js/router
Activa micro apps según la URL, en modo history o hash.
- @tuvix.js/event-bus
Publish/subscribe tipado entre micro apps.
- @tuvix.js/loader
Carga bundles de apps bajo demanda, con caché y reintentos.
- @tuvix.js/sandbox
Aislamiento de CSS mediante Shadow DOM y de JS mediante Proxy.
- @tuvix.js/server
Composición y streaming en el servidor para la página host.
- @tuvix.js/module-federation
Carga micro apps desde remotes de Webpack Module Federation.
- @tuvix.js/devtools
Panel de depuración dentro de la página para apps, rutas y eventos.
- @tuvix.js/react
Adaptador de React, hooks y utilidades de renderizado en el servidor.
- @tuvix.js/vue
Adaptador de Vue 3, composables y utilidades de renderizado en el servidor.
- @tuvix.js/svelte
Adaptador de Svelte con soporte de renderizado en el servidor.
- @tuvix.js/angular
Adaptador de Angular con soporte de renderizado en el servidor.
- @tuvix.js/vite
Plugin de Vite que coloca el CSS de las islas y los enlaces modulepreload en el head del SSR, para que las micro apps renderizadas en el servidor tengan estilos desde el primer pintado.
- create-tuvix-app
Genera un nuevo proyecto con host y micro app desde la línea de comandos.