mobx-keystone-yjs 1.5.1 → 1.5.2

package/src/binding/YjsTextModel.ts

@@ -1,248 +1,247 @@
-import { IAtom, computed, createAtom, observe, reaction } from "mobx"
-import {
-  Frozen,
-  Model,
-  frozen,
-  getParentToChildPath,
-  model,
-  onSnapshot,
-  tProp,
-  types,
-} from "mobx-keystone"
-import * as Y from "yjs"
-import { failure } from "../utils/error"
-import { YjsBindingContext, yjsBindingContext } from "./yjsBindingContext"
-import { resolveYjsPath } from "./resolveYjsPath"
-
-// Delta[][], since each single change is a Delta[]
-// we use frozen so that we can reuse each delta change
-const deltaListType = types.array(types.frozen(types.unchecked<unknown[]>()))
-
-export const yjsTextModelId = "mobx-keystone-yjs/YjsTextModel"
-
-/**
- * A mobx-keystone model that represents a Yjs.Text object.
- */
-@model(yjsTextModelId)
-export class YjsTextModel extends Model({
-  deltaList: tProp(deltaListType, () => []),
-}) {
-  /**
-   * Helper function to create a YjsTextModel instance with a simple text.
-   */
-  static withText(text: string): YjsTextModel {
-    return new DecoratedYjsTextModel({
-      deltaList: [
-        frozen([
-          {
-            insert: text,
-          },
-        ]),
-      ],
-    })
-  }
-
-  /**
-   * The Y.js path from the bound object to the YjsTextModel instance.
-   */
-  @computed
-  private get _yjsObjectPath() {
-    const ctx = yjsBindingContext.get(this)
-    if (ctx?.boundObject == null) {
-      throw failure(
-        "the YjsTextModel instance must be part of a bound object before it can be accessed"
-      )
-    }
-
-    const path = getParentToChildPath(ctx.boundObject, this)
-    if (!path) {
-      throw failure("a path from the bound object to the YjsTextModel instance is not available")
-    }
-
-    return path
-  }
-
-  /**
-   * The Yjs.Text object present at this mobx-keystone node's path.
-   */
-  @computed
-  private get _yjsObjectAtPath(): unknown {
-    const path = this._yjsObjectPath
-
-    const ctx = yjsBindingContext.get(this)!
-
-    return resolveYjsPath(ctx.yjsObject, path)
-  }
-
-  /**
-   * The Yjs.Text object represented by this mobx-keystone node.
-   */
-  @computed
-  get yjsText(): Y.Text {
-    const yjsObject = this._yjsObjectAtPath
-
-    if (!(yjsObject instanceof Y.Text)) {
-      throw failure(`Y.Text was expected at path ${JSON.stringify(this._yjsObjectPath)}`)
-    }
-
-    return yjsObject
-  }
-
-  /**
-   * Atom that gets changed when the associated Y.js text changes.
-   */
-  yjsTextChangedAtom = createAtom("yjsTextChangedAtom")
-
-  /**
-   * The text value of the Yjs.Text object.
-   * Shortcut for `yjsText.toString()`, but computed.
-   */
-  @computed
-  get text(): string {
-    this.yjsTextChangedAtom.reportObserved()
-    // eslint-disable-next-line @typescript-eslint/no-base-to-string
-    return this.yjsText.toString()
-  }
-
-  protected onInit() {
-    const shouldReplicateToYjs = (ctx: YjsBindingContext | undefined): ctx is YjsBindingContext => {
-      return !!ctx && !!ctx.boundObject && !ctx.isApplyingYjsChangesToMobxKeystone
-    }
-
-    let reapplyDeltasToYjsText = false
-    const newDeltas: Frozen<unknown[]>[] = []
-
-    let disposeObserveDeltaList: (() => void) | undefined
-
-    const disposeReactionToDeltaListRefChange = reaction(
-      () => this.$.deltaList,
-      (deltaList) => {
-        disposeObserveDeltaList?.()
-        disposeObserveDeltaList = undefined
-
-        disposeObserveDeltaList = observe(deltaList, (change) => {
-          if (reapplyDeltasToYjsText) {
-            // already gonna replace them all
-            return
-          }
-          if (!shouldReplicateToYjs(yjsBindingContext.get(this))) {
-            // yjs text is already up to date with these changes
-            return
-          }
-
-          if (
-            change.type === "splice" &&
-            change.removedCount === 0 &&
-            change.addedCount > 0 &&
-            change.index === this.deltaList.length
-          ) {
-            // optimization, just adding new ones to the end
-            newDeltas.push(...change.added)
-          } else {
-            // any other change, we need to reapply all deltas
-            reapplyDeltasToYjsText = true
-          }
-        })
-      },
-      { fireImmediately: true }
-    )
-
-    const disposeOnSnapshot = onSnapshot(this, () => {
-      try {
-        if (reapplyDeltasToYjsText) {
-          const ctx = yjsBindingContext.get(this)
-
-          if (shouldReplicateToYjs(ctx)) {
-            const { yjsText } = this
-
-            ctx.yjsDoc.transact(() => {
-              // didn't find a better way than this to reapply all deltas
-              // without having to re-create the Y.Text object
-              if (yjsText.length > 0) {
-                yjsText.delete(0, yjsText.length)
-              }
-
-              this.deltaList.forEach((frozenDeltas) => {
-                yjsText.applyDelta(frozenDeltas.data)
-              })
-            }, ctx.yjsOrigin)
-          }
-        } else if (newDeltas.length > 0) {
-          const ctx = yjsBindingContext.get(this)
-
-          if (shouldReplicateToYjs(ctx)) {
-            const { yjsText } = this
-
-            ctx.yjsDoc.transact(() => {
-              newDeltas.forEach((frozenDeltas) => {
-                yjsText.applyDelta(frozenDeltas.data)
-              })
-            }, ctx.yjsOrigin)
-          }
-        }
-      } finally {
-        reapplyDeltasToYjsText = false
-        newDeltas.length = 0
-      }
-    })
-
-    const diposeYjsTextChangedAtom = hookYjsTextChangedAtom(
-      () => this.yjsText,
-      this.yjsTextChangedAtom
-    )
-
-    return () => {
-      disposeOnSnapshot()
-      disposeReactionToDeltaListRefChange()
-      disposeObserveDeltaList?.()
-      disposeObserveDeltaList = undefined
-
-      diposeYjsTextChangedAtom()
-    }
-  }
-}
-
-// we use this trick just to avoid a babel bug that causes classes used inside classes not to be overriden
-// by the decorator
-const DecoratedYjsTextModel = YjsTextModel
-
-function hookYjsTextChangedAtom(getYjsText: () => Y.Text, textChangedAtom: IAtom) {
-  let disposeObserveYjsText: (() => void) | undefined
-
-  const observeFn = () => {
-    textChangedAtom.reportChanged()
-  }
-
-  const disposeReactionToYTextChange = reaction(
-    () => {
-      try {
-        return getYjsText()
-      } catch {
-        return undefined
-      }
-    },
-    (yjsText) => {
-      disposeObserveYjsText?.()
-      disposeObserveYjsText = undefined
-
-      if (yjsText) {
-        yjsText.observe(observeFn)
-
-        disposeObserveYjsText = () => {
-          yjsText.unobserve(observeFn)
-        }
-      }
-
-      textChangedAtom.reportChanged()
-    },
-    {
-      fireImmediately: true,
-    }
-  )
-
-  return () => {
-    disposeReactionToYTextChange()
-    disposeObserveYjsText?.()
-    disposeObserveYjsText = undefined
-  }
-}
+import { IAtom, computed, createAtom, observe, reaction } from "mobx"
+import {
+  Frozen,
+  Model,
+  frozen,
+  getParentToChildPath,
+  model,
+  onSnapshot,
+  tProp,
+  types,
+} from "mobx-keystone"
+import * as Y from "yjs"
+import { failure } from "../utils/error"
+import { YjsBindingContext, yjsBindingContext } from "./yjsBindingContext"
+import { resolveYjsPath } from "./resolveYjsPath"
+
+// Delta[][], since each single change is a Delta[]
+// we use frozen so that we can reuse each delta change
+const deltaListType = types.array(types.frozen(types.unchecked<unknown[]>()))
+
+export const yjsTextModelId = "mobx-keystone-yjs/YjsTextModel"
+
+/**
+ * A mobx-keystone model that represents a Yjs.Text object.
+ */
+@model(yjsTextModelId)
+export class YjsTextModel extends Model({
+  deltaList: tProp(deltaListType, () => []),
+}) {
+  /**
+   * Helper function to create a YjsTextModel instance with a simple text.
+   */
+  static withText(text: string): YjsTextModel {
+    return new DecoratedYjsTextModel({
+      deltaList: [
+        frozen([
+          {
+            insert: text,
+          },
+        ]),
+      ],
+    })
+  }
+
+  /**
+   * The Y.js path from the bound object to the YjsTextModel instance.
+   */
+  @computed
+  private get _yjsObjectPath() {
+    const ctx = yjsBindingContext.get(this)
+    if (ctx?.boundObject == null) {
+      throw failure(
+        "the YjsTextModel instance must be part of a bound object before it can be accessed"
+      )
+    }
+
+    const path = getParentToChildPath(ctx.boundObject, this)
+    if (!path) {
+      throw failure("a path from the bound object to the YjsTextModel instance is not available")
+    }
+
+    return path
+  }
+
+  /**
+   * The Yjs.Text object present at this mobx-keystone node's path.
+   */
+  @computed
+  private get _yjsObjectAtPath(): unknown {
+    const path = this._yjsObjectPath
+
+    const ctx = yjsBindingContext.get(this)!
+
+    return resolveYjsPath(ctx.yjsObject, path)
+  }
+
+  /**
+   * The Yjs.Text object represented by this mobx-keystone node.
+   */
+  @computed
+  get yjsText(): Y.Text {
+    const yjsObject = this._yjsObjectAtPath
+
+    if (!(yjsObject instanceof Y.Text)) {
+      throw failure(`Y.Text was expected at path ${JSON.stringify(this._yjsObjectPath)}`)
+    }
+
+    return yjsObject
+  }
+
+  /**
+   * Atom that gets changed when the associated Y.js text changes.
+   */
+  yjsTextChangedAtom = createAtom("yjsTextChangedAtom")
+
+  /**
+   * The text value of the Yjs.Text object.
+   * Shortcut for `yjsText.toString()`, but computed.
+   */
+  @computed
+  get text(): string {
+    this.yjsTextChangedAtom.reportObserved()
+    return this.yjsText.toString()
+  }
+
+  protected onInit() {
+    const shouldReplicateToYjs = (ctx: YjsBindingContext | undefined): ctx is YjsBindingContext => {
+      return !!ctx && !!ctx.boundObject && !ctx.isApplyingYjsChangesToMobxKeystone
+    }
+
+    let reapplyDeltasToYjsText = false
+    const newDeltas: Frozen<unknown[]>[] = []
+
+    let disposeObserveDeltaList: (() => void) | undefined
+
+    const disposeReactionToDeltaListRefChange = reaction(
+      () => this.$.deltaList,
+      (deltaList) => {
+        disposeObserveDeltaList?.()
+        disposeObserveDeltaList = undefined
+
+        disposeObserveDeltaList = observe(deltaList, (change) => {
+          if (reapplyDeltasToYjsText) {
+            // already gonna replace them all
+            return
+          }
+          if (!shouldReplicateToYjs(yjsBindingContext.get(this))) {
+            // yjs text is already up to date with these changes
+            return
+          }
+
+          if (
+            change.type === "splice" &&
+            change.removedCount === 0 &&
+            change.addedCount > 0 &&
+            change.index === this.deltaList.length
+          ) {
+            // optimization, just adding new ones to the end
+            newDeltas.push(...change.added)
+          } else {
+            // any other change, we need to reapply all deltas
+            reapplyDeltasToYjsText = true
+          }
+        })
+      },
+      { fireImmediately: true }
+    )
+
+    const disposeOnSnapshot = onSnapshot(this, () => {
+      try {
+        if (reapplyDeltasToYjsText) {
+          const ctx = yjsBindingContext.get(this)
+
+          if (shouldReplicateToYjs(ctx)) {
+            const { yjsText } = this
+
+            ctx.yjsDoc.transact(() => {
+              // didn't find a better way than this to reapply all deltas
+              // without having to re-create the Y.Text object
+              if (yjsText.length > 0) {
+                yjsText.delete(0, yjsText.length)
+              }
+
+              this.deltaList.forEach((frozenDeltas) => {
+                yjsText.applyDelta(frozenDeltas.data)
+              })
+            }, ctx.yjsOrigin)
+          }
+        } else if (newDeltas.length > 0) {
+          const ctx = yjsBindingContext.get(this)
+
+          if (shouldReplicateToYjs(ctx)) {
+            const { yjsText } = this
+
+            ctx.yjsDoc.transact(() => {
+              newDeltas.forEach((frozenDeltas) => {
+                yjsText.applyDelta(frozenDeltas.data)
+              })
+            }, ctx.yjsOrigin)
+          }
+        }
+      } finally {
+        reapplyDeltasToYjsText = false
+        newDeltas.length = 0
+      }
+    })
+
+    const diposeYjsTextChangedAtom = hookYjsTextChangedAtom(
+      () => this.yjsText,
+      this.yjsTextChangedAtom
+    )
+
+    return () => {
+      disposeOnSnapshot()
+      disposeReactionToDeltaListRefChange()
+      disposeObserveDeltaList?.()
+      disposeObserveDeltaList = undefined
+
+      diposeYjsTextChangedAtom()
+    }
+  }
+}
+
+// we use this trick just to avoid a babel bug that causes classes used inside classes not to be overriden
+// by the decorator
+const DecoratedYjsTextModel = YjsTextModel
+
+function hookYjsTextChangedAtom(getYjsText: () => Y.Text, textChangedAtom: IAtom) {
+  let disposeObserveYjsText: (() => void) | undefined
+
+  const observeFn = () => {
+    textChangedAtom.reportChanged()
+  }
+
+  const disposeReactionToYTextChange = reaction(
+    () => {
+      try {
+        return getYjsText()
+      } catch {
+        return undefined
+      }
+    },
+    (yjsText) => {
+      disposeObserveYjsText?.()
+      disposeObserveYjsText = undefined
+
+      if (yjsText) {
+        yjsText.observe(observeFn)
+
+        disposeObserveYjsText = () => {
+          yjsText.unobserve(observeFn)
+        }
+      }
+
+      textChangedAtom.reportChanged()
+    },
+    {
+      fireImmediately: true,
+    }
+  )
+
+  return () => {
+    disposeReactionToYTextChange()
+    disposeObserveYjsText?.()
+    disposeObserveYjsText = undefined
+  }
+}

