react-mirrorstate 0.1.0-alpha.0

package/dist/connection-manager.d.ts

@@ -0,0 +1,22 @@
+type StateListener = (state: any) => void;
+declare class WebSocketConnectionManager {
+    private ws;
+    private isConnecting;
+    private listeners;
+    private currentStates;
+    private initialized;
+    private getWebSocketConfig;
+    private buildWebSocketURL;
+    connect(): Promise<void>;
+    getInlinedInitialStates(): Promise<Record<string, any>>;
+    loadInitialStateFromInline(name: string): Promise<any>;
+    subscribe(name: string, listener: StateListener): () => void;
+    private lastSentState;
+    private pendingUpdates;
+    updateState(name: string, state: any): void;
+    isInitialized(name: string): boolean;
+    getCurrentState(name: string): any;
+    private notifyListeners;
+}
+export declare const connectionManager: WebSocketConnectionManager;
+export {};

package/dist/connection-manager.js

@@ -0,0 +1,168 @@
+import debug from "debug";
+const logger = debug("mirrorstate:ws-manager");
+class WebSocketConnectionManager {
+    ws = null;
+    isConnecting = false;
+    listeners = new Map();
+    currentStates = new Map();
+    initialized = new Set();
+    getWebSocketConfig() {
+        try {
+            const config = require("virtual:mirrorstate/config");
+            return config;
+        }
+        catch {
+            return { WS_PATH: "/mirrorstate" };
+        }
+    }
+    buildWebSocketURL(path) {
+        if (typeof window === "undefined") {
+            return `ws://localhost:5173${path}`;
+        }
+        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        const host = window.location.host;
+        return `${protocol}//${host}${path}`;
+    }
+    async connect() {
+        if (this.ws?.readyState === WebSocket.OPEN || this.isConnecting) {
+            return;
+        }
+        if (process.env.NODE_ENV === "production") {
+            // In production, don't create WebSocket but still allow loading initial state
+            return;
+        }
+        this.isConnecting = true;
+        const config = this.getWebSocketConfig();
+        const wsUrl = this.buildWebSocketURL(config.WS_PATH);
+        logger(`Connecting to ${wsUrl}`);
+        this.ws = new WebSocket(wsUrl);
+        this.ws.onopen = () => {
+            this.isConnecting = false;
+            logger("WebSocket connected");
+        };
+        this.ws.onclose = () => {
+            this.isConnecting = false;
+            this.ws = null;
+            logger("WebSocket closed");
+        };
+        this.ws.onerror = () => {
+            this.isConnecting = false;
+            this.ws = null;
+            console.error("WebSocket error");
+        };
+        this.ws.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.type === "initialState") {
+                    this.currentStates.set(data.name, data.state);
+                    this.initialized.add(data.name);
+                    this.notifyListeners(data.name, data.state);
+                    logger(`Initial state loaded: ${data.name}`, data.state);
+                }
+                if (data.type === "fileChange") {
+                    this.currentStates.set(data.name, data.state);
+                    this.notifyListeners(data.name, data.state);
+                    logger(`State updated: ${data.name}`, data.state);
+                }
+            }
+            catch (error) {
+                console.error("Error handling server message:", error);
+            }
+        };
+    }
+    async getInlinedInitialStates() {
+        try {
+            // Import the virtual module with inlined states
+            const module = await import("virtual:mirrorstate/initial-states");
+            return module.INITIAL_STATES || {};
+        }
+        catch (error) {
+            logger("Failed to load virtual module:", error);
+            return {};
+        }
+    }
+    async loadInitialStateFromInline(name) {
+        // Always try to load inlined states - both in dev and production
+        const inlinedStates = await this.getInlinedInitialStates();
+        const state = inlinedStates[name];
+        if (state !== undefined) {
+            this.currentStates.set(name, state);
+            this.initialized.add(name);
+            logger(`Loaded inlined initial state: ${name}`, state);
+            return state;
+        }
+        return undefined;
+    }
+    subscribe(name, listener) {
+        if (!this.listeners.has(name)) {
+            this.listeners.set(name, new Set());
+        }
+        this.listeners.get(name).add(listener);
+        // Connect if not already connected (dev mode)
+        this.connect();
+        // If we already have state for this name, notify immediately
+        if (this.currentStates.has(name)) {
+            listener(this.currentStates.get(name));
+        }
+        else {
+            // Try to load from inlined states (production) or wait for WebSocket (dev)
+            this.loadInitialStateFromInline(name).then((state) => {
+                if (state !== undefined) {
+                    this.notifyListeners(name, state);
+                }
+            });
+        }
+        return () => {
+            const nameListeners = this.listeners.get(name);
+            if (nameListeners) {
+                nameListeners.delete(listener);
+                if (nameListeners.size === 0) {
+                    this.listeners.delete(name);
+                }
+            }
+        };
+    }
+    lastSentState = new Map();
+    pendingUpdates = new Map();
+    updateState(name, state) {
+        if (this.ws?.readyState !== WebSocket.OPEN) {
+            return;
+        }
+        // Cancel any pending update for this state name
+        const pendingUpdate = this.pendingUpdates.get(name);
+        if (pendingUpdate) {
+            clearTimeout(pendingUpdate);
+        }
+        // Check if this is actually a different state
+        const lastState = this.lastSentState.get(name);
+        if (lastState === state) {
+            logger(`Skipping duplicate state update for ${name}`);
+            return;
+        }
+        // Debounce rapid updates
+        const timeout = setTimeout(() => {
+            if (!this.ws) {
+                return;
+            }
+            this.ws.send(JSON.stringify({ name, state }));
+            this.currentStates.set(name, state);
+            this.lastSentState.set(name, state);
+            this.pendingUpdates.delete(name);
+            logger(`Sent state update for ${name}`);
+        }, 10);
+        this.pendingUpdates.set(name, timeout);
+    }
+    isInitialized(name) {
+        return this.initialized.has(name);
+    }
+    getCurrentState(name) {
+        return this.currentStates.get(name);
+    }
+    notifyListeners(name, state) {
+        const nameListeners = this.listeners.get(name);
+        if (nameListeners) {
+            nameListeners.forEach((listener) => listener(state));
+        }
+    }
+}
+export const connectionManager = new WebSocketConnectionManager();

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { Draft } from "immer";
+export declare function useMirrorState<T>(name: string, initialValue: T): readonly [T, (updater: (draft: Draft<T>) => void) => void];
+export default useMirrorState;

