@pluv/crdt-yjs 2.0.2 → 2.2.0

package/dist/index.js

@@ -45,10 +45,12 @@ module.exports = __toCommonJS(index_exports);
 var yjs_exports = {};
 __export(yjs_exports, {
   array: () => array,
+  awareness: () => awareness,
   doc: () => doc,
   kind: () => kind,
   map: () => map,
   object: () => object,
+  provider: () => provider,
   text: () => text,
   xmlElement: () => xmlElement,
   xmlFragment: () => xmlFragment,
@@ -73,6 +75,147 @@ var array = (value = []) => {
   return new YjsArray(value);
 };
 
+// src/awareness/PluvYjsAwareness.ts
+var import_observable = require("lib0/observable");
+
+// src/constants.ts
+var PLUV_PRESENCE_META_KEY = "__pluv";
+var PLUV_PRESENCE_Y_ID_KEY = "__y_clientid";
+
+// src/awareness/PluvYjsAwareness.ts
+var PluvYjsAwareness = class extends import_observable.ObservableV2 {
+  constructor(params) {
+    super();
+    this._field = null;
+    this._idMap = /* @__PURE__ */ new Map();
+    /**
+     * !HACK
+     * @description We dgaf about these. We're just mirroring the fields that exist in the
+     * og awareness to make sure everything aligns.
+     * @see https://github.com/yjs/y-protocols/blob/master/awareness.js
+     * @date May 13, 2025
+     */
+    this.meta = /* @__PURE__ */ new Map();
+    this._checkInterval = 0;
+    const { field, room } = params;
+    this.doc = room.getDoc().value;
+    this._room = room;
+    if (!!field) this._field = field;
+    const myPresence = this._room.getMyPresence();
+    const myMeta = (myPresence == null ? void 0 : myPresence[PLUV_PRESENCE_META_KEY]) || {};
+    this._room.updateMyPresence({
+      [PLUV_PRESENCE_META_KEY]: __spreadProps(__spreadValues({}, myMeta), {
+        [PLUV_PRESENCE_Y_ID_KEY]: this.clientID
+      })
+    });
+    this._unsubscribe = this._room.subscribe.others((others, event) => {
+      const updates = this._deriveUpdates(others, event);
+      if (!updates) return;
+      this.emit("change", [updates, "presence"]);
+      this.emit("update", [updates, "presence"]);
+    });
+  }
+  get clientID() {
+    return this.doc.clientID;
+  }
+  get states() {
+    return this.getStates();
+  }
+  destroy() {
+    this.emit("destroy", [this]);
+    this._unsubscribe();
+    super.destroy();
+  }
+  getLocalState() {
+    return this._adaptPresence(this._room.getMyPresence());
+  }
+  setLocalState(state) {
+    const patch = !!this._field ? { [this._field]: state } : state;
+    this._room.updateMyPresence(patch);
+    this.emit("update", [{ added: [], updated: [this.clientID], removed: [] }, "local"]);
+  }
+  setLocalStateField(field, value) {
+    const patch = !!this._field ? { [this._field]: __spreadProps(__spreadValues({}, this.getLocalState()), { [field]: value }) } : { [field]: value };
+    this._room.updateMyPresence(patch);
+  }
+  /**
+   * !HACK
+   * @description We're building the awareness presences from the states stored on the room's
+   * presense instead of using the map defined in the awareness interface.
+   * @see https://github.com/yjs/y-protocols/blob/master/awareness.js
+   * @date May 13, 2025
+   */
+  getStates() {
+    const others = this._room.getOthers();
+    const states = others.reduce((map2, other) => {
+      var _a;
+      const presence = this._adaptPresence(other.presence);
+      const meta = ((_a = other.presence) == null ? void 0 : _a[PLUV_PRESENCE_META_KEY]) || {};
+      const clientID = meta[PLUV_PRESENCE_Y_ID_KEY];
+      return typeof presence !== "undefined" && typeof clientID !== "undefined" ? map2.set(clientID, presence) : map2;
+    }, /* @__PURE__ */ new Map());
+    const myPresence = this.getLocalState();
+    if (typeof myPresence !== "undefined") states.set(this.clientID, myPresence);
+    return states;
+  }
+  _adaptPresence(presence) {
+    return !!this._field ? presence[this._field] : presence;
+  }
+  _deriveUpdates(others, event) {
+    switch (event.kind) {
+      case "clear": {
+        this._idMap.clear();
+        return null;
+      }
+      case "enter": {
+        const clientID = this._resetIdMap(others).get(event.user.connectionId);
+        return {
+          added: typeof clientID !== "undefined" ? [clientID] : [],
+          updated: [],
+          removed: []
+        };
+      }
+      case "leave": {
+        const clientID = this._idMap.get(event.user.connectionId);
+        this._resetIdMap(others);
+        return {
+          added: [],
+          updated: [],
+          removed: typeof clientID !== "undefined" ? [clientID] : []
+        };
+      }
+      case "sync": {
+        this._resetIdMap(others);
+        return null;
+      }
+      case "update": {
+        const clientID = this._resetIdMap(others).get(event.user.connectionId);
+        return {
+          added: [],
+          updated: typeof clientID !== "undefined" ? [clientID] : [],
+          removed: []
+        };
+      }
+      default:
+        return null;
+    }
+  }
+  _resetIdMap(others) {
+    this._idMap.clear();
+    return others.reduce((map2, other) => {
+      var _a;
+      const clientID = (_a = other.presence[PLUV_PRESENCE_META_KEY]) == null ? void 0 : _a[PLUV_PRESENCE_Y_ID_KEY];
+      if (typeof clientID === "undefined") return map2;
+      return map2.set(other.connectionId, clientID);
+    }, this._idMap);
+  }
+};
+
+// src/awareness/awareness.ts
+var awareness = (params) => {
+  return new PluvYjsAwareness(params);
+};
+
 // src/doc/CrdtYjsDoc.ts
 var import_js_base64 = require("js-base64");
 var import_yjs9 = require("yjs");
@@ -459,6 +602,86 @@ var object = (value = {}) => {
   return new YjsObject(value);
 };
 
+// src/provider/PluvYjsProvider.ts
+var import_types = require("@pluv/types");
+var import_observable2 = require("lib0/observable");
+var PluvYjsProvider = class extends import_observable2.ObservableV2 {
+  constructor(params) {
+    super();
+    this._synced = false;
+    const { field, room } = params;
+    this.awareness = awareness({ field, room });
+    this.doc = room.getDoc().value;
+    this._room = room;
+    const subscriptions = [
+      this._room.subscribe.connection(({ storage }) => {
+        const status = this._toProviderStatus(storage.state);
+        if (!status) return;
+        this.emit("status", [{ status }]);
+      }),
+      this._room.addEventListener("close", (event) => {
+        this.emit("connection-close", [event, this]);
+      }),
+      this._room.addEventListener("error", (event) => {
+        this.emit("connection-error", [event, this]);
+      })
+    ];
+    this._unsubscribe = subscriptions.reduce(
+      (fn, unsubscribe) => () => {
+        fn();
+        unsubscribe();
+      },
+      () => void 0
+    );
+  }
+  get synced() {
+    return this._synced;
+  }
+  set synced(state) {
+    if (this._synced === state) return;
+    this._synced = state;
+    this.emit("sync", [state]);
+    this.emit("synced", [state]);
+  }
+  destroy() {
+    this.awareness.destroy();
+    this._unsubscribe();
+    super.destroy();
+  }
+  _toProviderStatus(state) {
+    switch (state) {
+      case import_types.StorageState.Loading: {
+        return "connecting";
+      }
+      case import_types.StorageState.Unavailable: {
+        return "disconnected";
+      }
+      case import_types.StorageState.Offline:
+      case import_types.StorageState.Synced: {
+        return "connected";
+      }
+      default:
+        return null;
+    }
+  }
+  /**
+   * !HACK
+   * @description We dgaf about these, since the room manages these already. We're just mirroring
+   * the fields that exist in the og provider to make sure everything aligns.
+   * @see https://github.com/yjs/y-websocket/blob/master/src/y-websocket.js
+   * @date May 13, 2025
+   */
+  connect() {
+  }
+  disconnect() {
+  }
+};
+
+// src/provider/provider.ts
+var provider = (params) => {
+  return new PluvYjsProvider(params);
+};
+
 // src/text/text.ts
 var text = (value = "") => {
   return new YjsText(value);

package/dist/index.mjs

@@ -26,10 +26,12 @@ var __export = (target, all) => {
 var yjs_exports = {};
 __export(yjs_exports, {
   array: () => array,
+  awareness: () => awareness,
   doc: () => doc,
   kind: () => kind,
   map: () => map,
   object: () => object,
+  provider: () => provider,
   text: () => text,
   xmlElement: () => xmlElement,
   xmlFragment: () => xmlFragment,
@@ -54,6 +56,147 @@ var array = (value = []) => {
   return new YjsArray(value);
 };
 
+// src/awareness/PluvYjsAwareness.ts
+import { ObservableV2 } from "lib0/observable";
+
+// src/constants.ts
+var PLUV_PRESENCE_META_KEY = "__pluv";
+var PLUV_PRESENCE_Y_ID_KEY = "__y_clientid";
+
+// src/awareness/PluvYjsAwareness.ts
+var PluvYjsAwareness = class extends ObservableV2 {
+  constructor(params) {
+    super();
+    this._field = null;
+    this._idMap = /* @__PURE__ */ new Map();
+    /**
+     * !HACK
+     * @description We dgaf about these. We're just mirroring the fields that exist in the
+     * og awareness to make sure everything aligns.
+     * @see https://github.com/yjs/y-protocols/blob/master/awareness.js
+     * @date May 13, 2025
+     */
+    this.meta = /* @__PURE__ */ new Map();
+    this._checkInterval = 0;
+    const { field, room } = params;
+    this.doc = room.getDoc().value;
+    this._room = room;
+    if (!!field) this._field = field;
+    const myPresence = this._room.getMyPresence();
+    const myMeta = (myPresence == null ? void 0 : myPresence[PLUV_PRESENCE_META_KEY]) || {};
+    this._room.updateMyPresence({
+      [PLUV_PRESENCE_META_KEY]: __spreadProps(__spreadValues({}, myMeta), {
+        [PLUV_PRESENCE_Y_ID_KEY]: this.clientID
+      })
+    });
+    this._unsubscribe = this._room.subscribe.others((others, event) => {
+      const updates = this._deriveUpdates(others, event);
+      if (!updates) return;
+      this.emit("change", [updates, "presence"]);
+      this.emit("update", [updates, "presence"]);
+    });
+  }
+  get clientID() {
+    return this.doc.clientID;
+  }
+  get states() {
+    return this.getStates();
+  }
+  destroy() {
+    this.emit("destroy", [this]);
+    this._unsubscribe();
+    super.destroy();
+  }
+  getLocalState() {
+    return this._adaptPresence(this._room.getMyPresence());
+  }
+  setLocalState(state) {
+    const patch = !!this._field ? { [this._field]: state } : state;
+    this._room.updateMyPresence(patch);
+    this.emit("update", [{ added: [], updated: [this.clientID], removed: [] }, "local"]);
+  }
+  setLocalStateField(field, value) {
+    const patch = !!this._field ? { [this._field]: __spreadProps(__spreadValues({}, this.getLocalState()), { [field]: value }) } : { [field]: value };
+    this._room.updateMyPresence(patch);
+  }
+  /**
+   * !HACK
+   * @description We're building the awareness presences from the states stored on the room's
+   * presense instead of using the map defined in the awareness interface.
+   * @see https://github.com/yjs/y-protocols/blob/master/awareness.js
+   * @date May 13, 2025
+   */
+  getStates() {
+    const others = this._room.getOthers();
+    const states = others.reduce((map2, other) => {
+      var _a;
+      const presence = this._adaptPresence(other.presence);
+      const meta = ((_a = other.presence) == null ? void 0 : _a[PLUV_PRESENCE_META_KEY]) || {};
+      const clientID = meta[PLUV_PRESENCE_Y_ID_KEY];
+      return typeof presence !== "undefined" && typeof clientID !== "undefined" ? map2.set(clientID, presence) : map2;
+    }, /* @__PURE__ */ new Map());
+    const myPresence = this.getLocalState();
+    if (typeof myPresence !== "undefined") states.set(this.clientID, myPresence);
+    return states;
+  }
+  _adaptPresence(presence) {
+    return !!this._field ? presence[this._field] : presence;
+  }
+  _deriveUpdates(others, event) {
+    switch (event.kind) {
+      case "clear": {
+        this._idMap.clear();
+        return null;
+      }
+      case "enter": {
+        const clientID = this._resetIdMap(others).get(event.user.connectionId);
+        return {
+          added: typeof clientID !== "undefined" ? [clientID] : [],
+          updated: [],
+          removed: []
+        };
+      }
+      case "leave": {
+        const clientID = this._idMap.get(event.user.connectionId);
+        this._resetIdMap(others);
+        return {
+          added: [],
+          updated: [],
+          removed: typeof clientID !== "undefined" ? [clientID] : []
+        };
+      }
+      case "sync": {
+        this._resetIdMap(others);
+        return null;
+      }
+      case "update": {
+        const clientID = this._resetIdMap(others).get(event.user.connectionId);
+        return {
+          added: [],
+          updated: typeof clientID !== "undefined" ? [clientID] : [],
+          removed: []
+        };
+      }
+      default:
+        return null;
+    }
+  }
+  _resetIdMap(others) {
+    this._idMap.clear();
+    return others.reduce((map2, other) => {
+      var _a;
+      const clientID = (_a = other.presence[PLUV_PRESENCE_META_KEY]) == null ? void 0 : _a[PLUV_PRESENCE_Y_ID_KEY];
+      if (typeof clientID === "undefined") return map2;
+      return map2.set(other.connectionId, clientID);
+    }, this._idMap);
+  }
+};
+
+// src/awareness/awareness.ts
+var awareness = (params) => {
+  return new PluvYjsAwareness(params);
+};
+
 // src/doc/CrdtYjsDoc.ts
 import { fromUint8Array, toUint8Array } from "js-base64";
 import {
@@ -454,6 +597,86 @@ var object = (value = {}) => {
   return new YjsObject(value);
 };
 
+// src/provider/PluvYjsProvider.ts
+import { StorageState } from "@pluv/types";
+import { ObservableV2 as ObservableV22 } from "lib0/observable";
+var PluvYjsProvider = class extends ObservableV22 {
+  constructor(params) {
+    super();
+    this._synced = false;
+    const { field, room } = params;
+    this.awareness = awareness({ field, room });
+    this.doc = room.getDoc().value;
+    this._room = room;
+    const subscriptions = [
+      this._room.subscribe.connection(({ storage }) => {
+        const status = this._toProviderStatus(storage.state);
+        if (!status) return;
+        this.emit("status", [{ status }]);
+      }),
+      this._room.addEventListener("close", (event) => {
+        this.emit("connection-close", [event, this]);
+      }),
+      this._room.addEventListener("error", (event) => {
+        this.emit("connection-error", [event, this]);
+      })
+    ];
+    this._unsubscribe = subscriptions.reduce(
+      (fn, unsubscribe) => () => {
+        fn();
+        unsubscribe();
+      },
+      () => void 0
+    );
+  }
+  get synced() {
+    return this._synced;
+  }
+  set synced(state) {
+    if (this._synced === state) return;
+    this._synced = state;
+    this.emit("sync", [state]);
+    this.emit("synced", [state]);
+  }
+  destroy() {
+    this.awareness.destroy();
+    this._unsubscribe();
+    super.destroy();
+  }
+  _toProviderStatus(state) {
+    switch (state) {
+      case StorageState.Loading: {
+        return "connecting";
+      }
+      case StorageState.Unavailable: {
+        return "disconnected";
+      }
+      case StorageState.Offline:
+      case StorageState.Synced: {
+        return "connected";
+      }
+      default:
+        return null;
+    }
+  }
+  /**
+   * !HACK
+   * @description We dgaf about these, since the room manages these already. We're just mirroring
+   * the fields that exist in the og provider to make sure everything aligns.
+   * @see https://github.com/yjs/y-websocket/blob/master/src/y-websocket.js
+   * @date May 13, 2025
+   */
+  connect() {
+  }
+  disconnect() {
+  }
+};
+
+// src/provider/provider.ts
+var provider = (params) => {
+  return new PluvYjsProvider(params);
+};
+
 // src/text/text.ts
 var text = (value = "") => {
   return new YjsText(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/crdt-yjs",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "yjs for @pluv/io",
   "author": "leedavidcs",
   "license": "MIT",
@@ -17,10 +17,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@types/node": "^22.15.17",
+    "@types/node": "^22.15.18",
     "js-base64": "^3.7.7",
-    "@pluv/crdt": "^2.0.2",
-    "@pluv/types": "^2.0.2"
+    "lib0": "^0.2.108",
+    "@pluv/crdt": "^2.2.0",
+    "@pluv/types": "^2.2.0"
   },
   "peerDependencies": {
     "yjs": "^13.0.0"
@@ -29,9 +30,9 @@
     "eslint": "^9.26.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "yjs": "^13.6.26",
-    "@pluv/tsconfig": "^2.0.2",
-    "eslint-config-pluv": "^2.0.2"
+    "yjs": "^13.6.27",
+    "@pluv/tsconfig": "^2.2.0",
+    "eslint-config-pluv": "^2.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",