Une boîte à outils microfrontend : chargez, montez et connectez des applications déployées indépendamment, écrites en React, Vue, Svelte, Angular ou TypeScript pur, dans le navigateur ou sous forme d'îlots rendus côté serveur dans une page React.

🇬🇧 English · 🇹🇷 Türkçe · 🇪🇸 Español · 🇩🇪 Deutsch · 🇫🇷 Français · 🇯🇵 日本語 · 🇨🇳 中文 · 🇮🇹 Italiano · 🇧🇷 Português · 🇮🇳 हिंदी

• 🧩 Adaptateurs de framework pour React 18/19, Vue 3, Svelte 3-5 et Angular 15+. Chacun transforme un composant racine en module de micro app avec mount, update et unmount, une instance par conteneur.
• 🛣️ Activation par chemin. activeWhen: '/users/:id' monte une app sur les chemins correspondants. Les query strings et les hashes ne la démontent jamais. Un seul matcher (matchPath) sert l'orchestrateur, le routeur et le paquet serveur.
• 🔁 Montage ordonné. Les changements de route sont réconciliés un par un ; les apps inactives sont démontées avant le montage des nouvelles, donc une navigation rapide A → B → A ne laisse que A sur la page.
• 🔗 Routeurs externes. orchestrator.connectRouter() suit TanStack Router ou React Router. interceptLinks() transforme les clics sur de simples <a href> en navigations côté client.
• 🏝️ Îlots SSR. TuvixIsland héberge des micro apps Vue, Svelte, Angular et React dans une page React rendue côté serveur, les hydrate sur place et ne réécrit jamais leur DOM lors d'un nouveau rendu.
• 🎨 Premier affichage (first paint) stylé. @tuvix.js/vite indique à votre serveur les feuilles de style dont chaque îlot a besoin, pour que vous les liiez dans le <head>.
• 📦 Entrées flexibles. URL de scripts, { scripts, styles, type }, ou fonctions loader comme () => import('./app'). Chargements parallèles, nouvelles tentatives, timeouts, hashes SRI.
• 📡 Event bus partagé. getGlobalBus() renvoie un seul bus par page, même entre des apps bundlées séparément.
• 🔔 Événements de cycle de vie. tuvix:mounted, tuvix:unmounted, tuvix:error, ainsi que whenMounted(name) et onLifecycle().
• 🔒 Isolation CSS à la demande. sandbox: true rend une app dans un shadow root avec ses propres feuilles de style.
• 🟦 TypeScript. Chaque paquet de bibliothèque fournit des builds ESM et CommonJS avec des déclarations de types.

Tuvix.js n'isole pas le JavaScript entre les apps : chaque app s'exécute dans le window de la page. Utilisez une <iframe> pour du code non fiable.

Générez des composants tuvix.js à partir du langage naturel avec le chatbot du site de documentation.

• Modèle de chat : MiniMax M2.5 via OpenRouter
• Modèle d'embedding : NVIDIA Nemotron Embed 1B via OpenRouter (récupération RAG)
• Prend en charge : React, Vue, Svelte, Angular
• Jeu de données : tuvix-component-dataset sur HuggingFace

Essayez-le : Générateur IA sur le site de documentation

# Orchestrator, router, loader, event bus and sandbox
pnpm add tuvix.js

# Adapters, as needed
pnpm add @tuvix.js/react @tuvix.js/vue @tuvix.js/svelte @tuvix.js/angular

# Or scaffold a project
npx create-tuvix-app my-app --template shell

import { createOrchestrator, interceptLinks } from 'tuvix.js';

const orchestrator = createOrchestrator({
  router: { mode: 'history', routes: [] },
});

orchestrator.register({
  name: 'dashboard',
  entry: {
    scripts: ['https://cdn.example.com/dashboard/main.js'],
    styles: ['https://cdn.example.com/dashboard/main.css'],
    type: 'module',
  },
  container: '#main-content',
  activeWhen: '/dashboard/*',
  props: { user: 'Guest' },
  fallback: '<p>Dashboard is unavailable.</p>',
});

orchestrator.register({
  name: 'settings',
  entry: () => import('./apps/settings'),
  container: '#main-content',
  activeWhen: '/settings/*',
});

