@pluv/react 0.0.0-experimental-20250527040415

package/dist/index.mjs

@@ -0,0 +1,576 @@
+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));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/createBundle.tsx
+import { MockedRoom } from "@pluv/client";
+import fastDeepEqual2 from "fast-deep-equal";
+import {
+  createContext,
+  memo,
+  useCallback as useCallback4,
+  useContext,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useState as useState4,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+
+// src/internal/hooks/useAsyncQueue.ts
+import { useCallback, useMemo, useRef } from "react";
+var useAsyncQueue = () => {
+  const queueRef = useRef(Promise.resolve(void 0));
+  const push = useCallback((promise) => __async(null, null, function* () {
+    queueRef.current = queueRef.current.then(() => __async(null, null, function* () {
+      return yield promise;
+    }));
+    return yield queueRef.current;
+  }), []);
+  return useMemo(() => ({ push }), [push]);
+};
+
+// src/internal/hooks/useDeepAsyncMemo.ts
+import { useEffect, useRef as useRef2, useState } from "react";
+import fastDeepEqual from "fast-deep-equal";
+var useDeepAsyncMemo = (factory, isEqual = fastDeepEqual) => {
+  const [state, setState] = useState({
+    isInitialized: false,
+    isLoading: true,
+    value: void 0,
+    error: null
+  });
+  const lastValueRef = useRef2(void 0);
+  const hasValueRef = useRef2(false);
+  const inflightRef = useRef2(null);
+  const isMountedRef = useRef2(true);
+  useEffect(() => {
+    isMountedRef.current = true;
+    const promise = factory();
+    inflightRef.current = promise;
+    setState((prev) => {
+      return __spreadProps(__spreadValues({}, prev), {
+        isLoading: true,
+        error: null
+      });
+    });
+    promise.then((result) => {
+      if (!isMountedRef.current || inflightRef.current !== promise) return;
+      const isSame = hasValueRef.current && isEqual(lastValueRef.current, result);
+      if (isSame) {
+        setState((prev) => {
+          return __spreadProps(__spreadValues({}, prev), {
+            isInitialized: true,
+            isLoading: false
+          });
+        });
+        return;
+      }
+      lastValueRef.current = result;
+      hasValueRef.current = true;
+      setState({
+        isInitialized: true,
+        isLoading: false,
+        value: result,
+        error: null
+      });
+    }).catch((err) => {
+      if (!isMountedRef.current || inflightRef.current !== promise) return;
+      setState({
+        isInitialized: hasValueRef.current,
+        isLoading: false,
+        value: void 0,
+        error: err instanceof Error ? err : new Error("Unknown error")
+      });
+    });
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [
+    /**
+     * !HACK
+     * @description We're only going to use the `isEqual` function to determine if this hook
+     * should re-run. This is basically our hook's version of a dependency array
+     * @date April 13, 2025
+     */
+    // factory,
+    isEqual
+  ]);
+  return state;
+};
+
+// src/internal/hooks/useNoSsr.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+var useNoSsr = () => {
+  const [didMount, setDidMount] = useState2(false);
+  useEffect2(() => setDidMount(typeof window !== "undefined"), []);
+  const noSsr = useCallback2(
+    (value, fallback = null) => {
+      return didMount ? typeof value !== "function" ? value : value() : fallback;
+    },
+    [didMount]
+  );
+  return noSsr;
+};
+
+// src/internal/hooks/useRerender.ts
+import { useCallback as useCallback3, useState as useState3 } from "react";
+var useRerender = () => {
+  const [, setCount] = useState3(0);
+  return useCallback3(() => {
+    setCount((oldCount) => (oldCount + 1) % Number.MAX_SAFE_INTEGER);
+  }, []);
+};
+
+// src/internal/hooks/useSyncExternalStoreWithSelector.ts
+import { useRef as useRef3, useSyncExternalStore } from "react";
+
+// src/internal/utils/identity.ts
+var identity = (x) => x;
+
+// src/internal/utils/shallowArrayEqual.ts
+var shallowArrayEqual = (a, b) => {
+  return a.length === b.length && a.every((item, i) => item === b[i]);
+};
+
+// src/internal/utils/shallowEqual.ts
+var shallowEqual = (a, b) => a === b;
+
+// src/internal/hooks/useSyncExternalStoreWithSelector.ts
+var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerSnapshot, selector, isEqual) => {
+  const noSsr = useNoSsr();
+  const cacheRef = useRef3(null);
+  const _getServerSnapshot = getServerSnapshot ? () => {
+    const data = getServerSnapshot();
+    const snapshot = selector(data);
+    const compare = isEqual != null ? isEqual : shallowEqual;
+    const cached = cacheRef.current;
+    const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+    cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
+    return cacheRef.current;
+  } : void 0;
+  const _getClientSnapshot = () => {
+    const data = getClientSnapshot();
+    const snapshot = selector(data);
+    const compare = isEqual != null ? isEqual : shallowEqual;
+    const cached = cacheRef.current;
+    const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+    cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
+    return cacheRef.current;
+  };
+  const result = useSyncExternalStore(subscribe, _getClientSnapshot, _getServerSnapshot);
+  return typeof window !== "undefined" ? noSsr(result, _getServerSnapshot == null ? void 0 : _getServerSnapshot()) : result;
+};
+
+// src/createBundle.tsx
+import { jsx } from "react/jsx-runtime";
+var createBundle = (client, options = {}) => {
+  const PluvContext = createContext(null);
+  const PluvRoomContext = createContext(null);
+  const MockedRoomContext = createContext(null);
+  const MockedRoomProvider = memo((props) => {
+    const { children, events, initialPresence, initialStorage, room: _room } = props;
+    const [room] = useState4(() => {
+      var _a;
+      return new MockedRoom(_room, {
+        events,
+        initialPresence,
+        initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage
+      });
+    });
+    return /* @__PURE__ */ jsx(MockedRoomContext.Provider, { value: room, children: /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: room, children }) });
+  });
+  MockedRoomProvider.displayName = "MockedRoomProvider";
+  const PluvRoomProvider = memo(
+    (props) => {
+      const {
+        children,
+        connect = true,
+        debug,
+        initialPresence,
+        initialStorage,
+        metadata,
+        onAuthorizationFail,
+        room: _room
+      } = props;
+      const queue = useAsyncQueue();
+      const rerender = useRerender();
+      const mockedRoom = useContext(MockedRoomContext);
+      const resolvedMeta = useDeepAsyncMemo(() => __async(null, null, function* () {
+        const resolved = yield Promise.resolve(
+          typeof metadata === "function" ? metadata() : metadata
+        );
+        return !!room.metadata ? room.metadata.parse(resolved) : resolved;
+      }));
+      const createRoom = useCallback4(() => {
+        var _a;
+        return client.createRoom(_room, {
+          addons: options.addons,
+          debug,
+          initialPresence,
+          initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage,
+          metadata,
+          onAuthorizationFail,
+          router: options.router
+        });
+      }, [_room, debug, initialPresence, initialStorage, metadata, onAuthorizationFail]);
+      const [room, setRoom] = useState4(() => createRoom());
+      useEffect3(() => {
+        if (room.id === _room) return;
+        setRoom(createRoom());
+      }, [_room, createRoom, room]);
+      useEffect3(() => {
+        const unsubscribe = room.subscribe.connection(() => {
+          rerender();
+        });
+        return () => {
+          unsubscribe();
+        };
+      }, [rerender, room]);
+      useEffect3(() => {
+        const leaveRoom = () => __async(null, null, function* () {
+          yield queue.push(
+            client.leave(room).catch((error) => {
+              console.error(error);
+            })
+          );
+        });
+        if (!connect) {
+          leaveRoom();
+          return;
+        }
+        if (!resolvedMeta.isInitialized) {
+          leaveRoom();
+          return;
+        }
+        const resolved = resolvedMeta.value;
+        queue.push(
+          client.enter(room, ...[{ metadata: resolved }]).catch((error) => __async(null, null, function* () {
+            console.error(error);
+            yield leaveRoom();
+          }))
+        );
+        return () => {
+          leaveRoom();
+        };
+      }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
+      return /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
+    }
+  );
+  PluvRoomProvider.displayName = "PluvRoomProvider";
+  const PluvProvider = memo((props) => {
+    const { children } = props;
+    return /* @__PURE__ */ jsx(PluvContext.Provider, { value: client, children });
+  });
+  PluvProvider.displayName = "PluvProvider";
+  const useClient = () => useContext(PluvContext);
+  const useRoom = () => {
+    const room = useContext(PluvRoomContext);
+    if (!room)
+      throw new Error(
+        "Room could not be found. Component must be wrapped with PluvRoomProvider"
+      );
+    return room;
+  };
+  const useBroadcast = () => {
+    const room = useRoom();
+    const broadcast = useCallback4(
+      (event2, data) => {
+        room.broadcast(event2, data);
+      },
+      [room]
+    );
+    return useMemo2(() => {
+      return new Proxy(broadcast, {
+        get(fn, prop) {
+          return (data) => {
+            return fn(prop, data);
+          };
+        }
+      });
+    }, [broadcast]);
+  };
+  const useCanRedo = () => {
+    const room = useRoom();
+    const subscribe = useCallback4(
+      (onStoreChange) => room.subscribe.storage(onStoreChange),
+      [room]
+    );
+    const getSnapshot = useCallback4(() => room.canRedo(), [room]);
+    const canRedo = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
+    return canRedo;
+  };
+  const useCanUndo = () => {
+    const room = useRoom();
+    const subscribe = useCallback4(
+      (onStoreChange) => room.subscribe.storage(onStoreChange),
+      [room]
+    );
+    const getSnapshot = useCallback4(() => room.canUndo(), [room]);
+    const canUndo = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
+    return canUndo;
+  };
+  const useConnection = (selector = identity, options2) => {
+    var _a;
+    const room = useRoom();
+    const subscribe = useCallback4(
+      (onStoreChange) => {
+        return room.subscribe.connection(onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getConnection;
+    const _selector = useCallback4(
+      (snapshot) => selector(snapshot),
+      [selector]
+    );
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
+    );
+  };
+  const useDoc = () => {
+    const room = useRoom();
+    const subscribe = useCallback4(
+      (onStoreChange) => {
+        return room.subscribe.storageLoaded(onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getDoc;
+    return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  };
+  const useEvent = (type, callback) => {
+    const room = useRoom();
+    useEffect3(() => {
+      const unsubscribe = room.subscribe.event(type, callback);
+      return () => {
+        unsubscribe();
+      };
+    }, [callback, room, type]);
+  };
+  const event = new Proxy(
+    {},
+    {
+      get(_, prop) {
+        const useProxyEvent = (callback) => {
+          return useEvent(
+            prop,
+            callback
+          );
+        };
+        return { useEvent: useProxyEvent };
+      }
+    }
+  );
+  const useMyPresence = (selector = identity, options2) => {
+    var _a;
+    const room = useRoom();
+    const subscribe = useCallback4(
+      (onStoreChange) => {
+        return room.subscribe.myPresence(onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getMyPresence;
+    const _selector = useCallback4(
+      (snapshot) => selector(snapshot),
+      [selector]
+    );
+    const myPresence = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
+    );
+    return [myPresence, room.updateMyPresence];
+  };
+  const useMyself = (selector = identity, options2) => {
+    var _a;
+    const room = useRoom();
+    const subscribe = useCallback4(
+      (onStoreChange) => {
+        return room.subscribe.myself(onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getMyself;
+    const _selector = useCallback4(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
+    );
+  };
+  const useOther = (connectionId, selector = identity, options2) => {
+    var _a;
+    const room = useRoom();
+    const subscribe = useCallback4(
+      (onStoreChange) => room.subscribe.other(connectionId, onStoreChange),
+      [room, connectionId]
+    );
+    const getSnapshot = useCallback4(() => room.getOther(connectionId), [room, connectionId]);
+    const _selector = useCallback4(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
+    );
+  };
+  const useOthers = (selector = identity, options2) => {
+    var _a;
+    const room = useRoom();
+    const subscribe = useCallback4(
+      (onStoreChange) => {
+        return room.subscribe.others(onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getOthers;
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : (a, b) => {
+        if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+          return shallowArrayEqual(a, b);
+        }
+        return fastDeepEqual2(a, b);
+      }
+    );
+  };
+  const useRedo = () => {
+    const room = useRoom();
+    return room.redo;
+  };
+  const useStorage = (key, selector = identity, options2) => {
+    var _a, _b;
+    const room = useRoom();
+    const rerender = useRerender();
+    room.subscribe.storageLoaded(() => {
+      rerender();
+    });
+    const subscribe = useCallback4(
+      (onStoreChange) => room.subscribe.storage(key, onStoreChange),
+      [key, room]
+    );
+    const getSnapshot = useCallback4(() => {
+      return room.getStorageJson(key);
+    }, [key, room]);
+    const _selector = useCallback4(
+      (snapshot) => {
+        return snapshot === null ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    const data = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
+    );
+    const sharedType = (_b = room.getStorage(key)) != null ? _b : null;
+    return [data, sharedType];
+  };
+  const useTransact = () => {
+    const room = useRoom();
+    return room.transact;
+  };
+  const useUndo = () => {
+    const room = useRoom();
+    return room.undo;
+  };
+  return {
+    // components
+    MockedRoomProvider,
+    PluvProvider,
+    PluvRoomProvider,
+    // proxies
+    event,
+    // hooks
+    useBroadcast,
+    useCanRedo,
+    useCanUndo,
+    useClient,
+    useConnection,
+    useDoc,
+    useEvent,
+    useMyPresence,
+    useMyself,
+    useOther,
+    useOthers,
+    useRedo,
+    useRoom,
+    useStorage,
+    useTransact,
+    useUndo
+  };
+};
+export {
+  createBundle
+};

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { reactConfig } from "eslint-config-pluv/react";
+
+/** @type {import("eslint").Linter.Config} */
+export default reactConfig;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@pluv/react",
+  "version": "0.0.0-experimental-20250527040415",
+  "description": "@pluv/client React.js bindings",
+  "author": "leedavidcs",
+  "license": "MIT",
+  "homepage": "https://github.com/pluv-io/pluv",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pluv-io/pluv.git",
+    "directory": "packages/react"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "fast-deep-equal": "^3.1.3",
+    "@pluv/client": "^0.0.0-experimental-20250527040415",
+    "@pluv/crdt": "^0.0.0-experimental-20250527040415",
+    "@pluv/types": "^0.0.0-experimental-20250527040415"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.5",
+    "eslint": "^9.27.0",
+    "react": "^19.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "@pluv/tsconfig": "^0.0.0-experimental-20250527040415",
+    "eslint-config-pluv": "^0.0.0-experimental-20250527040415"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "lint": "eslint \"src/**/*.ts*\" --fix --max-warnings 0",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  }
+}