@pluv/react 0.0.0

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["pluv"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,17 @@
+
+> @pluv/react@0.0.0 build /home/runner/work/pluv/pluv/packages/react
+> tsup src/index.ts --format esm,cjs --dts --external react
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v6.5.0
+CLI Target: es6
+ESM Build start
+CJS Build start
+CJS dist/index.js 9.71 KB
+CJS ⚡️ Build success in 107ms
+ESM dist/index.mjs 7.71 KB
+ESM ⚡️ Build success in 112ms
+DTS Build start
+DTS ⚡️ Build success in 4395ms
+DTS dist/index.d.ts 3.92 KB

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import { PluvRoomDebug, WebSocketConnection, UserInfo, PluvRoom, InferYjsSharedTypeJson, PluvClient } from '@pluv/client';
+export { AbstractType, ConnectionState, createClient, y } from '@pluv/client';
+import * as _pluv_types from '@pluv/types';
+import { JsonObject, InputZodLike, IOLike, InferEventMessage, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
+export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
+import { ReactNode, FC, Dispatch } from 'react';
+import { AbstractType } from 'yjs';
+
+interface CreateRoomBundleOptions<TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> {
+    initialStorage?: () => TStorage;
+    presence?: InputZodLike<TPresence>;
+}
+type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractType<any>>> = {
+    children?: ReactNode;
+    debug?: boolean | PluvRoomDebug<TIO>;
+    onAuthorizationFail?: (error: Error) => void;
+    room: string;
+} & (keyof TPresence extends never ? {
+    initialPresence?: never;
+} : {
+    initialPresence: TPresence;
+}) & (keyof TStorage extends never ? {
+    initialStorage?: never;
+} : {
+    initialStorage?: () => TStorage;
+});
+interface SubscriptionHookOptions<T extends unknown> {
+    isEqual?: (a: T, b: T) => boolean;
+}
+type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
+interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractType<any>>> {
+    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
+    usePluvBroadcast: <TMessage extends InferEventMessage<InferIOInput<TIO>>>() => (message: TMessage) => void;
+    usePluvConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
+    usePluvEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
+    usePluvMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [
+        myPresence: Id<T> | null,
+        updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>
+    ];
+    usePluvMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
+    usePluvOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
+    usePluvOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
+    usePluvRoom: () => PluvRoom<TIO, TPresence>;
+    usePluvStorage: <TKey extends keyof TStorage, TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferYjsSharedTypeJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
+}
+
+interface PluvProviderProps {
+    children?: ReactNode;
+}
+interface CreateBundle<TIO extends IOLike> {
+    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}>(options?: CreateRoomBundleOptions<TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
+    PluvProvider: FC<PluvProviderProps>;
+    usePluvClient: () => PluvClient<TIO>;
+}
+declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
+
+export { CreateBundle, CreateRoomBundle, CreateRoomBundleOptions, PluvProviderProps, PluvRoomProviderProps, SubscriptionHookOptions, createBundle };

package/dist/index.js

@@ -0,0 +1,320 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ConnectionState: () => import_client.ConnectionState,
+  createBundle: () => createBundle,
+  createClient: () => import_client.createClient,
+  y: () => import_client.y
+});
+module.exports = __toCommonJS(src_exports);
+var import_client = require("@pluv/client");
+
+// src/createBundle.tsx
+var import_react4 = require("react");
+var import_react5 = require("react");
+
+// src/createRoomBundle.tsx
+var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var import_react2 = require("react");
+var import_react3 = require("react");
+
+// src/internal/hooks/useRerender.ts
+var import_react = require("react");
+var useRerender = () => {
+  const [, setCount] = (0, import_react.useState)(0);
+  return (0, import_react.useCallback)(() => {
+    setCount((oldCount) => (oldCount + 1) % Number.MAX_SAFE_INTEGER);
+  }, []);
+};
+
+// src/internal/hooks/useSyncExternalStoreWithSelector.ts
+var import_with_selector = require("use-sync-external-store/with-selector");
+
+// 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/createRoomBundle.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var createRoomBundle = (client, options = {}) => {
+  const PluvRoomContext = (0, import_react2.createContext)(
+    null
+  );
+  const PluvRoomProvider = (0, import_react3.memo)((props) => {
+    const {
+      children,
+      debug,
+      initialPresence,
+      initialStorage,
+      onAuthorizationFail,
+      room: _room
+    } = props;
+    const rerender = useRerender();
+    const [room] = (0, import_react2.useState)(() => {
+      return client.createRoom(_room, {
+        debug,
+        initialPresence,
+        initialStorage: typeof initialStorage === "function" ? initialStorage : options.initialStorage,
+        presence: options.presence,
+        onAuthorizationFail
+      });
+    });
+    (0, import_react3.useEffect)(() => {
+      const unsubscribe = room.subscribe("connection", () => {
+        rerender();
+      });
+      return () => {
+        unsubscribe();
+      };
+    }, [rerender, room]);
+    (0, import_react3.useEffect)(() => {
+      client.enter(_room);
+      return () => {
+        client.leave(_room);
+      };
+    }, [_room]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, {
+      value: room,
+      children
+    });
+  });
+  PluvRoomProvider.displayName = "PluvRoomProvider";
+  const usePluvRoom = () => (0, import_react3.useContext)(PluvRoomContext);
+  const usePluvBroadcast = () => {
+    const room = usePluvRoom();
+    return (0, import_react3.useCallback)(
+      (message) => {
+        room.broadcast(message);
+      },
+      [room]
+    );
+  };
+  const usePluvConnection = (selector = identity, options2) => {
+    const room = usePluvRoom();
+    const subscribe = (0, import_react3.useCallback)(
+      (onStoreChange) => {
+        return room.subscribe("connection", onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getConnection;
+    const _selector = (0, import_react3.useCallback)(
+      (snapshot) => selector(snapshot),
+      [selector]
+    );
+    return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      options2 == null ? void 0 : options2.isEqual
+    );
+  };
+  const usePluvEvent = (type, callback) => {
+    const room = usePluvRoom();
+    (0, import_react3.useEffect)(() => {
+      const unsubscribe = room.event(type, callback);
+      return () => {
+        unsubscribe();
+      };
+    }, [callback, room, type]);
+  };
+  const usePluvMyPresence = (selector = identity, options2) => {
+    const room = usePluvRoom();
+    const subscribe = (0, import_react3.useCallback)(
+      (onStoreChange) => {
+        return room.subscribe("my-presence", onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getMyPresence;
+    const _selector = (0, import_react3.useCallback)(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    const myPresence = (0, import_with_selector.useSyncExternalStoreWithSelector)(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      options2 == null ? void 0 : options2.isEqual
+    );
+    const updateMyPresence = (0, import_react3.useCallback)(
+      (value) => {
+        const oldMyPresence = room.getMyPresence();
+        const presence = typeof value === "function" ? value(oldMyPresence) : value;
+        room.broadcast({
+          type: "$UPDATE_PRESENCE",
+          data: { presence }
+        });
+      },
+      [room]
+    );
+    return [myPresence, updateMyPresence];
+  };
+  const usePluvMyself = (selector = identity, options2) => {
+    const room = usePluvRoom();
+    const subscribe = (0, import_react3.useCallback)(
+      (onStoreChange) => {
+        return room.subscribe("myself", onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getMyself;
+    const _selector = (0, import_react3.useCallback)(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      options2 == null ? void 0 : options2.isEqual
+    );
+  };
+  const usePluvOther = (connectionId, selector = identity, options2) => {
+    const room = usePluvRoom();
+    const subscribe = (0, import_react3.useCallback)(
+      (onStoreChange) => {
+        return room.other(connectionId, onStoreChange);
+      },
+      [room, connectionId]
+    );
+    const getSnapshot = (0, import_react3.useCallback)(
+      () => room.getOther(connectionId),
+      [room, connectionId]
+    );
+    const _selector = (0, import_react3.useCallback)(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      options2 == null ? void 0 : options2.isEqual
+    );
+  };
+  const usePluvOthers = (selector = identity, options2) => {
+    var _a;
+    const room = usePluvRoom();
+    const subscribe = (0, import_react3.useCallback)(
+      (onStoreChange) => {
+        return room.subscribe("others", onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getOthers;
+    return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : shallowArrayEqual
+    );
+  };
+  const usePluvStorage = (key, selector = identity, options2) => {
+    var _a;
+    const room = usePluvRoom();
+    const subscribe = (0, import_react3.useCallback)(
+      (onStoreChange) => room.storage(key, onStoreChange),
+      [key, room]
+    );
+    const getSnapshot = (0, import_react3.useCallback)(() => {
+      var _a2, _b;
+      return (_b = (_a2 = room.getStorage(key)) == null ? void 0 : _a2.toJSON()) != null ? _b : null;
+    }, [key, room]);
+    const _selector = (0, import_react3.useCallback)(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    const data = (0, import_with_selector.useSyncExternalStoreWithSelector)(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
+    );
+    const sharedType = room.getStorage(key);
+    return [data, sharedType];
+  };
+  return {
+    PluvRoomProvider,
+    usePluvBroadcast,
+    usePluvConnection,
+    usePluvEvent,
+    usePluvMyPresence,
+    usePluvMyself,
+    usePluvOther,
+    usePluvOthers,
+    usePluvRoom,
+    usePluvStorage
+  };
+};
+
+// src/createBundle.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var createBundle = (client) => {
+  const PluvContext = (0, import_react4.createContext)(null);
+  const PluvProvider = (0, import_react5.memo)((props) => {
+    const { children } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PluvContext.Provider, {
+      value: client,
+      children
+    });
+  });
+  PluvProvider.displayName = "PluvProvider";
+  const usePluvClient = () => (0, import_react5.useContext)(PluvContext);
+  const createRoomBundle2 = (options = {}) => createRoomBundle(client, options);
+  return {
+    createRoomBundle: createRoomBundle2,
+    PluvProvider,
+    usePluvClient
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConnectionState,
+  createBundle,
+  createClient,
+  y
+});

package/dist/index.mjs

@@ -0,0 +1,286 @@
+// src/index.ts
+import { ConnectionState, createClient, y } from "@pluv/client";
+
+// src/createBundle.tsx
+import { createContext as createContext2 } from "react";
+import { memo as memo2, useContext as useContext2 } from "react";
+
+// src/createRoomBundle.tsx
+import fastDeepEqual from "fast-deep-equal";
+import { createContext, useState as useState2 } from "react";
+import { memo, useCallback as useCallback2, useContext, useEffect } from "react";
+
+// src/internal/hooks/useRerender.ts
+import { useCallback, useState } from "react";
+var useRerender = () => {
+  const [, setCount] = useState(0);
+  return useCallback(() => {
+    setCount((oldCount) => (oldCount + 1) % Number.MAX_SAFE_INTEGER);
+  }, []);
+};
+
+// src/internal/hooks/useSyncExternalStoreWithSelector.ts
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
+
+// 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/createRoomBundle.tsx
+import { jsx } from "react/jsx-runtime";
+var createRoomBundle = (client, options = {}) => {
+  const PluvRoomContext = createContext(
+    null
+  );
+  const PluvRoomProvider = memo((props) => {
+    const {
+      children,
+      debug,
+      initialPresence,
+      initialStorage,
+      onAuthorizationFail,
+      room: _room
+    } = props;
+    const rerender = useRerender();
+    const [room] = useState2(() => {
+      return client.createRoom(_room, {
+        debug,
+        initialPresence,
+        initialStorage: typeof initialStorage === "function" ? initialStorage : options.initialStorage,
+        presence: options.presence,
+        onAuthorizationFail
+      });
+    });
+    useEffect(() => {
+      const unsubscribe = room.subscribe("connection", () => {
+        rerender();
+      });
+      return () => {
+        unsubscribe();
+      };
+    }, [rerender, room]);
+    useEffect(() => {
+      client.enter(_room);
+      return () => {
+        client.leave(_room);
+      };
+    }, [_room]);
+    return /* @__PURE__ */ jsx(PluvRoomContext.Provider, {
+      value: room,
+      children
+    });
+  });
+  PluvRoomProvider.displayName = "PluvRoomProvider";
+  const usePluvRoom = () => useContext(PluvRoomContext);
+  const usePluvBroadcast = () => {
+    const room = usePluvRoom();
+    return useCallback2(
+      (message) => {
+        room.broadcast(message);
+      },
+      [room]
+    );
+  };
+  const usePluvConnection = (selector = identity, options2) => {
+    const room = usePluvRoom();
+    const subscribe = useCallback2(
+      (onStoreChange) => {
+        return room.subscribe("connection", onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getConnection;
+    const _selector = useCallback2(
+      (snapshot) => selector(snapshot),
+      [selector]
+    );
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      options2 == null ? void 0 : options2.isEqual
+    );
+  };
+  const usePluvEvent = (type, callback) => {
+    const room = usePluvRoom();
+    useEffect(() => {
+      const unsubscribe = room.event(type, callback);
+      return () => {
+        unsubscribe();
+      };
+    }, [callback, room, type]);
+  };
+  const usePluvMyPresence = (selector = identity, options2) => {
+    const room = usePluvRoom();
+    const subscribe = useCallback2(
+      (onStoreChange) => {
+        return room.subscribe("my-presence", onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getMyPresence;
+    const _selector = useCallback2(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    const myPresence = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      options2 == null ? void 0 : options2.isEqual
+    );
+    const updateMyPresence = useCallback2(
+      (value) => {
+        const oldMyPresence = room.getMyPresence();
+        const presence = typeof value === "function" ? value(oldMyPresence) : value;
+        room.broadcast({
+          type: "$UPDATE_PRESENCE",
+          data: { presence }
+        });
+      },
+      [room]
+    );
+    return [myPresence, updateMyPresence];
+  };
+  const usePluvMyself = (selector = identity, options2) => {
+    const room = usePluvRoom();
+    const subscribe = useCallback2(
+      (onStoreChange) => {
+        return room.subscribe("myself", onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getMyself;
+    const _selector = useCallback2(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      options2 == null ? void 0 : options2.isEqual
+    );
+  };
+  const usePluvOther = (connectionId, selector = identity, options2) => {
+    const room = usePluvRoom();
+    const subscribe = useCallback2(
+      (onStoreChange) => {
+        return room.other(connectionId, onStoreChange);
+      },
+      [room, connectionId]
+    );
+    const getSnapshot = useCallback2(
+      () => room.getOther(connectionId),
+      [room, connectionId]
+    );
+    const _selector = useCallback2(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      options2 == null ? void 0 : options2.isEqual
+    );
+  };
+  const usePluvOthers = (selector = identity, options2) => {
+    var _a;
+    const room = usePluvRoom();
+    const subscribe = useCallback2(
+      (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 : shallowArrayEqual
+    );
+  };
+  const usePluvStorage = (key, selector = identity, options2) => {
+    var _a;
+    const room = usePluvRoom();
+    const subscribe = useCallback2(
+      (onStoreChange) => room.storage(key, onStoreChange),
+      [key, room]
+    );
+    const getSnapshot = useCallback2(() => {
+      var _a2, _b;
+      return (_b = (_a2 = room.getStorage(key)) == null ? void 0 : _a2.toJSON()) != null ? _b : null;
+    }, [key, room]);
+    const _selector = useCallback2(
+      (snapshot) => {
+        return !snapshot ? null : selector(snapshot);
+      },
+      [selector]
+    );
+    const data = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      _selector,
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
+    );
+    const sharedType = room.getStorage(key);
+    return [data, sharedType];
+  };
+  return {
+    PluvRoomProvider,
+    usePluvBroadcast,
+    usePluvConnection,
+    usePluvEvent,
+    usePluvMyPresence,
+    usePluvMyself,
+    usePluvOther,
+    usePluvOthers,
+    usePluvRoom,
+    usePluvStorage
+  };
+};
+
+// src/createBundle.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var createBundle = (client) => {
+  const PluvContext = createContext2(null);
+  const PluvProvider = memo2((props) => {
+    const { children } = props;
+    return /* @__PURE__ */ jsx2(PluvContext.Provider, {
+      value: client,
+      children
+    });
+  });
+  PluvProvider.displayName = "PluvProvider";
+  const usePluvClient = () => useContext2(PluvContext);
+  const createRoomBundle2 = (options = {}) => createRoomBundle(client, options);
+  return {
+    createRoomBundle: createRoomBundle2,
+    PluvProvider,
+    usePluvClient
+  };
+};
+export {
+  ConnectionState,
+  createBundle,
+  createClient,
+  y
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@pluv/react",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pluv/client": "^0.0.0",
+    "@pluv/types": "^0.0.0",
+    "@types/use-sync-external-store": "^0.0.3",
+    "fast-deep-equal": "^3.1.3",
+    "use-sync-external-store": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "yjs": "^13.0.0"
+  },
+  "devDependencies": {
+    "@pluv/tsconfig": "^0.0.0",
+    "@types/react": "18.0.26",
+    "eslint-config-pluv": "^0.0.0",
+    "react": "18.2.0",
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.4",
+    "yjs": "^13.5.44"
+  },
+  "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",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  }
+}

package/src/createBundle.tsx

@@ -0,0 +1,71 @@
+import type { PluvClient } from "@pluv/client";
+import type { IOLike, JsonObject } from "@pluv/types";
+import { createContext, FC, ReactNode } from "react";
+import { memo, useContext } from "react";
+import type { AbstractType } from "yjs";
+import {
+    CreateRoomBundle,
+    createRoomBundle as _createRoomBundle,
+    CreateRoomBundleOptions,
+} from "./createRoomBundle";
+
+export interface PluvProviderProps {
+    children?: ReactNode;
+}
+
+export interface CreateBundle<TIO extends IOLike> {
+    // factories
+    createRoomBundle: <
+        TPresence extends JsonObject = {},
+        TStorage extends Record<string, AbstractType<any>> = {}
+    >(
+        options?: CreateRoomBundleOptions<TPresence, TStorage>
+    ) => CreateRoomBundle<TIO, TPresence, TStorage>;
+
+    // components
+    PluvProvider: FC<PluvProviderProps>;
+
+    // hooks
+    usePluvClient: () => PluvClient<TIO>;
+}
+
+export const createBundle = <TIO extends IOLike>(
+    client: PluvClient<TIO>
+): CreateBundle<TIO> => {
+    /**
+     * !HACK
+     * @description We'll let the context error out if client is not provided,
+     * and let the users deal with it.
+     * @author leedavidcs
+     * @date October 27, 2022
+     */
+    const PluvContext = createContext<PluvClient<any>>(null as any);
+
+    const PluvProvider = memo<PluvProviderProps>((props) => {
+        const { children } = props;
+
+        return (
+            <PluvContext.Provider value={client}>
+                {children}
+            </PluvContext.Provider>
+        );
+    });
+
+    PluvProvider.displayName = "PluvProvider";
+
+    const usePluvClient = (): PluvClient<TIO> => useContext(PluvContext);
+
+    const createRoomBundle = <
+        TPresence extends JsonObject = {},
+        TStorage extends Record<string, AbstractType<any>> = {}
+    >(
+        options: CreateRoomBundleOptions<TPresence, TStorage> = {}
+    ): CreateRoomBundle<TIO, TPresence, TStorage> =>
+        _createRoomBundle(client, options);
+
+    return {
+        createRoomBundle,
+        PluvProvider,
+        usePluvClient,
+    };
+};

package/src/createRoomBundle.tsx

@@ -0,0 +1,447 @@
+import type {
+    InferYjsSharedTypeJson,
+    PluvClient,
+    PluvRoomDebug,
+    UserInfo,
+    WebSocketConnection,
+} from "@pluv/client";
+import { ConnectionState, PluvRoom } from "@pluv/client";
+import type {
+    Id,
+    InferEventMessage,
+    InferIOInput,
+    InferIOOutput,
+    InputZodLike,
+    IOEventMessage,
+    IOLike,
+    JsonObject,
+} from "@pluv/types";
+import fastDeepEqual from "fast-deep-equal";
+import { createContext, Dispatch, FC, ReactNode, useState } from "react";
+import { memo, useCallback, useContext, useEffect } from "react";
+import type { AbstractType } from "yjs";
+import {
+    identity,
+    shallowArrayEqual,
+    useRerender,
+    useSyncExternalStoreWithSelector,
+} from "./internal";
+
+export interface CreateRoomBundleOptions<
+    TPresence extends JsonObject = {},
+    TStorage extends Record<string, AbstractType<any>> = {}
+> {
+    initialStorage?: () => TStorage;
+    presence?: InputZodLike<TPresence>;
+}
+
+export type PluvRoomProviderProps<
+    TIO extends IOLike,
+    TPresence extends JsonObject,
+    TStorage extends Record<string, AbstractType<any>>
+> = {
+    children?: ReactNode;
+    debug?: boolean | PluvRoomDebug<TIO>;
+    onAuthorizationFail?: (error: Error) => void;
+    room: string;
+} & (keyof TPresence extends never
+    ? { initialPresence?: never }
+    : { initialPresence: TPresence }) &
+    (keyof TStorage extends never
+        ? { initialStorage?: never }
+        : { initialStorage?: () => TStorage });
+
+export interface SubscriptionHookOptions<T extends unknown> {
+    isEqual?: (a: T, b: T) => boolean;
+}
+
+export type UpdateMyPresenceAction<TPresence extends JsonObject> =
+    | Partial<TPresence>
+    | ((oldPresence: TPresence | null) => Partial<TPresence>);
+
+export interface CreateRoomBundle<
+    TIO extends IOLike,
+    TPresence extends JsonObject,
+    TStorage extends Record<string, AbstractType<any>>
+> {
+    // components
+    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
+
+    // hooks
+    usePluvBroadcast: <
+        TMessage extends InferEventMessage<InferIOInput<TIO>>
+    >() => (message: TMessage) => void;
+    usePluvConnection: <T extends unknown = WebSocketConnection>(
+        selector: (connection: WebSocketConnection) => T,
+        options?: SubscriptionHookOptions<Id<T>>
+    ) => Id<T>;
+    usePluvEvent: <TType extends keyof InferIOOutput<TIO>>(
+        type: TType,
+        callback: (data: Id<IOEventMessage<TIO, TType>>) => void
+    ) => void;
+    usePluvMyPresence: <T extends unknown = TPresence>(
+        selector?: (myPresence: TPresence) => T,
+        options?: SubscriptionHookOptions<Id<T> | null>
+    ) => [
+        myPresence: Id<T> | null,
+        updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>
+    ];
+    usePluvMyself: <T extends unknown = UserInfo<TIO, TPresence>>(
+        selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T,
+        options?: SubscriptionHookOptions<Id<T> | null>
+    ) => Id<T> | null;
+    usePluvOther: <T extends unknown = UserInfo<TIO, TPresence>>(
+        connectionId: string,
+        selector?: (other: UserInfo<TIO, TPresence>) => T,
+        options?: SubscriptionHookOptions<Id<T> | null>
+    ) => Id<T> | null;
+    usePluvOthers: <T extends unknown = UserInfo<TIO, TPresence>>(
+        selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[],
+        options?: SubscriptionHookOptions<readonly Id<T>[]>
+    ) => readonly Id<T>[];
+    usePluvRoom: () => PluvRoom<TIO, TPresence>;
+    usePluvStorage: <
+        TKey extends keyof TStorage,
+        TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>
+    >(
+        key: TKey,
+        selector?: (data: InferYjsSharedTypeJson<TStorage[TKey]>) => TData,
+        options?: SubscriptionHookOptions<TData | null>
+    ) => [data: TData | null, sharedType: TStorage[TKey] | null];
+}
+
+export const createRoomBundle = <
+    TIO extends IOLike,
+    TPresence extends JsonObject = {},
+    TStorage extends Record<string, AbstractType<any>> = {}
+>(
+    client: PluvClient<TIO>,
+    options: CreateRoomBundleOptions<TPresence, TStorage> = {}
+): CreateRoomBundle<TIO, TPresence, TStorage> => {
+    /**
+     * !HACK
+     * @description We'll let the context error out if the room is not provided,
+     * and let the users deal with it.
+     * @author leedavidcs
+     * @date November 11, 2022
+     */
+    const PluvRoomContext = createContext<PluvRoom<TIO, TPresence, TStorage>>(
+        null as any
+    );
+
+    const PluvRoomProvider = memo<
+        PluvRoomProviderProps<TIO, TPresence, TStorage>
+    >((props) => {
+        const {
+            children,
+            debug,
+            initialPresence,
+            initialStorage,
+            onAuthorizationFail,
+            room: _room,
+        } = props;
+
+        const rerender = useRerender();
+
+        const [room] = useState<PluvRoom<TIO, TPresence, TStorage>>(() => {
+            return client.createRoom<TPresence, TStorage>(_room, {
+                debug,
+                initialPresence,
+                initialStorage:
+                    typeof initialStorage === "function"
+                        ? initialStorage
+                        : options.initialStorage,
+                presence: options.presence,
+                onAuthorizationFail,
+            });
+        });
+
+        useEffect(() => {
+            const unsubscribe = room.subscribe("connection", () => {
+                rerender();
+            });
+
+            return () => {
+                unsubscribe();
+            };
+        }, [rerender, room]);
+
+        useEffect(() => {
+            client.enter(_room);
+
+            return () => {
+                client.leave(_room);
+            };
+        }, [_room]);
+
+        return (
+            <PluvRoomContext.Provider value={room}>
+                {children}
+            </PluvRoomContext.Provider>
+        );
+    });
+
+    PluvRoomProvider.displayName = "PluvRoomProvider";
+
+    const usePluvRoom = () => useContext(PluvRoomContext);
+
+    const usePluvBroadcast = <
+        TMessage extends InferEventMessage<InferIOInput<TIO>>
+    >(): ((message: TMessage) => void) => {
+        const room = usePluvRoom();
+
+        return useCallback(
+            (message: TMessage) => {
+                room.broadcast(message);
+            },
+            [room]
+        );
+    };
+
+    const usePluvConnection = <T extends unknown = WebSocketConnection>(
+        selector = identity as (connection: WebSocketConnection) => T,
+        options?: SubscriptionHookOptions<Id<T>>
+    ): Id<T> => {
+        const room = usePluvRoom();
+
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => {
+                return room.subscribe("connection", onStoreChange);
+            },
+            [room]
+        );
+
+        const getSnapshot = room.getConnection;
+
+        const _selector = useCallback(
+            (snapshot: WebSocketConnection) => selector(snapshot) as Id<T>,
+            [selector]
+        );
+
+        return useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            _selector,
+            options?.isEqual
+        );
+    };
+
+    const usePluvEvent = <TType extends keyof InferIOOutput<TIO>>(
+        type: TType,
+        callback: (data: Id<IOEventMessage<TIO, TType>>) => void
+    ): void => {
+        const room = usePluvRoom();
+
+        useEffect(() => {
+            const unsubscribe = room.event(type, callback);
+
+            return () => {
+                unsubscribe();
+            };
+        }, [callback, room, type]);
+    };
+
+    const usePluvMyPresence = <T extends unknown = TPresence>(
+        selector = identity as (myPresence: TPresence) => T,
+        options?: SubscriptionHookOptions<Id<T> | null>
+    ): [Id<T> | null, Dispatch<UpdateMyPresenceAction<TPresence>>] => {
+        const room = usePluvRoom();
+
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => {
+                return room.subscribe("my-presence", onStoreChange);
+            },
+            [room]
+        );
+
+        const getSnapshot = room.getMyPresence;
+
+        const _selector = useCallback(
+            (snapshot: TPresence | null) => {
+                return !snapshot ? null : (selector(snapshot) as Id<T>);
+            },
+            [selector]
+        );
+
+        const myPresence = useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            _selector,
+            options?.isEqual
+        );
+
+        const updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>> =
+            useCallback(
+                (value: UpdateMyPresenceAction<TPresence>): void => {
+                    const oldMyPresence = room.getMyPresence();
+                    const presence =
+                        typeof value === "function"
+                            ? value(oldMyPresence)
+                            : value;
+
+                    room.broadcast({
+                        type: "$UPDATE_PRESENCE",
+                        data: { presence },
+                    } as InferEventMessage<InferIOInput<TIO>>);
+                },
+                [room]
+            );
+
+        return [myPresence, updateMyPresence];
+    };
+
+    const usePluvMyself = <T extends unknown = UserInfo<TIO, TPresence>>(
+        selector = identity as (myself: Id<UserInfo<TIO, TPresence>>) => T,
+        options?: SubscriptionHookOptions<Id<T> | null>
+    ): Id<T> | null => {
+        const room = usePluvRoom();
+
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => {
+                return room.subscribe("myself", onStoreChange);
+            },
+            [room]
+        );
+
+        const getSnapshot = room.getMyself;
+
+        const _selector = useCallback(
+            (snapshot: Id<UserInfo<TIO, TPresence>> | null) => {
+                return !snapshot ? null : (selector(snapshot) as Id<T>);
+            },
+            [selector]
+        );
+
+        return useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            _selector,
+            options?.isEqual
+        );
+    };
+
+    const usePluvOther = <T extends unknown = UserInfo<TIO, TPresence>>(
+        connectionId: string,
+        selector = identity as (other: UserInfo<TIO, TPresence>) => T,
+        options?: SubscriptionHookOptions<Id<T> | null>
+    ): Id<T> | null => {
+        const room = usePluvRoom();
+
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => {
+                return room.other(connectionId, onStoreChange);
+            },
+            [room, connectionId]
+        );
+
+        const getSnapshot = useCallback(
+            () => room.getOther(connectionId),
+            [room, connectionId]
+        );
+
+        const _selector = useCallback(
+            (snapshot: Id<UserInfo<TIO, TPresence>> | null) => {
+                return !snapshot ? null : (selector(snapshot) as Id<T>);
+            },
+            [selector]
+        );
+
+        return useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            _selector,
+            options?.isEqual
+        );
+    };
+
+    const usePluvOthers = <T extends unknown = UserInfo<TIO, TPresence>>(
+        selector = identity as (
+            other: readonly Id<UserInfo<TIO, TPresence>>[]
+        ) => T[],
+        options?: SubscriptionHookOptions<readonly Id<T>[]>
+    ): readonly Id<T>[] => {
+        const room = usePluvRoom();
+
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => {
+                return room.subscribe("others", onStoreChange);
+            },
+            [room]
+        );
+
+        const getSnapshot = room.getOthers;
+
+        return useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            selector as (
+                other: readonly Id<UserInfo<TIO, TPresence>>[]
+            ) => Id<T>[],
+            options?.isEqual ?? shallowArrayEqual
+        );
+    };
+
+    const usePluvStorage = <
+        TKey extends keyof TStorage,
+        TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>
+    >(
+        key: TKey,
+        selector = identity as (
+            data: InferYjsSharedTypeJson<TStorage[TKey]>
+        ) => TData,
+        options?: SubscriptionHookOptions<TData | null>
+    ): [data: TData | null, sharedType: TStorage[TKey] | null] => {
+        const room = usePluvRoom();
+
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => room.storage(key, onStoreChange),
+            [key, room]
+        );
+
+        const getSnapshot = useCallback((): InferYjsSharedTypeJson<
+            TStorage[TKey]
+        > | null => {
+            return room.getStorage(key)?.toJSON() ?? null;
+        }, [key, room]);
+
+        const _selector = useCallback(
+            (snapshot: InferYjsSharedTypeJson<TStorage[TKey]> | null) => {
+                return !snapshot ? null : selector(snapshot);
+            },
+            [selector]
+        );
+
+        const data = useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            _selector,
+            options?.isEqual ?? fastDeepEqual
+        );
+
+        const sharedType = room.getStorage(key);
+
+        return [data, sharedType];
+    };
+
+    return {
+        // components
+        PluvRoomProvider,
+
+        // hooks
+        usePluvBroadcast,
+        usePluvConnection,
+        usePluvEvent,
+        usePluvMyPresence,
+        usePluvMyself,
+        usePluvOther,
+        usePluvOthers,
+        usePluvRoom,
+        usePluvStorage,
+    };
+};

package/src/index.ts

@@ -0,0 +1,16 @@
+export type { AbstractType } from "@pluv/client";
+export { ConnectionState, createClient, y } from "@pluv/client";
+export type {
+    BaseUser,
+    EventMessage,
+    EventRecord,
+    IOEventMessage,
+} from "@pluv/types";
+export type { CreateBundle, PluvProviderProps } from "./createBundle";
+export { createBundle } from "./createBundle";
+export type {
+    CreateRoomBundle,
+    CreateRoomBundleOptions,
+    PluvRoomProviderProps,
+    SubscriptionHookOptions,
+} from "./createRoomBundle";

package/src/internal/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useRerender } from "./useRerender";
+export { useSyncExternalStore } from "./useSyncExternalStore";
+export { useSyncExternalStoreWithSelector } from "./useSyncExternalStoreWithSelector";

package/src/internal/hooks/useRerender.ts

@@ -0,0 +1,9 @@
+import { useCallback, useState } from "react";
+
+export const useRerender = (): (() => void) => {
+    const [, setCount] = useState(0);
+
+    return useCallback(() => {
+        setCount((oldCount) => (oldCount + 1) % Number.MAX_SAFE_INTEGER);
+    }, []);
+};

package/src/internal/hooks/useSyncExternalStore.ts

@@ -0,0 +1,14 @@
+import { useSyncExternalStoreWithSelector } from "./useSyncExternalStoreWithSelector";
+import { identity } from "../utils";
+
+export const useSyncExternalStore = <TSnapshot extends unknown>(
+    subscribe: (onStoreChange: () => void) => () => void,
+    getSnapshot: () => TSnapshot,
+    getServerSnapshot: undefined | null | (() => TSnapshot)
+) =>
+    useSyncExternalStoreWithSelector(
+        subscribe,
+        getSnapshot,
+        getServerSnapshot,
+        identity
+    );

package/src/internal/hooks/useSyncExternalStoreWithSelector.ts

@@ -0,0 +1 @@
+export { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";

package/src/internal/index.ts

@@ -0,0 +1,6 @@
+export {
+    useRerender,
+    useSyncExternalStore,
+    useSyncExternalStoreWithSelector,
+} from "./hooks";
+export { identity, shallowArrayEqual } from "./utils";

package/src/internal/utils/identity.ts

@@ -0,0 +1 @@
+export const identity = <T extends unknown>(x: T): T => x;

package/src/internal/utils/index.ts

@@ -0,0 +1,2 @@
+export { identity } from "./identity";
+export { shallowArrayEqual } from "./shallowArrayEqual";

package/src/internal/utils/shallowArrayEqual.ts

@@ -0,0 +1,6 @@
+export const shallowArrayEqual = <T extends unknown>(
+    a: readonly T[] | T[],
+    b: readonly T[] | T[]
+): boolean => {
+    return a.length === b.length && a.every((item, i) => item === b[i]);
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+	"extends": "@pluv/tsconfig/react-library.json",
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}