Tuvix.js

Português

English
Türkçe
Español
Deutsch
Français
日本語
中文
Italiano
हिन्दी

Português

English
Türkçe
Español
Deutsch
Français
日本語
中文
Italiano
हिन्दी

Appearance

Logo do Tuvix.js

Muitos apps. Uma experiência.

O Tuvix.js monta micro apps em React, Vue, Svelte, Angular e vanilla JS em uma única página host. Roteamento, um event bus, sandboxing e renderização no servidor vêm como pacotes separados que você adiciona quando precisar.

Primeiros passosExperimente o Playground
npx create-tuvix-app
src/orchestrator.ts
import { 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();
Shell host
URL/dashboard/overview
  • React 18+montadoname: 'dashboard'activeWhen: '/dashboard/*'
  • Vue 3name: 'catalog'activeWhen: '/shop/*'
  • Svelte 3–5name: 'checkout'activeWhen: '/checkout/*'
  • Angular 15+name: 'settings'activeWhen: '/settings/*'
Event bus compartilhado@tuvix.js/event-bus

O que vem com o Tuvix.js

Oito blocos de construção. Instale o pacote guarda-chuva tuvix.js para obter os cinco principais, ou adicione pacotes individuais conforme o seu shell cresce.

  • Independente de framework

    Rode micro apps em React, Vue, Svelte, Angular e vanilla JS lado a lado em um único shell.

    Guia de micro apps

  • Sem dependências de runtime de terceiros

    Cada pacote depende apenas de outros pacotes @tuvix.js. Você instala os que importa.

    Todos os pacotes

  • Roteamento integrado

    O roteador monta e desmonta apps conforme a URL muda, no modo history ou hash.

    @tuvix.js/router

  • Event bus

    Os apps publicam e assinam eventos tipados sem compartilhar globais.

    @tuvix.js/event-bus

  • Sandbox de CSS e JS

    O Shadow DOM mantém os estilos de cada app dentro do seu container. O JsSandbox executa um script contra uma window Proxy que você pode descartar.

    @tuvix.js/sandbox

  • Carregamento dinâmico

    O loader busca os bundles dos apps sob demanda, guarda-os em cache e tenta de novo os carregamentos que falham.

    @tuvix.js/loader

  • DevTools

    Um painel na própria página lista os apps registrados, a rota ativa e o tráfego do event bus.

    @tuvix.js/devtools

  • Renderização no servidor

    Renderize micro apps no servidor e junte o HTML deles ao template do shell, como string ou como stream.

    @tuvix.js/server

Escolha o seu framework

Cada adaptador transforma um componente em um micro app que o orquestrador pode montar, atualizar e desmontar.

  • React

    createReactMicroApp envolve um componente. useTuvixProps e useTuvixBus leem props e eventos.

    npm i @tuvix.js/react

  • Vue

    createVueMicroApp monta um app Vue 3, com composables para props e para o event bus.

    npm i @tuvix.js/vue

  • Svelte

    createSvelteMicroApp monta componentes Svelte 3, 4 e 5.

    npm i @tuvix.js/svelte

  • Angular

    createAngularMicroApp inicializa um componente Angular 15+ no seu container.

    npm i @tuvix.js/angular

  • Vanilla JS

    defineMicroApp dá ao JavaScript puro os hooks mount, unmount e update.

    npm i @tuvix.js/core

15 pacotes, cada um com a própria versão

Comece pelo pacote guarda-chuva. Mude para pacotes individuais quando quiser uma instalação menor.

  • tuvix.js

    Pacote guarda-chuva com core, router, event bus, loader e sandbox.

  • @tuvix.js/core

    O orquestrador. Registra micro apps e executa os ciclos de vida deles.

  • @tuvix.js/router

    Ativa micro apps pela URL, no modo history ou hash.

  • @tuvix.js/event-bus

    Publish/subscribe tipado entre micro apps.

  • @tuvix.js/loader

    Carrega bundles de apps sob demanda, com cache e novas tentativas.

  • @tuvix.js/sandbox

    Isolamento de CSS por Shadow DOM, isolamento de JS por Proxy.

  • @tuvix.js/server

    Composição e streaming no servidor para a página host.

  • @tuvix.js/module-federation

    Carrega micro apps de remotes do Webpack Module Federation.

  • @tuvix.js/devtools

    Painel de depuração na própria página para apps, rotas e eventos.

  • @tuvix.js/react

    Adaptador React, hooks e utilitários de renderização no servidor.

  • @tuvix.js/vue

    Adaptador Vue 3, composables e utilitários de renderização no servidor.

  • @tuvix.js/svelte

    Adaptador Svelte com suporte a renderização no servidor.

  • @tuvix.js/angular

    Adaptador Angular com suporte a renderização no servidor.

  • @tuvix.js/vite

    Plugin do Vite que coloca o CSS das ilhas e os links modulepreload no head do SSR, para que micro apps renderizados no servidor já tenham estilo na primeira pintura.

  • create-tuvix-app

    Gera um novo projeto com host e micro app pela linha de comando.