@react-remote-state/client 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import { Game } from '@react-remote-state/types';
+
+declare function getPlayer<GameCustom, PlayerCustom>(playerId?: string, game?: Game<GameCustom, PlayerCustom>): {
+    id: string;
+    host: boolean;
+    custom: PlayerCustom | undefined;
+} | undefined;
+declare function isHost<GameCustom, PlayerCustom>(playerId?: string, game?: Game<GameCustom, PlayerCustom>): boolean | undefined;
+type Reducer<GameCustom, PlayerCustom, Action> = (game: Game<GameCustom, PlayerCustom>, action: Action, playerId: string) => Game<GameCustom, PlayerCustom>;
+declare function useRemoteReducer<GameCustom, PlayerCustom, Action>(uri: string, reducer: Reducer<GameCustom, PlayerCustom, Action>, gameId?: string): [
+    Game<GameCustom, PlayerCustom> | undefined,
+    string | undefined,
+    (action: Action) => void
+];
+
+export { getPlayer, isHost, useRemoteReducer };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { Game } from '@react-remote-state/types';
+
+declare function getPlayer<GameCustom, PlayerCustom>(playerId?: string, game?: Game<GameCustom, PlayerCustom>): {
+    id: string;
+    host: boolean;
+    custom: PlayerCustom | undefined;
+} | undefined;
+declare function isHost<GameCustom, PlayerCustom>(playerId?: string, game?: Game<GameCustom, PlayerCustom>): boolean | undefined;
+type Reducer<GameCustom, PlayerCustom, Action> = (game: Game<GameCustom, PlayerCustom>, action: Action, playerId: string) => Game<GameCustom, PlayerCustom>;
+declare function useRemoteReducer<GameCustom, PlayerCustom, Action>(uri: string, reducer: Reducer<GameCustom, PlayerCustom, Action>, gameId?: string): [
+    Game<GameCustom, PlayerCustom> | undefined,
+    string | undefined,
+    (action: Action) => void
+];
+
+export { getPlayer, isHost, useRemoteReducer };

package/dist/index.js