interceptLinks({ navigate: (path) => orchestrator.navigateTo(path) });

await orchestrator.start();

import { createReactMicroApp } from '@tuvix.js/react';

function Dashboard({ user }: { user: string }) {
  return <h1>Welcome, {user}</h1>;
}

// Registers itself as "dashboard", so the shell's script entry finds it.
export default createReactMicroApp({ name: 'dashboard', App: Dashboard });

Sans framework :

import { defineMicroApp } from 'tuvix.js';

export default defineMicroApp({
  name: 'settings',
  mount({ container, props }) {
    const title = document.createElement('h1');
    title.textContent = `Settings for ${String(props?.user ?? 'Guest')}`;
    container.replaceChildren(title);
  },
  unmount({ container }) {
    container.replaceChildren();
  },
});

import { createOrchestrator } from 'tuvix.js';

const orchestrator = createOrchestrator();
await orchestrator.updateAppProps('dashboard', { user: 'Yasin' });

Une app montée qui possède update refait son rendu sur place. Sinon, l'orchestrateur conserve les props fusionnées pour le prochain montage.

import { createOrchestrator } from 'tuvix.js';
import { router } from './router'; // TanStack Router instance

const orchestrator = createOrchestrator(); // no built-in router

orchestrator.connectRouter({
  subscribe: (callback) => router.subscribe('onResolved', callback),
  getPath: () => router.state.location.pathname,
});

await orchestrator.start();

import { TuvixIsland } from '@tuvix.js/react';
import { createSsrSvelteMicroApp } from '@tuvix.js/svelte';
import Footer from './Footer.svelte';

const footer = createSsrSvelteMicroApp({ name: 'footer', App: Footer });

// `footerHtml` comes from renderSvelteToString() in server-only code.
export function Layout({ footerHtml }: { footerHtml?: string }) {
  return <TuvixIsland name="footer" app={footer} props={{ year: 2026 }} ssrHtml={footerHtml} fallback={<footer>© 2026</footer>} />;
}

Pendant l'hydratation, l'îlot lit son HTML depuis la page, donc le client n'a jamais besoin de footerHtml. Consultez le guide des îlots SSR et examples/with-ssr-islands.

import { onLifecycle, whenMounted } from 'tuvix.js';

onLifecycle('error', ({ name, error }) => console.error(name, error));

const { container, hydrated } = await whenMounted('footer');
container.classList.add(hydrated ? 'hydrated' : 'rendered');

import { getGlobalBus } from 'tuvix.js';

const bus = getGlobalBus(); // the same bus the orchestrator passes to mount()

const off = bus.on<{ userId: string }>('user:login', ({ userId }) => console.log(userId));
bus.emit('user:login', { userId: '42' });
off();

tuvix.js/
├── packages/        # the 15 packages above
├── examples/        # runnable examples, see below
├── website/         # documentation site (VitePress, 10 languages)
├── scripts/         # docs and package validators
└── .changeset/      # release notes for the next version

Livré :

• Orchestrateur avec réconciliations sérialisées, connectRouter, montage selon le viewport et HTML de fallback
• Adaptateurs pour React, Vue, Svelte 3-5 et Angular (zoneless), avec hydratation SSR
• TuvixIsland, événements de cycle de vie, assets d'îlots @tuvix.js/vite
• Composition côté serveur avec streaming et métriques Prometheus (@tuvix.js/server)
• Entrées Module Federation, devtools intégrés à la page, génération de projets en CLI
• Documentation en 10 langues

Prévu :

• Hot module reload entre les micro apps
• Prise en charge native d'ESM et des import maps
• Composition côté serveur adaptée à l'edge, avec cache de fragments stale-while-revalidate
• Utilitaires de test et un orchestrateur factice
• Tests A/B de fragments

Lisez le guide de contribution avant d'ouvrir une pull request.

git clone https://github.com/yasinatesim/tuvix.js.git
cd tuvix.js
pnpm install
pnpm build
pnpm test

Vous venez de la 0.4 ? Lisez le guide de migration.

Copyright © 2026 - Licence MIT. Consultez LICENSE pour plus d'informations.

Ce README a été généré par markdown-manager 🥲