Plusieurs apps. Une seule expérience.
Tuvix.js monte des micro apps React, Vue, Svelte, Angular et JavaScript vanilla dans une seule page hôte. Le routage, un event bus, l'isolation et le rendu côté serveur sont des paquets séparés, que vous ajoutez quand vous en avez besoin.
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+montée
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-busCe que contient Tuvix.js
Huit briques de base. Installez le paquet tout-en-un tuvix.js pour obtenir les cinq paquets principaux, ou ajoutez des paquets individuels à mesure que votre shell grandit.
Agnostique au framework
Exécutez des micro apps React, Vue, Svelte, Angular et JavaScript vanilla côte à côte dans un même shell.
Guide des micro appsAucune dépendance runtime tierce
Chaque paquet ne dépend que d'autres paquets @tuvix.js. Vous installez ceux que vous importez.
Tous les paquetsRoutage intégré
Le routeur monte et démonte les apps quand l'URL change, en mode history ou hash.
@tuvix.js/routerEvent bus
Les apps publient des événements typés et s'y abonnent sans partager de variables globales.
@tuvix.js/event-busSandbox CSS et JS
Le shadow DOM garde les styles de chaque app dans son conteneur. JsSandbox exécute un script sur une window Proxy que vous pouvez jeter.
@tuvix.js/sandboxChargement dynamique
Le loader récupère les bundles des apps à la demande, les met en cache et relance les chargements qui échouent.
@tuvix.js/loaderDevTools
Un panneau intégré à la page liste les apps enregistrées, la route active et le trafic de l'event bus.
@tuvix.js/devtoolsRendu côté serveur
Rendez les micro apps côté serveur et assemblez leur HTML dans le template du shell, sous forme de chaîne ou de flux.
@tuvix.js/server
Choisissez votre framework
Chaque adaptateur transforme un composant en micro app que l'orchestrateur peut monter, mettre à jour et démonter.
React
createReactMicroApp enveloppe un composant. useTuvixProps et useTuvixBus lisent les props et les événements.
npm i @tuvix.js/reactVue
createVueMicroApp monte une app Vue 3, avec des composables pour les props et l'event bus.
npm i @tuvix.js/vueSvelte
createSvelteMicroApp monte des composants Svelte 3, 4 et 5.
npm i @tuvix.js/svelteAngular
createAngularMicroApp fait le bootstrap d'un composant Angular 15+ dans son conteneur.
npm i @tuvix.js/angularVanilla JS
defineMicroApp fournit des hooks mount, unmount et update en JavaScript pur.
npm i @tuvix.js/core
15 paquets, chacun avec sa propre version
Commencez par le paquet tout-en-un. Passez aux paquets individuels quand vous voulez une installation plus légère.
- tuvix.js
Paquet tout-en-un avec core, router, event bus, loader et sandbox.
- @tuvix.js/core
L'orchestrateur. Enregistre les micro apps et exécute leurs cycles de vie.
- @tuvix.js/router
Active les micro apps selon l'URL, en mode history ou hash.
- @tuvix.js/event-bus
Publish/subscribe typé entre micro apps.
- @tuvix.js/loader
Charge les bundles des apps à la demande, avec mise en cache et nouvelles tentatives.
- @tuvix.js/sandbox
Isolation CSS par le Shadow DOM, isolation JS par Proxy.
- @tuvix.js/server
Composition côté serveur et streaming pour la page hôte.
- @tuvix.js/module-federation
Charge des micro apps depuis des remotes Webpack Module Federation.
- @tuvix.js/devtools
Panneau de débogage intégré à la page pour les apps, les routes et les événements.
- @tuvix.js/react
Adaptateur React, hooks et helpers de rendu côté serveur.
- @tuvix.js/vue
Adaptateur Vue 3, composables et helpers de rendu côté serveur.
- @tuvix.js/svelte
Adaptateur Svelte avec prise en charge du rendu côté serveur.
- @tuvix.js/angular
Adaptateur Angular avec prise en charge du rendu côté serveur.
- @tuvix.js/vite
Plugin Vite qui place le CSS des îlots et les liens modulepreload dans le head SSR, pour que les micro apps rendues côté serveur soient stylées dès le premier affichage (first paint).
- create-tuvix-app
Génère un nouveau projet avec un hôte et une micro app depuis la ligne de commande.