@couch-kit/client 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # @couch-kit/client
 
+## 0.4.1
+
+### Patch Changes
+
+- e763b56: Performance and dependency/bundle improvements
+
+  **Dependency cleanup:**
+  - Remove unused root-level dependencies (expo-\*, @react-native/assets-registry, js-sha1)
+  - Move `buffer` from root to @couch-kit/host where it's actually used
+  - Move `react-native-nitro-modules` to peerDependencies in @couch-kit/host
+  - Remove unused `chalk` dependency from @couch-kit/cli
+  - Replace `fs-extra`, `ora`, and `ws` with built-in alternatives in @couch-kit/cli
+
+  **Bundle & tree-shaking:**
+  - Add `sideEffects: false` to all library packages for better tree-shaking
+  - Add modern `exports` field to all package.json files
+  - Fix @couch-kit/core build target from `node` to `browser` (it's environment-agnostic)
+
+  **Runtime performance:**
+  - Throttle state broadcasts to ~30fps to reduce serialization overhead for fast-updating games
+  - Replace per-event `Buffer.concat` with a growing buffer strategy in WebSocket server to reduce GC pressure
+  - Replace deprecated `Buffer.slice()` with `Buffer.subarray()`
+
+  **CLI improvements:**
+  - Lazy-load CLI commands via dynamic `import()` for faster startup
+  - Replace `ws` with Bun's native WebSocket
+  - Replace `fs-extra` with `node:fs` built-in APIs
+  - Replace `ora` with simple console output
+
+- Updated dependencies [e763b56]
+  - @couch-kit/core@0.3.1
+
+## 0.4.0
+
+### Minor Changes
+
+- e31e980: Comprehensive code audit: security, correctness, performance, and type safety improvements
+
+  **Core:**
+  - Add shared constants module (ports, timeouts, frame limits, reconnection defaults)
+  - Add `generateId()` utility using cryptographic randomness instead of `Math.random()`
+  - Add `toErrorMessage()` for safe error extraction from unknown caught values
+  - Add `InternalAction` type union and `InternalActionTypes` constants for `__HYDRATE__`, `__PLAYER_JOINED__`, `__PLAYER_LEFT__`
+  - Update `createGameReducer()` to handle all internal actions with proper types (no more double-casts)
+  - Expand reducer tests from 2 to 7 cases
+
+  **Host:**
+  - Rewrite `EventEmitter` as a generic class with full type safety on `on`/`off`/`once`/`emit`
+  - Add WebSocket `maxFrameSize` enforcement to prevent OOM attacks
+  - Add server-side keepalive pings to detect dead connections
+  - Use `ManagedSocket` interface instead of mutating raw socket objects
+  - Add graceful `stop()` with WebSocket close frames
+  - Safe `broadcast()` and `send()` with per-socket error handling
+  - Add client message validation and internal action injection prevention in provider
+  - Fix WELCOME race condition using `queueMicrotask()`
+  - Memoize context value to prevent unnecessary consumer re-renders
+  - Add `loading` state to server hook
+
+  **Client:**
+  - Add configurable reconnection with `maxRetries`, `baseDelay`, `maxDelay` props
+  - Fix stale closures via `configRef` pattern
+  - Add `disconnect()` and `reconnect()` methods
+  - Respect WebSocket close codes (1008, 1011 skip reconnection)
+  - Add ping map TTL cleanup to prevent unbounded growth in time sync
+  - Fix `usePreload` error swallowing — track and report `failedAssets`
+  - Replace `JSON.stringify(assets)` dependency with stable ref comparison
+
+  **CLI:**
+  - Replace unsafe `(e as Error).message` casts with `toErrorMessage()`
+  - Fix interval leak in simulate command — clear intervals on SIGINT
+
+### Patch Changes
+
+- Updated dependencies [e31e980]
+  - @couch-kit/core@0.3.0
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -136,7 +136,7 @@ import { usePreload } from "@couch-kit/client";
 const ASSETS = ["/images/avatar_1.png", "/sounds/buzz.mp3"];
 
 function App() {
-  const { loaded, progress } = usePreload(ASSETS);
+  const { loaded, progress, failedAssets } = usePreload(ASSETS);
 
   if (!loaded) {
     return <div>Loading... {Math.round(progress)}%</div>;
@@ -148,4 +148,4 @@ function App() {
 
 ## Notes / Limitations
 
-- `usePreload()` preloads images via `Image()` and uses `fetch()` for other URLs; it does not currently send the protocol `ASSETS_LOADED` message.
+- `usePreload()` preloads images via `Image()` and uses `fetch()` for other URLs; it does not currently send the protocol `ASSETS_LOADED` message. Failed assets are available via `failedAssets`.

package/dist/index.js

@@ -1831,14 +1831,51 @@ var require_react = __commonJS((exports, module) => {
 var import_react2 = __toESM(require_react(), 1);
 
 // ../core/src/types.ts
+var InternalActionTypes = {
+  HYDRATE: "__HYDRATE__",
+  PLAYER_JOINED: "__PLAYER_JOINED__",
+  PLAYER_LEFT: "__PLAYER_LEFT__"
+};
 function createGameReducer(reducer) {
   return (state, action) => {
-    if (action.type === "HYDRATE" && action.payload) {
-      return action.payload;
+    switch (action.type) {
+      case InternalActionTypes.HYDRATE:
+        return action.payload;
+      case InternalActionTypes.PLAYER_JOINED: {
+        const { id, name, avatar } = action.payload;
+        return {
+          ...state,
+          players: {
+            ...state.players,
+            [id]: {
+              id,
+              name,
+              avatar,
+              isHost: false,
+              connected: true
+            }
+          }
+        };
+      }
+      case InternalActionTypes.PLAYER_LEFT: {
+        const { playerId } = action.payload;
+        const player = state.players[playerId];
+        if (!player)
+          return state;
+        return {
+          ...state,
+          players: {
+            ...state.players,
+            [playerId]: { ...player, connected: false }
+          }
+        };
+      }
+      default:
+        return reducer(state, action);
     }
-    return reducer(state, action);
   };
 }
+
 // ../core/src/protocol.ts
 var MessageTypes = {
   JOIN: "JOIN",
@@ -1851,6 +1888,29 @@ var MessageTypes = {
   RECONNECTED: "RECONNECTED",
   ERROR: "ERROR"
 };
+
+// ../core/src/constants.ts
+var DEFAULT_WS_PORT_OFFSET = 2;
+var MAX_FRAME_SIZE = 1024 * 1024;
+var DEFAULT_MAX_RETRIES = 5;
+var DEFAULT_BASE_DELAY = 1000;
+var DEFAULT_MAX_DELAY = 1e4;
+var DEFAULT_SYNC_INTERVAL = 5000;
+var MAX_PENDING_PINGS = 50;
+function generateId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    return Array.from(bytes).map((b2) => b2.toString(16).padStart(2, "0")).join("");
+  }
+  const a = Math.random().toString(36).substring(2, 15);
+  const b = Math.random().toString(36).substring(2, 10);
+  return a + b;
+}
+
 // src/time-sync.ts
 var import_react = __toESM(require_react(), 1);
 function calculateTimeSync(clientSendTime, clientReceiveTime, serverTime) {
@@ -1882,7 +1942,12 @@ function useServerTime(socket) {
     if (!socket || socket.readyState !== WebSocket.OPEN)
       return;
     const sync = () => {
-      const id = Math.random().toString(36).substring(7);
+      if (pings.current.size >= MAX_PENDING_PINGS) {
+        const oldest = pings.current.keys().next().value;
+        if (oldest !== undefined)
+          pings.current.delete(oldest);
+      }
+      const id = generateId();
       const timestamp = Date.now();
       pings.current.set(id, timestamp);
       socket.send(JSON.stringify({
@@ -1891,15 +1956,13 @@ function useServerTime(socket) {
       }));
     };
     sync();
-    const interval = setInterval(sync, 5000);
+    const interval = setInterval(sync, DEFAULT_SYNC_INTERVAL);
     return () => clearInterval(interval);
   }, [socket]);
   return { getServerTime, rtt: timeSync.rtt, handlePong };
 }
 
 // src/client.ts
-var MAX_RETRIES = 5;
-var BASE_DELAY = 1000;
 function useGameClient(config) {
   const [status, setStatus] = import_react2.useState("disconnected");
   const [playerId, setPlayerId] = import_react2.useState(null);
@@ -1907,45 +1970,61 @@ function useGameClient(config) {
   const socketRef = import_react2.useRef(null);
   const reconnectAttempts = import_react2.useRef(0);
   const reconnectTimer = import_react2.useRef(null);
-  const { getServerTime, handlePong } = useServerTime(socketRef.current);
+  const intentionalClose = import_react2.useRef(false);
+  const configRef = import_react2.useRef(config);
+  import_react2.useEffect(() => {
+    configRef.current = config;
+  });
+  const { getServerTime, rtt, handlePong } = useServerTime(socketRef.current);
+  const maxRetries = config.maxRetries ?? DEFAULT_MAX_RETRIES;
+  const baseDelay = config.baseDelay ?? DEFAULT_BASE_DELAY;
+  const maxDelay = config.maxDelay ?? DEFAULT_MAX_DELAY;
   const connect = import_react2.useCallback(() => {
-    let wsUrl = config.url;
+    const cfg = configRef.current;
+    intentionalClose.current = false;
+    let wsUrl = cfg.url;
     if (!wsUrl && typeof window !== "undefined") {
-      const protocol2 = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
       const host = window.location.hostname;
       const httpPort = parseInt(window.location.port, 10) || 80;
-      const wsPort = config.wsPort || httpPort + 2;
-      wsUrl = `${protocol2}//${host}:${wsPort}`;
+      const wsPort = cfg.wsPort || httpPort + DEFAULT_WS_PORT_OFFSET;
+      wsUrl = `${protocol}//${host}:${wsPort}`;
     }
     if (!wsUrl)
       return;
-    if (config.debug)
+    if (cfg.debug)
       console.log(`[GameClient] Connecting to ${wsUrl}`);
     setStatus("connecting");
     const ws = new WebSocket(wsUrl);
     socketRef.current = ws;
     ws.onopen = () => {
+      const currentCfg = configRef.current;
       setStatus("connected");
       reconnectAttempts.current = 0;
-      config.onConnect?.();
+      currentCfg.onConnect?.();
       let secret = null;
       try {
         secret = localStorage.getItem("ck_secret");
         if (!secret) {
-          secret = Math.random().toString(36).substring(2, 15);
+          secret = generateId();
           localStorage.setItem("ck_secret", secret);
         }
       } catch {
-        secret = Math.random().toString(36).substring(2, 15);
+        secret = generateId();
+      }
+      try {
+        ws.send(JSON.stringify({
+          type: MessageTypes.JOIN,
+          payload: {
+            name: currentCfg.name || "Player",
+            avatar: currentCfg.avatar || "\uD83D\uDE00",
+            secret
+          }
+        }));
+      } catch (e) {
+        if (currentCfg.debug)
+          console.error("[GameClient] Failed to send JOIN:", e);
       }
-      ws.send(JSON.stringify({
-        type: MessageTypes.JOIN,
-        payload: {
-          name: config.name || "Player",
-          avatar: config.avatar || "\uD83D\uDE00",
-          secret
-        }
-      }));
     };
     ws.onmessage = (event) => {
       try {
@@ -1953,10 +2032,16 @@ function useGameClient(config) {
         switch (msg.type) {
           case MessageTypes.WELCOME:
             setPlayerId(msg.payload.playerId);
-            dispatchLocal({ type: "HYDRATE", payload: msg.payload.state });
+            dispatchLocal({
+              type: InternalActionTypes.HYDRATE,
+              payload: msg.payload.state
+            });
             break;
           case MessageTypes.STATE_UPDATE:
-            dispatchLocal({ type: "HYDRATE", payload: msg.payload.newState });
+            dispatchLocal({
+              type: InternalActionTypes.HYDRATE,
+              payload: msg.payload.newState
+            });
             break;
           case MessageTypes.PONG:
             handlePong(msg.payload);
@@ -1966,13 +2051,17 @@ function useGameClient(config) {
         console.error("Failed to parse message", e);
       }
     };
-    ws.onclose = () => {
+    ws.onclose = (event) => {
       setStatus("disconnected");
-      config.onDisconnect?.();
-      if (reconnectAttempts.current < MAX_RETRIES) {
-        const delay = Math.min(BASE_DELAY * Math.pow(2, reconnectAttempts.current), 1e4);
+      configRef.current.onDisconnect?.();
+      if (intentionalClose.current)
+        return;
+      if (event.code === 1008 || event.code === 1011)
+        return;
+      if (reconnectAttempts.current < maxRetries) {
+        const delay = Math.min(baseDelay * Math.pow(2, reconnectAttempts.current), maxDelay);
         reconnectAttempts.current++;
-        if (config.debug)
+        if (configRef.current.debug)
           console.log(`[GameClient] Reconnecting in ${delay}ms...`);
         reconnectTimer.current = setTimeout(() => {
           connect();
@@ -1980,20 +2069,38 @@ function useGameClient(config) {
       }
     };
     ws.onerror = (e) => {
-      if (config.debug)
+      if (configRef.current.debug)
         console.error("[GameClient] Error", e);
       setStatus("error");
     };
-  }, [config.url, config.wsPort, config.debug]);
+  }, [config.url, config.wsPort, maxRetries, baseDelay, maxDelay]);
   import_react2.useEffect(() => {
     connect();
     return () => {
+      intentionalClose.current = true;
       if (socketRef.current)
         socketRef.current.close();
       if (reconnectTimer.current)
         clearTimeout(reconnectTimer.current);
     };
   }, [connect]);
+  const disconnect = import_react2.useCallback(() => {
+    intentionalClose.current = true;
+    if (reconnectTimer.current) {
+      clearTimeout(reconnectTimer.current);
+      reconnectTimer.current = null;
+    }
+    if (socketRef.current) {
+      socketRef.current.close();
+      socketRef.current = null;
+    }
+    setStatus("disconnected");
+  }, []);
+  const reconnect = import_react2.useCallback(() => {
+    disconnect();
+    reconnectAttempts.current = 0;
+    setTimeout(() => connect(), 50);
+  }, [disconnect, connect]);
   const sendAction = import_react2.useCallback((action) => {
     dispatchLocal(action);
     if (socketRef.current?.readyState === WebSocket.OPEN) {
@@ -2008,41 +2115,77 @@ function useGameClient(config) {
     state,
     playerId,
     sendAction,
-    getServerTime
+    getServerTime,
+    rtt,
+    disconnect,
+    reconnect
   };
 }
 // src/assets.ts
 var import_react3 = __toESM(require_react(), 1);
+function arraysEqual(a, b) {
+  if (a.length !== b.length)
+    return false;
+  for (let i = 0;i < a.length; i++) {
+    if (a[i] !== b[i])
+      return false;
+  }
+  return true;
+}
 function usePreload(assets) {
   const [loaded, setLoaded] = import_react3.useState(false);
   const [progress, setProgress] = import_react3.useState(0);
+  const [failedAssets, setFailedAssets] = import_react3.useState([]);
+  const prevAssets = import_react3.useRef(assets);
+  if (!arraysEqual(prevAssets.current, assets)) {
+    prevAssets.current = assets;
+  }
+  const stableAssets = prevAssets.current;
   import_react3.useEffect(() => {
-    if (assets.length === 0) {
+    if (stableAssets.length === 0) {
       setLoaded(true);
       setProgress(100);
+      setFailedAssets([]);
       return;
     }
     let loadedCount = 0;
-    const total = assets.length;
-    const onLoad = () => {
+    const total = stableAssets.length;
+    const failed = [];
+    let cancelled = false;
+    const tick = () => {
+      if (cancelled)
+        return;
       loadedCount++;
       setProgress(Math.round(loadedCount / total * 100));
       if (loadedCount === total) {
+        setFailedAssets([...failed]);
         setLoaded(true);
       }
     };
-    assets.forEach((src) => {
+    setLoaded(false);
+    setProgress(0);
+    setFailedAssets([]);
+    stableAssets.forEach((src) => {
       if (src.match(/\.(jpeg|jpg|gif|png|webp)$/)) {
         const img = new Image;
-        img.onload = onLoad;
-        img.onerror = onLoad;
+        img.onload = tick;
+        img.onerror = () => {
+          failed.push(src);
+          tick();
+        };
         img.src = src;
       } else {
-        fetch(src).then(onLoad).catch(onLoad);
+        fetch(src).then(tick).catch(() => {
+          failed.push(src);
+          tick();
+        });
       }
     });
-  }, [JSON.stringify(assets)]);
-  return { loaded, progress };
+    return () => {
+      cancelled = true;
+    };
+  }, [stableAssets]);
+  return { loaded, progress, failedAssets };
 }
 export {
   useServerTime,

package/package.json

@@ -1,9 +1,33 @@
 {
   "name": "@couch-kit/client",
-  "version": "0.3.0",
+  "version": "0.4.1",
+  "description": "React hooks for phone controllers in Couch Kit party games — WebSocket client and action dispatch",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/faluciano/react-native-couch-kit.git",
+    "directory": "packages/client"
+  },
+  "homepage": "https://github.com/faluciano/react-native-couch-kit#readme",
+  "keywords": [
+    "react",
+    "couch-kit",
+    "party-game",
+    "websocket",
+    "game-client",
+    "controller"
+  ],
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "sideEffects": false,
   "scripts": {
     "build": "bun build ./src/index.ts --outdir ./dist --target browser",
     "test": "bun test",
@@ -12,7 +36,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@couch-kit/core": "0.2.0"
+    "@couch-kit/core": "0.3.1"
   },
   "devDependencies": {
     "react": "^18.2.0",

package/src/assets.ts

@@ -1,43 +1,100 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from "react";
 
-// Simplified hook for preloading assets (images, audio)
-// Returns progress (0-100) and loaded (boolean)
-export function usePreload(assets: string[]) {
+export interface PreloadResult {
+  /** Whether all assets have finished loading (including failures). */
+  loaded: boolean;
+  /** Loading progress as a percentage (0-100). */
+  progress: number;
+  /** Asset URLs that failed to load. */
+  failedAssets: string[];
+}
+
+/**
+ * Shallow-compare two string arrays by length and element identity.
+ * Returns `true` when the arrays are considered equal.
+ */
+function arraysEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
+/**
+ * Preloads a list of asset URLs (images via `Image()`, others via `fetch()`).
+ *
+ * Returns `loaded` (all done), `progress` (0-100), and `failedAssets` (URLs
+ * that failed to load). Failed assets still count toward progress so the hook
+ * always reaches 100 % — check `failedAssets.length` to decide how to react.
+ */
+export function usePreload(assets: string[]): PreloadResult {
   const [loaded, setLoaded] = useState(false);
   const [progress, setProgress] = useState(0);
+  const [failedAssets, setFailedAssets] = useState<string[]>([]);
+
+  // Stable reference to the last asset list so we don't depend on
+  // `JSON.stringify(assets)` — which creates a new string every render.
+  const prevAssets = useRef<string[]>(assets);
+
+  // Only update the ref (and re-trigger the effect) when the content changes.
+  if (!arraysEqual(prevAssets.current, assets)) {
+    prevAssets.current = assets;
+  }
+
+  const stableAssets = prevAssets.current;
 
   useEffect(() => {
-    if (assets.length === 0) {
+    if (stableAssets.length === 0) {
       setLoaded(true);
       setProgress(100);
+      setFailedAssets([]);
       return;
     }
 
     let loadedCount = 0;
-    const total = assets.length;
+    const total = stableAssets.length;
+    const failed: string[] = [];
+    let cancelled = false;
 
-    const onLoad = () => {
+    const tick = () => {
+      if (cancelled) return;
       loadedCount++;
       setProgress(Math.round((loadedCount / total) * 100));
       if (loadedCount === total) {
+        setFailedAssets([...failed]);
         setLoaded(true);
       }
     };
 
-    assets.forEach(src => {
-        // Basic Image preloading
-        // (For Audio, we would need to use Audio() object or fetch)
-        if (src.match(/\.(jpeg|jpg|gif|png|webp)$/)) {
-            const img = new Image();
-            img.onload = onLoad;
-            img.onerror = onLoad; // Count errors as loaded to not block game
-            img.src = src;
-        } else {
-            // Assume generic fetch for other assets
-            fetch(src).then(onLoad).catch(onLoad);
-        }
+    // Reset state for a fresh load cycle
+    setLoaded(false);
+    setProgress(0);
+    setFailedAssets([]);
+
+    stableAssets.forEach((src) => {
+      if (src.match(/\.(jpeg|jpg|gif|png|webp)$/)) {
+        const img = new Image();
+        img.onload = tick;
+        img.onerror = () => {
+          failed.push(src);
+          tick();
+        };
+        img.src = src;
+      } else {
+        fetch(src)
+          .then(tick)
+          .catch(() => {
+            failed.push(src);
+            tick();
+          });
+      }
     });
-  }, [JSON.stringify(assets)]);
 
-  return { loaded, progress };
+    return () => {
+      cancelled = true;
+    };
+  }, [stableAssets]);
+
+  return { loaded, progress, failedAssets };
 }