@liveblocks/yjs 1.1.0-yjs4 → 1.1.1-internal2

package/README.md

@@ -9,7 +9,7 @@
 
 # `@liveblocks/yjs`
 
-Provides YJS integration to effortlessly back your YJS apps with Liveblocks
+Provides Yjs integration to effortlessly back your Yjs apps with Liveblocks
 
 ## Installation
 

package/dist/index.d.mts

@@ -0,0 +1,46 @@
+import { Room, JsonObject, LsonObject, BaseUserMeta, Json } from '@liveblocks/client';
+import { Observable } from 'lib0/observable';
+import * as Y from 'yjs';
+
+declare type MetaClientState = {
+    clock: number;
+    lastUpdated: number;
+};
+/**
+ * This class will store Yjs awareness in Liveblock's presence under the __yjs key
+ * IMPORTANT: The Yjs awareness protocol uses ydoc.clientId to reference users
+ * to their respective documents. To avoid mapping Yjs clientIds to liveblock's connectionId,
+ * we simply set the clientId of the doc to the connectionId. Then no further mapping is required
+ */
+declare class Awareness extends Observable<unknown> {
+    private room;
+    doc: Y.Doc;
+    clientID: number;
+    states: Map<number, unknown>;
+    meta: Map<number, MetaClientState>;
+    _checkInterval: number;
+    private othersUnsub;
+    constructor(doc: Y.Doc, room: Room<JsonObject, LsonObject, BaseUserMeta, Json>);
+    destroy(): void;
+    getLocalState(): JsonObject | null;
+    setLocalState(state: Partial<JsonObject> | null): void;
+    setLocalStateField(field: string, value: JsonObject | null): void;
+    getStates(): Map<number, unknown>;
+}
+declare class LiveblocksProvider<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta, E extends Json> extends Observable<unknown> {
+    private room;
+    private doc;
+    private unsubscribers;
+    awareness: Awareness;
+    private _synced;
+    constructor(room: Room<P, S, U, E>, doc: Y.Doc);
+    private syncDoc;
+    get synced(): boolean;
+    set synced(state: boolean);
+    private updateHandler;
+    destroy(): void;
+    disconnect(): void;
+    connect(): void;
+}
+
+export { Awareness, LiveblocksProvider as default };

package/dist/index.d.ts

@@ -2,18 +2,21 @@ import { Room, JsonObject, LsonObject, BaseUserMeta, Json } from '@liveblocks/cl
 import { Observable } from 'lib0/observable';
 import * as Y from 'yjs';
 
-declare type LiveblocksYjsOptions = {
-    httpEndpoint?: string;
-};
 declare type MetaClientState = {
     clock: number;
     lastUpdated: number;
 };
