@pluv/crdt-yjs 0.14.1 → 0.16.0

package/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-  root: true,
-  extends: ["pluv"],
+    root: true,
+    extends: ["pluv"],
 };

package/.turbo/turbo-build.log

@@ -1,18 +1,18 @@
 
-> @pluv/crdt-yjs@0.14.1 build /home/runner/work/pluv/pluv/packages/crdt-yjs
+> @pluv/crdt-yjs@0.16.0 build /home/runner/work/pluv/pluv/packages/crdt-yjs
 > tsup src/index.ts --format esm,cjs --dts
 
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
-CLI tsup v8.0.1
+CLI tsup v8.0.2
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 4.70 KB
-ESM ⚡️ Build success in 35ms
-CJS dist/index.js 5.88 KB
-CJS ⚡️ Build success in 36ms
+CJS dist/index.js 15.50 KB
+CJS ⚡️ Build success in 117ms
+ESM dist/index.mjs 14.79 KB
+ESM ⚡️ Build success in 118ms
 DTS Build start
-DTS ⚡️ Build success in 777ms
-DTS dist/index.d.mts 3.46 KB
-DTS dist/index.d.ts  3.46 KB
+DTS ⚡️ Build success in 2707ms
+DTS dist/index.d.mts 8.40 KB
+DTS dist/index.d.ts  8.40 KB

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @pluv/crdt-yjs
 
+## 0.16.0
+
+### Patch Changes
+
+- @pluv/crdt@0.16.0
+- @pluv/types@0.16.0
+
+## 0.15.0
+
+### Patch Changes
+
+- @pluv/types@0.15.0
+
 ## 0.14.1
 
 ### Patch Changes
@@ -190,7 +203,7 @@
 
   ## @pluv/react
 
-  `@pluv/react`'s `createRoomBundle` now exposes 5 new react hooks: `usePluvCanRedo`, `usePluvCanUndo`, `usePluvRedo`, `usePluvUndo` and `usePluvTransact`.
+  `@pluv/react`'s `createRoomBundle` now exposes 5 new react hooks: `useCanRedo`, `useCanUndo`, `useRedo`, `useUndo` and `useTransact`.
 
   Refer to the code-example below to better understand how to undo and redo with your `createRoomBundle`.
 
@@ -202,47 +215,41 @@
 
   const { createRoomBundle } = createBundle(client);
 
-  const {
-    usePluvCanRedo,
-    usePluvCanUndo,
-    usePluvRedo,
-    usePluvStorage,
-    usePluvTransact,
-    usePluvUndo,
-  } = createRoomBundle({
-    initialStorage: () => ({
-      messages: y.array<string>([]),
-    }),
-    /**
-     * @description This is the same `captureTimeout` option from yjs's UndoManager.
-     * This specifies a number in ms, during which edits are merged together to be
-     * undone together. Set this to 0, to track each transacted change individually.
-     * @see (@link https://docs.yjs.dev/api/undo-manager)
-     * @default 500
-     */
-    captureTimeout: 500,
-    /**
-     * @desription This is the same `trackedOrigins` option from yjs's UndoManager.
-     * This specifies transaction origins (strings only) to filter which transactions
-     * can be undone.
-     * When omitted, the user's connection id will be tracked. When provided,
-     * specifies additional tracked origins besides the user's connection id.
-     * @see (@link https://docs.yjs.dev/api/undo-manager)
-     * @default undefined
-     */
-    trackedOrigins: ["user-123"],
-  });
+  const { useCanRedo, useCanUndo, useRedo, useStorage, useTransact, useUndo } =
+    createRoomBundle({
+      initialStorage: () => ({
+        messages: y.array<string>([]),
+      }),
+      /**
+       * @description This is the same `captureTimeout` option from yjs's UndoManager.
+       * This specifies a number in ms, during which edits are merged together to be
+       * undone together. Set this to 0, to track each transacted change individually.
+       * @see (@link https://docs.yjs.dev/api/undo-manager)
+       * @default 500
+       */
+      captureTimeout: 500,
+      /**
+       * @desription This is the same `trackedOrigins` option from yjs's UndoManager.
+       * This specifies transaction origins (strings only) to filter which transactions
+       * can be undone.
+       * When omitted, the user's connection id will be tracked. When provided,
+       * specifies additional tracked origins besides the user's connection id.
+       * @see (@link https://docs.yjs.dev/api/undo-manager)
+       * @default undefined
+       */
+      trackedOrigins: ["user-123"],
+    });
 
   /**
    * @description Check whether calling undo will mutate storage
    */
