@storix-js/sync 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,22 @@
+# @storix-js/sync
+
+Cross-tab synchronization plugin for Storix.
+
+## Install
+
+```bash
+npm install @storix-js/core @storix-js/sync
+```
+
+## Usage
+
+```ts
+import { createStorix } from '@storix-js/core';
+import { syncPlugin } from '@storix-js/sync';
+
+const storix = createStorix({
+  plugins: [syncPlugin({ debounce: 16, namespaces: ['shell-app'] })]
+});
+```
+
+The plugin uses `BroadcastChannel` when available and falls back to the `storage` event.

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "@storix-js/sync",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -19,6 +26,6 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@storix-js/core": "workspace:*"
+    "@storix-js/core": "^0.1.1"
   }
 }

package/src/index.ts

@@ -1,161 +0,0 @@
-import { definePlugin, type MutationPayload } from '@storix-js/core';
-
-export interface SyncPluginOptions {
-  channelName?: string;
-  include?: string[];
-  exclude?: string[];
-  namespaces?: string[] | '*';
-  conflict?: 'last-write-wins';
-  debounce?: number;
-}
-
-type ScopedStore = {
-  $id: string;
-  $namespace: string;
-  $scopeId: string;
-  $patch: (patch: Record<string, unknown>, origin?: 'local' | 'remote') => void;
-};
-
-export function syncPlugin(options: SyncPluginOptions = {}) {
-  const channelName = options.channelName ?? 'storix-sync';
-  const include = new Set(options.include ?? []);
-  const exclude = new Set(options.exclude ?? []);
-  const namespaceSelection = options.namespaces ?? [];
-  const allowedNamespaces = namespaceSelection === '*' ? null : new Set(namespaceSelection);
-  const debounceMs = options.debounce ?? 16;
-  const tabId = crypto.randomUUID();
-  const storageEventKey = `__storix_sync__:${channelName}`;
-  const queued = new Map<string, MutationPayload>();
-  const activeStoreIds = new Set<string>();
-  const messageHandlers = new Map<string, (event: MessageEvent<unknown>) => void>();
-  const storageHandlers = new Map<string, (event: StorageEvent) => void>();
-
-  let flushTimer: ReturnType<typeof setTimeout> | null = null;
-  const channel = typeof window !== 'undefined' && 'BroadcastChannel' in window
-    ? new BroadcastChannel(channelName)
-    : null;
-
-  const shouldSyncStore = (store: ScopedStore) => {
-    const ids = [store.$id, store.$scopeId];
-    if (ids.some((value) => exclude.has(value))) return false;
-    if (include.size > 0 && !ids.some((value) => include.has(value))) return false;
-    return true;
-  };
-
-  const shouldAcceptNamespace = (targetNamespace: string, sourceNamespace: string) => {
-    if (sourceNamespace === targetNamespace) return true;
-    if (allowedNamespaces === null) return true;
-    return allowedNamespaces.has(sourceNamespace);
-  };
-
-  const processIncomingMessage = (store: ScopedStore, payload: MutationPayload & { originTabId?: string }) => {
-    if (!payload || payload.originTabId === tabId) return;
-    if (!shouldAcceptNamespace(store.$namespace, payload.namespace)) return;
-    if (payload.storeId !== store.$id) return;
-    if (!shouldSyncStore(store)) return;
-    store.$patch({ [payload.key]: payload.newValue }, 'remote');
-  };
-
-  const flush = () => {
-    flushTimer = null;
-    if (queued.size === 0) return;
-
-    const payloads = Array.from(queued.values());
-    queued.clear();
-
-    for (const payload of payloads) {
-      const message = {
-        ...payload,
-        originTabId: tabId
-      };
-
-      if (channel) {
-        channel.postMessage(message);
-      }
-
-      if (typeof window !== 'undefined' && 'localStorage' in window) {
-        try {
-          window.localStorage.setItem(storageEventKey, JSON.stringify(message));
-          window.localStorage.removeItem(storageEventKey);
-        } catch {
-          // Ignore quota/security exceptions.
-        }
-      }
-    }
-  };
-
-  const queue = (payload: MutationPayload) => {
-    queued.set(`${payload.scopeId}:${payload.key}`, payload);
-
-    if (debounceMs <= 0) {
-      flush();
-      return;
-    }
-
-    if (!flushTimer) {
-      flushTimer = setTimeout(flush, debounceMs);
-    }
-  };
-
-  return definePlugin({
-    name: 'sync',
-    onInit(store) {
-      const scopedStore = store as ScopedStore;
-      if (!shouldSyncStore(scopedStore)) return;
-      activeStoreIds.add(scopedStore.$scopeId);
-
-      if (channel) {
-        const messageHandler = (event: MessageEvent<unknown>) => {
-          processIncomingMessage(scopedStore, event.data as MutationPayload & { originTabId?: string });
-        };
-        messageHandlers.set(scopedStore.$scopeId, messageHandler);
-        channel.addEventListener('message', messageHandler);
-      }
-
-      if (typeof window !== 'undefined') {
-        const storageHandler = (event: StorageEvent) => {
-          if (event.key !== storageEventKey || !event.newValue) return;
-          try {
-            const payload = JSON.parse(event.newValue) as MutationPayload & { originTabId?: string };
-            processIncomingMessage(scopedStore, payload);
-          } catch {
-            // Ignore malformed payloads.
-          }
-        };
-        storageHandlers.set(scopedStore.$scopeId, storageHandler);
-        window.addEventListener('storage', storageHandler);
-      }
-    },
-    onMutation(store, mutation) {
-      if (mutation.origin === 'remote') return;
-      if (!shouldSyncStore(store as ScopedStore)) return;
-      queue(mutation);
-    },
-    onDispose(store) {
-      const scopedStore = store as ScopedStore;
-      activeStoreIds.delete(scopedStore.$scopeId);
-
-      const messageHandler = messageHandlers.get(scopedStore.$scopeId);
-      if (channel && messageHandler) {
-        channel.removeEventListener('message', messageHandler);
-        messageHandlers.delete(scopedStore.$scopeId);
-      }
-
-      const storageHandler = storageHandlers.get(scopedStore.$scopeId);
-      if (typeof window !== 'undefined' && storageHandler) {
-        window.removeEventListener('storage', storageHandler);
-        storageHandlers.delete(scopedStore.$scopeId);
-      }
-
-      if (flushTimer) {
-        clearTimeout(flushTimer);
-        flushTimer = null;
-      }
-      flush();
-
-      if (activeStoreIds.size === 0) {
-        channel?.close();
-      }
-    }
-  });
-}

package/tsconfig.build.json

@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "dist",
-    "paths": {}
-  }
-}

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["src"]
-}

package/vite.config.ts

@@ -1,15 +0,0 @@
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: 'src/index.ts',
-      name: 'StorixSync',
-      fileName: 'index',
-      formats: ['es', 'cjs']
-    }
-  },
-  test: {
-    environment: 'node'
-  }
-});