@pluv/react 0.1.3 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@0.1.3 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.3.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 86ms
-CJS dist/index.js 9.71 KB
-CJS ⚡️ Build success in 88ms
+ESM dist/index.mjs 8.27 KB
+ESM ⚡️ Build success in 134ms
+CJS dist/index.js 10.35 KB
+CJS ⚡️ Build success in 164ms
 DTS Build start
-DTS ⚡️ Build success in 5192ms
-DTS dist/index.d.ts 3.92 KB
+DTS ⚡️ Build success in 4002ms
+DTS dist/index.d.ts 4.37 KB

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @pluv/react
 
+## 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
+
+- 95b5ef8: breaking: update PluvRoom.broadcast api
+
+### Patch Changes
+
+- Updated dependencies [95b5ef8]
+  - @pluv/client@0.2.0
+  - @pluv/types@0.1.2
+
 ## 0.1.3
 
 ### Patch Changes

package/README.md

@@ -26,7 +26,9 @@
   <img src="https://img.shields.io/badge/docs-coming%20soon!-blue" alt="Docs coming soon!" />
 </p>
 
-<img src="https://github.com/pluv-io/pluv/blob/master/assets/demo-events.gif?raw=true" alt="Demo" />
+<p align="center">
+  <img src="https://github.com/pluv-io/pluv/blob/master/assets/demo-events.gif?raw=true" alt="Demo" />
+</p>
 
 ## `@pluv/react`
 
@@ -130,12 +132,9 @@ export const MyRoom: FC<Record<string, never>> = () => {
     return (
         <button
             onClick={() => {
-                broadcast({
-                    type: "SEND_MESSAGE",
-                    data: {
-                        // TypeScript will require that message is typed as string
-                        message: "Hello world!",
-                    }
+                broadcast("SEND_MESSAGE", {
+                    // TypeScript will require that message is typed as string
+                    message: "Hello world!",
                 });
             }}
             type="button"

package/dist/index.d.ts

@@ -1,36 +1,39 @@
-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, Id, InferEventMessage, InferIOInput, InferIOOutput, IOEventMessage } 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: <TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>>() => (message: TMessage) => void;
+    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>;
     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>) => [
@@ -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,
@@ -112,8 +133,8 @@ var createRoomBundle = (client, options = {}) => {
   const usePluvBroadcast = () => {
     const room = usePluvRoom();
     return (0, import_react3.useCallback)(
-      (message) => {
-        room.broadcast(message);
+      (event, data) => {
+        room.broadcast(event, data);
       },
       [room]
     );
@@ -174,10 +195,10 @@ var createRoomBundle = (client, options = {}) => {
       (value) => {
         const oldMyPresence = room.getMyPresence();
         const presence = typeof value === "function" ? value(oldMyPresence) : value;
-        room.broadcast({
-          type: "$UPDATE_PRESENCE",
-          data: { presence }
-        });
+        room.broadcast(
+          "$UPDATE_PRESENCE",
+          { presence }
+        );
       },
       [room]
     );
@@ -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,
@@ -79,8 +100,8 @@ var createRoomBundle = (client, options = {}) => {
   const usePluvBroadcast = () => {
     const room = usePluvRoom();
     return useCallback2(
-      (message) => {
-        room.broadcast(message);
+      (event, data) => {
+        room.broadcast(event, data);
       },
       [room]
     );
@@ -141,10 +162,10 @@ var createRoomBundle = (client, options = {}) => {
       (value) => {
         const oldMyPresence = room.getMyPresence();
         const presence = typeof value === "function" ? value(oldMyPresence) : value;
-        room.broadcast({
-          type: "$UPDATE_PRESENCE",
-          data: { presence }
-        });
+        room.broadcast(
+          "$UPDATE_PRESENCE",
+          { presence }
+        );
       },
       [room]
     );
@@ -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.1.3",
+  "version": "0.3.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.1.3",
+    "@pluv/client": "^0.3.0",
     "@pluv/types": "^0.1.2"
   },
   "peerDependencies": {
@@ -28,13 +28,13 @@
     "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",
     "yjs": "^13.5.44",
     "@pluv/tsconfig": "^0.1.2",
-    "eslint-config-pluv": "^0.1.2"
+    "eslint-config-pluv": "^0.1.3"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createRoomBundle.tsx

@@ -1,14 +1,16 @@
 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,
-    InferEventMessage,
     InferIOInput,
     InferIOOutput,
     InputZodLike,
@@ -35,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;
@@ -65,12 +79,14 @@ export interface CreateRoomBundle<
     TStorage extends Record<string, AbstractType<any>>
 > {
     // components
+    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
 
     // hooks
-    usePluvBroadcast: <
-        TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>
-    >() => (message: TMessage) => void;
+    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>>
@@ -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>
@@ -185,14 +230,18 @@ export const createRoomBundle = <
 
     const usePluvRoom = () => useContext(PluvRoomContext);
 
-    const usePluvBroadcast = <
-        TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>
-    >(): ((message: TMessage) => void) => {
+    const usePluvBroadcast = (): (<TEvent extends keyof InferIOInput<TIO>>(
+        event: TEvent,
+        data: Id<InferIOInput<TIO>[TEvent]>
+    ) => void) => {
         const room = usePluvRoom();
 
         return useCallback(
-            (message: TMessage) => {
-                room.broadcast(message);
+            <TEvent extends keyof InferIOInput<TIO>>(
+                event: TEvent,
+                data: Id<InferIOInput<TIO>[TEvent]>
+            ) => {
+                room.broadcast(event, data);
             },
             [room]
         );
@@ -281,10 +330,10 @@ export const createRoomBundle = <
                             ? value(oldMyPresence)
                             : value;
 
-                    room.broadcast({
-                        type: "$UPDATE_PRESENCE",
-                        data: { presence },
-                    } as Id<InferEventMessage<InferIOInput<TIO>>>);
+                    room.broadcast(
+                        "$UPDATE_PRESENCE" as keyof InferIOInput<TIO>,
+                        { presence } as any
+                    );
                 },
                 [room]
             );
@@ -431,6 +480,7 @@ export const createRoomBundle = <
 
     return {
         // components
+        MockedRoomProvider,
         PluvRoomProvider,
 
         // hooks