たくさんのアプリを。 ひとつの体験に。
Tuvix.jsは、React、Vue、Svelte、Angular、vanilla JSのマイクロアプリを1つのホストページにマウントします。ルーティング、イベントバス、サンドボックス、サーバーレンダリングは個別のパッケージとして提供され、必要になったときに追加できます。
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+マウント済み
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-busTuvix.jsに含まれるもの
8つの構成要素があります。統合パッケージtuvix.jsをインストールすると中核の5つが手に入り、シェルの成長に合わせて個別のパッケージを追加できます。
フレームワーク非依存
React、Vue、Svelte、Angular、vanilla JSのマイクロアプリを1つのシェルで並べて実行できます。
マイクロアプリガイドサードパーティのランタイム依存なし
各パッケージは他の@tuvix.jsパッケージにのみ依存します。インストールするのはimportするものだけです。
すべてのパッケージ組み込みルーティング
ルーターはURLの変化に応じて、historyモードまたはhashモードでアプリをマウント・アンマウントします。
@tuvix.js/routerイベントバス
アプリはグローバルを共有せずに、型付きイベントをpublish・subscribeします。
@tuvix.js/event-busCSSとJSのサンドボックス
Shadow DOMは各アプリのスタイルをそのコンテナ内に閉じ込めます。JsSandboxは、破棄できるProxy windowに対してスクリプトを実行します。
@tuvix.js/sandbox動的ロード
ローダーはアプリのバンドルをオンデマンドで取得し、キャッシュし、失敗したロードを再試行します。
@tuvix.js/loaderDevTools
ページ内パネルに、登録済みのアプリ、アクティブなルート、イベントバスの通信が一覧表示されます。
@tuvix.js/devtoolsサーバーレンダリング
マイクロアプリをサーバーでレンダリングし、そのHTMLを文字列またはストリームとしてシェルのテンプレートに組み込みます。
@tuvix.js/server
フレームワークを選ぶ
各アダプターは、コンポーネントをオーケストレーターがマウント、更新、アンマウントできるマイクロアプリに変換します。
React
createReactMicroAppがコンポーネントをラップします。useTuvixPropsとuseTuvixBusでpropsとイベントを読み取ります。
npm i @tuvix.js/reactVue
createVueMicroAppはVue 3アプリをマウントし、propsとイベントバス用のコンポーザブルを提供します。
npm i @tuvix.js/vueSvelte
createSvelteMicroAppはSvelte 3、4、5のコンポーネントをマウントします。
npm i @tuvix.js/svelteAngular
createAngularMicroAppはAngular 15以降のコンポーネントをコンテナにブートストラップします。
npm i @tuvix.js/angularVanilla JS
defineMicroAppは素のJavaScriptにmount、unmount、updateのフックを提供します。
npm i @tuvix.js/core
15のパッケージ、それぞれ独自のバージョン
まずは統合パッケージから始めましょう。インストールを小さくしたいときは個別のパッケージに切り替えます。
- tuvix.js
core、router、event bus、loader、sandboxを含む統合パッケージです。
- @tuvix.js/core
オーケストレーターです。マイクロアプリを登録し、そのライフサイクルを実行します。
- @tuvix.js/router
historyモードまたはhashモードで、URLに応じてマイクロアプリを有効化します。
- @tuvix.js/event-bus
マイクロアプリ間の型付きpublish/subscribeです。
- @tuvix.js/loader
キャッシュと再試行付きで、アプリのバンドルをオンデマンドでロードします。
- @tuvix.js/sandbox
Shadow DOMによるCSS分離と、ProxyによるJS分離を提供します。
- @tuvix.js/server
ホストページのためのサーバーサイドでの合成とストリーミングを提供します。
- @tuvix.js/module-federation
Webpack Module Federationのリモートからマイクロアプリをロードします。
- @tuvix.js/devtools
アプリ、ルート、イベントのためのページ内デバッグパネルです。
- @tuvix.js/react
Reactアダプター、フック、サーバーレンダリング用ヘルパーです。
- @tuvix.js/vue
Vue 3アダプター、コンポーザブル、サーバーレンダリング用ヘルパーです。
- @tuvix.js/svelte
サーバーレンダリングに対応したSvelteアダプターです。
- @tuvix.js/angular
サーバーレンダリングに対応したAngularアダプターです。
- @tuvix.js/vite
アイランドのCSSとmodulepreloadリンクをSSRのheadに挿入するViteプラグインです。これにより、サーバーレンダリングされたマイクロアプリが最初の描画時からスタイル適用済みになります。
- create-tuvix-app
コマンドラインから新しいホストとマイクロアプリのプロジェクトを生成します。