@pluv/react 0.2.0 → 0.4.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@0.2.0 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.4.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
@@ -8,10 +8,10 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 7.70 KB
-ESM ⚡️ Build success in 61ms
-CJS dist/index.js 9.70 KB
-CJS ⚡️ Build success in 69ms
+CJS dist/index.js 10.35 KB
+CJS ⚡️ Build success in 126ms
+ESM dist/index.mjs 8.27 KB
+ESM ⚡️ Build success in 149ms
 DTS Build start
-DTS ⚡️ Build success in 5341ms
-DTS dist/index.d.ts 3.92 KB
+DTS ⚡️ Build success in 4416ms
+DTS dist/index.d.ts 4.37 KB

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @pluv/react
 
+## 0.4.0
+
+### Minor Changes
+
+- 043c915: Added MockedDataProvider from createRoomBundle
+
+### Patch Changes
+
+- 93f8c54: chore(deps): update dependency @types/react to v18.0.27
+- Updated dependencies [595e66f]
+  - @pluv/client@0.4.0
+
+## 0.3.0
+
+### Minor Changes
+
+- 043c915: Added MockedDataProvider from createRoomBundle
+
+### Patch Changes
+
+- 93f8c54: chore(deps): update dependency @types/react to v18.0.27
+- Updated dependencies [595e66f]
+  - @pluv/client@0.3.0
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1,34 +1,37 @@
-import { PluvRoomDebug, WebSocketConnection, UserInfo, PluvRoom, InferYjsSharedTypeJson, PluvClient } from '@pluv/client';
+import { PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, InferYjsSharedTypeJson, MockedRoomEvents, PluvClient } from '@pluv/client';
 export { AbstractType, ConnectionState, createClient, y } from '@pluv/client';
 import * as _pluv_types from '@pluv/types';
 import { JsonObject, InputZodLike, IOLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
-import { ReactNode, FC, Dispatch } from 'react';
+import { FC, Dispatch, ReactNode } 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>>> = {
+type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, AbstractType<any>>> = {
     children?: ReactNode;
-    debug?: boolean | PluvRoomDebug<TIO>;
-    onAuthorizationFail?: (error: Error) => void;
+    initialStorage?: keyof TStorage extends never ? never : () => TStorage;
     room: string;
 } & (keyof TPresence extends never ? {
     initialPresence?: never;
 } : {
     initialPresence: TPresence;
-}) & (keyof TStorage extends never ? {
-    initialStorage?: never;
-} : {
-    initialStorage?: () => TStorage;
 });
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractType<any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+    events?: MockedRoomEvents<TIO>;
+};
+type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractType<any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+    debug?: boolean | PluvRoomDebug<TIO>;
+    onAuthorizationFail?: (error: Error) => void;
+};
 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>>> {
+    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
     usePluvBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
     usePluvConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
@@ -40,7 +43,7 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     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>;
+    usePluvRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
     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];
 }
 

package/dist/index.js

@@ -26,19 +26,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ConnectionState: () => import_client.ConnectionState,
+  ConnectionState: () => import_client2.ConnectionState,
   createBundle: () => createBundle,
-  createClient: () => import_client.createClient,
-  y: () => import_client.y
+  createClient: () => import_client2.createClient,
+  y: () => import_client2.y
 });
 module.exports = __toCommonJS(src_exports);
-var import_client = require("@pluv/client");
+var import_client2 = require("@pluv/client");
 
 // src/createBundle.tsx
 var import_react4 = require("react");
 var import_react5 = require("react");
 
 // src/createRoomBundle.tsx
+var import_client = require("@pluv/client");
 var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
 var import_react2 = require("react");
 var import_react3 = require("react");