-  const canUndo: boolean = usePluvCanUndo();
+  const canUndo: boolean = useCanUndo();
   /**
    * @description Check whether calling redo will mutate storage
    */
-  const canRedo: boolean = usePluvCanRedo();
+  const canRedo: boolean = useCanRedo();
 
-  const [messages, sharedType] = usePluvStorage("messages");
+  const [messages, sharedType] = useStorage("messages");
 
   /**
    * @description Calling transact will enable a storage mutation to be undone/redone.
@@ -251,7 +258,7 @@
    *
    * You can specify a 2nd parameter to transact with a different transaction origin.
    */
-  const transact = usePluvTransact();
+  const transact = useTransact();
 
   transact(() => {
     sharedType.push(["hello world!"]);
@@ -265,14 +272,14 @@
   /**
    * @description Undoes the last valid mutation to storage
    */
-  const undo = usePluvUndo();
+  const undo = useUndo();
 
   undo();
 
   /**
    * @description Re-applies the last undone mutation to storage
    */
-  const redo = usePluvRedo();
+  const redo = useRedo();
 
   redo();
   ```

package/README.md

@@ -5,12 +5,12 @@
   <br />
   <img src="https://github.com/pluv-io/pluv/blob/master/assets/pluv-icon-192x192.png?raw=true" alt="Pluv.IO" width="180" style="border-radius:16px" />
   <br />
-  Pluv.IO (preview)
+  <a href="https://pluv.io/docs/introduction">Pluv.IO (preview)</a>
   <br />
 </h1>
 
 <h3 align="center">Multi-platform, E2E type-safe realtime packages</h3>
-<h4 align="center">💕 Inspired by <a href="https://trpc.io">trpc</a> 💕 Built with <a href="https://docs.yjs.dev/">yjs</a> 💕</h4>
+<h4 align="center">💕 Inspired by <a href="https://trpc.io">trpc</a> 💕 <a href="https://docs.yjs.dev/">yjs</a> 💕 and <a href="https://developers.cloudflare.com/">Cloudflare</a> 💕 </h4>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@pluv/crdt-yjs">
@@ -19,14 +19,10 @@
   <a href="https://github.com/pluv-io/pluv/blob/master/LICENSE">
     <img alt="GitHub" src="https://img.shields.io/github/license/pluv-io/pluv" alt="License MIT" />
   </a>
-  <img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript" />
   <a href="https://commitizen.github.io/cz-cli/">
     <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen friendly" />
   </a>
-</p>
-
-<p align="center">
-  <img src="https://github.com/pluv-io/pluv/blob/master/assets/demo-events.gif?raw=true" alt="Demo" />
+  <img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript" />
 </p>
 
 ## `@pluv/crdt-yjs`
@@ -54,43 +50,31 @@ pnpm add @pluv/crdt-yjs yjs
 ## Basic Example
 
 ```ts
-import { createClient, y } from "@pluv/client";
-import type {
-    Array as YArray,
-    Map as YMap,
-    XmlFragment as YXmlFragment,
-} from "yjs";
+import { createClient } from "@pluv/client";
+import { yjs } from "@pluv/crdt-yjs";
 import { z } from "zod";
 // Import the PluvIO instance as a type from your server file
 import { type io } from "./server";
 
 const client = createClient<typeof io>({ /* client config here */ });
 
-type Presence = {};
-
-interface Storage {
-    editor: YXmlFragment;
-    groceryList: YMap<string, number>;
-    messages: YArray<{ name: string; message: string }>;
-}
-
 // Create a room to join
-const room = client.createRoom<Presence, Storage>("my-room", {
-    initialStorage: () => ({
-        editor: y.xmlFragment({
+const room = client.createRoom("my-room", {
+    initialStorage: yjs.doc(() => ({
+        editor: yjs.xmlFragment({
             children: [
-                y.xmlElement("paragraph", {
-                  children: [y.xmlText("Hello World!")],
+                yjs.xmlElement("paragraph", {
+                  children: [yjs.xmlText("Hello World!")],
                 }),
             ]
         }),
-        groceryList: y.map([
+        groceryList: yjs.map([
             ["apricots", 2],
             ["bread", 3],
             ["cheese", 5],
         ]),
-        messages: y.array([]),
-    }),
+        messages: yjs.array([]),
+    })),
     presence: z.object({}),
 });
 ```

package/dist/index.d.mts

@@ -1,67 +1,164 @@
-import { Array, AbstractType, Map, Text, XmlElement, XmlFragment, XmlText, Doc, Transaction } from 'yjs';
-export { AbstractType, Array, Map, Text } from 'yjs';
-import { JsonPrimitive } from '@pluv/types';
-
-declare const array: <T extends unknown>(value?: readonly T[]) => Array<T>;
-
-type YObjectValue = Record<string, NonNullable<JsonPrimitive> | AbstractType<any>>;
-type YObject<T extends YObjectValue> = Map<T[keyof T]> & {
-    __$type: T;
-};
-declare const object: <T extends YObjectValue = {}>(value: T) => YObject<T>;
-
-type InferYjsDocJson<TDoc extends YjsDoc<any>> = TDoc extends YjsDoc<infer ITypes> ? {
-    [P in keyof ITypes]: InferYjsSharedTypeJson<ITypes[P]>;
-} : never;
-type InferYjsDocSharedType<TDoc extends YjsDoc<any>, TKey extends keyof InferYjsDocSharedTypes<TDoc> = keyof InferYjsDocSharedTypes<TDoc>> = InferYjsDocSharedTypes<TDoc>[TKey];
-type InferYjsDocSharedTypeJson<TDoc extends YjsDoc<any>, TKey extends keyof InferYjsDocSharedTypes<TDoc> = keyof InferYjsDocSharedTypes<TDoc>> = InferYjsSharedTypeJson<InferYjsDocSharedTypes<TDoc>[TKey]>;
-type InferYjsDocSharedTypes<TDoc extends YjsDoc<any>> = TDoc extends YjsDoc<infer ITypes> ? ITypes : never;
-type InferYjsSharedTypeJson<TShared extends unknown> = TShared extends AbstractType<any> ? TShared extends Array<infer IItem> ? readonly InferYjsSharedTypeJson<IItem>[] : TShared extends YObject<infer IObject> ? {
-    [P in keyof IObject]: InferYjsSharedTypeJson<IObject[P]>;
-} : TShared extends Map<infer IItem> ? Record<string, InferYjsSharedTypeJson<IItem>> : TShared extends Text | XmlElement | XmlFragment | XmlText ? string : never : TShared;
-
-interface TrackOriginOptions {
-    captureTimeout?: number;
-    trackedOrigins?: readonly string[];
+import { AbstractCrdtType, InferCrdtStorageJson, AbstractCrdtDoc, DocApplyEncodedStateParams, DocSubscribeCallbackParams, AbstractCrdtDocFactory } from '@pluv/crdt';
+import { Map, Text, XmlText, XmlElement, XmlFragment, Array, Doc } from 'yjs';
+import { Json } from '@pluv/types';
+
+declare class CrdtYjsMap<T extends unknown> extends AbstractCrdtType<Map<InferYjsType<T>>, Record<string, InferYjsJson<T>>> {
+    initialValue: readonly (readonly [
+        key: string,
+        value: InferYjsType<T>
+    ])[];
+    value: Map<InferYjsType<T>>;
+    constructor(value?: readonly (readonly [key: string, value: T])[]);
+    get size(): number;
+    delete(prop: string): this;
+    set(prop: string, value: T): this;
+    toJson(): InferCrdtStorageJson<Record<string, InferYjsJson<T>>>;
+}
+
+declare const map: <T extends unknown>(value?: readonly (readonly [key: string, value: T])[]) => CrdtYjsMap<T>;
+
+declare class CrdtYjsObject<T extends Record<string, any>> extends AbstractCrdtType<Map<InferYjsType<T[keyof T]>>, InferYjsJson<T>> {
+    initialValue: readonly (readonly [key: string, value: T[keyof T]])[];
+    value: Map<InferYjsType<T[keyof T]>>;
+    constructor(value?: T);
+    set<TProp extends keyof T>(prop: TProp, value: T[TProp]): this;
+    toJson(): InferCrdtStorageJson<InferYjsJson<T>>;
+}
+
+declare const object: <T extends Record<string, any>>(value: T) => CrdtYjsObject<T>;
+
+declare class CrdtYjsText extends AbstractCrdtType<Text, string> {
+    readonly initialValue: string;
+    value: Text;
+    constructor(value?: string);
+    get length(): number;
+    delete(index: number, length?: number): this;
+    insert(index: number, text: string): this;
+    toJson(): string;
+}
+
+declare class CrdtYjsXmlText extends AbstractCrdtType<XmlText, string> {
+    readonly initialValue: string;
+    value: XmlText;
+    constructor(value?: string);
+    get length(): number;
+    delete(index: number, length?: number): this;
+    insert(index: number, text: string, attributes?: Record<string, string>): this;
+    toJson(): string;
 }
-declare class YjsDoc<T extends Record<string, AbstractType<any>> = {}> {
+
+declare class CrdtYjsXmlElement extends AbstractCrdtType<XmlElement, string> {
+    readonly initialValue: readonly (XmlElement | XmlText)[];
+    readonly name: string;
+    value: XmlElement;
+    constructor(name: string, children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]);
+    get length(): number;
+    delete(index: number, length?: number): this;
+    insert(index: number, ...children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]): this;
+    push(...children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]): this;
+    unshift(...children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]): this;
+    toJson(): string;
+}
+
+declare const xmlText: (value?: string) => CrdtYjsXmlText;
+
+declare const xmlElement: (name: string, children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]) => CrdtYjsXmlElement;
+
+declare class CrdtYjsXmlFragment extends AbstractCrdtType<XmlFragment, string> {
+    readonly initialValue: readonly (XmlElement | XmlText)[];
+    value: XmlFragment;
+    constructor(children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]);
+    get length(): number;
+    delete(index: number, length?: number): this;
+    insert(index: number, ...children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]): this;
+    push(...children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]): this;
+    unshift(...children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]): this;
+    toJson(): string;
+}
+
+declare const xmlFragment: (children: readonly (CrdtYjsXmlElement | CrdtYjsXmlText)[]) => CrdtYjsXmlFragment;
+
+type InferYjsType<T extends unknown> = T extends CrdtYjsArray<infer IType> ? Array<IType> : T extends CrdtYjsMap<infer IType> ? Map<IType> : T extends CrdtYjsObject<infer IType> ? Map<IType[keyof IType]> : T extends CrdtYjsText ? Text : T extends CrdtYjsXmlElement ? XmlElement : T extends CrdtYjsXmlFragment ? XmlFragment : T extends CrdtYjsXmlText ? XmlText : T extends Json ? T : never;
+type InferYjsJson<T extends unknown> = T extends CrdtYjsArray<infer IType> ? InferYjsJson<IType>[] : T extends CrdtYjsMap<infer IType> ? Record<string, InferYjsJson<IType>> : T extends CrdtYjsObject<infer IType> ? {
+    [P in keyof IType]: InferYjsJson<IType[P]>;
+} : T extends CrdtYjsText | CrdtYjsXmlElement | CrdtYjsXmlFragment | CrdtYjsXmlText | Text | XmlElement | XmlFragment | XmlText ? string : T extends Array<infer IType> ? InferYjsJson<IType>[] : T extends Map<infer IType> ? Record<string, InferYjsJson<IType>> : T extends (infer IType)[] ? InferYjsJson<IType>[] : T extends Record<any, any> ? {
+    [P in keyof T]: InferYjsJson<T[P]>;
+} : T extends Json ? T : never;
+
+declare class CrdtYjsArray<T extends unknown> extends AbstractCrdtType<Array<InferYjsType<T>>, InferYjsJson<T>[]> {
+    readonly initialValue: InferYjsType<T>[] | readonly InferYjsType<T>[];
+    value: Array<InferYjsType<T>>;
+    constructor(value?: T[] | readonly T[]);
+    get length(): number;
+    delete(index: number, length?: number): this;
+    insert(index: number, ...items: T[]): this;
+    push(...items: T[]): this;
+    unshift(...items: T[]): this;
+    toJson(): InferCrdtStorageJson<InferYjsJson<T>>[];
+}
+
+declare const array: <T extends unknown>(value?: T[] | readonly T[]) => CrdtYjsArray<T>;
+
+declare class CrdtYjsDoc<TStorage extends Record<string, AbstractCrdtType<any, any>>> extends AbstractCrdtDoc<TStorage> {
     value: Doc;
+    private _storage;
     private _undoManager;
-    get storage(): T;
-    private get _storage();
-    constructor(value?: T);
-    applyUpdate(update?: string | Uint8Array | null, origin?: string): this;
+    constructor(value?: TStorage);
+    applyEncodedState(params: DocApplyEncodedStateParams): this;
+    batchApplyEncodedState(updates: readonly (DocApplyEncodedStateParams | string | null | undefined)[]): this;
     canRedo(): boolean;
     canUndo(): boolean;
     destroy(): void;
-    encodeStateAsUpdate(): string;
-    get<TKey extends keyof T>(key: TKey): T[TKey];
-    getSharedTypes(): T;
-    redo(): void;
-    subscribe(fn: (update: string, origin: any, doc: Doc, transaction: Transaction) => void): () => void;
-    toJSON(): InferYjsDocJson<this>;
-    trackOrigins(options: TrackOriginOptions): void;
-    transact(fn: (transaction: Transaction) => void, origin?: any): void;
-    static fromUint8Array(u8a: Uint8Array): string;
-    static toUint8Array(str: string): Uint8Array;
-    undo(): void;
+    get(key?: undefined): TStorage;
+    get<TKey extends keyof TStorage>(key: TKey): TStorage[TKey];
+    getEncodedState(): string;
+    isEmpty(): boolean;
+    redo(): this;
+    subscribe(listener: (params: DocSubscribeCallbackParams<TStorage>) => void): () => void;
+    track(): this;
+    transact(fn: () => void): this;
+    toJson(): InferCrdtStorageJson<TStorage>;
+    undo(): this;
 }
-declare const doc: <T extends Record<string, AbstractType<any>> = {}>(value?: T | undefined) => YjsDoc<T>;
-
-declare const map: <T extends unknown>(value?: readonly (readonly [key: string, value: T])[]) => Map<T>;
 
-declare const text: (value?: string) => Text;
-
-interface XmlElementParams {
-    children?: readonly (XmlElement | XmlText)[];
+declare class CrdtYjsDocFactory<TStorage extends Record<string, AbstractCrdtType<any, any>>> extends AbstractCrdtDocFactory<TStorage> {
+    private _initialStorage;
+    constructor(initialStorage?: () => TStorage);
+    getEmpty(): CrdtYjsDoc<TStorage>;
+    getFactory(initialStorage?: (() => TStorage) | undefined): CrdtYjsDocFactory<TStorage>;
+    getFresh(): CrdtYjsDoc<TStorage>;
+    getInitialized(initialStorage?: () => TStorage): CrdtYjsDoc<TStorage>;
 }
-declare const xmlElement: (name: string, params?: XmlElementParams) => XmlElement;
 
-interface XmlFragmentParams {
-    children?: readonly (XmlElement | XmlText)[];
-}
-declare const xmlFragment: (params?: XmlFragmentParams) => XmlFragment;
+declare const doc: <TStorage extends Record<string, AbstractCrdtType<any, any>>>(value?: () => TStorage) => CrdtYjsDocFactory<TStorage>;
 
-declare const xmlText: (value?: string) => XmlText;
+type yjs_CrdtYjsArray<T extends unknown> = CrdtYjsArray<T>;
+declare const yjs_CrdtYjsArray: typeof CrdtYjsArray;
+type yjs_CrdtYjsDoc<TStorage extends Record<string, AbstractCrdtType<any, any>>> = CrdtYjsDoc<TStorage>;
+declare const yjs_CrdtYjsDoc: typeof CrdtYjsDoc;
+type yjs_CrdtYjsMap<T extends unknown> = CrdtYjsMap<T>;
+declare const yjs_CrdtYjsMap: typeof CrdtYjsMap;
+type yjs_CrdtYjsObject<T extends Record<string, any>> = CrdtYjsObject<T>;
+declare const yjs_CrdtYjsObject: typeof CrdtYjsObject;
+type yjs_CrdtYjsText = CrdtYjsText;
+declare const yjs_CrdtYjsText: typeof CrdtYjsText;
+type yjs_CrdtYjsXmlElement = CrdtYjsXmlElement;
+declare const yjs_CrdtYjsXmlElement: typeof CrdtYjsXmlElement;
+type yjs_CrdtYjsXmlFragment = CrdtYjsXmlFragment;
+declare const yjs_CrdtYjsXmlFragment: typeof CrdtYjsXmlFragment;
+type yjs_CrdtYjsXmlText = CrdtYjsXmlText;
+declare const yjs_CrdtYjsXmlText: typeof CrdtYjsXmlText;
+type yjs_InferYjsJson<T extends unknown> = InferYjsJson<T>;
+type yjs_InferYjsType<T extends unknown> = InferYjsType<T>;
+declare const yjs_array: typeof array;
+declare const yjs_doc: typeof doc;
+declare const yjs_map: typeof map;
+declare const yjs_object: typeof object;
+declare const yjs_xmlElement: typeof xmlElement;
+declare const yjs_xmlFragment: typeof xmlFragment;
+declare const yjs_xmlText: typeof xmlText;
+declare namespace yjs {
+  export { yjs_CrdtYjsArray as CrdtYjsArray, yjs_CrdtYjsDoc as CrdtYjsDoc, yjs_CrdtYjsMap as CrdtYjsMap, yjs_CrdtYjsObject as CrdtYjsObject, yjs_CrdtYjsText as CrdtYjsText, yjs_CrdtYjsXmlElement as CrdtYjsXmlElement, yjs_CrdtYjsXmlFragment as CrdtYjsXmlFragment, yjs_CrdtYjsXmlText as CrdtYjsXmlText, type yjs_InferYjsJson as InferYjsJson, type yjs_InferYjsType as InferYjsType, yjs_array as array, yjs_doc as doc, yjs_map as map, yjs_object as object, yjs_xmlElement as xmlElement, yjs_xmlFragment as xmlFragment, yjs_xmlText as xmlText };
+}
 
-export { type InferYjsDocJson, type InferYjsDocSharedType, type InferYjsDocSharedTypeJson, type InferYjsDocSharedTypes, type InferYjsSharedTypeJson, type TrackOriginOptions, type XmlElementParams, type XmlFragmentParams, type YObject, type YObjectValue, YjsDoc, array, doc, map, object, text, xmlElement, xmlFragment, xmlText };
+export { yjs };