package/dist/index.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { produce } from "immer";
+import { connectionManager } from "./connection-manager";
+export function useMirrorState(name, initialValue) {
+    const [state, setState] = useState(initialValue);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // The connection manager handles both WebSocket (dev) and inlined state (production)
+    useEffect(() => {
+        // Subscribe to state changes for this name
+        const unsubscribe = connectionManager.subscribe(name, (newState) => {
+            setState(newState);
+            setIsInitialized(true);
+        });
+        // Check if already initialized and has current state
+        if (connectionManager.isInitialized(name)) {
+            const currentState = connectionManager.getCurrentState(name);
+            if (currentState !== undefined) {
+                setState(currentState);
+                setIsInitialized(true);
+            }
+        }
+        // Set a timeout to mark as initialized even if no file exists
+        const initTimeout = setTimeout(() => {
+            if (!isInitialized && !connectionManager.isInitialized(name)) {
+                setIsInitialized(true);
+            }
+        }, 100);
+        return () => {
+            unsubscribe();
+            clearTimeout(initTimeout);
+        };
+    }, [name, isInitialized]);
+    const updateMirrorState = (updater) => {
+        setState((prevState) => {
+            const newState = produce(prevState, updater);
+            connectionManager.updateState(name, newState);
+            return newState;
+        });
+    };
+    return [state, updateMirrorState];
+}
+export default useMirrorState;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "react-mirrorstate",
+  "version": "0.1.0-alpha.0",
+  "description": "React library for bidirectional state synchronization with MirrorState",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "react",
+    "state",
+    "sync",
+    "mirrorstate"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "debug": "^4.4.1",
+    "immer": "^10.0.3"
+  },
+  "devDependencies": {
+    "@types/debug": "^4.1.12",
+    "@types/react": "^18.2.43",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}