@pluv/client 0.11.1 → 0.12.0

package/src/MockedRoom.ts

@@ -31,14 +31,14 @@ import { UsersManager } from "./UsersManager";
 
 export type MockedRoomEvents<TIO extends IOLike> = Partial<{
     [P in keyof InferIOInput<TIO>]: (
-        data: Id<InferIOInput<TIO>[P]>
+        data: Id<InferIOInput<TIO>[P]>,
     ) => Partial<InferIOOutput<TIO>>;
 }>;
 
 export type MockedRoomConfig<
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractType<any>> = {}
+    TStorage extends Record<string, AbstractType<any>> = {},
 > = { events?: MockedRoomEvents<TIO> } & Omit<
     CrdtManagerOptions<TStorage>,
     "encodedState"
@@ -48,7 +48,7 @@ export type MockedRoomConfig<
 export class MockedRoom<
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractType<any>> = {}
+    TStorage extends Record<string, AbstractType<any>> = {},
 > extends AbstractRoom<TIO, TPresence, TStorage> {
     private _crdtManager: CrdtManager<TStorage> | null = null;
     private _crdtNotifier = new CrdtNotifier<TStorage>();
@@ -75,7 +75,7 @@ export class MockedRoom<
 
     constructor(
         room: string,
-        options: MockedRoomConfig<TIO, TPresence, TStorage>
+        options: MockedRoomConfig<TIO, TPresence, TStorage>,
     ) {
         const { events, initialPresence, initialStorage, presence } = options;
 
@@ -97,7 +97,7 @@ export class MockedRoom<
 
     public broadcast<TEvent extends keyof InferIOInput<TIO>>(
         event: TEvent,
-        data: Id<InferIOInput<TIO>[TEvent]>
+        data: Id<InferIOInput<TIO>[TEvent]>,
     ): void {
         if (!this._events) return;
 
@@ -117,9 +117,17 @@ export class MockedRoom<
         });
     }
 
+    public canRedo = (): boolean => {
+        return !!this._crdtManager?.doc.canRedo();
+    };
+
+    public canUndo = (): boolean => {
+        return !!this._crdtManager?.doc.canUndo();
+    };
+
     public event = <TEvent extends keyof InferIOOutput<TIO>>(
         event: TEvent,
-        callback: EventNotifierSubscriptionCallback<TIO, TEvent>
+        callback: EventNotifierSubscriptionCallback<TIO, TEvent>,
     ): (() => void) => {
         return this._eventNotifier.subscribe(event, callback);
     };
@@ -127,7 +135,7 @@ export class MockedRoom<
     public getConnection(): WebSocketConnection {
         // Create a read-only clone of the connection state
         return Object.freeze(
-            JSON.parse(JSON.stringify(this._state.connection))
+            JSON.parse(JSON.stringify(this._state.connection)),
         );
     }
 
@@ -140,7 +148,7 @@ export class MockedRoom<
     };
 
     public getOther = (
-        connectionId: string
+        connectionId: string,
     ): Id<UserInfo<TIO, TPresence>> | null => {
         return this._usersManager.getOther(connectionId);
     };
@@ -150,34 +158,72 @@ export class MockedRoom<
     };
 
     public getStorage = <TKey extends keyof TStorage>(
-        key: TKey
+        key: TKey,
     ): TStorage[TKey] | null => {
         return this._crdtManager?.get(key) ?? null;
     };
 
     public other = (
         connectionId: string,
-        callback: OtherNotifierSubscriptionCallback<TIO>
+        callback: OtherNotifierSubscriptionCallback<TIO>,
     ): (() => void) => {
         return this._otherNotifier.subscribe(connectionId, callback);
     };
 
+    public redo = (): void => {
+        this._crdtManager?.doc.redo();
+    };
+
     public storage = <TKey extends keyof TStorage>(
         key: TKey,
-        fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void
+        fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void,
     ): (() => void) => {
         return this._crdtNotifier.subscribe(key, fn);
     };
 
