@pluv/client 0.1.3 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/client@0.1.3 build /home/runner/work/pluv/pluv/packages/client
+> @pluv/client@0.3.0 build /home/runner/work/pluv/pluv/packages/client
 > tsup src/index.ts --format esm,cjs --dts
 
 CLI Building entry: src/index.ts
@@ -8,10 +8,10 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 29.33 KB
-ESM ⚡️ Build success in 95ms
-CJS dist/index.js 30.41 KB
-CJS ⚡️ Build success in 96ms
+CJS dist/index.js 34.07 KB
+CJS ⚡️ Build success in 83ms
+ESM dist/index.mjs 32.92 KB
+ESM ⚡️ Build success in 88ms
 DTS Build start
-DTS ⚡️ Build success in 3487ms
-DTS dist/index.d.ts 8.23 KB
+DTS ⚡️ Build success in 3519ms
+DTS dist/index.d.ts 11.52 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @pluv/client
 
+## 0.3.0
+
+### Minor Changes
+
+- 595e66f: added mocked-room for mocking a client-side room for testing
+
+## 0.2.0
+
+### Minor Changes
+
+- 95b5ef8: breaking: update PluvRoom.broadcast api
+
+### Patch Changes
+
+- Updated dependencies [6858682]
+  - @pluv/crdt-yjs@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/client`
 

package/dist/index.d.ts

@@ -1,17 +1,12 @@
 import { InferYjsSharedTypeJson, array, map, text, unstable__object } from '@pluv/crdt-yjs';
 export { InferYjsSharedTypeJson } from '@pluv/crdt-yjs';
 import * as _pluv_types from '@pluv/types';
-import { IOLike, InferIOOutput, Id, IOEventMessage, JsonObject, InferIOAuthorizeUser, InferIOAuthorize, InputZodLike, InferIOInput, InferEventMessage, InferIOAuthorizeRequired } from '@pluv/types';
+import { IOLike, InferIOOutput, Id, IOEventMessage, JsonObject, InferIOAuthorizeUser, InferIOAuthorize, InferIOInput, InputZodLike, InferIOAuthorizeRequired } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
 import { AbstractType } from 'yjs';
 export { AbstractType } from 'yjs';
 import { Subject } from 'wonka';
 
-interface CrdtManagerOptions<TStorage extends Record<string, AbstractType<any>> = {}> {
-    encodedState?: string | Uint8Array | null;
-    initialStorage?: () => TStorage;
-}
-
 type EventNotifierSubscriptionCallback<TIO extends IOLike, TEvent extends keyof InferIOOutput<TIO>> = (value: Id<IOEventMessage<TIO, TEvent>>) => void;
 
 interface AuthorizationState<TIO extends IOLike> {
@@ -51,6 +46,27 @@ interface StateNotifierSubjects<TIO extends IOLike, TPresence extends JsonObject
 type InferSubjectValue<TIO extends IOLike, TPresence extends JsonObject, TSubject extends keyof StateNotifierSubjects<TIO, TPresence>> = StateNotifierSubjects<TIO, TPresence>[TSubject] extends Subject<infer IValue> ? Id<IValue> : never;
 type SubscriptionCallback<TIO extends IOLike, TPresence extends JsonObject, TSubject extends keyof StateNotifierSubjects<TIO, TPresence>> = (value: InferSubjectValue<TIO, TPresence, TSubject>) => void;
 
+declare abstract class AbstractRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> {
+    readonly id: string;
+    constructor(room: string);
+    abstract broadcast<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>): void;
+    abstract event<TEvent extends keyof InferIOOutput<TIO>>(event: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>): () => void;
+    abstract getConnection(): WebSocketConnection;
+    abstract getMyPresence(): TPresence | null;
+    abstract getMyself(): Id<UserInfo<TIO, TPresence>> | null;
+    abstract getOther(connectionId: string): Id<UserInfo<TIO, TPresence>> | null;
+    abstract getOthers(): readonly Id<UserInfo<TIO, TPresence>>[];
+    abstract getStorage<TKey extends keyof TStorage>(key: TKey): TStorage[TKey] | null;
+    abstract other(connectionId: string, callback: OtherNotifierSubscriptionCallback<TIO>): () => void;
+    abstract storage<TKey extends keyof TStorage>(key: TKey, fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void): () => void;
+    abstract subscribe<TSubject extends keyof StateNotifierSubjects<TIO, TPresence>>(name: TSubject, callback: SubscriptionCallback<TIO, TPresence, TSubject>): () => void;
+}
+
+interface CrdtManagerOptions<TStorage extends Record<string, AbstractType<any>> = {}> {
+    encodedState?: string | Uint8Array | null;
+    initialStorage?: () => TStorage;
+}
+
 type UsersManagerConfig<TPresence extends JsonObject = {}> = {
     initialPresence?: TPresence;
     presence?: InputZodLike<TPresence>;
@@ -85,9 +101,8 @@ type PluvRoomOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TSto
     onAuthorizationFail?: (error: Error) => void;
 } & Omit<CrdtManagerOptions<TStorage>, "encodedState"> & UsersManagerConfig<TPresence>;
 type RoomConfig<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> = RoomEndpoints<TIO> & PluvRoomOptions<TIO, TPresence, TStorage>;
-declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> {
+declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> extends AbstractRoom<TIO, TPresence, TStorage> {
     readonly _endpoints: RoomEndpoints<TIO>;
-    readonly id: string;
     private _crdtManager;
     private _crdtNotifier;
     private _debug;
@@ -105,10 +120,10 @@ declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TS
     private _usersManager;
     constructor(room: string, options: RoomConfig<TIO, TPresence, TStorage>);
     get webSocket(): WebSocket | null;
-    broadcast(message: Id<InferEventMessage<InferIOInput<TIO>>>): void;
+    broadcast<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>): void;
     connect(): Promise<void>;
     disconnect(): void;
-    event: <TEvent extends keyof InferIOOutput<TIO>>(name: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>) => (() => void);
+    event: <TEvent extends keyof InferIOOutput<TIO>>(event: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>) => (() => void);
     getConnection(): WebSocketConnection;
     getMyPresence: () => TPresence | null;
     getMyself: () => Id<UserInfo<TIO, TPresence>> | null;
@@ -182,6 +197,37 @@ declare class PluvClient<TIO extends IOLike = IOLike> {
 
 declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}> = IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
 
+type MockedRoomEvents<TIO extends IOLike> = {
+    [P in keyof InferIOInput<TIO>]: (data: Id<InferIOInput<TIO>[P]>) => Partial<InferIOOutput<TIO>>;
+};
+type MockedRoomConfig<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> = {
+    events?: MockedRoomEvents<TIO>;
+} & Omit<CrdtManagerOptions<TStorage>, "encodedState"> & UsersManagerConfig<TPresence>;
+declare class MockedRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> extends AbstractRoom<TIO, TPresence, TStorage> {
+    private _crdtManager;
+    private _crdtNotifier;
+    private _eventNotifier;
+    private _events?;
+    private _otherNotifier;
+    private _state;
+    private _stateNotifier;
+    private _subscriptions;
+    private _usersManager;
+    constructor(room: string, options: MockedRoomConfig<TIO, TPresence, TStorage>);
+    broadcast<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>): void;
+    event: <TEvent extends keyof InferIOOutput<TIO>>(event: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>) => (() => void);
+    getConnection(): WebSocketConnection;
+    getMyPresence: () => TPresence | null;
+    getMyself: () => Id<UserInfo<TIO, TPresence>> | null;
+    getOther: (connectionId: string) => Id<UserInfo<TIO, TPresence>> | null;
+    getOthers: () => readonly Id<UserInfo<TIO, TPresence>>[];
+    getStorage: <TKey extends keyof TStorage>(key: TKey) => TStorage[TKey] | null;
+    other: (connectionId: string, callback: OtherNotifierSubscriptionCallback<TIO>) => (() => void);
+    storage: <TKey extends keyof TStorage>(key: TKey, fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void) => (() => void);
+    subscribe: <TSubject extends keyof StateNotifierSubjects<TIO, TPresence>>(name: TSubject, callback: SubscriptionCallback<TIO, TPresence, TSubject>) => (() => void);
+    private _observeCrdt;
+}
+
 declare const y_array: typeof array;
 declare const y_map: typeof map;
 declare const y_text: typeof text;
@@ -195,4 +241,4 @@ declare namespace y {
   };
 }
 
-export { ConnectionState, PluvClient, PluvClientOptions, PluvRoom, PluvRoomDebug, UserInfo, WebSocketConnection, WebSocketState, createClient, y };
+export { AbstractRoom, ConnectionState, MockedRoom, MockedRoomConfig, MockedRoomEvents, PluvClient, PluvClientOptions, PluvRoom, PluvRoomDebug, UserInfo, WebSocketConnection, WebSocketState, createClient, y };

package/dist/index.js

@@ -57,7 +57,9 @@ var __async = (__this, __arguments, generator) => {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AbstractRoom: () => AbstractRoom,
   ConnectionState: () => ConnectionState,
+  MockedRoom: () => MockedRoom,
   PluvClient: () => PluvClient,
   PluvRoom: () => PluvRoom,
   createClient: () => createClient,
@@ -65,6 +67,13 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/AbstractRoom.ts
+var AbstractRoom = class {
+  constructor(room) {
+    this.id = room;
+  }
+};
+
 // src/PluvRoom.ts
 var import_crdt_yjs2 = require("@pluv/crdt-yjs");
 
@@ -267,8 +276,18 @@ var UsersManager = class {
 var HEARTBEAT_INTERVAL_MS = 1e4;
 var PONG_TIMEOUT_MS = 2e3;
 var RECONNECT_TIMEOUT_MS = 3e4;
-var PluvRoom = class {
+var PluvRoom = class extends AbstractRoom {
   constructor(room, options) {
+    const {
+      authEndpoint,
+      debug = false,
+      initialPresence,
+      initialStorage,
+      onAuthorizationFail,
+      presence,
+      wsEndpoint
+    } = options;
+    super(room);
     this._crdtManager = null;
     this._crdtNotifier = new CrdtNotifier();
     this._eventNotifier = new EventNotifier();
@@ -298,8 +317,8 @@ var PluvRoom = class {
     };
     this._windowListeners = null;
     this._wsListeners = null;
-    this.event = (name, callback) => {
-      return this._eventNotifier.subscribe(name, callback);
+    this.event = (event, callback) => {
+      return this._eventNotifier.subscribe(event, callback);
     };
     this.getMyPresence = () => {
       var _a, _b;
@@ -327,16 +346,6 @@ var PluvRoom = class {
     this.subscribe = (name, callback) => {
       return this._stateNotifier.subscribe(name, callback);
     };
-    const {
-      authEndpoint,
-      debug = false,
-      initialPresence,
-      initialStorage,
-      onAuthorizationFail,
-      presence,
-      wsEndpoint
-    } = options;
-    this.id = room;
     this._debug = debug;
     this._endpoints = {
       authEndpoint,
@@ -362,12 +371,13 @@ var PluvRoom = class {
   get webSocket() {
     return this._state.webSocket;
   }
-  broadcast(message) {
+  broadcast(event, data) {
     if (!this._state.webSocket)
       return;
     if (this._state.connection.state !== "Open" /* Open */)
       return;
-    this._sendMessage(message);
+    const type = event.toString();
+    this._sendMessage({ data, type });
   }
   connect() {
     return __async(this, null, function* () {
@@ -997,6 +1007,123 @@ var createClient = (options) => {
   return new PluvClient(options);
 };
 
+// src/MockedRoom.ts
+var MockedRoom = class extends AbstractRoom {
+  constructor(room, options) {
+    const { events, initialPresence, initialStorage, presence } = options;
+    super(room);
+    this._crdtManager = null;
+    this._crdtNotifier = new CrdtNotifier();
+    this._eventNotifier = new EventNotifier();
+    this._otherNotifier = new OtherNotifier();
+    this._state = {
+      authorization: {
+        token: null,
+        user: null
+      },
+      connection: {
+        id: null,
+        state: "Untouched" /* Untouched */
+      },
+      webSocket: null
+    };
+    this._stateNotifier = new StateNotifier();
+    this._subscriptions = {
+      observeCrdt: null
+    };
+    this.event = (event, callback) => {
+      return this._eventNotifier.subscribe(event, callback);
+    };
+    this.getMyPresence = () => {
+      var _a, _b;
+      return (_b = (_a = this._usersManager.myself) == null ? void 0 : _a.presence) != null ? _b : null;
+    };
+    this.getMyself = () => {
+      return this._usersManager.myself;
+    };
+    this.getOther = (connectionId) => {
+      return this._usersManager.getOther(connectionId);
+    };
+    this.getOthers = () => {
+      return this._usersManager.getOthers();
+    };
+    this.getStorage = (key) => {
+      var _a, _b;
+      return (_b = (_a = this._crdtManager) == null ? void 0 : _a.get(key)) != null ? _b : null;
+    };
+    this.other = (connectionId, callback) => {
+      return this._otherNotifier.subscribe(connectionId, callback);
+    };
+    this.storage = (key, fn) => {
+      return this._crdtNotifier.subscribe(key, fn);
+    };
+    this.subscribe = (name, callback) => {
+      return this._stateNotifier.subscribe(name, callback);
+    };
+    this._events = events;
+    this._usersManager = new UsersManager({
+      initialPresence,
+      presence
+    });
+    this._crdtManager = new CrdtManager({
+      initialStorage
+    });
+    this._observeCrdt();
+  }
+  broadcast(event, data) {
+    if (!this._events)
+      return;
+    const resolver = this._events[event];
+    if (!resolver)
+      return;
+    const result = resolver(data);
+    Object.keys(result).forEach((type) => {
+      const _type = type.toString();
+      const data2 = result[_type];
+      if (!data2)
+        return;
+      this._eventNotifier.subject(_type).next(data2);
+    });
+  }
+  getConnection() {
+    return Object.freeze(
+      JSON.parse(JSON.stringify(this._state.connection))
+    );
+  }
+  _observeCrdt() {
+    var _a, _b;
+    (_b = (_a = this._subscriptions).observeCrdt) == null ? void 0 : _b.call(_a);
+    if (!this._crdtManager)
+      return;
+    const unsubscribe = this._crdtManager.doc.subscribe(
+      (update, _origin) => {
+        const origin = _origin != null ? _origin : null;
+        if (!this._crdtManager)
+          return;
+        if (!this._state.webSocket)
+          return;
+        if (!this._state.connection.id)
+          return;
+        if (this._state.webSocket.readyState !== WebSocket.OPEN)
+          return;
+        if (origin === "$STORAGE_UPDATED")
+          return;
+        const sharedTypes = this._crdtManager.doc.getSharedTypes();
+        Object.keys(sharedTypes).forEach((key) => {
+          if (!this._crdtManager)
+            return;
+          const sharedType = sharedTypes[key];
+          if (!sharedType)
+            return;
+          const serialized = sharedType.toJSON();
+          this._crdtNotifier.subject(key).next(serialized);
+        });
+      }
+    );
+    this._subscriptions.observeCrdt = unsubscribe;
+  }
+};
+
 // src/y.ts
 var y_exports = {};
 __export(y_exports, {
@@ -1008,7 +1135,9 @@ __export(y_exports, {
 var import_crdt_yjs3 = require("@pluv/crdt-yjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AbstractRoom,
   ConnectionState,
+  MockedRoom,
   PluvClient,
   PluvRoom,
   createClient,

package/dist/index.mjs

@@ -42,6 +42,13 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
+// src/AbstractRoom.ts
+var AbstractRoom = class {
+  constructor(room) {
+    this.id = room;
+  }
+};
+
 // src/PluvRoom.ts
 import { doc as doc2 } from "@pluv/crdt-yjs";
 
@@ -244,8 +251,18 @@ var UsersManager = class {
 var HEARTBEAT_INTERVAL_MS = 1e4;
 var PONG_TIMEOUT_MS = 2e3;
 var RECONNECT_TIMEOUT_MS = 3e4;
-var PluvRoom = class {
+var PluvRoom = class extends AbstractRoom {
   constructor(room, options) {
+    const {
+      authEndpoint,
+      debug = false,
+      initialPresence,
+      initialStorage,
+      onAuthorizationFail,
+      presence,
+      wsEndpoint
+    } = options;
+    super(room);
     this._crdtManager = null;
     this._crdtNotifier = new CrdtNotifier();
     this._eventNotifier = new EventNotifier();
@@ -275,8 +292,8 @@ var PluvRoom = class {
     };
     this._windowListeners = null;
     this._wsListeners = null;
-    this.event = (name, callback) => {
-      return this._eventNotifier.subscribe(name, callback);
+    this.event = (event, callback) => {
+      return this._eventNotifier.subscribe(event, callback);
     };
     this.getMyPresence = () => {
       var _a, _b;
@@ -304,16 +321,6 @@ var PluvRoom = class {
     this.subscribe = (name, callback) => {
       return this._stateNotifier.subscribe(name, callback);
     };
-    const {
-      authEndpoint,
-      debug = false,
-      initialPresence,
-      initialStorage,
-      onAuthorizationFail,
-      presence,
-      wsEndpoint
-    } = options;
-    this.id = room;
     this._debug = debug;
     this._endpoints = {
       authEndpoint,
@@ -339,12 +346,13 @@ var PluvRoom = class {
   get webSocket() {
     return this._state.webSocket;
   }
-  broadcast(message) {
+  broadcast(event, data) {
     if (!this._state.webSocket)
       return;
     if (this._state.connection.state !== "Open" /* Open */)
       return;
-    this._sendMessage(message);
+    const type = event.toString();
+    this._sendMessage({ data, type });
   }
   connect() {
     return __async(this, null, function* () {
@@ -974,6 +982,123 @@ var createClient = (options) => {
   return new PluvClient(options);
 };
 
+// src/MockedRoom.ts
+var MockedRoom = class extends AbstractRoom {
+  constructor(room, options) {
+    const { events, initialPresence, initialStorage, presence } = options;
+    super(room);
+    this._crdtManager = null;
+    this._crdtNotifier = new CrdtNotifier();
+    this._eventNotifier = new EventNotifier();
+    this._otherNotifier = new OtherNotifier();
+    this._state = {
+      authorization: {
+        token: null,
+        user: null
+      },
+      connection: {
+        id: null,
+        state: "Untouched" /* Untouched */
+      },
+      webSocket: null
+    };
+    this._stateNotifier = new StateNotifier();
+    this._subscriptions = {
+      observeCrdt: null
+    };
+    this.event = (event, callback) => {
+      return this._eventNotifier.subscribe(event, callback);
+    };
+    this.getMyPresence = () => {
+      var _a, _b;
+      return (_b = (_a = this._usersManager.myself) == null ? void 0 : _a.presence) != null ? _b : null;
+    };
+    this.getMyself = () => {
+      return this._usersManager.myself;
+    };
+    this.getOther = (connectionId) => {
+      return this._usersManager.getOther(connectionId);
+    };
+    this.getOthers = () => {
+      return this._usersManager.getOthers();
+    };
+    this.getStorage = (key) => {
+      var _a, _b;
+      return (_b = (_a = this._crdtManager) == null ? void 0 : _a.get(key)) != null ? _b : null;
+    };
+    this.other = (connectionId, callback) => {
+      return this._otherNotifier.subscribe(connectionId, callback);
+    };
+    this.storage = (key, fn) => {
+      return this._crdtNotifier.subscribe(key, fn);
+    };
+    this.subscribe = (name, callback) => {
+      return this._stateNotifier.subscribe(name, callback);
+    };
+    this._events = events;
+    this._usersManager = new UsersManager({
+      initialPresence,
+      presence
+    });
+    this._crdtManager = new CrdtManager({
+      initialStorage
+    });
+    this._observeCrdt();
+  }
+  broadcast(event, data) {
+    if (!this._events)
+      return;
+    const resolver = this._events[event];
+    if (!resolver)
+      return;
+    const result = resolver(data);
+    Object.keys(result).forEach((type) => {
+      const _type = type.toString();
+      const data2 = result[_type];
+      if (!data2)
+        return;
+      this._eventNotifier.subject(_type).next(data2);
+    });
+  }
+  getConnection() {
+    return Object.freeze(
+      JSON.parse(JSON.stringify(this._state.connection))
+    );
+  }
+  _observeCrdt() {
+    var _a, _b;
+    (_b = (_a = this._subscriptions).observeCrdt) == null ? void 0 : _b.call(_a);
+    if (!this._crdtManager)
+      return;
+    const unsubscribe = this._crdtManager.doc.subscribe(
+      (update, _origin) => {
+        const origin = _origin != null ? _origin : null;
+        if (!this._crdtManager)
+          return;
+        if (!this._state.webSocket)
+          return;
+        if (!this._state.connection.id)
+          return;
+        if (this._state.webSocket.readyState !== WebSocket.OPEN)
+          return;
+        if (origin === "$STORAGE_UPDATED")
+          return;
+        const sharedTypes = this._crdtManager.doc.getSharedTypes();
+        Object.keys(sharedTypes).forEach((key) => {
+          if (!this._crdtManager)
+            return;
+          const sharedType = sharedTypes[key];
+          if (!sharedType)
+            return;
+          const serialized = sharedType.toJSON();
+          this._crdtNotifier.subject(key).next(serialized);
+        });
+      }
+    );
+    this._subscriptions.observeCrdt = unsubscribe;
+  }
+};
+
 // src/y.ts
 var y_exports = {};
 __export(y_exports, {
@@ -984,7 +1109,9 @@ __export(y_exports, {
 });
 import { array, map, text, unstable__object } from "@pluv/crdt-yjs";
 export {
+  AbstractRoom,
   ConnectionState,
+  MockedRoom,
   PluvClient,
   PluvRoom,
   createClient,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "wonka": "^6.1.2",
-    "@pluv/crdt-yjs": "^0.1.3",
+    "@pluv/crdt-yjs": "^0.2.0",
     "@pluv/types": "^0.1.2"
   },
   "peerDependencies": {
@@ -29,7 +29,7 @@
     "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",

package/src/AbstractRoom.ts

@@ -0,0 +1,71 @@
+import type { InferYjsSharedTypeJson } from "@pluv/crdt-yjs";
+import type {
+    Id,
+    InferIOInput,
+    InferIOOutput,
+    IOLike,
+    JsonObject,
+} from "@pluv/types";
+import type { AbstractType } from "yjs";
+import type { EventNotifierSubscriptionCallback } from "./EventNotifier";
+import type { OtherNotifierSubscriptionCallback } from "./OtherNotifier";
+import type {
+    StateNotifierSubjects,
+    SubscriptionCallback,
+} from "./StateNotifier";
+import type { UserInfo, WebSocketConnection } from "./types";
+
+export abstract class AbstractRoom<
+    TIO extends IOLike,
+    TPresence extends JsonObject = {},
+    TStorage extends Record<string, AbstractType<any>> = {}
+> {
+    public readonly id: string;
+
+    constructor(room: string) {
+        this.id = room;
+    }
+
+    public abstract broadcast<TEvent extends keyof InferIOInput<TIO>>(
+        event: TEvent,
+        data: Id<InferIOInput<TIO>[TEvent]>
+    ): void;
+
+    public abstract event<TEvent extends keyof InferIOOutput<TIO>>(
+        event: TEvent,
+        callback: EventNotifierSubscriptionCallback<TIO, TEvent>
+    ): () => void;
+
+    public abstract getConnection(): WebSocketConnection;
+
+    public abstract getMyPresence(): TPresence | null;
+
+    public abstract getMyself(): Id<UserInfo<TIO, TPresence>> | null;
+
+    public abstract getOther(
+        connectionId: string
+    ): Id<UserInfo<TIO, TPresence>> | null;
+
+    public abstract getOthers(): readonly Id<UserInfo<TIO, TPresence>>[];
+
+    public abstract getStorage<TKey extends keyof TStorage>(
+        key: TKey
+    ): TStorage[TKey] | null;
+
+    public abstract other(
+        connectionId: string,
+        callback: OtherNotifierSubscriptionCallback<TIO>
+    ): () => void;
+
+    public abstract storage<TKey extends keyof TStorage>(
+        key: TKey,
+        fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void
+    ): () => void;
+
+    public abstract subscribe<
+        TSubject extends keyof StateNotifierSubjects<TIO, TPresence>
+    >(
+        name: TSubject,
+        callback: SubscriptionCallback<TIO, TPresence, TSubject>
+    ): () => void;
+}

package/src/MockedRoom.ts

@@ -0,0 +1,214 @@
+import type { InferYjsSharedTypeJson } from "@pluv/crdt-yjs";
+import type {
+    Id,
+    InferIOInput,
+    InferIOOutput,
+    IOLike,
+    JsonObject,
+} from "@pluv/types";
+import type { AbstractType } from "yjs";
+import { AbstractRoom } from "./AbstractRoom";
+import { CrdtManager, CrdtManagerOptions } from "./CrdtManager";
+import { CrdtNotifier } from "./CrdtNotifier";
+import type { EventNotifierSubscriptionCallback } from "./EventNotifier";
+import { EventNotifier } from "./EventNotifier";
+import type { OtherNotifierSubscriptionCallback } from "./OtherNotifier";
+import { OtherNotifier } from "./OtherNotifier";
+import type {
+    StateNotifierSubjects,
+    SubscriptionCallback,
+} from "./StateNotifier";
+import { StateNotifier } from "./StateNotifier";
+import type {
+    InternalSubscriptions,
+    UserInfo,
+    WebSocketConnection,
+    WebSocketState,
+} from "./types";
+import { ConnectionState } from "./types";
+import type { UsersManagerConfig } from "./UsersManager";
+import { UsersManager } from "./UsersManager";
+
+export type MockedRoomEvents<TIO extends IOLike> = {
+    [P in keyof InferIOInput<TIO>]: (
+        data: Id<InferIOInput<TIO>[P]>
+    ) => Partial<InferIOOutput<TIO>>;
+};
+
+export type MockedRoomConfig<
+    TIO extends IOLike,
+    TPresence extends JsonObject = {},
+    TStorage extends Record<string, AbstractType<any>> = {}
+> = { events?: MockedRoomEvents<TIO> } & Omit<
+    CrdtManagerOptions<TStorage>,
+    "encodedState"
+> &
+    UsersManagerConfig<TPresence>;
+
+export class MockedRoom<
+    TIO extends IOLike,
+    TPresence extends JsonObject = {},
+    TStorage extends Record<string, AbstractType<any>> = {}
+> extends AbstractRoom<TIO, TPresence, TStorage> {
+    private _crdtManager: CrdtManager<TStorage> | null = null;
+    private _crdtNotifier = new CrdtNotifier<TStorage>();
+    private _eventNotifier = new EventNotifier<TIO>();
+    private _events?: MockedRoomEvents<TIO>;
+    private _otherNotifier = new OtherNotifier<TIO>();
+    private _state: WebSocketState<TIO> = {
+        authorization: {
+            token: null,
+            user: null,
+        },
+        connection: {
+            id: null,
+            state: ConnectionState.Untouched,
+        },
+        webSocket: null,
+    };
+    private _stateNotifier = new StateNotifier<TIO, TPresence>();
+    private _subscriptions: InternalSubscriptions = {
+        observeCrdt: null,
+    };
+    private _usersManager: UsersManager<TIO, TPresence>;
+
+    constructor(
+        room: string,
+        options: MockedRoomConfig<TIO, TPresence, TStorage>
+    ) {
+        const { events, initialPresence, initialStorage, presence } = options;
+
+        super(room);
+
+        this._events = events;
+
+        this._usersManager = new UsersManager<TIO, TPresence>({
+            initialPresence,
+            presence,
+        });
+
+        this._crdtManager = new CrdtManager<TStorage>({
+            initialStorage,
+        });
+
+        this._observeCrdt();
+    }
+
+    public broadcast<TEvent extends keyof InferIOInput<TIO>>(
+        event: TEvent,
+        data: Id<InferIOInput<TIO>[TEvent]>
+    ): void {
+        if (!this._events) return;
+
+        const resolver = this._events[event];
+
+        if (!resolver) return;
+
+        const result = resolver(data);
+
+        Object.keys(result).forEach((type) => {
+            const _type = type.toString() as keyof Partial<InferIOOutput<TIO>>;
+            const data = result[_type] as any;
+
+            if (!data) return;
+
+            this._eventNotifier.subject(_type).next(data);
+        });
+    }
+
+    public event = <TEvent extends keyof InferIOOutput<TIO>>(
+        event: TEvent,
+        callback: EventNotifierSubscriptionCallback<TIO, TEvent>
+    ): (() => void) => {
+        return this._eventNotifier.subscribe(event, callback);
+    };
+
+    public getConnection(): WebSocketConnection {
+        // Create a read-only clone of the connection state
+        return Object.freeze(
+            JSON.parse(JSON.stringify(this._state.connection))
+        );
+    }
+
+    public getMyPresence = (): TPresence | null => {
+        return this._usersManager.myself?.presence ?? null;
+    };
+
+    public getMyself = (): Id<UserInfo<TIO, TPresence>> | null => {
+        return this._usersManager.myself;
+    };
+
+    public getOther = (
+        connectionId: string
+    ): Id<UserInfo<TIO, TPresence>> | null => {
+        return this._usersManager.getOther(connectionId);
+    };
+
+    public getOthers = (): readonly Id<UserInfo<TIO, TPresence>>[] => {
+        return this._usersManager.getOthers();
+    };
+
+    public getStorage = <TKey extends keyof TStorage>(
+        key: TKey
+    ): TStorage[TKey] | null => {
+        return this._crdtManager?.get(key) ?? null;
+    };
+
+    public other = (
+        connectionId: string,
+        callback: OtherNotifierSubscriptionCallback<TIO>
+    ): (() => void) => {
+        return this._otherNotifier.subscribe(connectionId, callback);
+    };
+
+    public storage = <TKey extends keyof TStorage>(
+        key: TKey,
+        fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void
+    ): (() => void) => {
+        return this._crdtNotifier.subscribe(key, fn);
+    };
+
+    public subscribe = <
+        TSubject extends keyof StateNotifierSubjects<TIO, TPresence>
+    >(
+        name: TSubject,
+        callback: SubscriptionCallback<TIO, TPresence, TSubject>
+    ): (() => void) => {
+        return this._stateNotifier.subscribe(name, callback);
+    };
+
+    private _observeCrdt(): void {
+        this._subscriptions.observeCrdt?.();
+
+        if (!this._crdtManager) return;
+
+        const unsubscribe = this._crdtManager.doc.subscribe(
+            (update, _origin) => {
+                const origin = _origin ?? null;
+
+                if (!this._crdtManager) return;
+                if (!this._state.webSocket) return;
+                if (!this._state.connection.id) return;
+                if (this._state.webSocket.readyState !== WebSocket.OPEN) return;
+
+                if (origin === "$STORAGE_UPDATED") return;
+
+                const sharedTypes = this._crdtManager.doc.getSharedTypes();
+
+                Object.keys(sharedTypes).forEach((key) => {
+                    if (!this._crdtManager) return;
+
+                    const sharedType = sharedTypes[key];
+
+                    if (!sharedType) return;
+
+                    const serialized = sharedType.toJSON();
+
+                    this._crdtNotifier.subject(key).next(serialized);
+                });
+            }
+        );
+
+        this._subscriptions.observeCrdt = unsubscribe;
+    }
+}

package/src/PluvRoom.ts

@@ -3,7 +3,6 @@ import type {
     BaseIOEventRecord,
     EventMessage,
     Id,
-    InferEventMessage,
     InferIOAuthorize,
     InferIOAuthorizeRequired,
     InferIOAuthorizeUser,
@@ -14,6 +13,7 @@ import type {
     JsonObject,
 } from "@pluv/types";
 import type { AbstractType } from "yjs";
+import { AbstractRoom } from "./AbstractRoom";
 import type { CrdtManagerOptions } from "./CrdtManager";
 import { CrdtManager } from "./CrdtManager";
 import { CrdtNotifier } from "./CrdtNotifier";
@@ -28,6 +28,7 @@ import type {
 import { StateNotifier } from "./StateNotifier";
 import type {
     AuthorizationState,
+    InternalSubscriptions,
     UserInfo,
     WebSocketConnection,
     WebSocketState,
@@ -89,10 +90,6 @@ interface InternalListeners {
     onAuthorizationFail: (error: Error) => void;
 }
 
-interface InternalSubscriptions {
-    observeCrdt: (() => void) | null;
-}
-
 export type PluvRoomDebug<TIO extends IOLike> = Id<{
     output: readonly (keyof InferIOOutput<TIO>)[];
     input: readonly (keyof InferIOInput<TIO>)[];
@@ -118,11 +115,9 @@ export class PluvRoom<
     TIO extends IOLike,
     TPresence extends JsonObject = {},
     TStorage extends Record<string, AbstractType<any>> = {}
-> {
+> extends AbstractRoom<TIO, TPresence, TStorage> {
     readonly _endpoints: RoomEndpoints<TIO>;
 
-    public readonly id: string;
-
     private _crdtManager: CrdtManager<TStorage> | null = null;
     private _crdtNotifier = new CrdtNotifier<TStorage>();
     private _debug: boolean | PluvRoomDebug<TIO>;
@@ -167,7 +162,8 @@ export class PluvRoom<
             wsEndpoint,
         } = options;
 
-        this.id = room;
+        super(room);
+
         this._debug = debug;
 
         this._endpoints = {
@@ -201,11 +197,16 @@ export class PluvRoom<
         return this._state.webSocket;
     }
 
-    public broadcast(message: Id<InferEventMessage<InferIOInput<TIO>>>): void {
+    public broadcast<TEvent extends keyof InferIOInput<TIO>>(
+        event: TEvent,
+        data: Id<InferIOInput<TIO>[TEvent]>
+    ): void {
         if (!this._state.webSocket) return;
         if (this._state.connection.state !== ConnectionState.Open) return;
 
-        this._sendMessage(message);
+        const type = event.toString();
+
+        this._sendMessage({ data, type });
     }
 
     public async connect(): Promise<void> {
@@ -291,10 +292,10 @@ export class PluvRoom<
     }
 
     public event = <TEvent extends keyof InferIOOutput<TIO>>(
-        name: TEvent,
+        event: TEvent,
         callback: EventNotifierSubscriptionCallback<TIO, TEvent>
     ): (() => void) => {
-        return this._eventNotifier.subscribe(name, callback);
+        return this._eventNotifier.subscribe(event, callback);
     };
 
     public getConnection(): WebSocketConnection {

package/src/index.ts

@@ -6,7 +6,10 @@ export type {
     IOEventMessage,
 } from "@pluv/types";
 export type { AbstractType } from "yjs";
+export { AbstractRoom } from "./AbstractRoom";
 export { createClient } from "./createClient";
+export type { MockedRoomConfig, MockedRoomEvents } from "./MockedRoom";
+export { MockedRoom } from "./MockedRoom";
 export type { PluvClientOptions } from "./PluvClient";
 export { PluvClient } from "./PluvClient";
 export type { PluvRoomDebug } from "./PluvRoom";

package/src/types.ts

@@ -19,6 +19,10 @@ export enum ConnectionState {
     Untouched = "Untouched",
 }
 
+export interface InternalSubscriptions {
+    observeCrdt: (() => void) | null;
+}
+
 export interface WebSocketConnection {
     id: string | null;
     state: ConnectionState;