🌐 Universal State Protocol (USP)

Frameworks divide, USP unites.

Universal State Protocol, modern web uygulamalarında framework bağımsız (agnostic), merkezi ve yüksek performanslı bir durum yönetimi protokolüdür. React, Vue, Angular veya Svelte kullanmanız fark etmeksizin; USP, tüm mikro-uygulamalarınızın (Micro-frontends) tek bir "kaynak doğruluk noktası" (Source of Truth) üzerinden haberleşmesini sağlar.

🚀 Vizyon: Sınırsız Birlikte Çalışabilirlik

Geleneksel state yönetim araçları (Redux, Pinia, vb.) belirli bir framework'e hapsolmuştur. USP ise bu sınırı ortadan kaldırır:

• Framework Agnostic: Bir React bileşenindeki state değişimi, bir Vue grafiğini veya bir Angular formunu anında günceller.
• Zero-Latency Communication: Custom Events ve Proxy Pattern kullanarak framework overhead'lerini (ek yüklerini) bypass eder.
• Micro-Frontend Ready: Bağımsız ekipler tarafından geliştirilen mikro-uygulamalar arasında tutarlı bir veri akışı sağlar.

✨ Öne Çıkan Özellikler

• Reactive Proxying: State üzerindeki değişimler JavaScript Proxy ile izlenir; sadece değişen kısım (fine-grained) ilgili bileşenlere duyurulur.
• Event-Driven Architecture: Tarayıcı seviyesinde CustomEvents kullanarak en düşük gecikmeyle veri aktarımı sağlar.
• Middleware Support: State değişimlerini loglamak, persist (kalıcı) hale getirmek veya asenkron işlemleri yönetmek için genişletilebilir yapı.
• Shadow DOM Compatibility: Web Components ile tam uyumlu çalışarak izolasyon sorunlarını ortadan kaldırır.

🛠️ Teknoloji Yığını

• Core: Vanilla JavaScript (ES6+ Proxy API).
• Communication: DOM Custom Events API.
• Architecture: Observer Pattern & Pub/Sub.
• Testing: Playwright (Çapraz framework etkileşim testleri için).

🏗️ Nasıl Çalışır?

1. Protocol Initialization: USP, ana konteyner (host) üzerinde başlatılır ve global bir StateBus oluşturur.
2. Registration: Mikro-uygulamalar, ihtiyaç duydukları state anahtarlarına (keys) abone (subscribe) olur.
3. Proxy Tracking: Herhangi bir framework içinden gelen state değişikliği USP Proxy'si tarafından yakalanır.
4. Broadcast: Değişim, bir CustomEvent aracılığıyla tüm kayıtlı abonelere (framework fark etmeksizin) iletilir ve ilgili bileşenlerin render fonksiyonları tetiklenir.

📖 Kullanım Örneği

React (Dispatcher):

import { usp } from '@universal-state/core';

const IncrementButton = () => (
  <button onClick={() => usp.set('count', usp.get('count') + 1)}>
    Increase Global Count
  </button>
);

Vue (Listener):

<script setup>
import { useUSP } from '@universal-state/vue';
const count = useUSP('count'); // React'ten gelen değişim anında buraya yansır
</script>

<template>
  <div>Global Counter: {{ count }}</div>
</template>

🛠️ Kurulum

# Çekirdek protokolü yükleyin
npm install @universal-state/core

# Framework adaptörlerini yükleyin (Opsiyonel)
npm install @universal-state/react @universal-state/vue