-declare class Awareness extends Observable<any> {
+/**
+ * This class will store Yjs awareness in Liveblock's presence under the __yjs key
+ * IMPORTANT: The Yjs awareness protocol uses ydoc.clientId to reference users
+ * to their respective documents. To avoid mapping Yjs clientIds to liveblock's connectionId,
+ * we simply set the clientId of the doc to the connectionId. Then no further mapping is required
+ */
+declare class Awareness extends Observable<unknown> {
     private room;
     doc: Y.Doc;
     clientID: number;
-    states: Map<number, any>;
+    states: Map<number, unknown>;
     meta: Map<number, MetaClientState>;
     _checkInterval: number;
     private othersUnsub;
@@ -22,19 +25,22 @@ declare class Awareness extends Observable<any> {
     getLocalState(): JsonObject | null;
     setLocalState(state: Partial<JsonObject> | null): void;
     setLocalStateField(field: string, value: JsonObject | null): void;
-    getStates(): Map<number, any>;
+    getStates(): Map<number, unknown>;
 }
-declare class LiveblocksProvider<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta, E extends Json> {
+declare class LiveblocksProvider<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta, E extends Json> extends Observable<unknown> {
     private room;
-    private httpEndpoint?;
-    private lastUpdateDate;
     private doc;
     private unsubscribers;
     awareness: Awareness;
-    constructor(room: Room<P, S, U, E>, doc: Y.Doc, config?: LiveblocksYjsOptions);
+    private _synced;
+    constructor(room: Room<P, S, U, E>, doc: Y.Doc);
+    private syncDoc;
+    get synced(): boolean;
+    set synced(state: boolean);
     private updateHandler;
-    private resyncHttp;
     destroy(): void;
+    disconnect(): void;
+    connect(): void;
 }
 
 export { Awareness, LiveblocksProvider as default };

package/dist/index.js

@@ -14,26 +14,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // src/index.ts
 var _jsbase64 = require('js-base64');
@@ -110,6 +90,7 @@ var Observable = class {
 
 // src/index.ts
 var _yjs = require('yjs'); var Y = _interopRequireWildcard(_yjs);
+var Y_PRESENCE_KEY = "__yjs";
 var Awareness = class extends Observable {
   constructor(doc, room) {
     super();
@@ -118,7 +99,7 @@ var Awareness = class extends Observable {
     // manage it here. Unfortunately, it's expected to exist by various integrations, so it's an empty map.
     this.meta = /* @__PURE__ */ new Map();
     // _checkInterval this would hold a timer to remove users, but Liveblock's presence already handles this
-    // unfortunately it's expected to exist by various integrations.
+    // unfortunately it's typed by various integrations
     this._checkInterval = 0;
     this.doc = doc;
     this.room = room;
@@ -152,21 +133,21 @@ var Awareness = class extends Observable {
   }
   getLocalState() {
     const presence = this.room.getPresence();
-    if (Object.keys(this.room.getPresence()).length === 0) {
+    if (Object.keys(presence).length === 0 || typeof presence[Y_PRESENCE_KEY] === "undefined") {
       return null;
     }
-    return presence["__yjs"];
+    return presence[Y_PRESENCE_KEY];
   }
   setLocalState(state) {
     var _a;
-    const presence = (_a = this.room.getSelf()) == null ? void 0 : _a.presence["__yjs"];
+    const presence = (_a = this.room.getSelf()) == null ? void 0 : _a.presence[Y_PRESENCE_KEY];
     this.room.updatePresence({
       __yjs: __spreadValues(__spreadValues({}, presence || {}), state || {})
     });
   }
   setLocalStateField(field, value) {
     var _a;
-    const presence = (_a = this.room.getSelf()) == null ? void 0 : _a.presence["__yjs"];
+    const presence = (_a = this.room.getSelf()) == null ? void 0 : _a.presence[Y_PRESENCE_KEY];
     const update = { [field]: value };
     this.room.updatePresence({
       __yjs: __spreadValues(__spreadValues({}, presence || {}), update)
@@ -179,7 +160,7 @@ var Awareness = class extends Observable {
       if (currentValue.connectionId) {
         acc.set(
           currentValue.connectionId,
-          currentValue.presence["__yjs"] || {}
+          currentValue.presence[Y_PRESENCE_KEY] || {}
         );
       }
       return acc;
@@ -187,23 +168,26 @@ var Awareness = class extends Observable {
     return states;
   }
 };
-var LiveblocksProvider = class {
-  constructor(room, doc, config) {
-    this.lastUpdateDate = null;
+var LiveblocksProvider = class extends Observable {
+  constructor(room, doc) {
+    var _a;
+    super();
     this.unsubscribers = [];
-    this.updateHandler = (update, origin) => __async(this, null, function* () {
+    this._synced = false;
+    this.syncDoc = () => {
+      var _a;
+      this.synced = false;
+      this.doc.clientID = ((_a = this.room.getSelf()) == null ? void 0 : _a.connectionId) || this.doc.clientID;
+      this.awareness.clientID = this.doc.clientID;
+      const encodedVector = _jsbase64.Base64.fromUint8Array(Y.encodeStateVector(this.doc));
+      this.room.fetchYDoc(encodedVector);
+    };
+    this.updateHandler = (update, origin) => {
       if (origin !== "backend") {
         const encodedUpdate = _jsbase64.Base64.fromUint8Array(update);
-        this.room.updateDoc(encodedUpdate);
-        if (this.httpEndpoint) {
-          yield fetch(this.httpEndpoint, {
-            method: "POST",
-            body: encodedUpdate
-          });
-        }
+        this.room.updateYDoc(encodedUpdate);
       }
-    });
-    var _a;
+    };
     this.doc = doc;
     this.room = room;
     const connectionId = (_a = this.room.getSelf()) == null ? void 0 : _a.connectionId;
@@ -213,60 +197,41 @@ var LiveblocksProvider = class {
     this.awareness = new Awareness(this.doc, this.room);
     this.doc.on("update", this.updateHandler);
     this.unsubscribers.push(
-      this.room.events.connection.subscribe((e) => {
-        var _a2;
-        if (e === "open") {
-          this.doc.clientID = ((_a2 = this.room.getSelf()) == null ? void 0 : _a2.connectionId) || this.doc.clientID;
-          this.awareness.clientID = this.doc.clientID;
-          const encodedVector = _jsbase64.Base64.fromUint8Array(
-            Y.encodeStateVector(this.doc)
-          );
-          this.room.getDoc(encodedVector);
+      this.room.events.status.subscribe((status) => {
+        if (status === "connected") {
+          this.syncDoc();
         }
       })
     );
     this.unsubscribers.push(
-      this.room.events.docUpdated.subscribe((updates) => {
-        const decodedUpdates = updates.map(_jsbase64.Base64.toUint8Array);
-        const update = Y.mergeUpdates(decodedUpdates);
-        Y.applyUpdate(this.doc, update, "backend");
+      this.room.events.ydoc.subscribe((update) => {
+        Y.applyUpdate(this.doc, _jsbase64.Base64.toUint8Array(update), "backend");
+        this.synced = true;
       })
     );
-    if (config == null ? void 0 : config.httpEndpoint) {
-      this.httpEndpoint = config.httpEndpoint + "?room=" + this.room.id;
-      this.unsubscribers.push(
-        this.room.events.customEvent.subscribe(({ event }) => {
-          if ((event == null ? void 0 : event.type) === "REFRESH") {
-            void this.resyncHttp();
-          }
-        })
-      );
-      void this.resyncHttp();
-    }
-    this.room.getDoc();
+    this.syncDoc();
   }
-  resyncHttp() {
-    return __async(this, null, function* () {
-      if (!this.httpEndpoint) {
-        return;
-      }
-      const response = yield fetch(
-        `${this.httpEndpoint}${this.lastUpdateDate !== null ? `&after=${this.lastUpdateDate.toISOString()}` : ""}`
-      );
-      const { updates, lastUpdate } = yield response.json();
-      if (updates.length === 0) {
-        return;
-      }
-      this.lastUpdateDate = new Date(lastUpdate);
-      const update = Y.mergeUpdates(updates.map(_jsbase64.Base64.toUint8Array));
-      Y.applyUpdate(this.doc, update, "backend");
-    });
+  // The sync'd property is required by some provider implementations
+  get synced() {
+    return this._synced;
+  }
+  set synced(state) {
+    if (this._synced !== state) {
+      this._synced = state;
+      this.emit("synced", [state]);
+      this.emit("sync", [state]);
+    }
   }
   destroy() {
     this.doc.off("update", this.updateHandler);
     this.unsubscribers.forEach((unsub) => unsub());
     this.awareness.destroy();
   }
+  // Some provider implementations expect to be able to call connect/disconnect, implement as noop
+  disconnect() {
+  }
+  connect() {
+  }
 };
 
 

package/dist/index.mjs

@@ -14,26 +14,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // src/index.ts
 import { Base64 } from "js-base64";
@@ -110,6 +90,7 @@ var Observable = class {
 
 // src/index.ts
 import * as Y from "yjs";
+var Y_PRESENCE_KEY = "__yjs";
 var Awareness = class extends Observable {
   constructor(doc, room) {
     super();
@@ -118,7 +99,7 @@ var Awareness = class extends Observable {
     // manage it here. Unfortunately, it's expected to exist by various integrations, so it's an empty map.
     this.meta = /* @__PURE__ */ new Map();
     // _checkInterval this would hold a timer to remove users, but Liveblock's presence already handles this
-    // unfortunately it's expected to exist by various integrations.
+    // unfortunately it's typed by various integrations
     this._checkInterval = 0;
     this.doc = doc;
     this.room = room;
@@ -152,21 +133,21 @@ var Awareness = class extends Observable {
   }
   getLocalState() {
     const presence = this.room.getPresence();
-    if (Object.keys(this.room.getPresence()).length === 0) {
+    if (Object.keys(presence).length === 0 || typeof presence[Y_PRESENCE_KEY] === "undefined") {
       return null;
     }
-    return presence["__yjs"];
+    return presence[Y_PRESENCE_KEY];
   }
   setLocalState(state) {
     var _a;
-    const presence = (_a = this.room.getSelf()) == null ? void 0 : _a.presence["__yjs"];
+    const presence = (_a = this.room.getSelf()) == null ? void 0 : _a.presence[Y_PRESENCE_KEY];
     this.room.updatePresence({
       __yjs: __spreadValues(__spreadValues({}, presence || {}), state || {})
     });
   }
   setLocalStateField(field, value) {
     var _a;
-    const presence = (_a = this.room.getSelf()) == null ? void 0 : _a.presence["__yjs"];
+    const presence = (_a = this.room.getSelf()) == null ? void 0 : _a.presence[Y_PRESENCE_KEY];
     const update = { [field]: value };
     this.room.updatePresence({
       __yjs: __spreadValues(__spreadValues({}, presence || {}), update)
@@ -179,7 +160,7 @@ var Awareness = class extends Observable {
       if (currentValue.connectionId) {
         acc.set(
           currentValue.connectionId,
-          currentValue.presence["__yjs"] || {}
+          currentValue.presence[Y_PRESENCE_KEY] || {}
         );
       }
       return acc;
@@ -187,23 +168,26 @@ var Awareness = class extends Observable {
     return states;
   }
 };
-var LiveblocksProvider = class {
-  constructor(room, doc, config) {
-    this.lastUpdateDate = null;
+var LiveblocksProvider = class extends Observable {
+  constructor(room, doc) {
+    var _a;
+    super();
     this.unsubscribers = [];
-    this.updateHandler = (update, origin) => __async(this, null, function* () {
+    this._synced = false;
+    this.syncDoc = () => {
+      var _a;
+      this.synced = false;
+      this.doc.clientID = ((_a = this.room.getSelf()) == null ? void 0 : _a.connectionId) || this.doc.clientID;
+      this.awareness.clientID = this.doc.clientID;
+      const encodedVector = Base64.fromUint8Array(Y.encodeStateVector(this.doc));
+      this.room.fetchYDoc(encodedVector);
+    };
+    this.updateHandler = (update, origin) => {
       if (origin !== "backend") {
         const encodedUpdate = Base64.fromUint8Array(update);
-        this.room.updateDoc(encodedUpdate);
-        if (this.httpEndpoint) {
-          yield fetch(this.httpEndpoint, {
-            method: "POST",
-            body: encodedUpdate
-          });
-        }
+        this.room.updateYDoc(encodedUpdate);
       }
-    });
-    var _a;
+    };
     this.doc = doc;
     this.room = room;
     const connectionId = (_a = this.room.getSelf()) == null ? void 0 : _a.connectionId;
@@ -213,60 +197,41 @@ var LiveblocksProvider = class {
     this.awareness = new Awareness(this.doc, this.room);
     this.doc.on("update", this.updateHandler);
     this.unsubscribers.push(
-      this.room.events.connection.subscribe((e) => {
-        var _a2;
-        if (e === "open") {
-          this.doc.clientID = ((_a2 = this.room.getSelf()) == null ? void 0 : _a2.connectionId) || this.doc.clientID;
-          this.awareness.clientID = this.doc.clientID;
-          const encodedVector = Base64.fromUint8Array(
-            Y.encodeStateVector(this.doc)
-          );
-          this.room.getDoc(encodedVector);
+      this.room.events.status.subscribe((status) => {
+        if (status === "connected") {
+          this.syncDoc();
         }
       })
     );
     this.unsubscribers.push(
-      this.room.events.docUpdated.subscribe((updates) => {
-        const decodedUpdates = updates.map(Base64.toUint8Array);
-        const update = Y.mergeUpdates(decodedUpdates);
-        Y.applyUpdate(this.doc, update, "backend");
+      this.room.events.ydoc.subscribe((update) => {
+        Y.applyUpdate(this.doc, Base64.toUint8Array(update), "backend");
+        this.synced = true;
       })
     );
-    if (config == null ? void 0 : config.httpEndpoint) {
-      this.httpEndpoint = config.httpEndpoint + "?room=" + this.room.id;
-      this.unsubscribers.push(
-        this.room.events.customEvent.subscribe(({ event }) => {
-          if ((event == null ? void 0 : event.type) === "REFRESH") {
-            void this.resyncHttp();
-          }
-        })
-      );
-      void this.resyncHttp();
-    }
-    this.room.getDoc();
+    this.syncDoc();
   }
-  resyncHttp() {
-    return __async(this, null, function* () {
-      if (!this.httpEndpoint) {
-        return;
-      }
-      const response = yield fetch(
-        `${this.httpEndpoint}${this.lastUpdateDate !== null ? `&after=${this.lastUpdateDate.toISOString()}` : ""}`
-      );
-      const { updates, lastUpdate } = yield response.json();
-      if (updates.length === 0) {
-        return;
-      }
-      this.lastUpdateDate = new Date(lastUpdate);
-      const update = Y.mergeUpdates(updates.map(Base64.toUint8Array));
-      Y.applyUpdate(this.doc, update, "backend");
-    });
+  // The sync'd property is required by some provider implementations
+  get synced() {
+    return this._synced;
+  }
+  set synced(state) {
+    if (this._synced !== state) {
+      this._synced = state;
+      this.emit("synced", [state]);
+      this.emit("sync", [state]);
+    }
   }
   destroy() {
     this.doc.off("update", this.updateHandler);
     this.unsubscribers.forEach((unsub) => unsub());
     this.awareness.destroy();
   }
+  // Some provider implementations expect to be able to call connect/disconnect, implement as noop
+  disconnect() {
+  }
+  connect() {
+  }
 };
 export {
   Awareness,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/yjs",
-  "version": "1.1.0-yjs4",
+  "version": "1.1.1-internal2",
   "description": "An integration with . Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "main": "./dist/index.js",
@@ -11,23 +11,29 @@
   ],
   "scripts": {
     "dev": "tsup --watch",
-    "build": "tsup --format cjs,esm --dts --clean",
+    "build": "tsup && cp dist/index.d.ts dist/index.d.mts",
     "format": "eslint --fix src/; prettier --write src/",
     "lint": "eslint src/",
+    "lint:package": "publint --strict && attw --pack",
     "test": "jest --silent --verbose --color=always",
     "test:types": "tsd",
     "test:watch": "jest --silent --verbose --color=always --watch"
   },
   "exports": {
     ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     }
   },
   "dependencies": {
-    "@liveblocks/client": "1.1.0-yjs4",
-    "@liveblocks/core": "1.1.0-yjs4",
+    "@liveblocks/client": "1.1.1-internal2",
+    "@liveblocks/core": "1.1.1-internal2",
     "js-base64": "^3.7.5"
   },
   "peerDependencies": {