Tuvix.js

Türkçe

English
Español
Deutsch
Français
日本語
中文
Italiano
Português
हिन्दी

Türkçe

English
Español
Deutsch
Français
日本語
中文
Italiano
Português
हिन्दी

Appearance

Tuvix.js logosu

Çok sayıda uygulama. Tek bir deneyim.

Tuvix.js; React, Vue, Svelte, Angular ve vanilla JS mikro uygulamalarını tek bir host sayfaya mount eder. Yönlendirme, event bus, sandbox ve sunucu tarafı render ayrı paketler olarak gelir, ihtiyaç duyduğunuzda eklersiniz.

BaşlarkenPlayground'u deneyin
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();
Host shell
URL/dashboard/overview
  • React 18+mount edildiname: 'dashboard'activeWhen: '/dashboard/*'
  • Vue 3name: 'catalog'activeWhen: '/shop/*'
  • Svelte 3–5name: 'checkout'activeWhen: '/checkout/*'
  • Angular 15+name: 'settings'activeWhen: '/settings/*'
Ortak event bus@tuvix.js/event-bus

Tuvix.js ile gelenler

Sekiz yapı taşı. Temel beşliyi almak için tuvix.js şemsiye paketini kurun ya da shell'iniz büyüdükçe tek tek paket ekleyin.

  • Framework'ten bağımsız

    React, Vue, Svelte, Angular ve vanilla JS mikro uygulamalarını tek bir shell'de yan yana çalıştırın.

    Mikro uygulama rehberi

  • Üçüncü parti runtime bağımlılığı yok

    Her paket yalnızca diğer @tuvix.js paketlerine bağımlıdır. Sadece import ettiğiniz paketleri kurarsınız.

    Tüm paketler

  • Yerleşik yönlendirme

    Router, URL değiştikçe uygulamaları history veya hash modunda mount ve unmount eder.

    @tuvix.js/router

  • Event bus

    Uygulamalar global değişken paylaşmadan tipli olaylar yayınlar ve bu olaylara abone olur.

    @tuvix.js/event-bus

  • CSS ve JS sandbox

    Shadow DOM her uygulamanın stillerini kendi container'ı içinde tutar. JsSandbox bir script'i, işiniz bitince atabileceğiniz bir Proxy window üzerinde çalıştırır.

    @tuvix.js/sandbox

  • Dinamik yükleme

    Loader, uygulama bundle'larını ihtiyaç anında indirir, önbelleğe alır ve başarısız yüklemeleri yeniden dener.

    @tuvix.js/loader

  • DevTools

    Sayfa içi panel kayıtlı uygulamaları, aktif route'u ve event bus trafiğini listeler.

    @tuvix.js/devtools

  • Sunucu tarafı render

    Mikro uygulamaları sunucuda render edin ve HTML'lerini shell şablonuna string ya da stream olarak yerleştirin.

    @tuvix.js/server

Framework'ünüzü seçin

Her adaptör bir bileşeni, orchestrator'ın mount, update ve unmount edebildiği bir mikro uygulamaya dönüştürür.

  • React

    createReactMicroApp bir bileşeni sarar. useTuvixProps ve useTuvixBus props'ları ve olayları okur.

    npm i @tuvix.js/react

  • Vue

    createVueMicroApp bir Vue 3 uygulamasını mount eder. Props ve event bus için composable'lar sunar.

    npm i @tuvix.js/vue

  • Svelte

    createSvelteMicroApp Svelte 3, 4 ve 5 bileşenlerini mount eder.

    npm i @tuvix.js/svelte

  • Angular

    createAngularMicroApp bir Angular 15+ bileşenini kendi container'ına bootstrap eder.

    npm i @tuvix.js/angular

  • Vanilla JS

    defineMicroApp düz JavaScript'e mount, unmount ve update hook'ları verir.

    npm i @tuvix.js/core

Her biri kendi sürümüne sahip 15 paket

Şemsiye paketle başlayın. Daha küçük bir kurulum istediğinizde tek tek paketlere geçin.

  • tuvix.js

    Core, router, event bus, loader ve sandbox'ı içeren şemsiye paket.

  • @tuvix.js/core

    Orchestrator. Mikro uygulamaları kaydeder ve lifecycle'larını yürütür.

  • @tuvix.js/router

    Mikro uygulamaları URL'ye göre history veya hash modunda aktifleştirir.

  • @tuvix.js/event-bus

    Mikro uygulamalar arasında tipli publish/subscribe.

  • @tuvix.js/loader

    Uygulama bundle'larını ihtiyaç anında, önbellek ve yeniden deneme ile yükler.

  • @tuvix.js/sandbox

    Shadow DOM ile CSS izolasyonu, Proxy ile JS izolasyonu.

  • @tuvix.js/server

    Host sayfa için sunucu tarafı birleştirme ve streaming.

  • @tuvix.js/module-federation

    Mikro uygulamaları Webpack Module Federation remote'larından yükler.

  • @tuvix.js/devtools

    Uygulamalar, route'lar ve olaylar için sayfa içi debug paneli.

  • @tuvix.js/react

    React adaptörü, hook'lar ve sunucu tarafı render yardımcıları.

  • @tuvix.js/vue

    Vue 3 adaptörü, composable'lar ve sunucu tarafı render yardımcıları.

  • @tuvix.js/svelte

    Sunucu tarafı render desteğiyle Svelte adaptörü.

  • @tuvix.js/angular

    Sunucu tarafı render desteğiyle Angular adaptörü.

  • @tuvix.js/vite

    Island CSS'ini ve modulepreload linklerini SSR head'ine ekleyen Vite eklentisi. Sunucuda render edilen mikro uygulamalar ilk boyamada stilli gelir.

  • create-tuvix-app

    Komut satırından yeni bir host ve mikro uygulama projesi iskeleti oluşturur.