कई ऐप्स। एक अनुभव।
Tuvix.js React, Vue, Svelte, Angular और vanilla JS माइक्रो ऐप्स को एक होस्ट पेज में mount करता है। रूटिंग, event bus, sandboxing और सर्वर रेंडरिंग अलग पैकेज के रूप में आते हैं, जिन्हें आप ज़रूरत पड़ने पर जोड़ते हैं।
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+mounted
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 में क्या मिलता है
आठ बिल्डिंग ब्लॉक। मुख्य पांच पाने के लिए tuvix.js umbrella पैकेज इंस्टॉल करें, या shell बढ़ने पर अलग-अलग पैकेज जोड़ें।
फ्रेमवर्क-स्वतंत्र
एक ही shell में React, Vue, Svelte, Angular और vanilla JS माइक्रो ऐप्स साथ-साथ चलाएं।
माइक्रो ऐप्स गाइडकोई third-party रनटाइम डिपेंडेंसी नहीं
हर पैकेज केवल दूसरे @tuvix.js पैकेजों पर निर्भर है। आप वही पैकेज इंस्टॉल करते हैं जिन्हें आप import करते हैं।
सभी पैकेजबिल्ट-इन रूटिंग
URL बदलने पर राउटर ऐप्स को mount और unmount करता है, history या hash mode में।
@tuvix.js/routerEvent bus
ऐप्स globals साझा किए बिना typed events publish और subscribe करते हैं।
@tuvix.js/event-busCSS और JS sandbox
Shadow DOM हर ऐप की styles को उसके container के अंदर रखता है। JsSandbox किसी script को एक Proxy window पर चलाता है, जिसे आप बाद में हटा सकते हैं।
@tuvix.js/sandboxडायनेमिक लोडिंग
loader ज़रूरत पड़ने पर ऐप bundles fetch करता है, उन्हें cache करता है और असफल loads को दोबारा आज़माता है।
@tuvix.js/loaderDevTools
पेज के अंदर एक पैनल registered ऐप्स, active route और event bus ट्रैफ़िक दिखाता है।
@tuvix.js/devtoolsसर्वर रेंडरिंग
माइक्रो ऐप्स को सर्वर पर रेंडर करें और उनका HTML shell template में जोड़ें, string या stream के रूप में।
@tuvix.js/server
अपना फ्रेमवर्क चुनें
हर adapter एक कंपोनेंट को माइक्रो ऐप में बदलता है, जिसे orchestrator mount, update और unmount कर सकता है।
React
createReactMicroApp एक कंपोनेंट को wrap करता है। useTuvixProps और useTuvixBus props और events पढ़ते हैं।
npm i @tuvix.js/reactVue
createVueMicroApp एक Vue 3 ऐप mount करता है, props और event bus के लिए composables के साथ।
npm i @tuvix.js/vueSvelte
createSvelteMicroApp Svelte 3, 4 और 5 कंपोनेंट्स mount करता है।
npm i @tuvix.js/svelteAngular
createAngularMicroApp एक Angular 15+ कंपोनेंट को उसके container में bootstrap करता है।
npm i @tuvix.js/angularVanilla JS
defineMicroApp सादे JavaScript को mount, unmount और update hooks देता है।
npm i @tuvix.js/core
15 पैकेज, हर एक का अपना वर्शन
umbrella पैकेज से शुरू करें। छोटा install चाहिए तो अलग-अलग पैकेज पर जाएं।
- tuvix.js
core, router, event bus, loader और sandbox वाला umbrella पैकेज।
- @tuvix.js/core
orchestrator। माइक्रो ऐप्स register करता है और उनके lifecycles चलाता है।
- @tuvix.js/router
URL के आधार पर माइक्रो ऐप्स को activate करता है, history या hash mode में।
- @tuvix.js/event-bus
माइक्रो ऐप्स के बीच typed publish/subscribe।
- @tuvix.js/loader
caching और retries के साथ ज़रूरत पड़ने पर ऐप bundles लोड करता है।
- @tuvix.js/sandbox
Shadow DOM से CSS isolation, Proxy से JS isolation।
- @tuvix.js/server
होस्ट पेज के लिए सर्वर-साइड composition और streaming।
- @tuvix.js/module-federation
Webpack Module Federation remotes से माइक्रो ऐप्स लोड करता है।
- @tuvix.js/devtools
ऐप्स, routes और events के लिए पेज के अंदर debug पैनल।
- @tuvix.js/react
React adapter, hooks और सर्वर रेंडरिंग helpers।
- @tuvix.js/vue
Vue 3 adapter, composables और सर्वर रेंडरिंग helpers।
- @tuvix.js/svelte
सर्वर रेंडरिंग सपोर्ट वाला Svelte adapter।
- @tuvix.js/angular
सर्वर रेंडरिंग सपोर्ट वाला Angular adapter।
- @tuvix.js/vite
Vite plugin जो island CSS और modulepreload links को SSR head में डालता है, ताकि सर्वर पर रेंडर हुए माइक्रो ऐप्स पहले paint पर ही styled दिखें।
- create-tuvix-app
कमांड लाइन से नया होस्ट और माइक्रो ऐप प्रोजेक्ट बनाता है।