@liveblocks/yjs 1.0.12-yjs1

package/README.md

@@ -0,0 +1,46 @@
+<p align="center">
+  <a href="https://liveblocks.io#gh-light-mode-only">
+    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" />
+  </a>
+  <a href="https://liveblocks.io#gh-dark-mode-only">
+    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" />
+  </a>
+</p>
+
+# `@liveblocks/yjs`
+
+Provides YJS integration to effortlessly back your YJS apps with Liveblocks
+
+## Installation
+
+```
+npm install @liveblocks/client @liveblocks/yjs
+```
+
+## Documentation
+
+Read the
+[documentation](https://liveblocks.io/docs/api-reference/liveblocks-yjs) for
+guides and API references.
+
+## Examples
+
+## Releases
+
+See the [latest changes](https://github.com/liveblocks/liveblocks/releases) or
+learn more about
+[upcoming releases](https://github.com/liveblocks/liveblocks/milestones).
+
+## Community
+
+- [Discord](https://liveblocks.io/discord) - To get involved with the Liveblocks
+  community, ask questions and share tips.
+- [Twitter](https://twitter.com/liveblocks) - To receive updates, announcements,
+  blog posts, and general Liveblocks tips.
+
+## License
+
+Licensed under the Apache License 2.0, Copyright © 2021-present
+[Liveblocks](https://liveblocks.io).
+
+See [LICENSE](../../LICENSE) for more information.

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+import { Room, JsonObject, LsonObject, BaseUserMeta, Json } from '@liveblocks/client';
+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> {
+    private room;
+    doc: Y.Doc;
+    clientID: number;
+    states: Map<number, any>;
+    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, any>;
+}
+declare class LiveblocksProvider<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta, E extends Json> {
+    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 updateHandler;
+    private resyncHttp;
+    destroy(): void;
+}
+
+export { Awareness, LiveblocksProvider as default };

package/dist/index.js

@@ -0,0 +1,267 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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');
+
+// ../../node_modules/lib0/map.js
+var create = () => /* @__PURE__ */ new Map();
+var setIfUndefined = (map, key, createT) => {
+  let set = map.get(key);
+  if (set === void 0) {
+    map.set(key, set = createT());
+  }
+  return set;
+};
+
+// ../../node_modules/lib0/set.js
+var create2 = () => /* @__PURE__ */ new Set();
+
+// ../../node_modules/lib0/array.js
+var from = Array.from;
+var isArray = Array.isArray;
+
+// ../../node_modules/lib0/observable.js
+var Observable = class {
+  constructor() {
+    this._observers = create();
+  }
+  /**
+   * @param {N} name
+   * @param {function} f
+   */
+  on(name, f) {
+    setIfUndefined(this._observers, name, create2).add(f);
+  }
+  /**
+   * @param {N} name
+   * @param {function} f
+   */
+  once(name, f) {
+    const _f = (...args) => {
+      this.off(name, _f);
+      f(...args);
+    };
+    this.on(name, _f);
+  }
+  /**
+   * @param {N} name
+   * @param {function} f
+   */
+  off(name, f) {
+    const observers = this._observers.get(name);
+    if (observers !== void 0) {
+      observers.delete(f);
+      if (observers.size === 0) {
+        this._observers.delete(name);
+      }
+    }
+  }
+  /**
+   * Emit a named event. All registered event listeners that listen to the
+   * specified name will receive the event.
+   *
+   * @todo This should catch exceptions
+   *
+   * @param {N} name The event name.
+   * @param {Array<any>} args The arguments that are applied to the event listener.
+   */
+  emit(name, args) {
+    return from((this._observers.get(name) || create()).values()).forEach((f) => f(...args));
+  }
+  destroy() {
+    this._observers = create();
+  }
+};
+
+// src/index.ts
+var _yjs = require('yjs'); var Y = _interopRequireWildcard(_yjs);
+var Awareness = class extends Observable {
+  constructor(doc, room) {
+    super();
+    this.states = /* @__PURE__ */ new Map();
+    // Meta is used to keep track and timeout users who disconnect. Liveblocks provides this for us, so we don't need to
+    // 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.
+    this._checkInterval = 0;
+    this.doc = doc;
+    this.room = room;
+    this.clientID = doc.clientID;
+    this.othersUnsub = this.room.events.others.subscribe(({ event }) => {
+      if (event.type === "leave") {
+        this.emit("change", [
+          { added: [], updated: [], removed: [event.user.connectionId] },
+          "local"
+        ]);
+      }
+      if (event.type === "enter") {
+        this.emit("change", [
+          { added: [event.user.connectionId], updated: [], removed: [] },
+          "local"
+        ]);
+      }
+      if (event.type === "update") {
+        this.emit("change", [
+          { added: [], updated: [event.user.connectionId], removed: [] },
+          "local"
+        ]);
+      }
+    });
+  }
+  destroy() {
+    this.emit("destroy", [this]);
+    this.othersUnsub();
+    this.setLocalState(null);
+    super.destroy();
+  }
+  getLocalState() {
+    const presence = this.room.getPresence();
+    if (Object.keys(this.room.getPresence()).length === 0) {
+      return null;
+    }
+    return presence["__yjs"];
+  }
+  setLocalState(state) {
+    const self = this.room.getSelf();
+    if (!self) {
+      return;
+    }
+    this.room.updatePresence({ __yjs: __spreadValues({}, state || {}) });
+  }
+  setLocalStateField(field, value) {
+    const update = { [field]: value };
+    this.room.updatePresence({ __yjs: update });
+  }
+  // Translate
+  getStates() {
+    const others = this.room.getOthers();
+    const states = others.reduce((acc, currentValue) => {
+      if (currentValue.connectionId) {
+        acc.set(currentValue.connectionId, currentValue.presence["__yjs"]);
+      }
+      return acc;
+    }, /* @__PURE__ */ new Map());
+    return states;
+  }
+};
+var LiveblocksProvider = class {
+  constructor(room, doc, config) {
+    this.lastUpdateDate = null;
+    this.unsubscribers = [];
+    this.updateHandler = (update, origin) => __async(this, null, function* () {
+      if (origin !== "backend") {
+        const encodedUpdate = _jsbase64.Base64.fromUint8Array(update);
+        this.room.updateDoc(encodedUpdate);
+        if (this.httpEndpoint) {
+          yield fetch(this.httpEndpoint, {
+            method: "POST",
+            body: encodedUpdate
+          });
+        }
+      }
+    });
+    var _a;
+    this.doc = doc;
+    this.room = room;
+    const connectionId = (_a = this.room.getSelf()) == null ? void 0 : _a.connectionId;
+    if (connectionId) {
+      this.doc.clientID = connectionId;
+    }
+    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.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");
+      })
+    );
+    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();
+  }
+  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");
+    });
+  }
+  destroy() {
+    this.doc.off("update", this.updateHandler);
+    this.unsubscribers.forEach((unsub) => unsub());
+    this.awareness.destroy();
+  }
+};
+
+
+
+exports.Awareness = Awareness; exports.default = LiveblocksProvider;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@liveblocks/yjs",
+  "version": "1.0.12-yjs1",
+  "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",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "format": "eslint --fix src/; prettier --write src/",
+    "lint": "eslint src/",
+    "test": "jest --silent --verbose --color=always",
+    "test:types": "tsd",
+    "test:watch": "jest --silent --verbose --color=always --watch"
+  },
+  "dependencies": {
+    "@liveblocks/client": "1.0.12-yjs1",
+    "@liveblocks/core": "1.0.12-yjs1",
+    "js-base64": "^3.7.5"
+  },
+  "peerDependencies": {
+    "yjs": "^13.6.1"
+  },
+  "devDependencies": {
+    "@liveblocks/eslint-config": "*",
+    "@liveblocks/jest-config": "*",
+    "@testing-library/jest-dom": "^5.16.5"
+  },
+  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/liveblocks/liveblocks/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/liveblocks/liveblocks.git",
+    "directory": "packages/liveblocks-yjs"
+  },
+  "homepage": "https://liveblocks.io",
+  "keywords": [
+    "yjs",
+    "react",
+    "liveblocks",
+    "real-time",
+    "toolkit",
+    "multiplayer",
+    "websockets",
+    "collaboration",
+    "collaborative",
+    "presence",
+    "crdts",
+    "synchronize",
+    "rooms",
+    "documents",
+    "conflict resolution"
+  ]
+}