react-mirrorstate 0.1.0 → 0.2.0

package/README.md

@@ -1,10 +1,8 @@
 # `react-mirrorstate`
 
-React hook for bi-directional state synchronization in JSON on disk.
+React hook for bi-directional state synchronization with JSON files on disk.
 
-Requires Vite and `vite-plugin-mirrorstate` plugin.
-
-Changes made in the UI are reflected on disk, and changes on disk propagate to the UI.
+**Note:** Both `react-mirrorstate` and `vite-plugin-mirrorstate` are required to use MirrorState.
 
 ## Installation
 
@@ -12,70 +10,10 @@ Changes made in the UI are reflected on disk, and changes on disk propagate to t
 npm install react-mirrorstate vite-plugin-mirrorstate
 ```
 
-## Example
-
-Create a `state.mirror.json` file:
-
-```json
-{
-  "count": 20,
-  "message": "Hello World"
-}
-```
-
-Start `vite` with `vite-plugin-mirrorstate` enabled:
-
-```typescript
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import mirrorstate from "vite-plugin-mirrorstate";
-
-export default defineConfig({
-  plugins: [react(), mirrorstate()],
-});
-```
-
-Set up a React component:
+## Documentation
 
-```tsx
-import { useMirrorState } from "react-mirrorstate";
-
-function App() {
-  const [state, updateState] = useMirrorState("state", {
-    count: 0,
-    message: "",
-  });
-
-  return (
-    <div>
-      <p>
-        {state.message}: {state.count}
-      </p>
-      <button
-        onClick={() =>
-          updateState((draft) => {
-            draft.count++;
-          })
-        }
-      >
-        Increment
-      </button>
-    </div>
-  );
-}
-```
-
-## API: `useMirrorState([key], [initialState])`
-
-- `key`: String identifier for the state file (without `.mirror.json` extension)
-- `initialState`: Default state if no persisted state exists
-
-Returns `[state, updateState]` similar to React's `useState`, but:
-
-- `state` is synchronized with `[key].mirror.json` file
-- `updateState` accepts an Immer draft function for mutations
+For full documentation, examples, and API reference, see the [main MirrorState repository](https://github.com/szymonkaliski/mirrorstate).
 
 ## License
 
 MIT
-

package/dist/connection-manager.d.ts

@@ -4,17 +4,13 @@ declare class WebSocketConnectionManager {
     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;
 }

package/dist/connection-manager.js

@@ -5,7 +5,6 @@ class WebSocketConnectionManager {
     isConnecting = false;
     listeners = new Map();
     currentStates = new Map();
-    initialized = new Set();
     getWebSocketConfig() {
         try {
             const config = require("virtual:mirrorstate/config");
@@ -55,7 +54,6 @@ class WebSocketConnectionManager {
                 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);
                 }
@@ -70,29 +68,6 @@ class WebSocketConnectionManager {
             }
         };
     }
-    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());
@@ -104,14 +79,6 @@ class WebSocketConnectionManager {
         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) {
@@ -152,9 +119,6 @@ class WebSocketConnectionManager {
         }, 10);
         this.pendingUpdates.set(name, timeout);
     }
-    isInitialized(name) {
-        return this.initialized.has(name);
-    }
     getCurrentState(name) {
         return this.currentStates.get(name);
     }

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,35 +1,26 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { produce } from "immer";
 import { connectionManager } from "./connection-manager";
+import { INITIAL_STATES } from "virtual:mirrorstate/initial-states";
 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)
+    const [state, setState] = useState(() => INITIAL_STATES?.[name] ?? initialValue);
+    const hasCreatedFile = useRef(false);
     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);
-            }
+        // If file doesn't exist and initialValue was provided, create it
+        if (INITIAL_STATES?.[name] === undefined &&
+            initialValue !== undefined &&
+            !hasCreatedFile.current) {
+            hasCreatedFile.current = true;
+            connectionManager.updateState(name, initialValue);
         }
-        // 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]);
+    }, [name, initialValue]);
     const updateMirrorState = (updater) => {
         setState((prevState) => {
             const newState = produce(prevState, updater);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mirrorstate",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React library for bidirectional state synchronization with MirrorState",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,6 +16,11 @@
   ],
   "author": "",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/szymonkaliski/mirrorstate.git",
+    "directory": "packages/react-mirrorstate"
+  },
   "dependencies": {
     "debug": "^4.4.1",
     "immer": "^10.0.3"