@@ -66,9 +67,29 @@ var shallowArrayEqual = (a, b) => {
 // src/createRoomBundle.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var createRoomBundle = (client, options = {}) => {
-  const PluvRoomContext = (0, import_react2.createContext)(
-    null
-  );
+  const PluvRoomContext = (0, import_react2.createContext)(null);
+  const MockedRoomProvider = (0, import_react3.memo)((props) => {
+    const {
+      children,
+      events,
+      initialPresence,
+      initialStorage,
+      room: _room
+    } = props;
+    const [room] = (0, import_react2.useState)(() => {
+      return new import_client.MockedRoom(_room, {
+        events,
+        initialPresence,
+        initialStorage,
+        presence: options.presence
+      });
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, {
+      value: room,
+      children
+    });
+  });
+  MockedRoomProvider.displayName = "MockedRoomProvider";
   const PluvRoomProvider = (0, import_react3.memo)((props) => {
     const {
       children,
@@ -278,6 +299,7 @@ var createRoomBundle = (client, options = {}) => {
     return [data, sharedType];
   };
   return {
+    MockedRoomProvider,
     PluvRoomProvider,
     usePluvBroadcast,
     usePluvConnection,

package/dist/index.mjs

@@ -6,6 +6,7 @@ import { createContext as createContext2 } from "react";
 import { memo as memo2, useContext as useContext2 } from "react";
 
 // src/createRoomBundle.tsx
+import { MockedRoom } from "@pluv/client";
 import fastDeepEqual from "fast-deep-equal";
 import { createContext, useState as useState2 } from "react";
 import { memo, useCallback as useCallback2, useContext, useEffect } from "react";
@@ -33,9 +34,29 @@ var shallowArrayEqual = (a, b) => {
 // src/createRoomBundle.tsx
 import { jsx } from "react/jsx-runtime";
 var createRoomBundle = (client, options = {}) => {
-  const PluvRoomContext = createContext(
-    null
-  );
+  const PluvRoomContext = createContext(null);
+  const MockedRoomProvider = memo((props) => {
+    const {
+      children,
+      events,
+      initialPresence,
+      initialStorage,
+      room: _room
+    } = props;
+    const [room] = useState2(() => {
+      return new MockedRoom(_room, {
+        events,
+        initialPresence,
+        initialStorage,
+        presence: options.presence
+      });
+    });
+    return /* @__PURE__ */ jsx(PluvRoomContext.Provider, {
+      value: room,
+      children
+    });
+  });
+  MockedRoomProvider.displayName = "MockedRoomProvider";
   const PluvRoomProvider = memo((props) => {
     const {
       children,
@@ -245,6 +266,7 @@ var createRoomBundle = (client, options = {}) => {
     return [data, sharedType];
   };
   return {
+    MockedRoomProvider,
     PluvRoomProvider,
     usePluvBroadcast,
     usePluvConnection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "@types/use-sync-external-store": "^0.0.3",
     "fast-deep-equal": "^3.1.3",
     "use-sync-external-store": "^1.2.0",
-    "@pluv/client": "^0.2.0",
+    "@pluv/client": "^0.4.0",
     "@pluv/types": "^0.1.2"
   },
   "peerDependencies": {
@@ -28,7 +28,7 @@
     "yjs": "^13.0.0"
   },
   "devDependencies": {
-    "@types/react": "18.0.26",
+    "@types/react": "18.0.27",
     "react": "18.2.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",

package/src/createRoomBundle.tsx

@@ -1,11 +1,14 @@
 import type {
+    AbstractRoom,
     InferYjsSharedTypeJson,
+    MockedRoomEvents,
     PluvClient,
+    PluvRoom,
     PluvRoomDebug,
     UserInfo,
     WebSocketConnection,
 } from "@pluv/client";
-import type { PluvRoom } from "@pluv/client";
+import { MockedRoom } from "@pluv/client";
 import type {
     Id,
     InferIOInput,
@@ -34,21 +37,33 @@ export interface CreateRoomBundleOptions<
     presence?: InputZodLike<TPresence>;
 }
 
-export type PluvRoomProviderProps<
-    TIO extends IOLike,
+type BaseRoomProviderProps<
     TPresence extends JsonObject,
     TStorage extends Record<string, AbstractType<any>>
 > = {
     children?: ReactNode;
-    debug?: boolean | PluvRoomDebug<TIO>;
-    onAuthorizationFail?: (error: Error) => void;
+    initialStorage?: keyof TStorage extends never ? never : () => TStorage;
     room: string;
 } & (keyof TPresence extends never
     ? { initialPresence?: never }
-    : { initialPresence: TPresence }) &
-    (keyof TStorage extends never
-        ? { initialStorage?: never }
-        : { initialStorage?: () => TStorage });
+    : { initialPresence: TPresence });
+
+export type MockedRoomProviderProps<
+    TIO extends IOLike,
+    TPresence extends JsonObject,
+    TStorage extends Record<string, AbstractType<any>>
+> = BaseRoomProviderProps<TPresence, TStorage> & {
+    events?: MockedRoomEvents<TIO>;
+};
+
+export type PluvRoomProviderProps<
+    TIO extends IOLike,
+    TPresence extends JsonObject,
+    TStorage extends Record<string, AbstractType<any>>
+> = BaseRoomProviderProps<TPresence, TStorage> & {
+    debug?: boolean | PluvRoomDebug<TIO>;
+    onAuthorizationFail?: (error: Error) => void;
+};
 
 export interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;
@@ -64,6 +79,7 @@ export interface CreateRoomBundle<
     TStorage extends Record<string, AbstractType<any>>
 > {
     // components
+    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
 
     // hooks
@@ -99,7 +115,7 @@ export interface CreateRoomBundle<
         selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[],
         options?: SubscriptionHookOptions<readonly Id<T>[]>
     ) => readonly Id<T>[];
-    usePluvRoom: () => PluvRoom<TIO, TPresence>;
+    usePluvRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
     usePluvStorage: <
         TKey extends keyof TStorage,
         TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>
@@ -125,9 +141,38 @@ export const createRoomBundle = <
      * @author leedavidcs
      * @date November 11, 2022
      */
-    const PluvRoomContext = createContext<PluvRoom<TIO, TPresence, TStorage>>(
-        null as any
-    );
+    const PluvRoomContext = createContext<
+        AbstractRoom<TIO, TPresence, TStorage>
+    >(null as any);
+
+    const MockedRoomProvider = memo<
+        MockedRoomProviderProps<TIO, TPresence, TStorage>
+    >((props) => {
+        const {
+            children,
+            events,
+            initialPresence,
+            initialStorage,
+            room: _room,
+        } = props;
+
+        const [room] = useState<MockedRoom<TIO, TPresence, TStorage>>(() => {
+            return new MockedRoom<TIO, TPresence, TStorage>(_room, {
+                events,
+                initialPresence,
+                initialStorage,
+                presence: options.presence,
+            });
+        });
+
+        return (
+            <PluvRoomContext.Provider value={room}>
+                {children}
+            </PluvRoomContext.Provider>
+        );
+    });
+
+    MockedRoomProvider.displayName = "MockedRoomProvider";
 
     const PluvRoomProvider = memo<
         PluvRoomProviderProps<TIO, TPresence, TStorage>
@@ -435,6 +480,7 @@ export const createRoomBundle = <
 
     return {
         // components
+        MockedRoomProvider,
         PluvRoomProvider,
 
         // hooks