package/src/binding/applyMobxKeystonePatchToYjsObject.ts

@@ -2,7 +2,7 @@ import { Patch } from "mobx-keystone"
 import * as Y from "yjs"
 import { failure } from "../utils/error"
 import { convertJsonToYjsData } from "./convertJsonToYjsData"
-import { JsonValueWithUndefined } from "../jsonTypes"
+import { PlainValue } from "../plainTypes"
 
 export function applyMobxKeystonePatchToYjsObject(patch: Patch, yjs: unknown): void {
   if (patch.path.length > 1) {
@@ -42,7 +42,7 @@ export function applyMobxKeystonePatchToYjsObject(patch: Patch, yjs: unknown): v
       switch (patch.op) {
         case "add":
         case "replace": {
-          yjs.set(key, convertJsonToYjsData(patch.value as JsonValueWithUndefined))
+          yjs.set(key, convertJsonToYjsData(patch.value as PlainValue))
           break
         }
         case "remove": {
@@ -65,16 +65,16 @@ export function applyMobxKeystonePatchToYjsObject(patch: Patch, yjs: unknown): v
               yjs.delete(newLength, toDelete)
             } else if (yjs.length < patch.value) {
               const toInsert = patch.value - yjs.length
-              yjs.insert(yjs.length, Array(toInsert).fill(undefined))
+              yjs.insert(yjs.length, Array.from({ length: toInsert }).fill(undefined))
             }
           } else {
             yjs.delete(Number(key))
-            yjs.insert(Number(key), [convertJsonToYjsData(patch.value as JsonValueWithUndefined)])
+            yjs.insert(Number(key), [convertJsonToYjsData(patch.value as PlainValue)])
           }
           break
         }
         case "add": {
-          yjs.insert(Number(key), [convertJsonToYjsData(patch.value as JsonValueWithUndefined)])
+          yjs.insert(Number(key), [convertJsonToYjsData(patch.value as PlainValue)])
           break
         }
         case "remove": {

package/src/binding/convertJsonToYjsData.ts

@@ -2,43 +2,38 @@ import * as Y from "yjs"
 import { YjsTextModel, yjsTextModelId } from "./YjsTextModel"
 import { SnapshotOutOf } from "mobx-keystone"
 import { YjsData } from "./convertYjsDataToJson"
-import {
-  JsonArrayWithUndefined,
-  JsonObjectWithUndefined,
-  JsonPrimitiveWithUndefined,
-  JsonValueWithUndefined,
-} from "../jsonTypes"
+import { PlainArray, PlainObject, PlainPrimitive, PlainValue } from "../plainTypes"
 
-function isJsonPrimitiveWithUndefined(v: JsonValueWithUndefined): v is JsonPrimitiveWithUndefined {
+function isPlainPrimitive(v: PlainValue): v is PlainPrimitive {
   const t = typeof v
   return t === "string" || t === "number" || t === "boolean" || v === null || v === undefined
 }
 
-function isJsonArrayWithUndefined(v: JsonValueWithUndefined): v is JsonArrayWithUndefined {
+function isPlainArray(v: PlainValue): v is PlainArray {
   return Array.isArray(v)
 }
 
-function isJsonObjectWithUndefined(v: JsonValueWithUndefined): v is JsonObjectWithUndefined {
-  return !isJsonArrayWithUndefined(v) && typeof v === "object"
+function isPlainObject(v: PlainValue): v is PlainObject {
+  return !isPlainArray(v) && typeof v === "object" && v !== null
 }
 
 /**
- * Converts a JSON value to a Y.js data structure.
+ * Converts a plain value to a Y.js data structure.
  * Objects are converted to Y.Maps, arrays to Y.Arrays, primitives are untouched.
  * Frozen values are a special case and they are kept as immutable plain values.
  */
-export function convertJsonToYjsData(v: JsonValueWithUndefined | undefined): YjsData {
-  if (v === undefined || isJsonPrimitiveWithUndefined(v)) {
+export function convertJsonToYjsData(v: PlainValue): YjsData {
+  if (isPlainPrimitive(v)) {
     return v
   }
 
-  if (isJsonArrayWithUndefined(v)) {
+  if (isPlainArray(v)) {
     const arr = new Y.Array()
     applyJsonArrayToYArray(arr, v)
     return arr as YjsData
   }
 
-  if (isJsonObjectWithUndefined(v)) {
+  if (isPlainObject(v)) {
     if (v.$frozen === true) {
       // frozen value, save as immutable object
       return v
@@ -64,14 +59,14 @@ export function convertJsonToYjsData(v: JsonValueWithUndefined | undefined): Yjs
 /**
  * Applies a JSON array to a Y.Array, using the convertJsonToYjsData to convert the values.
  */
-export function applyJsonArrayToYArray(dest: Y.Array<unknown>, source: JsonArrayWithUndefined) {
+export function applyJsonArrayToYArray(dest: Y.Array<unknown>, source: PlainArray) {
   dest.push(source.map(convertJsonToYjsData))
 }
 
 /**
  * Applies a JSON object to a Y.Map, using the convertJsonToYjsData to convert the values.
  */
-export function applyJsonObjectToYMap(dest: Y.Map<unknown>, source: JsonObjectWithUndefined) {
+export function applyJsonObjectToYMap(dest: Y.Map<unknown>, source: PlainObject) {
   Object.entries(source).forEach(([k, v]) => {
     dest.set(k, convertJsonToYjsData(v))
   })

package/src/binding/convertYjsDataToJson.ts

@@ -1,17 +1,17 @@
 import { modelSnapshotOutWithMetadata } from "mobx-keystone"
 import * as Y from "yjs"
-import { JsonObjectWithUndefined, JsonValueWithUndefined } from "../jsonTypes"
+import { PlainObject, PlainValue } from "../plainTypes"
 import { YjsTextModel } from "./YjsTextModel"
 
-export type YjsData = Y.Array<YjsData> | Y.Map<YjsData> | Y.Text | JsonValueWithUndefined
+export type YjsData = Y.Array<YjsData> | Y.Map<YjsData> | Y.Text | PlainValue
 
-export function convertYjsDataToJson(yjsData: YjsData): JsonValueWithUndefined {
+export function convertYjsDataToJson(yjsData: YjsData): PlainValue {
   if (yjsData instanceof Y.Array) {
     return yjsData.map((v) => convertYjsDataToJson(v))
   }
 
   if (yjsData instanceof Y.Map) {
-    const obj: JsonObjectWithUndefined = {}
+    const obj: PlainObject = {}
     yjsData.forEach((v, k) => {
       obj[k] = convertYjsDataToJson(v)
     })
@@ -23,7 +23,7 @@ export function convertYjsDataToJson(yjsData: YjsData): JsonValueWithUndefined {
 
     return modelSnapshotOutWithMetadata(YjsTextModel, {
       deltaList: deltas.length > 0 ? [{ $frozen: true, data: deltas }] : [],
-    }) as unknown as JsonValueWithUndefined
+    }) as unknown as PlainValue
   }
 
   // assume it's a primitive

package/src/binding/convertYjsEventToPatches.ts

@@ -1,10 +1,6 @@
 import { Patch } from "mobx-keystone"
 import * as Y from "yjs"
-import {
-  JsonArrayWithUndefined,
-  JsonObjectWithUndefined,
-  JsonValueWithUndefined,
-} from "../jsonTypes"
+import { PlainArray, PlainObject, PlainValue } from "../plainTypes"
 import { failure } from "../utils/error"
 
 export function convertYjsEventToPatches(event: Y.YEvent<any>): Patch[] {
@@ -87,9 +83,9 @@ export function convertYjsEventToPatches(event: Y.YEvent<any>): Patch[] {
   return patches
 }
 
-function toPlainValue(v: Y.Map<any> | Y.Array<any> | JsonValueWithUndefined) {
+function toPlainValue(v: Y.Map<any> | Y.Array<any> | PlainValue) {
   if (v instanceof Y.Map || v instanceof Y.Array) {
-    return v.toJSON() as JsonObjectWithUndefined | JsonArrayWithUndefined
+    return v.toJSON() as PlainObject | PlainArray
   } else {
     return v
   }