@@ -0,0 +1,112 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  getPlayer: () => getPlayer,
+  isHost: () => isHost,
+  useRemoteReducer: () => useRemoteReducer
+});
+module.exports = __toCommonJS(src_exports);
+var import_react = require("react");
+var import_socket = require("socket.io-client");
+function getPlayer(playerId, game) {
+  if (!game || !playerId) {
+    return void 0;
+  }
+  return game.players.find((player) => player.id == playerId);
+}
+function isHost(playerId, game) {
+  let player = getPlayer(playerId, game);
+  return player == null ? void 0 : player.host;
+}
+function useRemoteReducer(uri, reducer, gameId) {
+  let [meta, setMeta] = (0, import_react.useState)({
+    isHostReady: false
+  });
+  let [game, setGame] = (0, import_react.useState)();
+  let dispatch = (action) => {
+    if (!!meta.client && !!game) {
+      meta.client.emit("notify", { gameId: game.id, action });
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (!meta.client) {
+      meta.client = (0, import_socket.connect)(uri);
+      meta.client.on("error", console.error);
+      meta.client.on("connect", () => {
+        var _a, _b;
+        if (gameId == void 0) {
+          (_a = meta.client) == null ? void 0 : _a.emit("create");
+        } else {
+          (_b = meta.client) == null ? void 0 : _b.emit("join", { gameId });
+        }
+      });
+      meta.client.on("update", (update) => {
+        if (!meta.localPlayerId && !!update.playerId) {
+          setMeta(__spreadProps(__spreadValues({}, meta), { localPlayerId: update.playerId }));
+        }
+        setGame(update.game);
+      });
+    } else if (isHost(meta.localPlayerId, game) && !meta.isHostReady) {
+      meta.client.on("join", (join) => {
+        var _a;
+        (_a = meta.client) == null ? void 0 : _a.emit("accept", {
+          gameId: game == null ? void 0 : game.id,
+          playerId: join.playerId
+        });
+      });
+      meta.client.on("notify", (notify) => {
+        var _a;
+        if (!!game) {
+          (_a = meta.client) == null ? void 0 : _a.emit("update", {
+            game: reducer(game, notify.action, notify.playerId)
+          });
+        }
+      });
+      setMeta(__spreadProps(__spreadValues({}, meta), { isHostReady: true }));
+    }
+  });
+  return [game, meta.localPlayerId, dispatch];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getPlayer,
+  isHost,
+  useRemoteReducer
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { Game } from \"@react-remote-state/types\";\nimport { useEffect, useState } from \"react\";\nimport { connect, Socket as Client } from \"socket.io-client\";\n\ntype Meta = {\n  client?: Client;\n  isHostReady: boolean;\n  localPlayerId?: string;\n};\n\nexport function getPlayer<GameCustom, PlayerCustom>(\n  playerId?: string,\n  game?: Game<GameCustom, PlayerCustom>\n) {\n  if (!game || !playerId) {\n    return undefined;\n  }\n\n  return game.players.find((player) => player.id == playerId);\n}\n\nexport function isHost<GameCustom, PlayerCustom>(\n  playerId?: string,\n  game?: Game<GameCustom, PlayerCustom>\n) {\n  let player = getPlayer(playerId, game);\n\n  return player?.host;\n}\n\ntype Reducer<GameCustom, PlayerCustom, Action> = (\n  game: Game<GameCustom, PlayerCustom>,\n  action: Action,\n  playerId: string\n) => Game<GameCustom, PlayerCustom>;\n\nexport function useRemoteReducer<GameCustom, PlayerCustom, Action>(\n  uri: string,\n  reducer: Reducer<GameCustom, PlayerCustom, Action>,\n  gameId?: string\n): [\n  Game<GameCustom, PlayerCustom> | undefined,\n  string | undefined,\n  (action: Action) => void\n] {\n  let [meta, setMeta] = useState<Meta>({\n    isHostReady: false,\n  });\n\n  let [game, setGame] = useState<Game<GameCustom, PlayerCustom>>();\n\n  let dispatch = (action: Action) => {\n    if (!!meta.client && !!game) {\n      meta.client.emit(\"notify\", { gameId: game.id, action });\n    }\n  };\n\n  useEffect(() => {\n    if (!meta.client) {\n      meta.client = connect(uri);\n      meta.client.on(\"error\", console.error);\n      meta.client.on(\"connect\", () => {\n        if (gameId == undefined) {\n          meta.client?.emit(\"create\");\n        } else {\n          meta.client?.emit(\"join\", { gameId });\n        }\n      });\n\n      meta.client.on(\"update\", (update) => {\n        if (!meta.localPlayerId && !!update.playerId) {\n          setMeta({ ...meta, localPlayerId: update.playerId });\n        }\n\n        setGame(update.game);\n      });\n    } else if (isHost(meta.localPlayerId, game) && !meta.isHostReady) {\n      meta.client.on(\"join\", (join) => {\n        meta.client?.emit(\"accept\", {\n          gameId: game?.id,\n          playerId: join.playerId,\n        });\n      });\n\n      meta.client.on(\"notify\", (notify) => {\n        if (!!game) {\n          meta.client?.emit(\"update\", {\n            game: reducer(game, notify.action, notify.playerId),\n          });\n        }\n      });\n\n      setMeta({ ...meta, isHostReady: true });\n    }\n  });\n\n  return [game, meta.localPlayerId, dispatch];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoC;AACpC,oBAA0C;AAQnC,SAAS,UACd,UACA,MACA;AACA,MAAI,CAAC,QAAQ,CAAC,UAAU;AACtB,WAAO;AAAA,EACT;AAEA,SAAO,KAAK,QAAQ,KAAK,CAAC,WAAW,OAAO,MAAM,QAAQ;AAC5D;AAEO,SAAS,OACd,UACA,MACA;AACA,MAAI,SAAS,UAAU,UAAU,IAAI;AAErC,SAAO,iCAAQ;AACjB;AAQO,SAAS,iBACd,KACA,SACA,QAKA;AACA,MAAI,CAAC,MAAM,OAAO,QAAI,uBAAe;AAAA,IACnC,aAAa;AAAA,EACf,CAAC;AAED,MAAI,CAAC,MAAM,OAAO,QAAI,uBAAyC;AAE/D,MAAI,WAAW,CAAC,WAAmB;AACjC,QAAI,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,MAAM;AAC3B,WAAK,OAAO,KAAK,UAAU,EAAE,QAAQ,KAAK,IAAI,OAAO,CAAC;AAAA,IACxD;AAAA,EACF;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,KAAK,QAAQ;AAChB,WAAK,aAAS,uBAAQ,GAAG;AACzB,WAAK,OAAO,GAAG,SAAS,QAAQ,KAAK;AACrC,WAAK,OAAO,GAAG,WAAW,MAAM;AA7DtC;AA8DQ,YAAI,UAAU,QAAW;AACvB,qBAAK,WAAL,mBAAa,KAAK;AAAA,QACpB,OAAO;AACL,qBAAK,WAAL,mBAAa,KAAK,QAAQ,EAAE,OAAO;AAAA,QACrC;AAAA,MACF,CAAC;AAED,WAAK,OAAO,GAAG,UAAU,CAAC,WAAW;AACnC,YAAI,CAAC,KAAK,iBAAiB,CAAC,CAAC,OAAO,UAAU;AAC5C,kBAAQ,iCAAK,OAAL,EAAW,eAAe,OAAO,SAAS,EAAC;AAAA,QACrD;AAEA,gBAAQ,OAAO,IAAI;AAAA,MACrB,CAAC;AAAA,IACH,WAAW,OAAO,KAAK,eAAe,IAAI,KAAK,CAAC,KAAK,aAAa;AAChE,WAAK,OAAO,GAAG,QAAQ,CAAC,SAAS;AA7EvC;AA8EQ,mBAAK,WAAL,mBAAa,KAAK,UAAU;AAAA,UAC1B,QAAQ,6BAAM;AAAA,UACd,UAAU,KAAK;AAAA,QACjB;AAAA,MACF,CAAC;AAED,WAAK,OAAO,GAAG,UAAU,CAAC,WAAW;AApF3C;AAqFQ,YAAI,CAAC,CAAC,MAAM;AACV,qBAAK,WAAL,mBAAa,KAAK,UAAU;AAAA,YAC1B,MAAM,QAAQ,MAAM,OAAO,QAAQ,OAAO,QAAQ;AAAA,UACpD;AAAA,QACF;AAAA,MACF,CAAC;AAED,cAAQ,iCAAK,OAAL,EAAW,aAAa,KAAK,EAAC;AAAA,IACxC;AAAA,EACF,CAAC;AAED,SAAO,CAAC,MAAM,KAAK,eAAe,QAAQ;AAC5C;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,88 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/index.ts
+import { useEffect, useState } from "react";
+import { connect } from "socket.io-client";
+function getPlayer(playerId, game) {
+  if (!game || !playerId) {
+    return void 0;
+  }
+  return game.players.find((player) => player.id == playerId);
+}
+function isHost(playerId, game) {
+  let player = getPlayer(playerId, game);
+  return player == null ? void 0 : player.host;
+}
+function useRemoteReducer(uri, reducer, gameId) {
+  let [meta, setMeta] = useState({
+    isHostReady: false
+  });
+  let [game, setGame] = useState();
+  let dispatch = (action) => {
+    if (!!meta.client && !!game) {
+      meta.client.emit("notify", { gameId: game.id, action });
+    }
+  };
+  useEffect(() => {
+    if (!meta.client) {
+      meta.client = connect(uri);
+      meta.client.on("error", console.error);
+      meta.client.on("connect", () => {
+        var _a, _b;
+        if (gameId == void 0) {
+          (_a = meta.client) == null ? void 0 : _a.emit("create");
+        } else {
+          (_b = meta.client) == null ? void 0 : _b.emit("join", { gameId });
+        }
+      });
+      meta.client.on("update", (update) => {
+        if (!meta.localPlayerId && !!update.playerId) {
+          setMeta(__spreadProps(__spreadValues({}, meta), { localPlayerId: update.playerId }));
+        }
+        setGame(update.game);
+      });
+    } else if (isHost(meta.localPlayerId, game) && !meta.isHostReady) {
+      meta.client.on("join", (join) => {
+        var _a;
+        (_a = meta.client) == null ? void 0 : _a.emit("accept", {
+          gameId: game == null ? void 0 : game.id,
+          playerId: join.playerId
+        });
+      });
+      meta.client.on("notify", (notify) => {
+        var _a;
+        if (!!game) {
+          (_a = meta.client) == null ? void 0 : _a.emit("update", {
+            game: reducer(game, notify.action, notify.playerId)
+          });
+        }
+      });
+      setMeta(__spreadProps(__spreadValues({}, meta), { isHostReady: true }));
+    }
+  });
+  return [game, meta.localPlayerId, dispatch];
+}
+export {
+  getPlayer,
+  isHost,
+  useRemoteReducer
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { Game } from \"@react-remote-state/types\";\nimport { useEffect, useState } from \"react\";\nimport { connect, Socket as Client } from \"socket.io-client\";\n\ntype Meta = {\n  client?: Client;\n  isHostReady: boolean;\n  localPlayerId?: string;\n};\n\nexport function getPlayer<GameCustom, PlayerCustom>(\n  playerId?: string,\n  game?: Game<GameCustom, PlayerCustom>\n) {\n  if (!game || !playerId) {\n    return undefined;\n  }\n\n  return game.players.find((player) => player.id == playerId);\n}\n\nexport function isHost<GameCustom, PlayerCustom>(\n  playerId?: string,\n  game?: Game<GameCustom, PlayerCustom>\n) {\n  let player = getPlayer(playerId, game);\n\n  return player?.host;\n}\n\ntype Reducer<GameCustom, PlayerCustom, Action> = (\n  game: Game<GameCustom, PlayerCustom>,\n  action: Action,\n  playerId: string\n) => Game<GameCustom, PlayerCustom>;\n\nexport function useRemoteReducer<GameCustom, PlayerCustom, Action>(\n  uri: string,\n  reducer: Reducer<GameCustom, PlayerCustom, Action>,\n  gameId?: string\n): [\n  Game<GameCustom, PlayerCustom> | undefined,\n  string | undefined,\n  (action: Action) => void\n] {\n  let [meta, setMeta] = useState<Meta>({\n    isHostReady: false,\n  });\n\n  let [game, setGame] = useState<Game<GameCustom, PlayerCustom>>();\n\n  let dispatch = (action: Action) => {\n    if (!!meta.client && !!game) {\n      meta.client.emit(\"notify\", { gameId: game.id, action });\n    }\n  };\n\n  useEffect(() => {\n    if (!meta.client) {\n      meta.client = connect(uri);\n      meta.client.on(\"error\", console.error);\n      meta.client.on(\"connect\", () => {\n        if (gameId == undefined) {\n          meta.client?.emit(\"create\");\n        } else {\n          meta.client?.emit(\"join\", { gameId });\n        }\n      });\n\n      meta.client.on(\"update\", (update) => {\n        if (!meta.localPlayerId && !!update.playerId) {\n          setMeta({ ...meta, localPlayerId: update.playerId });\n        }\n\n        setGame(update.game);\n      });\n    } else if (isHost(meta.localPlayerId, game) && !meta.isHostReady) {\n      meta.client.on(\"join\", (join) => {\n        meta.client?.emit(\"accept\", {\n          gameId: game?.id,\n          playerId: join.playerId,\n        });\n      });\n\n      meta.client.on(\"notify\", (notify) => {\n        if (!!game) {\n          meta.client?.emit(\"update\", {\n            game: reducer(game, notify.action, notify.playerId),\n          });\n        }\n      });\n\n      setMeta({ ...meta, isHostReady: true });\n    }\n  });\n\n  return [game, meta.localPlayerId, dispatch];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAiC;AAQnC,SAAS,UACd,UACA,MACA;AACA,MAAI,CAAC,QAAQ,CAAC,UAAU;AACtB,WAAO;AAAA,EACT;AAEA,SAAO,KAAK,QAAQ,KAAK,CAAC,WAAW,OAAO,MAAM,QAAQ;AAC5D;AAEO,SAAS,OACd,UACA,MACA;AACA,MAAI,SAAS,UAAU,UAAU,IAAI;AAErC,SAAO,iCAAQ;AACjB;AAQO,SAAS,iBACd,KACA,SACA,QAKA;AACA,MAAI,CAAC,MAAM,OAAO,IAAI,SAAe;AAAA,IACnC,aAAa;AAAA,EACf,CAAC;AAED,MAAI,CAAC,MAAM,OAAO,IAAI,SAAyC;AAE/D,MAAI,WAAW,CAAC,WAAmB;AACjC,QAAI,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,MAAM;AAC3B,WAAK,OAAO,KAAK,UAAU,EAAE,QAAQ,KAAK,IAAI,OAAO,CAAC;AAAA,IACxD;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,KAAK,QAAQ;AAChB,WAAK,SAAS,QAAQ,GAAG;AACzB,WAAK,OAAO,GAAG,SAAS,QAAQ,KAAK;AACrC,WAAK,OAAO,GAAG,WAAW,MAAM;AA7DtC;AA8DQ,YAAI,UAAU,QAAW;AACvB,qBAAK,WAAL,mBAAa,KAAK;AAAA,QACpB,OAAO;AACL,qBAAK,WAAL,mBAAa,KAAK,QAAQ,EAAE,OAAO;AAAA,QACrC;AAAA,MACF,CAAC;AAED,WAAK,OAAO,GAAG,UAAU,CAAC,WAAW;AACnC,YAAI,CAAC,KAAK,iBAAiB,CAAC,CAAC,OAAO,UAAU;AAC5C,kBAAQ,iCAAK,OAAL,EAAW,eAAe,OAAO,SAAS,EAAC;AAAA,QACrD;AAEA,gBAAQ,OAAO,IAAI;AAAA,MACrB,CAAC;AAAA,IACH,WAAW,OAAO,KAAK,eAAe,IAAI,KAAK,CAAC,KAAK,aAAa;AAChE,WAAK,OAAO,GAAG,QAAQ,CAAC,SAAS;AA7EvC;AA8EQ,mBAAK,WAAL,mBAAa,KAAK,UAAU;AAAA,UAC1B,QAAQ,6BAAM;AAAA,UACd,UAAU,KAAK;AAAA,QACjB;AAAA,MACF,CAAC;AAED,WAAK,OAAO,GAAG,UAAU,CAAC,WAAW;AApF3C;AAqFQ,YAAI,CAAC,CAAC,MAAM;AACV,qBAAK,WAAL,mBAAa,KAAK,UAAU;AAAA,YAC1B,MAAM,QAAQ,MAAM,OAAO,QAAQ,OAAO,QAAQ;AAAA,UACpD;AAAA,QACF;AAAA,MACF,CAAC;AAED,cAAQ,iCAAK,OAAL,EAAW,aAAa,KAAK,EAAC;AAAA,IACxC;AAAA,EACF,CAAC;AAED,SAAO,CAAC,MAAM,KAAK,eAAe,QAAQ;AAC5C;","names":[]}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@react-remote-state/client",
+  "version": "0.0.1",
+  "description": "Client for React Remote State applications",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@react-remote-state/server": "^0.0.1",
+    "@sheerun/mutationobserver-shim": "^0.3.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/lodash": "^4.17.12",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "lodash": "^4.17.21",
+    "socket.io-client": "^4.8.1",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.3.5",
+    "typescript": "^4.9.5",
+    "vitest": "^2.1.3"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "dependencies": {
+    "@react-remote-state/types": "^1.0.0",
+    "socket.io-client": "^4.8.1"
+  }
+}