Tante app. Un'unica esperienza.
Tuvix.js monta micro app React, Vue, Svelte, Angular e vanilla JS in un'unica pagina host. Routing, event bus, sandboxing e rendering lato server sono pacchetti separati che aggiungi quando ti servono.
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+montata
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-busCosa include Tuvix.js
Otto blocchi. Installa il pacchetto ombrello tuvix.js per avere i cinque principali, oppure aggiungi singoli pacchetti man mano che la shell cresce.
Indipendente dal framework
Esegui micro app React, Vue, Svelte, Angular e vanilla JS fianco a fianco in un'unica shell.
Guida alle micro appNessuna dipendenza runtime di terze parti
Ogni pacchetto dipende solo da altri pacchetti @tuvix.js. Installi quelli che importi.
Tutti i pacchettiRouting integrato
Il router monta e smonta le app quando cambia l'URL, in modalità history o hash.
@tuvix.js/routerEvent bus
Le app pubblicano eventi tipizzati e si iscrivono a essi senza condividere variabili globali.
@tuvix.js/event-busSandbox CSS e JS
Lo shadow DOM tiene gli stili di ogni app dentro il suo container. JsSandbox esegue uno script su una window Proxy che puoi buttare via.
@tuvix.js/sandboxCaricamento dinamico
Il loader scarica i bundle delle app su richiesta, li mette in cache e ripete i caricamenti falliti.
@tuvix.js/loaderDevTools
Un pannello nella pagina elenca le app registrate, la route attiva e il traffico dell'event bus.
@tuvix.js/devtoolsRendering lato server
Esegui il rendering delle micro app sul server e inserisci il loro HTML nel template della shell, come stringa o come stream.
@tuvix.js/server
Scegli il tuo framework
Ogni adapter trasforma un componente in una micro app che l'orchestratore può montare, aggiornare e smontare.
React
createReactMicroApp avvolge un componente. useTuvixProps e useTuvixBus leggono props ed eventi.
npm i @tuvix.js/reactVue
createVueMicroApp monta un'app Vue 3, con composable per le props e l'event bus.
npm i @tuvix.js/vueSvelte
createSvelteMicroApp monta componenti Svelte 3, 4 e 5.
npm i @tuvix.js/svelteAngular
createAngularMicroApp esegue il bootstrap di un componente Angular 15+ nel suo container.
npm i @tuvix.js/angularVanilla JS
defineMicroApp fornisce hook mount, unmount e update in JavaScript puro.
npm i @tuvix.js/core
15 pacchetti, ognuno con la sua versione
Parti dal pacchetto ombrello. Passa ai singoli pacchetti quando vuoi un'installazione più leggera.
- tuvix.js
Pacchetto ombrello con core, router, event bus, loader e sandbox.
- @tuvix.js/core
L'orchestratore. Registra le micro app ed esegue il loro ciclo di vita.
- @tuvix.js/router
Attiva le micro app in base all'URL, in modalità history o hash.
- @tuvix.js/event-bus
Publish/subscribe tipizzato tra micro app.
- @tuvix.js/loader
Carica i bundle delle app su richiesta, con cache e nuovi tentativi.
- @tuvix.js/sandbox
Isolamento CSS tramite Shadow DOM, isolamento JS tramite Proxy.
- @tuvix.js/server
Composizione lato server e streaming per la pagina host.
- @tuvix.js/module-federation
Carica micro app dai remote di Webpack Module Federation.
- @tuvix.js/devtools
Pannello di debug nella pagina per app, route ed eventi.
- @tuvix.js/react
Adapter React, hook e helper per il rendering lato server.
- @tuvix.js/vue
Adapter Vue 3, composable e helper per il rendering lato server.
- @tuvix.js/svelte
Adapter Svelte con supporto al rendering lato server.
- @tuvix.js/angular
Adapter Angular con supporto al rendering lato server.
- @tuvix.js/vite
Plugin Vite che inserisce il CSS delle island e i link modulepreload nell'head SSR, così le micro app renderizzate sul server hanno già gli stili al primo paint.
- create-tuvix-app
Genera da riga di comando un nuovo progetto con host e micro app.