https://github.com/yasinatesim/tuvix.js
A lightweight microfrontend framework for building scalable, independently deployable frontend applications
https://github.com/yasinatesim/tuvix.js
fragments mfe microfront-end microfrontend microfrontends microservice-framework module-federation orchestration-framework
Last synced: 2 months ago
JSON representation
A lightweight microfrontend framework for building scalable, independently deployable frontend applications
- Host: GitHub
- URL: https://github.com/yasinatesim/tuvix.js
- Owner: yasinatesim
- License: mit
- Created: 2026-03-08T17:49:42.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-04-03T19:18:56.000Z (3 months ago)
- Last Synced: 2026-04-03T21:36:40.667Z (3 months ago)
- Topics: fragments, mfe, microfront-end, microfrontend, microfrontends, microservice-framework, module-federation, orchestration-framework
- Language: TypeScript
- Homepage: https://tuvixjs.dev
- Size: 2.1 MB
- Stars: 18
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.de.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Tuvix.js
Ein leichtgewichtiges und flexibles Microfrontend-Framework zum Erstellen skalierbarer, unabhรคngig deploybarer Frontend-Anwendungen.
Tuvix.js vereint mehrere Frontend-Anwendungen zu einer nahtlosen, einheitlichen Benutzererfahrung - ganz wie der Name vermuten lรคsst.
๐ฌ๐ง English ยท
๐น๐ท Tรผrkรงe ยท
๐ช๐ธ Espaรฑol ยท
๐ฉ๐ช Deutsch ยท
๐ซ๐ท Franรงais ยท
๐ฏ๐ต ๆฅๆฌ่ช ยท
๐จ๐ณ ไธญๆ ยท
๐ฎ๐น Italiano ยท
๐ง๐ท Portuguรชs ยท
๐ฎ๐ณ เคนเคฟเคเคฆเฅ
---
## โจ Funktionen
- ๐งฉ **Framework-unabhรคngig** - Verwende React, Vue, Svelte, Angular oder Vanilla JS
- ๐ฆ **Unabhรคngiges Deployment** - Deploye jede Micro-App separat
- ๐ **Dynamisches Modulladen** - Lade Microfrontends bei Bedarf
- ๐ฃ๏ธ **Integriertes Routing** - Nahtloses Routing zwischen Micro-Apps
- ๐ก **Inter-App-Kommunikation** - Event-Bus fรผr App-รผbergreifende Nachrichtenรผbermittlung
- โก **Lightweight** - Keine Laufzeitabhรคngigkeiten, minimaler Kern
- ๐ **Lifecycle Management** - Hooks fรผr Mounten, Unmounten und Aktualisieren
- ๐ **Type-Safe** - Vollstรคndige TypeScript-Unterstรผtzung mit strikten Typen
---
## ๐ค KI-Komponenten-Generator
Generieren Sie tuvix.js-Komponenten aus natรผrlicher Sprache mit unserem integrierten KI-Chatbot.
- **Betrieben von:** Ollama + Qwen2.5 Coder (lรคuft 100% lokal, keine API-Kosten)
- **RAG-basiert:** Ruft relevante Beispiele aus 600 Open-Source-Komponentenbeispielen ab
- **Unterstรผtzt:** React, Vue, Svelte, Angular
- **Dataset:** [tuvix-component-dataset](https://huggingface.co/datasets/yasinatesim/tuvix-component-dataset) auf HuggingFace
---
## ๐ฆ Installation
```bash
# Alles-in-einem-Paket
npm install tuvix.js
# Oder einzelne Pakete installieren
npm install @tuvix.js/core @tuvix.js/router
```
---
## ๐ Schnellstart
### Host-Anwendung (Shell)
```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.register({
name: 'settings',
entry: 'https://cdn.example.com/settings/main.js',
container: '#main-content',
activeWhen: '/settings/*',
});
orchestrator.start();
```
### Micro-Frontend-App
```ts
import { defineMicroApp } from 'tuvix.js';
export default defineMicroApp({
name: 'dashboard',
bootstrap() {
console.log('Dashboard initialisiert');
},
mount({ container, props }) {
container.innerHTML = `
Willkommen, ${props?.user}!
`;
},
unmount({ container }) {
container.innerHTML = '';
},
update({ props }) {
console.log('Props aktualisiert:', props);
},
});
```
---
## ๐ Inter-App-Kommunikation
```ts
import { createEventBus } from 'tuvix.js';
const bus = createEventBus();
// App A - Event senden
bus.emit('user:login', { userId: 42, name: 'Ahmet' });
// App B - auf Event lauschen
bus.on('user:login', (data) => {
console.log(`${data.name} hat sich angemeldet!`);
});
```
---
## ๐ฃ๏ธ Routing
```ts
import { createRouter } from 'tuvix.js';
const router = createRouter({
mode: 'history',
routes: [
{ path: '/dashboard/*', app: 'dashboard' },
{ path: '/settings/*', app: 'settings' },
{ path: '/profile/*', app: 'profile' },
],
});
```
---
## ๐๏ธ Architektur
```
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Tuvix.js-Shell โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ Orchestrator โโ
โ โ โโโโโโโโโโโโ โโโโโโโโโโโโ โโโโโโโโโโโ โโ
โ โ โ Router โ โEvent Bus โ โ Loader โ โโ
โ โ โโโโโโโโโโโโ โโโโโโโโโโโโ โโโโโโโโโโโ โโ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โ โโโโโโโโโ โโโโโโโโโ โโโโโโโโโ โ
โ โ App A โ โ App B โ โ App C โ ... โ
โ โ(React)โ โ (Vue) โ โ(Svelteโ โ
โ โโโโโโโโโ โโโโโโโโโ โโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
---
## ๐ฆ Pakete
| Paket | Beschreibung |
| --- | --- |
| [`tuvix.js`](./packages/tuvix) | Alles-in-einem-Dachpaket |
| [`@tuvix.js/core`](./packages/core) | Core Orchestrator with Lifecycle management |
| [`@tuvix.js/router`](./packages/router) | URL-basiertes Micro-App-Routing |
| [`@tuvix.js/event-bus`](./packages/event-bus) | Event-Bus fรผr Inter-App-Kommunikation |
| [`@tuvix.js/loader`](./packages/loader) | Dynamischer Modullader |
| [`@tuvix.js/sandbox`](./packages/sandbox) | CSS/JS-Isolation (Shadow DOM + Proxy) |
| [`@tuvix.js/react`](./packages/react) | React 18+ Bindings und Hooks |
| [`@tuvix.js/vue`](./packages/vue) | Vue 3 Bindings und Composables |
| [`@tuvix.js/svelte`](./packages/svelte) | Svelte 3-5 Bindings |
| [`@tuvix.js/angular`](./packages/angular) | Angular 15+ Bindings |
| [`create-tuvix-app`](./packages/cli) | CLI-Scaffolding-Tool |
| [`@tuvix.js/devtools`](./packages/devtools) | In-Page-Debug-Panel |
| [`@tuvix.js/server`](./packages/server) | Serverseitige Komposition |
| [`@tuvix.js/module-federation`](./packages/module-federation) | Webpack Module Federation Integration |
---
## ๐ Projektstruktur
```
tuvix.js/
โโโ packages/
โ โโโ core/ # @tuvix.js/core
โ โโโ router/ # @tuvix.js/router
โ โโโ event-bus/ # @tuvix.js/event-bus
โ โโโ loader/ # @tuvix.js/loader
โ โโโ sandbox/ # @tuvix.js/sandbox
โ โโโ react/ # @tuvix.js/react
โ โโโ vue/ # @tuvix.js/vue
โ โโโ svelte/ # @tuvix.js/svelte
โ โโโ angular/ # @tuvix.js/angular
โ โโโ cli/ # create-tuvix-app
โ โโโ devtools/ # @tuvix.js/devtools
โ โโโ server/ # @tuvix.js/server
โ โโโ module-federation/ # @tuvix.js/module-federation
โ โโโ tuvix/ # tuvix.js (Dachpaket)
โโโ examples/
โ โโโ with-angular/ # Angular 15+ Beispiel
โ โโโ with-module-federation-react/ # Module Federation + React Beispiel
โ โโโ with-multiple-frameworks/ # Mehrere Frameworks Beispiel
โ โโโ with-react/ # React 18+ Beispiel
โ โโโ with-react-devtools/ # React + DevTools Beispiel
โ โโโ with-react-event-bus/ # React + Event Bus Beispiel
โ โโโ with-react-router/ # React + Router Beispiel
โ โโโ with-react-sandbox/ # React + Sandbox Beispiel
โ โโโ with-ssr-react/ # SSR + React Beispiel
โ โโโ with-ssr-vanilla/ # SSR + Vanilla JS Beispiel
โ โโโ with-svelte/ # Svelte 5 Beispiel
โ โโโ with-vanilla/ # Vanilla JS Beispiel
โ โโโ with-vue/ # Vue 3 Beispiel
โโโ website/ # Dokumentationsseite (VitePress, 10 Sprachen)
โโโ .github/ # CI/CD-Workflows
โโโ package.json # Root-Workspace-Konfiguration
โโโ pnpm-workspace.yaml
โโโ tsconfig.base.json
โโโ vitest.config.ts
```
---
## ๐บ๏ธ Roadmap
### โ
Abgeschlossen
- [x] Kern-Orchestrator
- [x] Lifecycle management
- [x] Dynamisches Modulladen
- [x] Event-Bus
- [x] URL-Routing mit History/Hash-Modi
- [x] CSS/JS-Sandbox-Isolation
- [x] CLI-Scaffolding-Tool (`npx create-tuvix-app`)
- [x] DevTools-Browsererweiterung
- [x] Serverseitige Komposition
- [x] Module-Federation-Unterstรผtzung
- [x] Framework-Bindings (React, Vue, Svelte, Angular)
- [x] i18n-Dokumentation (10 Sprachen)
### ๐ Demnรคchst
- [ ] Hot Module Reload zwischen Micro-Apps
- [ ] Adapter fรผr gemeinsames State-Management
- [ ] Preloading- und Prefetching-Strategien
- [ ] Plugin-System und Middleware-API
- [ ] Visueller Abhรคngigkeitsgraph in DevTools
- [ ] Test-Utilities und Mock-Orchestrator
- [ ] Native ESM- / Importmap-Unterstรผtzung
- [ ] Edge/CDN-fรคhige serverseitige Komposition
- [ ] VS Code-Erweiterung fรผr DevTools-Integration
- [ ] Storybook-Integration zur Micro-App-Isolation
---
## ๐งช Beispiele
Sofort ausfรผhrbare Beispiele fรผr jedes unterstรผtzte Framework sind im Verzeichnis [`examples/`](./examples) verfรผgbar:
| Beispiel | Framework | Pfad |
| --- | --- | --- |
| [Angular-Beispiel](./examples/with-angular) | Angular 15+ | `examples/with-angular/` |
| [Module Federation + React-Beispiel](./examples/with-module-federation-react) | React 18+ | `examples/with-module-federation-react/` |
| [Mehrere Frameworks-Beispiel](./examples/with-multiple-frameworks) | Gemischt | `examples/with-multiple-frameworks/` |
| [React-Beispiel](./examples/with-react) | React 18+ | `examples/with-react/` |
| [React + DevTools-Beispiel](./examples/with-react-devtools) | React 18+ | `examples/with-react-devtools/` |
| [React + Event Bus-Beispiel](./examples/with-react-event-bus) | React 18+ | `examples/with-react-event-bus/` |
| [React + Router-Beispiel](./examples/with-react-router) | React 18+ | `examples/with-react-router/` |
| [React + Sandbox-Beispiel](./examples/with-react-sandbox) | React 18+ | `examples/with-react-sandbox/` |
| [SSR + React-Beispiel](./examples/with-ssr-react) | React 18+ | `examples/with-ssr-react/` |
| [SSR + Vanilla JS-Beispiel](./examples/with-ssr-vanilla) | Kein Framework | `examples/with-ssr-vanilla/` |
| [Svelte-Beispiel](./examples/with-svelte) | Svelte 5 | `examples/with-svelte/` |
| [Vanilla JS-Beispiel](./examples/with-vanilla) | Kein Framework | `examples/with-vanilla/` |
| [Vue-Beispiel](./examples/with-vue) | Vue 3 | `examples/with-vue/` |
Jedes Beispiel zeigt:
- Eine **Shell-(Host-)Anwendung**, die den Orchestrator startet
- Zwei **Micro-Frontend-Apps**, die dynamisch registriert und geladen werden
- Inter-App-Kommunikation รผber den Event-Bus
---
## ๐ค Mitwirken
Beitrรคge sind willkommen! Bitte lies den [Leitfaden zum Mitwirken](./CONTRIBUTING.md), bevor du einen PR einreichst.
```bash
# Repository klonen
git clone https://github.com/yasinatesim/tuvix.js.git
# Abhรคngigkeiten installieren
pnpm install
# Alle Pakete bauen
pnpm build
# Tests ausfรผhren
pnpm test
```
---
## ๐ Lizenz
Copyright ยฉ 2026 - MIT-Lizenz.
Siehe [LICENSE](./LICENSE) fรผr weitere Informationen.
---
Diese README wurde von markdown-manager generiert ๐ฅฒ