{"id":46831225,"url":"https://github.com/yasinatesim/tuvix.js","last_synced_at":"2026-04-08T00:01:11.620Z","repository":{"id":343394174,"uuid":"1176164001","full_name":"yasinatesim/tuvix.js","owner":"yasinatesim","description":"A lightweight microfrontend framework for building scalable, independently deployable frontend applications","archived":false,"fork":false,"pushed_at":"2026-04-03T19:18:56.000Z","size":2200,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-04-03T21:36:40.667Z","etag":null,"topics":["fragments","mfe","microfront-end","microfrontend","microfrontends","microservice-framework","module-federation","orchestration-framework"],"latest_commit_sha":null,"homepage":"https://tuvixjs.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yasinatesim.png","metadata":{"files":{"readme":"README.de.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-08T17:49:42.000Z","updated_at":"2026-04-03T19:19:00.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/yasinatesim/tuvix.js","commit_stats":null,"previous_names":["yasinatesim/tuvix.js"],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/yasinatesim/tuvix.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasinatesim%2Ftuvix.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasinatesim%2Ftuvix.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasinatesim%2Ftuvix.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasinatesim%2Ftuvix.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yasinatesim","download_url":"https://codeload.github.com/yasinatesim/tuvix.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasinatesim%2Ftuvix.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31533824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fragments","mfe","microfront-end","microfrontend","microfrontends","microservice-framework","module-federation","orchestration-framework"],"created_at":"2026-03-10T10:07:01.191Z","updated_at":"2026-04-08T00:01:11.603Z","avatar_url":"https://github.com/yasinatesim.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./website/public/logo.svg\" alt=\"Tuvix.js Logo\" width=\"80\" height=\"80\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eTuvix.js\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Ein leichtgewichtiges und flexibles \u003cstrong\u003eMicrofrontend-Framework\u003c/strong\u003e zum Erstellen skalierbarer, unabhängig deploybarer Frontend-Anwendungen.\u003cbr/\u003e\n  Tuvix.js vereint mehrere Frontend-Anwendungen zu einer nahtlosen, einheitlichen Benutzererfahrung - ganz wie der Name vermuten lässt.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./README.md\"\u003e🇬🇧 English\u003c/a\u003e ·\n  \u003ca href=\"./README.tr.md\"\u003e🇹🇷 Türkçe\u003c/a\u003e ·\n  \u003ca href=\"./README.es.md\"\u003e🇪🇸 Español\u003c/a\u003e ·\n  \u003ca href=\"./README.de.md\"\u003e🇩🇪 Deutsch\u003c/a\u003e ·\n  \u003ca href=\"./README.fr.md\"\u003e🇫🇷 Français\u003c/a\u003e ·\n  \u003ca href=\"./README.ja.md\"\u003e🇯🇵 日本語\u003c/a\u003e ·\n  \u003ca href=\"./README.zh.md\"\u003e🇨🇳 中文\u003c/a\u003e ·\n  \u003ca href=\"./README.it.md\"\u003e🇮🇹 Italiano\u003c/a\u003e ·\n  \u003ca href=\"./README.pt.md\"\u003e🇧🇷 Português\u003c/a\u003e ·\n  \u003ca href=\"./README.hi.md\"\u003e🇮🇳 हिंदी\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## ✨ Funktionen\n\n- 🧩 **Framework-unabhängig** - Verwende React, Vue, Svelte, Angular oder Vanilla JS\n- 📦 **Unabhängiges Deployment** - Deploye jede Micro-App separat\n- 🔗 **Dynamisches Modulladen** - Lade Microfrontends bei Bedarf\n- 🛣️ **Integriertes Routing** - Nahtloses Routing zwischen Micro-Apps\n- 📡 **Inter-App-Kommunikation** - Event-Bus für App-übergreifende Nachrichtenübermittlung\n- ⚡ **Lightweight** - Keine Laufzeitabhängigkeiten, minimaler Kern\n- 🔄 **Lifecycle Management** - Hooks für Mounten, Unmounten und Aktualisieren\n- 🔒 **Type-Safe** - Vollständige TypeScript-Unterstützung mit strikten Typen\n\n---\n\n## 🤖 KI-Komponenten-Generator\n\nGenerieren Sie tuvix.js-Komponenten aus natürlicher Sprache mit unserem integrierten KI-Chatbot.\n\n- **Betrieben von:** Ollama + Qwen2.5 Coder (läuft 100% lokal, keine API-Kosten)\n- **RAG-basiert:** Ruft relevante Beispiele aus 600 Open-Source-Komponentenbeispielen ab\n- **Unterstützt:** React, Vue, Svelte, Angular\n- **Dataset:** [tuvix-component-dataset](https://huggingface.co/datasets/yasinatesim/tuvix-component-dataset) auf HuggingFace\n\n---\n\n## 📦 Installation\n\n```bash\n# Alles-in-einem-Paket\nnpm install tuvix.js\n\n# Oder einzelne Pakete installieren\nnpm install @tuvix.js/core @tuvix.js/router\n```\n\n---\n\n## 🚀 Schnellstart\n\n### Host-Anwendung (Shell)\n\n```ts\nimport { createOrchestrator } from 'tuvix.js';\n\nconst orchestrator = createOrchestrator({\n  router: {\n    mode: 'history',\n    routes: [\n      { path: '/dashboard/*', app: 'dashboard' },\n      { path: '/settings/*', app: 'settings' },\n    ],\n  },\n});\n\norchestrator.register({\n  name: 'dashboard',\n  entry: 'https://cdn.example.com/dashboard/main.js',\n  container: '#main-content',\n  activeWhen: '/dashboard/*',\n});\n\norchestrator.register({\n  name: 'settings',\n  entry: 'https://cdn.example.com/settings/main.js',\n  container: '#main-content',\n  activeWhen: '/settings/*',\n});\n\norchestrator.start();\n```\n\n### Micro-Frontend-App\n\n```ts\nimport { defineMicroApp } from 'tuvix.js';\n\nexport default defineMicroApp({\n  name: 'dashboard',\n\n  bootstrap() {\n    console.log('Dashboard initialisiert');\n  },\n\n  mount({ container, props }) {\n    container.innerHTML = `\u003ch1\u003eWillkommen, ${props?.user}!\u003c/h1\u003e`;\n  },\n\n  unmount({ container }) {\n    container.innerHTML = '';\n  },\n\n  update({ props }) {\n    console.log('Props aktualisiert:', props);\n  },\n});\n```\n\n---\n\n## 🔌 Inter-App-Kommunikation\n\n```ts\nimport { createEventBus } from 'tuvix.js';\n\nconst bus = createEventBus();\n\n// App A - Event senden\nbus.emit('user:login', { userId: 42, name: 'Ahmet' });\n\n// App B - auf Event lauschen\nbus.on('user:login', (data) =\u003e {\n  console.log(`${data.name} hat sich angemeldet!`);\n});\n```\n\n---\n\n## 🛣️ Routing\n\n```ts\nimport { createRouter } from 'tuvix.js';\n\nconst router = createRouter({\n  mode: 'history',\n  routes: [\n    { path: '/dashboard/*', app: 'dashboard' },\n    { path: '/settings/*', app: 'settings' },\n    { path: '/profile/*', app: 'profile' },\n  ],\n});\n```\n\n---\n\n## 🏗️ Architektur\n\n```\n┌─────────────────────────────────────────────┐\n│              Tuvix.js-Shell                 │\n│  ┌─────────────────────────────────────────┐│\n│  │           Orchestrator                  ││\n│  │  ┌──────────┐ ┌──────────┐ ┌─────────┐ ││\n│  │  │ Router   │ │Event Bus │ │ Loader  │ ││\n│  │  └──────────┘ └──────────┘ └─────────┘ ││\n│  └─────────────────────────────────────────┘│\n│                                             │\n│  ┌───────┐  ┌───────┐  ┌───────┐          │\n│  │ App A │  │ App B │  │ App C │  ...      │\n│  │(React)│  │ (Vue) │  │(Svelte│          │\n│  └───────┘  └───────┘  └───────┘          │\n└─────────────────────────────────────────────┘\n```\n\n---\n\n## 📦 Pakete\n\n| Paket | Beschreibung |\n| --- | --- |\n| [`tuvix.js`](./packages/tuvix) | Alles-in-einem-Dachpaket |\n| [`@tuvix.js/core`](./packages/core) | Core Orchestrator with Lifecycle management |\n| [`@tuvix.js/router`](./packages/router) | URL-basiertes Micro-App-Routing |\n| [`@tuvix.js/event-bus`](./packages/event-bus) | Event-Bus für Inter-App-Kommunikation |\n| [`@tuvix.js/loader`](./packages/loader) | Dynamischer Modullader |\n| [`@tuvix.js/sandbox`](./packages/sandbox) | CSS/JS-Isolation (Shadow DOM + Proxy) |\n| [`@tuvix.js/react`](./packages/react) | React 18+ Bindings und Hooks |\n| [`@tuvix.js/vue`](./packages/vue) | Vue 3 Bindings und Composables |\n| [`@tuvix.js/svelte`](./packages/svelte) | Svelte 3-5 Bindings |\n| [`@tuvix.js/angular`](./packages/angular) | Angular 15+ Bindings |\n| [`create-tuvix-app`](./packages/cli) | CLI-Scaffolding-Tool |\n| [`@tuvix.js/devtools`](./packages/devtools) | In-Page-Debug-Panel |\n| [`@tuvix.js/server`](./packages/server) | Serverseitige Komposition |\n| [`@tuvix.js/module-federation`](./packages/module-federation) | Webpack Module Federation Integration |\n\n---\n\n## 📁 Projektstruktur\n\n```\ntuvix.js/\n├── packages/\n│   ├── core/               # @tuvix.js/core\n│   ├── router/             # @tuvix.js/router\n│   ├── event-bus/          # @tuvix.js/event-bus\n│   ├── loader/             # @tuvix.js/loader\n│   ├── sandbox/            # @tuvix.js/sandbox\n│   ├── react/              # @tuvix.js/react\n│   ├── vue/                # @tuvix.js/vue\n│   ├── svelte/             # @tuvix.js/svelte\n│   ├── angular/            # @tuvix.js/angular\n│   ├── cli/                # create-tuvix-app\n│   ├── devtools/           # @tuvix.js/devtools\n│   ├── server/             # @tuvix.js/server\n│   ├── module-federation/  # @tuvix.js/module-federation\n│   └── tuvix/              # tuvix.js (Dachpaket)\n├── examples/\n│   ├── with-angular/              # Angular 15+ Beispiel\n│   ├── with-module-federation-react/ # Module Federation + React Beispiel\n│   ├── with-multiple-frameworks/  # Mehrere Frameworks Beispiel\n│   ├── with-react/                # React 18+ Beispiel\n│   ├── with-react-devtools/       # React + DevTools Beispiel\n│   ├── with-react-event-bus/      # React + Event Bus Beispiel\n│   ├── with-react-router/         # React + Router Beispiel\n│   ├── with-react-sandbox/        # React + Sandbox Beispiel\n│   ├── with-ssr-react/            # SSR + React Beispiel\n│   ├── with-ssr-vanilla/          # SSR + Vanilla JS Beispiel\n│   ├── with-svelte/               # Svelte 5 Beispiel\n│   ├── with-vanilla/              # Vanilla JS Beispiel\n│   └── with-vue/                  # Vue 3 Beispiel\n├── website/                # Dokumentationsseite (VitePress, 10 Sprachen)\n├── .github/                # CI/CD-Workflows\n├── package.json            # Root-Workspace-Konfiguration\n├── pnpm-workspace.yaml\n├── tsconfig.base.json\n└── vitest.config.ts\n```\n\n---\n\n## 🗺️ Roadmap\n\n### ✅ Abgeschlossen\n\n- [x] Kern-Orchestrator\n- [x] Lifecycle management\n- [x] Dynamisches Modulladen\n- [x] Event-Bus\n- [x] URL-Routing mit History/Hash-Modi\n- [x] CSS/JS-Sandbox-Isolation\n- [x] CLI-Scaffolding-Tool (`npx create-tuvix-app`)\n- [x] DevTools-Browsererweiterung\n- [x] Serverseitige Komposition\n- [x] Module-Federation-Unterstützung\n- [x] Framework-Bindings (React, Vue, Svelte, Angular)\n- [x] i18n-Dokumentation (10 Sprachen)\n\n### 🔜 Demnächst\n\n- [ ] Hot Module Reload zwischen Micro-Apps\n- [ ] Adapter für gemeinsames State-Management\n- [ ] Preloading- und Prefetching-Strategien\n- [ ] Plugin-System und Middleware-API\n- [ ] Visueller Abhängigkeitsgraph in DevTools\n- [ ] Test-Utilities und Mock-Orchestrator\n- [ ] Native ESM- / Importmap-Unterstützung\n- [ ] Edge/CDN-fähige serverseitige Komposition\n- [ ] VS Code-Erweiterung für DevTools-Integration\n- [ ] Storybook-Integration zur Micro-App-Isolation\n\n---\n\n## 🧪 Beispiele\n\nSofort ausführbare Beispiele für jedes unterstützte Framework sind im Verzeichnis [`examples/`](./examples) verfügbar:\n\n| Beispiel | Framework | Pfad |\n| --- | --- | --- |\n| [Angular-Beispiel](./examples/with-angular) | Angular 15+ | `examples/with-angular/` |\n| [Module Federation + React-Beispiel](./examples/with-module-federation-react) | React 18+ | `examples/with-module-federation-react/` |\n| [Mehrere Frameworks-Beispiel](./examples/with-multiple-frameworks) | Gemischt | `examples/with-multiple-frameworks/` |\n| [React-Beispiel](./examples/with-react) | React 18+ | `examples/with-react/` |\n| [React + DevTools-Beispiel](./examples/with-react-devtools) | React 18+ | `examples/with-react-devtools/` |\n| [React + Event Bus-Beispiel](./examples/with-react-event-bus) | React 18+ | `examples/with-react-event-bus/` |\n| [React + Router-Beispiel](./examples/with-react-router) | React 18+ | `examples/with-react-router/` |\n| [React + Sandbox-Beispiel](./examples/with-react-sandbox) | React 18+ | `examples/with-react-sandbox/` |\n| [SSR + React-Beispiel](./examples/with-ssr-react) | React 18+ | `examples/with-ssr-react/` |\n| [SSR + Vanilla JS-Beispiel](./examples/with-ssr-vanilla) | Kein Framework | `examples/with-ssr-vanilla/` |\n| [Svelte-Beispiel](./examples/with-svelte) | Svelte 5 | `examples/with-svelte/` |\n| [Vanilla JS-Beispiel](./examples/with-vanilla) | Kein Framework | `examples/with-vanilla/` |\n| [Vue-Beispiel](./examples/with-vue) | Vue 3 | `examples/with-vue/` |\n\nJedes Beispiel zeigt:\n\n- Eine **Shell-(Host-)Anwendung**, die den Orchestrator startet\n- Zwei **Micro-Frontend-Apps**, die dynamisch registriert und geladen werden\n- Inter-App-Kommunikation über den Event-Bus\n\n---\n\n## 🤝 Mitwirken\n\nBeiträge sind willkommen! Bitte lies den [Leitfaden zum Mitwirken](./CONTRIBUTING.md), bevor du einen PR einreichst.\n\n```bash\n# Repository klonen\ngit clone https://github.com/yasinatesim/tuvix.js.git\n\n# Abhängigkeiten installieren\npnpm install\n\n# Alle Pakete bauen\npnpm build\n\n# Tests ausführen\npnpm test\n```\n\n---\n\n## 🔑 Lizenz\n\nCopyright © 2026 - MIT-Lizenz.\nSiehe [LICENSE](./LICENSE) für weitere Informationen.\n\n---\n\n\u003cp align=\"center\"\u003eDiese README wurde von \u003ca href=\"https://github.com/yasinatesim/markdown-manager\"\u003emarkdown-manager\u003c/a\u003e generiert 🥲\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyasinatesim%2Ftuvix.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyasinatesim%2Ftuvix.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyasinatesim%2Ftuvix.js/lists"}