+    public storageRoot = (
+        fn: (value: {
+            [P in keyof TStorage]: InferYjsSharedTypeJson<TStorage[P]>;
+        }) => void,
+    ): (() => void) => {
+        return this._crdtNotifier.subcribeRoot(fn);
+    };
+
     public subscribe = <
-        TSubject extends keyof StateNotifierSubjects<TIO, TPresence>
+        TSubject extends keyof StateNotifierSubjects<TIO, TPresence>,
     >(
         name: TSubject,
-        callback: SubscriptionCallback<TIO, TPresence, TSubject>
+        callback: SubscriptionCallback<TIO, TPresence, TSubject>,
     ): (() => void) => {
         return this._stateNotifier.subscribe(name, callback);
     };
 
+    public transact = (
+        fn: (storage: TStorage) => void,
+        origin?: string,
+    ): void => {
+        const _origin = origin ?? this._state.connection.id;
+        const crdtManager = this._crdtManager;
+
+        /**
+         * !HACK
+         * @description Don't transact anything if there is no origin, because
+         * that means the user isn't connected yet. This will mean events are
+         * lost unfortunately.
+         * @date September 23, 2023
+         */
+        if (typeof _origin !== "string") return;
+        if (!crdtManager) return;
+
+        crdtManager.doc.transact(() => {
+            fn(crdtManager.doc.storage);
+        }, _origin);
+    };
+
+    public undo = (): void => {
+        this._crdtManager?.doc.undo();
+    };
+
     public updateMyPresence = (presence: Partial<TPresence>): void => {
         this._usersManager.updateMyPresence(presence);
 
@@ -202,14 +248,25 @@ export class MockedRoom<
 
                 const sharedTypes = this._crdtManager.doc.getSharedTypes();
 
-                Object.entries(sharedTypes).forEach(([prop, sharedType]) => {
-                    if (!this._crdtManager) return;
+                const storageRoot = Object.entries(sharedTypes).reduce(
+                    (acc, [prop, sharedType]) => {
+                        if (!this._crdtManager) return acc;
+
+                        const serialized = sharedType.toJSON();
+
+                        this._crdtNotifier.subject(prop).next(serialized);
 
-                    const serialized = sharedType.toJSON();
+                        return { ...acc, [prop]: serialized };
+                    },
+                    {} as {
+                        [P in keyof TStorage]: InferYjsSharedTypeJson<
+                            TStorage[P]
+                        >;
+                    },
+                );
 
-                    this._crdtNotifier.subject(prop).next(serialized);
-                });
-            }
+                this._crdtNotifier.rootSubject.next(storageRoot);
+            },
         );
 
         this._subscriptions.observeCrdt = unsubscribe;

package/src/OtherNotifier.ts

