@pluv/client 0.11.1 → 0.12.0

package/dist/index.mjs

@@ -61,14 +61,21 @@ import { doc } from "@pluv/crdt-yjs";
 var CrdtManager = class {
   constructor(options = {}) {
     this.initialized = false;
-    const { encodedState, initialStorage } = options;
+    const {
+      captureTimeout,
+      encodedState,
+      initialStorage,
+      trackedOrigins = []
+    } = options;
     const _doc = encodedState ? doc().applyUpdate(encodedState) : null;
     if (_doc && !!Object.keys(_doc.toJSON()).length) {
       this.doc = _doc;
+      this.trackOrigins({ captureTimeout, trackedOrigins });
       return;
     }
     _doc == null ? void 0 : _doc.destroy();
     this.doc = doc(initialStorage == null ? void 0 : initialStorage());
+    this.trackOrigins({ captureTimeout, trackedOrigins });
   }
   /**
    * !HACK
@@ -90,8 +97,15 @@ var CrdtManager = class {
     return this.doc.get(key);
   }
   initialize(params) {
-    const { onInitialized, origin, update } = params;
+    const {
+      captureTimeout,
+      onInitialized,
+      origin,
+      trackedOrigins,
+      update
+    } = params;
     const updates = typeof update === "string" ? [update] : update;
+    this.trackOrigins({ captureTimeout, trackedOrigins });
     if (!updates.length)
       return this;
     if (this.initialized) {
@@ -106,8 +120,13 @@ var CrdtManager = class {
       _doc.destroy();
     }
     onInitialized == null ? void 0 : onInitialized();
+    this.trackOrigins({ captureTimeout, trackedOrigins });
     return this;
   }
+  trackOrigins(options) {
+    const { captureTimeout, trackedOrigins } = options;
+    this.doc.trackOrigins({ captureTimeout, trackedOrigins });
+  }
   _applyDocUpdates(yjsDoc, updates, origin) {
     yjsDoc.transact(() => {
       updates.reduce((acc, _update) => acc.applyUpdate(_update), yjsDoc);
@@ -120,6 +139,7 @@ var CrdtManager = class {
 import { makeSubject, subscribe } from "wonka";
 var CrdtNotifier = class {
   constructor() {
+    this.rootSubject = makeSubject();
     this.subjects = /* @__PURE__ */ new Map();
   }
   subject(key) {
@@ -131,6 +151,9 @@ var CrdtNotifier = class {
     this.subjects.set(key, newSubject);
     return newSubject;
   }
+  subcribeRoot(callback) {
+    return subscribe(callback)(this.rootSubject.source).unsubscribe;
+  }
   subscribe(key, callback) {
     const subject = this.subject(key);
     return subscribe(callback)(subject.source).unsubscribe;
@@ -353,7 +376,8 @@ var ADD_TO_STORAGE_STATE_DEBOUNCE_MS = 1e3;
 var HEARTBEAT_INTERVAL_MS = 1e4;
 var PONG_TIMEOUT_MS = 2e3;
 var RECONNECT_TIMEOUT_MS = 3e4;
-var Y_ORIGIN_INITIALIZED = "$INITIALIZED";
+var ORIGIN_INITIALIZED = "$INITIALIZED";
+var ORIGIN_STORAGE_UPDATED = "$STORAGE_UPDATED";
 var DEFAULT_PLUV_CLIENT_ADDON = (input) => ({
   storage: new StorageStore(input.room.id)
 });
@@ -362,14 +386,17 @@ var PluvRoom = class extends AbstractRoom {
     const {
       addons = [],
       authEndpoint,
+      captureTimeout,
       debug = false,
       initialPresence,
       initialStorage,
       onAuthorizationFail,
       presence,
+      trackedOrigins,
       wsEndpoint
     } = options;
     super(room);
+    this._captureTimeout = null;
     this._crdtNotifier = new CrdtNotifier();
     this._eventNotifier = new EventNotifier();
     this._intervals = {
@@ -396,8 +423,15 @@ var PluvRoom = class extends AbstractRoom {
       pong: null,
       reconnect: null
     };
+    this._trackedOrigins = null;
     this._windowListeners = null;
     this._wsListeners = null;
+    this.canRedo = () => {
+      return !!this._crdtManager.doc.canRedo();
+    };
+    this.canUndo = () => {
+      return !!this._crdtManager.doc.canUndo();
+    };
     this.event = (event, callback) => {
       return this._eventNotifier.subscribe(event, callback);
     };
@@ -420,12 +454,29 @@ var PluvRoom = class extends AbstractRoom {
     this.other = (connectionId, callback) => {
       return this._otherNotifier.subscribe(connectionId, callback);
     };
+    this.redo = () => {
+      this._crdtManager.doc.redo();
+    };
     this.storage = (key, fn) => {
       return this._crdtNotifier.subscribe(key, fn);
     };
+    this.storageRoot = (fn) => {
+      return this._crdtNotifier.subcribeRoot(fn);
+    };
     this.subscribe = (name, callback) => {
       return this._stateNotifier.subscribe(name, callback);
     };
+    this.transact = (fn, origin) => {
+      const _origin = origin != null ? origin : this._state.connection.id;
+      if (typeof _origin !== "string")
+        return;
+      this._crdtManager.doc.transact(() => {
+        fn(this._crdtManager.doc.storage);
+      }, _origin);
+    };
+    this.undo = () => {
+      this._crdtManager.doc.undo();
+    };
     this.updateMyPresence = (presence) => {
       var _a;
       this._usersManager.updateMyPresence(presence);
@@ -475,7 +526,13 @@ var PluvRoom = class extends AbstractRoom {
       initialPresence,
       presence
     });
-    this._crdtManager = new CrdtManager({ initialStorage });
+    this._crdtManager = new CrdtManager({
+      captureTimeout,
+      initialStorage,
+      trackedOrigins
+    });
+    this._captureTimeout = captureTimeout != null ? captureTimeout : null;
+    this._trackedOrigins = trackedOrigins != null ? trackedOrigins : null;
   }
   get webSocket() {
     return this._state.webSocket;
@@ -506,7 +563,6 @@ var PluvRoom = class extends AbstractRoom {
       });
       yield this._storageStore.initialize();
       yield this._applyStorageStore();
-      console.log(this._getWsEndpoint(this.id));
       const url = new URL(this._getWsEndpoint(this.id));
       let authToken = null;
       let webSocket;
@@ -562,12 +618,16 @@ var PluvRoom = class extends AbstractRoom {
   }
   _applyStorageStore() {
     return __async(this, null, function* () {
+      var _a;
       const updates = yield this._storageStore.getUpdates();
+      const trackedOrigins = this._getTrackedOrigins();
       this._crdtManager.initialize({
+        captureTimeout: (_a = this._captureTimeout) != null ? _a : void 0,
         onInitialized: () => {
           this._observeCrdt();
         },
-        origin: Y_ORIGIN_INITIALIZED,
+        origin: ORIGIN_INITIALIZED,
+        trackedOrigins: trackedOrigins != null ? trackedOrigins : void 0,
         update: updates
       });
       this._emitSharedTypes();
@@ -686,10 +746,15 @@ var PluvRoom = class extends AbstractRoom {
   }
   _emitSharedTypes() {
     const sharedTypes = this._crdtManager.doc.getSharedTypes();
-    Object.entries(sharedTypes).forEach(([prop, sharedType]) => {
-      const serialized = sharedType.toJSON();
-      this._crdtNotifier.subject(prop).next(serialized);
-    });
+    const storageRoot = Object.entries(sharedTypes).reduce(
+      (acc, [prop, sharedType]) => {
+        const serialized = sharedType.toJSON();
+        this._crdtNotifier.subject(prop).next(serialized);
+        return __spreadProps(__spreadValues({}, acc), { [prop]: serialized });
+      },
+      {}
+    );
+    this._crdtNotifier.rootSubject.next(storageRoot);
   }
   _getAuthFetchOptions(room) {
     if (typeof this._endpoints.authEndpoint === "undefined")
@@ -728,6 +793,11 @@ var PluvRoom = class extends AbstractRoom {
       }
     });
   }
+  _getTrackedOrigins() {
+    var _a;
+    const connectionId = this._state.connection.id;
+    return !connectionId ? this._trackedOrigins : [connectionId, ...(_a = this._trackedOrigins) != null ? _a : []];
+  }
   _getWsEndpoint(room) {
     switch (typeof this._endpoints.wsEndpoint) {
       case "undefined":
@@ -824,17 +894,21 @@ var PluvRoom = class extends AbstractRoom {
   }
   _handleStorageReceivedMessage(message) {
     return __async(this, null, function* () {
+      var _a;
       const { connectionId } = message;
       if (!connectionId)
         return;
       if (!this._state.webSocket)
         throw new Error("Could not find WebSocket");
       const data = message.data;
+      const trackedOrigins = this._getTrackedOrigins();
       this._crdtManager.initialize({
+        captureTimeout: (_a = this._captureTimeout) != null ? _a : void 0,
         onInitialized: () => __async(this, null, function* () {
           this._observeCrdt();
         }),
-        origin: Y_ORIGIN_INITIALIZED,
+        origin: ORIGIN_INITIALIZED,
+        trackedOrigins: trackedOrigins != null ? trackedOrigins : void 0,
         update: data.state
       });
       const encodedState = this._crdtManager.doc.encodeStateAsUpdate();
@@ -843,7 +917,7 @@ var PluvRoom = class extends AbstractRoom {
       const update = this._crdtManager.doc.encodeStateAsUpdate();
       this._sendMessage({
         type: "$UPDATE_STORAGE",
-        data: { origin: Y_ORIGIN_INITIALIZED, update }
+        data: { origin: ORIGIN_INITIALIZED, update }
       });
     });
   }
@@ -856,14 +930,19 @@ var PluvRoom = class extends AbstractRoom {
     const data = message.data;
     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 serialized = sharedType.toJSON();
-      this._crdtNotifier.subject(prop).next(serialized);
-    });
+    const storageRoot = Object.entries(sharedTypes).reduce(
+      (acc, [prop, sharedType]) => {
+        if (!this._crdtManager)
+          return acc;
+        const serialized = sharedType.toJSON();
+        this._crdtNotifier.subject(prop).next(serialized);
+        return __spreadProps(__spreadValues({}, acc), { [prop]: serialized });
+      },
+      {}
+    );
+    this._crdtNotifier.rootSubject.next(storageRoot);
   }
   _handleUserJoinedMessage(message) {
     const { connectionId } = message;
@@ -912,7 +991,7 @@ var PluvRoom = class extends AbstractRoom {
         const origin = _origin != null ? _origin : null;
         this._addToStorageStore(update);
         this._emitSharedTypes();
-        if (origin === Y_ORIGIN_INITIALIZED || origin === this)
+        if (origin === ORIGIN_INITIALIZED || origin === this)
           return;
         if (!this._state.webSocket)
           return;
@@ -920,7 +999,7 @@ var PluvRoom = class extends AbstractRoom {
           return;
         if (this._state.webSocket.readyState !== WebSocket.OPEN)
           return;
-        if (origin === "$STORAGE_UPDATED")
+        if (origin === ORIGIN_STORAGE_UPDATED)
           return;
         this._sendMessage({
           type: "$UPDATE_STORAGE",
@@ -1210,6 +1289,14 @@ var MockedRoom = class extends AbstractRoom {
     this._subscriptions = {
       observeCrdt: null
     };
+    this.canRedo = () => {
+      var _a;
+      return !!((_a = this._crdtManager) == null ? void 0 : _a.doc.canRedo());
+    };
+    this.canUndo = () => {
+      var _a;
+      return !!((_a = this._crdtManager) == null ? void 0 : _a.doc.canUndo());
+    };
     this.event = (event, callback) => {
       return this._eventNotifier.subscribe(event, callback);
     };
@@ -1232,12 +1319,34 @@ var MockedRoom = class extends AbstractRoom {
     this.other = (connectionId, callback) => {
       return this._otherNotifier.subscribe(connectionId, callback);
     };
+    this.redo = () => {
+      var _a;
+      (_a = this._crdtManager) == null ? void 0 : _a.doc.redo();
+    };
     this.storage = (key, fn) => {
       return this._crdtNotifier.subscribe(key, fn);
     };
+    this.storageRoot = (fn) => {
+      return this._crdtNotifier.subcribeRoot(fn);
+    };
     this.subscribe = (name, callback) => {
       return this._stateNotifier.subscribe(name, callback);
     };
+    this.transact = (fn, origin) => {
+      const _origin = origin != null ? origin : this._state.connection.id;
+      const crdtManager = this._crdtManager;
+      if (typeof _origin !== "string")
+        return;
+      if (!crdtManager)
+        return;
+      crdtManager.doc.transact(() => {
+        fn(crdtManager.doc.storage);
+      }, _origin);
+    };
+    this.undo = () => {
+      var _a;
+      (_a = this._crdtManager) == null ? void 0 : _a.doc.undo();
+    };
     this.updateMyPresence = (presence) => {
       var _a;
       this._usersManager.updateMyPresence(presence);
@@ -1289,12 +1398,17 @@ var MockedRoom = class extends AbstractRoom {
         if (origin === "$STORAGE_UPDATED")
           return;
         const sharedTypes = this._crdtManager.doc.getSharedTypes();
-        Object.entries(sharedTypes).forEach(([prop, sharedType]) => {
-          if (!this._crdtManager)
-            return;
-          const serialized = sharedType.toJSON();
-          this._crdtNotifier.subject(prop).next(serialized);
-        });
+        const storageRoot = Object.entries(sharedTypes).reduce(
+          (acc, [prop, sharedType]) => {
+            if (!this._crdtManager)
+              return acc;
+            const serialized = sharedType.toJSON();
+            this._crdtNotifier.subject(prop).next(serialized);
+            return __spreadProps(__spreadValues({}, acc), { [prop]: serialized });
+          },
+          {}
+        );
+        this._crdtNotifier.rootSubject.next(storageRoot);
       }
     );
     this._subscriptions.observeCrdt = unsubscribe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,19 +18,19 @@
   },
   "dependencies": {
     "wonka": "^6.3.4",
-    "@pluv/crdt-yjs": "^0.11.1",
-    "@pluv/types": "^0.11.1"
+    "@pluv/crdt-yjs": "^0.12.0",
+    "@pluv/types": "^0.12.0"
   },
   "peerDependencies": {
     "yjs": "^13.0.0"
   },
   "devDependencies": {
-    "eslint": "^8.49.0",
+    "eslint": "^8.50.0",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
-    "yjs": "^13.6.7",
-    "@pluv/tsconfig": "^0.11.1",
-    "eslint-config-pluv": "^0.11.1"
+    "yjs": "^13.6.8",
+    "@pluv/tsconfig": "^0.12.0",
+    "eslint-config-pluv": "^0.12.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",

package/src/AbstractRoom.ts

@@ -18,7 +18,7 @@ import type { UserInfo, WebSocketConnection } from "./types";
 export abstract class AbstractRoom<
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractType<any>> = {}
+    TStorage extends Record<string, AbstractType<any>> = {},
 > {
     public readonly id: string;
 
@@ -28,12 +28,16 @@ export abstract class AbstractRoom<
 
     public abstract broadcast<TEvent extends keyof InferIOInput<TIO>>(
         event: TEvent,
-        data: Id<InferIOInput<TIO>[TEvent]>
+        data: Id<InferIOInput<TIO>[TEvent]>,
     ): void;
 
+    public abstract canRedo(): boolean;
+
+    public abstract canUndo(): boolean;
+
     public abstract event<TEvent extends keyof InferIOOutput<TIO>>(
         event: TEvent,
-        callback: EventNotifierSubscriptionCallback<TIO, TEvent>
+        callback: EventNotifierSubscriptionCallback<TIO, TEvent>,
     ): () => void;
 
     public abstract getConnection(): WebSocketConnection;
@@ -43,31 +47,46 @@ export abstract class AbstractRoom<
     public abstract getMyself(): Id<UserInfo<TIO, TPresence>> | null;
 
     public abstract getOther(
-        connectionId: string
+        connectionId: string,
     ): Id<UserInfo<TIO, TPresence>> | null;
 
     public abstract getOthers(): readonly Id<UserInfo<TIO, TPresence>>[];
 
     public abstract getStorage<TKey extends keyof TStorage>(
-        key: TKey
+        key: TKey,
     ): TStorage[TKey] | null;
 
     public abstract other(
         connectionId: string,
-        callback: OtherNotifierSubscriptionCallback<TIO>
+        callback: OtherNotifierSubscriptionCallback<TIO>,
     ): () => void;
 
+    public abstract redo(): void;
+
     public abstract storage<TKey extends keyof TStorage>(
         key: TKey,
-        fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void
+        fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void,
+    ): () => void;
+
+    public abstract storageRoot(
+        fn: (value: {
+            [P in keyof TStorage]: InferYjsSharedTypeJson<TStorage[P]>;
+        }) => void,
     ): () => void;
 
     public abstract 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;
 
+    public abstract transact(
+        fn: (storage: TStorage) => void,
+        origin?: string,
+    ): void;
+
+    public abstract undo(): void;
+
     public abstract updateMyPresence(presence: Partial<TPresence>): void;
 }

package/src/AbstractStorageStore.ts

@@ -1,5 +1,3 @@
-import { MaybePromise } from "@pluv/types";
-
 export abstract class AbstractStorageStore {
     public room: string;
 

package/src/CrdtManager.ts

@@ -1,26 +1,31 @@
-import type { YjsDoc } from "@pluv/crdt-yjs";
+import type { TrackOriginOptions, YjsDoc } from "@pluv/crdt-yjs";
 import { doc } from "@pluv/crdt-yjs";
 import type { AbstractType } from "yjs";
 
-export interface CrdtManagerOptions<
-    TStorage extends Record<string, AbstractType<any>> = {}
-> {
+export type CrdtManagerOptions<
+    TStorage extends Record<string, AbstractType<any>> = {},
+> = {
     encodedState?: string | Uint8Array | null;
     initialStorage?: () => TStorage;
-}
+} & TrackOriginOptions;
 
-interface CrdtManagerInitializeParams {
+type CrdtManagerInitializeParams = {
     onInitialized?: () => void;
     origin?: any;
     update: string | readonly string[];
-}
+} & TrackOriginOptions;
 
 export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
     public doc: YjsDoc<TStorage>;
     public initialized: boolean = false;
 
     constructor(options: CrdtManagerOptions<TStorage> = {}) {
-        const { encodedState, initialStorage } = options;
+        const {
+            captureTimeout,
+            encodedState,
+            initialStorage,
+            trackedOrigins = [],
+        } = options;
 
         const _doc = encodedState
             ? doc<TStorage>().applyUpdate(encodedState)
@@ -28,6 +33,7 @@ export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
 
         if (_doc && !!Object.keys(_doc.toJSON()).length) {
             this.doc = _doc;
+            this.trackOrigins({ captureTimeout, trackedOrigins });
 
             return;
         }
@@ -35,6 +41,7 @@ export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
         _doc?.destroy();
 
         this.doc = doc<TStorage>(initialStorage?.());
+        this.trackOrigins({ captureTimeout, trackedOrigins });
     }
 
     /**
@@ -63,10 +70,18 @@ export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
     }
 
     public initialize(params: CrdtManagerInitializeParams): this {
-        const { onInitialized, origin, update } = params;
+        const {
+            captureTimeout,
+            onInitialized,
+            origin,
+            trackedOrigins,
+            update,
+        } = params;
 
         const updates = typeof update === "string" ? [update] : update;
 
+        this.trackOrigins({ captureTimeout, trackedOrigins });
+
         if (!updates.length) return this;
 
         if (this.initialized) {
@@ -87,13 +102,21 @@ export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
 
         onInitialized?.();
 
+        this.trackOrigins({ captureTimeout, trackedOrigins });
+
         return this;
     }
 
+    public trackOrigins(options: TrackOriginOptions): void {
+        const { captureTimeout, trackedOrigins } = options;
+
+        this.doc.trackOrigins({ captureTimeout, trackedOrigins });
+    }
+
     private _applyDocUpdates(
         yjsDoc: YjsDoc<TStorage>,
         updates: readonly string[],
-        origin?: string
+        origin?: string,
     ): YjsDoc<TStorage> {
         yjsDoc.transact(() => {
             updates.reduce((acc, _update) => acc.applyUpdate(_update), yjsDoc);

package/src/CrdtNotifier.ts

@@ -3,13 +3,17 @@ import { makeSubject, Subject, subscribe } from "wonka";
 import type { AbstractType } from "yjs";
 
 export class CrdtNotifier<TStorage extends Record<string, AbstractType<any>>> {
+    public rootSubject = makeSubject<{
+        [P in keyof TStorage]: InferYjsSharedTypeJson<TStorage[P]>;
+    }>();
+
     public subjects = new Map<
         keyof TStorage,
         Subject<InferYjsSharedTypeJson<TStorage[keyof TStorage]>> | null
     >();
 
     public subject<TKey extends keyof TStorage>(
-        key: TKey
+        key: TKey,
     ): Subject<InferYjsSharedTypeJson<TStorage[TKey]>> {
         const subject = this.subjects.get(key);
 
@@ -25,9 +29,17 @@ export class CrdtNotifier<TStorage extends Record<string, AbstractType<any>>> {
         return newSubject as Subject<InferYjsSharedTypeJson<TStorage[TKey]>>;
     }
 
+    public subcribeRoot(
+        callback: (value: {
+            [P in keyof TStorage]: InferYjsSharedTypeJson<TStorage[P]>;
+        }) => void,
+    ): () => void {
+        return subscribe(callback)(this.rootSubject.source).unsubscribe;
+    }
+
     public subscribe<TKey extends keyof TStorage>(
         key: TKey,
-        callback: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void
+        callback: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void,
     ): () => void {
         const subject = this.subject(key);
 

package/src/EventNotifier.ts

@@ -4,7 +4,7 @@ import { makeSubject, subscribe } from "wonka";
 
 export type EventNotifierSubscriptionCallback<
     TIO extends IOLike,
-    TEvent extends keyof InferIOOutput<TIO>
+    TEvent extends keyof InferIOOutput<TIO>,
 > = (value: Id<IOEventMessage<TIO, TEvent>>) => void;
 
 export class EventNotifier<TIO extends IOLike> {
@@ -14,7 +14,7 @@ export class EventNotifier<TIO extends IOLike> {
     >();
 
     public subject<TEvent extends keyof InferIOOutput<TIO>>(
-        name: TEvent
+        name: TEvent,
     ): Subject<Id<IOEventMessage<TIO, TEvent>>> {
         const subject = this.subjects.get(name);
 
@@ -29,7 +29,7 @@ export class EventNotifier<TIO extends IOLike> {
 
     public subscribe<TEvent extends keyof InferIOOutput<TIO>>(
         name: TEvent,
-        callback: EventNotifierSubscriptionCallback<TIO, TEvent>
+        callback: EventNotifierSubscriptionCallback<TIO, TEvent>,
     ): () => void {
         const subject = this.subject(name);