Viele Apps. Ein Erlebnis.
Tuvix.js mountet Micro Apps in React, Vue, Svelte, Angular und Vanilla JS in eine Host-Seite. Routing, ein Event Bus, Sandboxing und Server-Rendering kommen als separate Pakete, die du hinzufügst, wenn du sie brauchst.
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+gemountet
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-busWas Tuvix.js mitbringt
Acht Bausteine. Installiere das Gesamtpaket tuvix.js, um die fünf Kernpakete zu bekommen, oder füge einzelne Pakete hinzu, wenn deine Shell wächst.
Framework-agnostisch
Betreibe Micro Apps in React, Vue, Svelte, Angular und Vanilla JS nebeneinander in einer Shell.
Anleitung zu Micro AppsKeine Laufzeitabhängigkeiten von Drittanbietern
Jedes Paket hängt nur von anderen @tuvix.js-Paketen ab. Du installierst die, die du importierst.
Alle PaketeEingebautes Routing
Der Router mountet und unmountet Apps, wenn sich die URL ändert, im History- oder Hash-Modus.
@tuvix.js/routerEvent Bus
Apps veröffentlichen und abonnieren typisierte Events, ohne Globals zu teilen.
@tuvix.js/event-busCSS- und JS-Sandbox
Shadow DOM hält die Styles jeder App in ihrem Container. JsSandbox führt ein Skript gegen ein Proxy-Window aus, das du danach verwerfen kannst.
@tuvix.js/sandboxDynamisches Laden
Der Loader lädt App-Bundles bei Bedarf, speichert sie im Cache und wiederholt fehlgeschlagene Ladevorgänge.
@tuvix.js/loaderDevTools
Ein Panel direkt in der Seite zeigt registrierte Apps, die aktive Route und den Verkehr auf dem Event Bus.
@tuvix.js/devtoolsServer-Rendering
Rendere Micro Apps auf dem Server und füge ihr HTML in das Shell-Template ein, als String oder als Stream.
@tuvix.js/server
Wähle dein Framework
Jeder Adapter macht aus einer Komponente eine Micro App, die der Orchestrator mounten, aktualisieren und unmounten kann.
React
createReactMicroApp kapselt eine Komponente. useTuvixProps und useTuvixBus lesen Props und Events.
npm i @tuvix.js/reactVue
createVueMicroApp mountet eine Vue-3-App, mit Composables für Props und den Event Bus.
npm i @tuvix.js/vueSvelte
createSvelteMicroApp mountet Komponenten aus Svelte 3, 4 und 5.
npm i @tuvix.js/svelteAngular
createAngularMicroApp bootstrappt eine Komponente ab Angular 15 in ihren Container.
npm i @tuvix.js/angularVanilla JS
defineMicroApp gibt reinem JavaScript die Hooks mount, unmount und update.
npm i @tuvix.js/core
15 Pakete, jedes mit eigener Version
Starte mit dem Gesamtpaket. Wechsle zu einzelnen Paketen, wenn du eine kleinere Installation willst.
- tuvix.js
Gesamtpaket mit Core, Router, Event Bus, Loader und Sandbox.
- @tuvix.js/core
Der Orchestrator. Registriert Micro Apps und führt ihre Lifecycles aus.
- @tuvix.js/router
Aktiviert Micro Apps anhand der URL, im History- oder Hash-Modus.
- @tuvix.js/event-bus
Typisiertes Publish/Subscribe zwischen Micro Apps.
- @tuvix.js/loader
Lädt App-Bundles bei Bedarf, mit Caching und Wiederholungsversuchen.
- @tuvix.js/sandbox
CSS-Isolation über Shadow DOM, JS-Isolation über Proxy.
- @tuvix.js/server
Serverseitige Komposition und Streaming für die Host-Seite.
- @tuvix.js/module-federation
Lädt Micro Apps aus Remotes von Webpack Module Federation.
- @tuvix.js/devtools
Debug-Panel direkt in der Seite für Apps, Routen und Events.
- @tuvix.js/react
React-Adapter, Hooks und Helfer für Server-Rendering.
- @tuvix.js/vue
Vue-3-Adapter, Composables und Helfer für Server-Rendering.
- @tuvix.js/svelte
Svelte-Adapter mit Unterstützung für Server-Rendering.
- @tuvix.js/angular
Angular-Adapter mit Unterstützung für Server-Rendering.
- @tuvix.js/vite
Vite-Plugin, das Island-CSS und modulepreload-Links in den SSR-Head schreibt, damit serverseitig gerenderte Micro Apps schon beim ersten Paint gestylt sind.
- create-tuvix-app
Erstellt über die Kommandozeile ein neues Projekt mit Host und Micro App.