@@ -4,14 +4,14 @@ import { makeSubject, subscribe } from "wonka";
 import { UserInfo } from "./types";
 
 export type OtherNotifierSubscriptionCallback<TIO extends IOLike> = (
-    value: Id<UserInfo<TIO>> | null
+    value: Id<UserInfo<TIO>> | null,
 ) => void;
 
 export class OtherNotifier<TIO extends IOLike> {
     public subjects = new Map<string, Subject<Id<UserInfo<TIO>> | null>>();
 
     public subject<TEvent extends string>(
-        name: TEvent
+        name: TEvent,
     ): Subject<Id<UserInfo<TIO>> | null> {
         const subject = this.subjects.get(name);
 
@@ -26,7 +26,7 @@ export class OtherNotifier<TIO extends IOLike> {
 
     public subscribe<TEvent extends string>(
         name: TEvent,
-        callback: OtherNotifierSubscriptionCallback<TIO>
+        callback: OtherNotifierSubscriptionCallback<TIO>,
     ): () => void {
         const source = this.subject(name).source;
 

package/src/PluvClient.ts

@@ -30,10 +30,10 @@ export class PluvClient<TIO extends IOLike = IOLike> {
 
     public createRoom = <
         TPresence extends JsonObject = {},
-        TStorage extends Record<string, AbstractType<any>> = {}
+        TStorage extends Record<string, AbstractType<any>> = {},
     >(
         room: string,
-        options: PluvRoomOptions<TIO, TPresence, TStorage> = {}
+        options: PluvRoomOptions<TIO, TPresence, TStorage> = {},
     ): PluvRoom<TIO, TPresence, TStorage> => {
         const oldRoom = this.getRoom<TPresence, TStorage>(room);
 
@@ -57,7 +57,7 @@ export class PluvClient<TIO extends IOLike = IOLike> {
     };
 
     public enter = async (
-        room: string | PluvRoom<TIO, any, any>
+        room: string | PluvRoom<TIO, any, any>,
     ): Promise<PluvRoom<TIO, JsonObject, any>> => {
         const toEnter = typeof room === "string" ? this.getRoom(room) : room;
 
@@ -76,9 +76,9 @@ export class PluvClient<TIO extends IOLike = IOLike> {
 
     public getRoom = <
         TPresence extends JsonObject = {},
-        TStorage extends Record<string, AbstractType<any>> = {}
+        TStorage extends Record<string, AbstractType<any>> = {},
     >(
-        room: string
+        room: string,
     ): PluvRoom<TIO, TPresence, TStorage> | null => {
         const found = this._rooms.get(room) as
             | PluvRoom<TIO, TPresence, TStorage>
@@ -92,7 +92,7 @@ export class PluvClient<TIO extends IOLike = IOLike> {
     };
 
     public leave = async (
-        room: string | PluvRoom<TIO, any, any>
+        room: string | PluvRoom<TIO, any, any>,
     ): Promise<void> => {
         const toLeave = typeof room === "string" ? this.getRoom(room) : room;
 

package/src/PluvRoom.ts

@@ -1,4 +1,4 @@
-import { InferYjsSharedTypeJson } from "@pluv/crdt-yjs";
+import { InferYjsSharedTypeJson, TrackOriginOptions } from "@pluv/crdt-yjs";
 import type {
     BaseIOEventRecord,
     EventMessage,
@@ -44,7 +44,8 @@ const ADD_TO_STORAGE_STATE_DEBOUNCE_MS = 1_000;
 const HEARTBEAT_INTERVAL_MS = 10_000;
 const PONG_TIMEOUT_MS = 2_000;
 const RECONNECT_TIMEOUT_MS = 30_000;
-const Y_ORIGIN_INITIALIZED = "$INITIALIZED";
+const ORIGIN_INITIALIZED = "$INITIALIZED";
+const ORIGIN_STORAGE_UPDATED = "$STORAGE_UPDATED";
 
 export const DEFAULT_PLUV_CLIENT_ADDON = <
     TIO extends IOLike = IOLike,
@@ -143,7 +144,9 @@ export type RoomConfig<
     TIO extends IOLike,
     TPresence extends JsonObject = {},
     TStorage extends Record<string, AbstractType<any>> = {},
-> = RoomEndpoints<TIO> & PluvRoomOptions<TIO, TPresence, TStorage>;
+> = RoomEndpoints<TIO> &
+    PluvRoomOptions<TIO, TPresence, TStorage> &
+    TrackOriginOptions;
 
 export class PluvRoom<
     TIO extends IOLike,
@@ -152,6 +155,7 @@ export class PluvRoom<
 > extends AbstractRoom<TIO, TPresence, TStorage> {
     readonly _endpoints: RoomEndpoints<TIO>;
 
+    private _captureTimeout: number | null = null;
     private _crdtManager: CrdtManager<TStorage>;
     private _crdtNotifier = new CrdtNotifier<TStorage>();
     private _debug: boolean | PluvRoomDebug<TIO>;
@@ -182,6 +186,7 @@ export class PluvRoom<
         pong: null,
         reconnect: null,
     };
+    private _trackedOrigins: readonly string[] | null = null;
     private _windowListeners: WindowListeners | null = null;
     private _wsListeners: WebSocketListeners | null = null;
     private _usersManager: UsersManager<TIO, TPresence>;
@@ -190,11 +195,13 @@ export class PluvRoom<
         const {
             addons = [],
             authEndpoint,
+            captureTimeout,
             debug = false,
             initialPresence,
             initialStorage,
             onAuthorizationFail,
             presence,
+            trackedOrigins,
             wsEndpoint,
         } = options;
 
@@ -230,7 +237,14 @@ export class PluvRoom<
             presence,
         });
 
-        this._crdtManager = new CrdtManager<TStorage>({ initialStorage });
+        this._crdtManager = new CrdtManager<TStorage>({
+            captureTimeout,
+            initialStorage,
+            trackedOrigins,
+        });
+
+        this._captureTimeout = captureTimeout ?? null;
+        this._trackedOrigins = trackedOrigins ?? null;
     }
 
     public get webSocket(): WebSocket | null {
@@ -249,6 +263,14 @@ export class PluvRoom<
         this._sendMessage({ data, type });
     }
 
+    public canRedo = (): boolean => {
+        return !!this._crdtManager.doc.canRedo();
+    };
+
+    public canUndo = (): boolean => {
+        return !!this._crdtManager.doc.canUndo();
+    };
+
     public async connect(): Promise<void> {
         if (!this._endpoints.wsEndpoint) {
             throw new Error("Must provide an wsEndpoint.");
@@ -272,8 +294,6 @@ export class PluvRoom<
         await this._storageStore.initialize();
         await this._applyStorageStore();
 
-        console.log(this._getWsEndpoint(this.id));
-
         const url = new URL(this._getWsEndpoint(this.id));
 
         let authToken: string | null = null;
@@ -375,6 +395,10 @@ export class PluvRoom<
         return this._otherNotifier.subscribe(connectionId, callback);
     };
 
+    public redo = (): void => {
+        this._crdtManager.doc.redo();
+    };
+
     public storage = <TKey extends keyof TStorage>(
         key: TKey,
         fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void,
@@ -382,6 +406,14 @@ export class PluvRoom<
         return this._crdtNotifier.subscribe(key, fn);
     };
 
+    public storageRoot = (
+        fn: (value: {
+            [P in keyof TStorage]: InferYjsSharedTypeJson<TStorage[P]>;
+        }) => void,
+    ): (() => void) => {
+        return this._crdtNotifier.subcribeRoot(fn);
+    };
+
     public subscribe = <
         TSubject extends keyof StateNotifierSubjects<TIO, TPresence>,
     >(
@@ -391,6 +423,30 @@ export class PluvRoom<
         return this._stateNotifier.subscribe(name, callback);
     };
 
+    public transact = (
+        fn: (storage: TStorage) => void,
+        origin?: string,
+    ): void => {
+        const _origin = origin ?? this._state.connection.id;
+
+        /**
+         * !HACK
+         * @description Don't transact anything if there is no origin, because
+         * that means the user isn't connected yet. This will mean events are
+         * lost unfortunately.
+         * @date September 23, 2023
+         */
+        if (typeof _origin !== "string") return;
+
+        this._crdtManager.doc.transact(() => {
+            fn(this._crdtManager.doc.storage);
+        }, _origin);
+    };
+
+    public undo = (): void => {
+        this._crdtManager.doc.undo();
+    };
+
     public updateMyPresence = (presence: Partial<TPresence>): void => {
         this._usersManager.updateMyPresence(presence);
 
@@ -414,12 +470,15 @@ export class PluvRoom<
 
     private async _applyStorageStore(): Promise<void> {
         const updates = await this._storageStore.getUpdates();
+        const trackedOrigins = this._getTrackedOrigins();
 
         this._crdtManager.initialize({
+            captureTimeout: this._captureTimeout ?? undefined,
             onInitialized: () => {
                 this._observeCrdt();
             },
-            origin: Y_ORIGIN_INITIALIZED,
+            origin: ORIGIN_INITIALIZED,
+            trackedOrigins: trackedOrigins ?? undefined,
             update: updates,
         });
 
@@ -548,11 +607,20 @@ export class PluvRoom<
     private _emitSharedTypes(): void {
         const sharedTypes = this._crdtManager.doc.getSharedTypes();
 
-        Object.entries(sharedTypes).forEach(([prop, sharedType]) => {
-            const serialized = sharedType.toJSON();
+        const storageRoot = Object.entries(sharedTypes).reduce(
+            (acc, [prop, sharedType]) => {
+                const serialized = sharedType.toJSON();
 
-            this._crdtNotifier.subject(prop).next(serialized);
-        });
+                this._crdtNotifier.subject(prop).next(serialized);
+
+                return { ...acc, [prop]: serialized };
+            },
+            {} as {
+                [P in keyof TStorage]: InferYjsSharedTypeJson<TStorage[P]>;
+            },
+        );
+
+        this._crdtNotifier.rootSubject.next(storageRoot);
     }
 
     private _flattenStorageStore = debounce(
@@ -630,6 +698,14 @@ export class PluvRoom<
         }
     }
 
+    private _getTrackedOrigins(): readonly string[] | null {
+        const connectionId = this._state.connection.id;
+
+        return !connectionId
+            ? this._trackedOrigins
+            : [connectionId, ...(this._trackedOrigins ?? [])];
+    }
+
     private _getWsEndpoint(room: string): string {
         switch (typeof this._endpoints.wsEndpoint) {
             case "undefined":
@@ -772,11 +848,15 @@ export class PluvRoom<
             InferIOAuthorize<TIO>
         >["$STORAGE_RECEIVED"];
 
+        const trackedOrigins = this._getTrackedOrigins();
+
         this._crdtManager.initialize({
+            captureTimeout: this._captureTimeout ?? undefined,
             onInitialized: async () => {
                 this._observeCrdt();
             },
-            origin: Y_ORIGIN_INITIALIZED,
+            origin: ORIGIN_INITIALIZED,
+            trackedOrigins: trackedOrigins ?? undefined,
             update: data.state,
         });
 
@@ -790,7 +870,7 @@ export class PluvRoom<
 
         this._sendMessage({
             type: "$UPDATE_STORAGE",
-            data: { origin: Y_ORIGIN_INITIALIZED, update },
+            data: { origin: ORIGIN_INITIALIZED, update },
         });
     }
 
@@ -803,21 +883,30 @@ export class PluvRoom<
 
         const data = message.data as BaseIOEventRecord<
             InferIOAuthorize<TIO>
-        >["$STORAGE_UPDATED"];
+        >[typeof ORIGIN_STORAGE_UPDATED];
 
         if (!this._crdtManager) return;
 
-        this._crdtManager.doc.applyUpdate(data.state, "$STORAGE_UPDATED");
+        this._crdtManager.doc.applyUpdate(data.state, ORIGIN_STORAGE_UPDATED);
 
         const sharedTypes = this._crdtManager.doc.getSharedTypes();
 
-        Object.entries(sharedTypes).forEach(([prop, sharedType]) => {
-            if (!this._crdtManager) return;
+        const storageRoot = Object.entries(sharedTypes).reduce(
+            (acc, [prop, sharedType]) => {
+                if (!this._crdtManager) return acc;
 
-            const serialized = sharedType.toJSON();
+                const serialized = sharedType.toJSON();
 
-            this._crdtNotifier.subject(prop).next(serialized);
-        });
+                this._crdtNotifier.subject(prop).next(serialized);
+
+                return { ...acc, [prop]: serialized };
+            },
+            {} as {
+                [P in keyof TStorage]: InferYjsSharedTypeJson<TStorage[P]>;
+            },
+        );
+
+        this._crdtNotifier.rootSubject.next(storageRoot);
     }
 
     private _handleUserJoinedMessage(message: IOEventMessage<TIO>): void {
@@ -880,13 +969,13 @@ export class PluvRoom<
                 this._addToStorageStore(update);
                 this._emitSharedTypes();
 
-                if (origin === Y_ORIGIN_INITIALIZED || origin === this) return;
+                if (origin === ORIGIN_INITIALIZED || origin === this) 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;
+                if (origin === ORIGIN_STORAGE_UPDATED) return;
 
                 this._sendMessage({
                     type: "$UPDATE_STORAGE",

package/src/StateNotifier.ts

@@ -5,7 +5,7 @@ import type { UserInfo, WebSocketState } from "./types";
 
 export interface StateNotifierSubjects<
     TIO extends IOLike,
-    TPresence extends JsonObject
+    TPresence extends JsonObject,
 > {
     connection: Subject<Id<WebSocketState<TIO>>>;
     "my-presence": Subject<TPresence | null>;
@@ -16,7 +16,7 @@ export interface StateNotifierSubjects<
 type InferSubjectValue<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TSubject extends keyof StateNotifierSubjects<TIO, TPresence>
+    TSubject extends keyof StateNotifierSubjects<TIO, TPresence>,
 > = StateNotifierSubjects<TIO, TPresence>[TSubject] extends Subject<
     infer IValue
 >
@@ -26,12 +26,12 @@ type InferSubjectValue<
 export type SubscriptionCallback<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TSubject extends keyof StateNotifierSubjects<TIO, TPresence>
+    TSubject extends keyof StateNotifierSubjects<TIO, TPresence>,
 > = (value: InferSubjectValue<TIO, TPresence, TSubject>) => void;
 
 export class StateNotifier<
     TIO extends IOLike,
-    TPresence extends JsonObject = {}
+    TPresence extends JsonObject = {},
 > {
     public subjects: StateNotifierSubjects<TIO, TPresence> = {
         connection: makeSubject<Id<WebSocketState<TIO>>>(),
@@ -41,10 +41,10 @@ export class StateNotifier<
     };
 
     public subscribe<
-        TSubject extends keyof StateNotifierSubjects<TIO, TPresence>
+        TSubject extends keyof StateNotifierSubjects<TIO, TPresence>,
     >(
         name: TSubject,
-        callback: SubscriptionCallback<TIO, TPresence, TSubject>
+        callback: SubscriptionCallback<TIO, TPresence, TSubject>,
     ): () => void {
         const source = this.subjects[name]?.source as any;
 

package/src/UsersManager.ts

@@ -17,7 +17,7 @@ export type UsersManagerConfig<TPresence extends JsonObject = {}> = {
 
 export class UsersManager<
     TIO extends IOLike,
-    TPresence extends JsonObject = {}
+    TPresence extends JsonObject = {},
 > {
     private _initialPresence: TPresence;
     /**
@@ -62,7 +62,7 @@ export class UsersManager<
 
     public patchPresence(
         connectionId: string,
-        patch: Partial<TPresence>
+        patch: Partial<TPresence>,
     ): void {
         if (this._myself?.connectionId === connectionId) {
             const presence = {
@@ -100,7 +100,7 @@ export class UsersManager<
 
     public setMyself(
         connectionId: string,
-        user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>
+        user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>,
     ): void {
         this._myself = {
             connectionId,
@@ -129,7 +129,7 @@ export class UsersManager<
     public setUser(
         connectionId: string,
         user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>,
-        presence?: TPresence
+        presence?: TPresence,
     ): void {
         if (this._myself?.connectionId === connectionId) return;
 

package/src/createClient.ts

@@ -3,7 +3,7 @@ import type { PluvClientOptions } from "./PluvClient";
 import { PluvClient } from "./PluvClient";
 
 export const createClient = <TIO extends IOLike = IOLike>(
-    options: PluvClientOptions<TIO>
+    options: PluvClientOptions<TIO>,
 ): PluvClient<TIO> => {
     return new PluvClient<TIO>(options);
 };

package/src/index.ts

@@ -1,4 +1,7 @@
-export type { InferYjsSharedTypeJson } from "@pluv/crdt-yjs";
+export type {
+    InferYjsSharedTypeJson,
+    TrackOriginOptions,
+} from "@pluv/crdt-yjs";
 export type {
     BaseUser,
     EventMessage,

package/src/types.ts

@@ -37,7 +37,7 @@ export interface WebSocketState<TIO extends IOLike> {
 
 export interface UserInfo<
     TIO extends IOLike,
-    TPresence extends JsonObject = {}
+    TPresence extends JsonObject = {},
 > {
     connectionId: string;
     presence: TPresence;