@pluv/react 0.11.1 → 0.12.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@0.11.1 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.12.1 build /home/runner/work/pluv/pluv/packages/react
 > tsup src/index.ts --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.ts
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 8.63 KB
-ESM ⚡️ Build success in 113ms
-CJS dist/index.js 11.10 KB
-CJS ⚡️ Build success in 114ms
+CJS dist/index.js 12.46 KB
+CJS ⚡️ Build success in 102ms
+ESM dist/index.mjs 9.88 KB
+ESM ⚡️ Build success in 102ms
 DTS Build start
-DTS ⚡️ Build success in 6927ms
-DTS dist/index.d.mts 4.47 KB
-DTS dist/index.d.ts  4.47 KB
+DTS ⚡️ Build success in 7343ms
+DTS dist/index.d.mts 4.71 KB
+DTS dist/index.d.ts  4.71 KB

package/CHANGELOG.md

@@ -1,5 +1,260 @@
 # @pluv/react
 
+## 0.12.1
+
+### Patch Changes
+
+- cae08aa: Updated storage from `getStorage` to never return null
+- Updated dependencies [cae08aa]
+  - @pluv/client@0.12.1
+  - @pluv/types@0.12.1
+
+## 0.12.0
+
+### Minor Changes
+
+- 436040b: Added ability to undo and redo changes to storage.
+
+  ## @pluv/crdt-yjs
+
+  `@pluv/crdt-yjs` now exposes 5 new methods: `canRedo`, `canUndo`, `redo`, `undo` and `trackOrigins`.
+
+  Refer to the code-example below to better understand how to undo and redo with your doc.
+
+  ```ts
+  // Example
+  import { array, doc } from "@pluv/crdt-yjs";
+
+  // Create your doc with your shared-types
+  const myDoc = doc({
+    messages: array<string>([]),
+  });
+
+  /**
+   * @description Track origins to enable undos and redos for your document.
+   * trackOrigins must be called before any storage mutations, to enable those
+   * mutations to be undone/redone.
+   */
+  myDoc.trackOrigins({
+    /**
+     * @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.
+     * @see (@link https://docs.yjs.dev/api/undo-manager)
+     * @default undefined
+     */
+    trackedOrigins: ["user-123"],
+  });
+
+  /**
+   * @description Check whether calling undo will mutate storage
+   * @returns boolean
+   */
+  myDoc.canUndo();
+  /**
+   * @description Check whether calling redo will mutate storage
+   * @returns boolean
+   */
+  myDoc.canRedo();
+
+  // Perform a storage mutation within a transaction so that it can be affected
+  // by undo/redo operations.
+  myDoc.transact(() => {
+    myDoc.get("messages").push(["hello world!"]);
+  }, "user-123");
+
+  /**
+   * @description Undoes the last valid mutation to storage
+   */
+  myDoc.undo();
+
+  /**
+   * @description Re-applies the last undone mutation to storage
+   */
+  myDoc.redo();
+  ```
+
+  ## @pluv/client
+
+  `@pluv/client`'s `PluvRoom` and `MockedRoom` now exposes 5 new methods: `canRedo`, `canUndo`, `redo`, `undo` and `transact`.
+
+  Refer to the code-example below to better understand how to undo and redo with your `PluvRoom`.
+
+  ```ts
+  import { createClient, y } from "@pluv/client";
+
+  const client = createClient({});
+
+  /**
+   * @description When a room is created, undo/redo will automatically
+   * be configured to filter for changes made by the connected user
+   * (so that users only undo/redo their changes).
+   */
+  const room = client.createRoom("my-room", {
+    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
+   * @returns boolean
+   */
+  room.canUndo();
+  /**
+   * @description Check whether calling redo will mutate storage
+   * @returns boolean
+   */
+  room.canRedo();
+
+  /**
+   * @description Calling transact will enable a storage mutation to be undone/redone.
+   * When called without an origin, the origin will default to the user's connection
+   * id.
+   *
+   * You can specify a 2nd parameter to transact with a different transaction origin.
+   */
+  room.transact(() => {
+    room.get("messages").push(["hello world!"]);
+  });
+
+  // This will also be undoable because `"user-123"` is a tracked origin.
+  room.transact(() => {
+    room.get("messages").push(["hello world!"]);
+  }, "user-123");
+
+  /**
+   * @description Undoes the last valid mutation to storage
+   */
+  room.undo();
+
+  /**
+   * @description Re-applies the last undone mutation to storage
+   */
+  room.redo();
+  ```
+
+  ## @pluv/react
+
+  `@pluv/react`'s `createRoomBundle` now exposes 5 new react hooks: `usePluvCanRedo`, `usePluvCanUndo`, `usePluvRedo`, `usePluvUndo` and `usePluvTransact`.
+
+  Refer to the code-example below to better understand how to undo and redo with your `createRoomBundle`.
+
+  ```tsx
+  import { createBundle, createClient, y } from "@pluv/react";
+  import { type io } from "./io";
+
+  const client = createClient<typeof io>();
+
+  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"],
+  });
+
+  /**
+   * @description Check whether calling undo will mutate storage
+   */
+  const canUndo: boolean = usePluvCanUndo();
+  /**
+   * @description Check whether calling redo will mutate storage
+   */
+  const canRedo: boolean = usePluvCanRedo();
+
+  const [messages, sharedType] = usePluvStorage("messages");
+
+  /**
+   * @description Calling transact will enable a storage mutation to be undone/redone.
+   * When called without an origin, the origin will default to the user's connection
+   * id.
+   *
+   * You can specify a 2nd parameter to transact with a different transaction origin.
+   */
+  const transact = usePluvTransact();
+
+  transact(() => {
+    sharedType?.push(["hello world!"]);
+  });
+
+  // This will also be undoable because `"user-123"` is a tracked origin.
+  transact(() => {
+    sharedType?.push(["hello world!"]);
+  }, "user-123");
+
+  /**
+   * @description Undoes the last valid mutation to storage
+   */
+  const undo = usePluvUndo();
+
+  undo();
+
+  /**
+   * @description Re-applies the last undone mutation to storage
+   */
+  const redo = usePluvRedo();
+
+  redo();
+  ```
+
+### Patch Changes
+
+- Updated dependencies [436040b]
+  - @pluv/client@0.12.0
+  - @pluv/types@0.12.0
+
 ## 0.11.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, InferYjsSharedTypeJson, MockedRoomEvents, PluvClient } from '@pluv/client';
+import { PluvRoomAddon, TrackOriginOptions, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, InferYjsSharedTypeJson, MockedRoomEvents, PluvClient } from '@pluv/client';
 export { AbstractType, ConnectionState, createClient, y } from '@pluv/client';
 import * as _pluv_types from '@pluv/types';
 import { IOLike, JsonObject, InputZodLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
@@ -6,11 +6,11 @@ export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types
 import { FC, Dispatch, ReactNode } from 'react';
 import { AbstractType } from 'yjs';
 
-interface CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> {
+type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> = {
     addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
     initialStorage?: () => TStorage;
     presence?: InputZodLike<TPresence>;
-}
+} & TrackOriginOptions;
 type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, AbstractType<any>>> = {
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
@@ -35,6 +35,8 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
     usePluvBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
+    usePluvCanRedo: () => boolean;
+    usePluvCanUndo: () => boolean;
     usePluvConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
     usePluvEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
     usePluvMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [
@@ -44,8 +46,11 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     usePluvMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     usePluvOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     usePluvOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
+    usePluvRedo: () => () => void;
     usePluvRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
-    usePluvStorage: <TKey extends keyof TStorage, TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferYjsSharedTypeJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
+    usePluvStorage: <TKey extends keyof TStorage, TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferYjsSharedTypeJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData>) => [data: TData, sharedType: TStorage[TKey]];
+    usePluvTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
+    usePluvUndo: () => () => void;
 }
 
 interface PluvProviderProps {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, InferYjsSharedTypeJson, MockedRoomEvents, PluvClient } from '@pluv/client';
+import { PluvRoomAddon, TrackOriginOptions, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, InferYjsSharedTypeJson, MockedRoomEvents, PluvClient } from '@pluv/client';
 export { AbstractType, ConnectionState, createClient, y } from '@pluv/client';
 import * as _pluv_types from '@pluv/types';
 import { IOLike, JsonObject, InputZodLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
@@ -6,11 +6,11 @@ export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types
 import { FC, Dispatch, ReactNode } from 'react';
 import { AbstractType } from 'yjs';
 
-interface CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> {
+type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> = {
     addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
     initialStorage?: () => TStorage;
     presence?: InputZodLike<TPresence>;
-}
+} & TrackOriginOptions;
 type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, AbstractType<any>>> = {
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
@@ -35,6 +35,8 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
     usePluvBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
+    usePluvCanRedo: () => boolean;
+    usePluvCanUndo: () => boolean;
     usePluvConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
     usePluvEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
     usePluvMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [
@@ -44,8 +46,11 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     usePluvMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     usePluvOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     usePluvOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
+    usePluvRedo: () => () => void;
     usePluvRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
-    usePluvStorage: <TKey extends keyof TStorage, TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferYjsSharedTypeJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
+    usePluvStorage: <TKey extends keyof TStorage, TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferYjsSharedTypeJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData>) => [data: TData, sharedType: TStorage[TKey]];
+    usePluvTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
+    usePluvUndo: () => () => void;
 }
 
 interface PluvProviderProps {

package/dist/index.js

@@ -82,10 +82,12 @@ var createRoomBundle = (client, options = {}) => {
     } = props;
     const [room] = (0, import_react2.useState)(() => {
       return new import_client.MockedRoom(_room, {
+        captureTimeout: options.captureTimeout,
         events,
         initialPresence,
         initialStorage: typeof initialStorage === "function" ? initialStorage : options.initialStorage,
-        presence: options.presence
+        presence: options.presence,
+        trackedOrigins: options.trackedOrigins
       });
     });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MockedRoomContext.Provider, { value: { room }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, { value: room, children }) });
@@ -105,11 +107,13 @@ var createRoomBundle = (client, options = {}) => {
     const [room] = (0, import_react2.useState)(() => {
       return client.createRoom(_room, {
         addons: options.addons,
+        captureTimeout: options.captureTimeout,
         debug,
         initialPresence,
         initialStorage: typeof initialStorage === "function" ? initialStorage : options.initialStorage,
         presence: options.presence,
-        onAuthorizationFail
+        onAuthorizationFail,
+        trackedOrigins: options.trackedOrigins
       });
     });
     (0, import_react2.useEffect)(() => {
@@ -139,6 +143,36 @@ var createRoomBundle = (client, options = {}) => {
       [room]
     );
   };
+  const usePluvCanRedo = () => {
+    const room = usePluvRoom();
+    const subscribe = (0, import_react2.useCallback)(
+      (onStoreChange) => room.storageRoot(onStoreChange),
+      [room]
+    );
+    const getSnapshot = (0, import_react2.useCallback)(() => room.canRedo(), [room]);
+    const canRedo = (0, import_with_selector.useSyncExternalStoreWithSelector)(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
+    return canRedo;
+  };
+  const usePluvCanUndo = () => {
+    const room = usePluvRoom();
+    const subscribe = (0, import_react2.useCallback)(
+      (onStoreChange) => room.storageRoot(onStoreChange),
+      [room]
+    );
+    const getSnapshot = (0, import_react2.useCallback)(() => room.canUndo(), [room]);
+    const canRedo = (0, import_with_selector.useSyncExternalStoreWithSelector)(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
+    return canRedo;
+  };
   const usePluvConnection = (selector = identity, options2) => {
     var _a;
     const room = usePluvRoom();
@@ -269,6 +303,10 @@ var createRoomBundle = (client, options = {}) => {
       (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : shallowArrayEqual
     );
   };
+  const usePluvRedo = () => {
+    const room = usePluvRoom();
+    return room.redo;
+  };
   const usePluvStorage = (key, selector = identity, options2) => {
     var _a;
     const room = usePluvRoom();
@@ -277,12 +315,11 @@ var createRoomBundle = (client, options = {}) => {
       [key, room]
     );
     const getSnapshot = (0, import_react2.useCallback)(() => {
-      var _a2, _b;
-      return (_b = (_a2 = room.getStorage(key)) == null ? void 0 : _a2.toJSON()) != null ? _b : null;
+      return room.getStorage(key).toJSON();
     }, [key, room]);
     const _selector = (0, import_react2.useCallback)(
       (snapshot) => {
-        return !snapshot ? null : selector(snapshot);
+        return selector(snapshot);
       },
       [selector]
     );
@@ -296,20 +333,33 @@ var createRoomBundle = (client, options = {}) => {
     const sharedType = room.getStorage(key);
     return [data, sharedType];
   };
+  const usePluvTransact = () => {
+    const room = usePluvRoom();
+    return room.transact;
+  };
+  const usePluvUndo = () => {
+    const room = usePluvRoom();
+    return room.undo;
+  };
   return {
     // components
     MockedRoomProvider,
     PluvRoomProvider,
     // hooks
     usePluvBroadcast,
+    usePluvCanRedo,
+    usePluvCanUndo,
     usePluvConnection,
     usePluvEvent,
     usePluvMyPresence,
     usePluvMyself,
     usePluvOther,
     usePluvOthers,
+    usePluvRedo,
     usePluvRoom,
-    usePluvStorage
+    usePluvStorage,
+    usePluvTransact,
+    usePluvUndo
   };
 };
 

package/dist/index.mjs

@@ -52,10 +52,12 @@ var createRoomBundle = (client, options = {}) => {
     } = props;
     const [room] = useState2(() => {
       return new MockedRoom(_room, {
+        captureTimeout: options.captureTimeout,
         events,
         initialPresence,
         initialStorage: typeof initialStorage === "function" ? initialStorage : options.initialStorage,
-        presence: options.presence
+        presence: options.presence,
+        trackedOrigins: options.trackedOrigins
       });
     });
     return /* @__PURE__ */ jsx(MockedRoomContext.Provider, { value: { room }, children: /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: room, children }) });
@@ -75,11 +77,13 @@ var createRoomBundle = (client, options = {}) => {
     const [room] = useState2(() => {
       return client.createRoom(_room, {
         addons: options.addons,
+        captureTimeout: options.captureTimeout,
         debug,
         initialPresence,
         initialStorage: typeof initialStorage === "function" ? initialStorage : options.initialStorage,
         presence: options.presence,
-        onAuthorizationFail
+        onAuthorizationFail,
+        trackedOrigins: options.trackedOrigins
       });
     });
     useEffect(() => {
@@ -109,6 +113,36 @@ var createRoomBundle = (client, options = {}) => {
       [room]
     );
   };
+  const usePluvCanRedo = () => {
+    const room = usePluvRoom();
+    const subscribe = useCallback2(
+      (onStoreChange) => room.storageRoot(onStoreChange),
+      [room]
+    );
+    const getSnapshot = useCallback2(() => room.canRedo(), [room]);
+    const canRedo = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
+    return canRedo;
+  };
+  const usePluvCanUndo = () => {
+    const room = usePluvRoom();
+    const subscribe = useCallback2(
+      (onStoreChange) => room.storageRoot(onStoreChange),
+      [room]
+    );
+    const getSnapshot = useCallback2(() => room.canUndo(), [room]);
+    const canRedo = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
+    return canRedo;
+  };
   const usePluvConnection = (selector = identity, options2) => {
     var _a;
     const room = usePluvRoom();
@@ -239,6 +273,10 @@ var createRoomBundle = (client, options = {}) => {
       (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : shallowArrayEqual
     );
   };
+  const usePluvRedo = () => {
+    const room = usePluvRoom();
+    return room.redo;
+  };
   const usePluvStorage = (key, selector = identity, options2) => {
     var _a;
     const room = usePluvRoom();
@@ -247,12 +285,11 @@ var createRoomBundle = (client, options = {}) => {
       [key, room]
     );
     const getSnapshot = useCallback2(() => {
-      var _a2, _b;
-      return (_b = (_a2 = room.getStorage(key)) == null ? void 0 : _a2.toJSON()) != null ? _b : null;
+      return room.getStorage(key).toJSON();
     }, [key, room]);
     const _selector = useCallback2(
       (snapshot) => {
-        return !snapshot ? null : selector(snapshot);
+        return selector(snapshot);
       },
       [selector]
     );
@@ -266,20 +303,33 @@ var createRoomBundle = (client, options = {}) => {
     const sharedType = room.getStorage(key);
     return [data, sharedType];
   };
+  const usePluvTransact = () => {
+    const room = usePluvRoom();
+    return room.transact;
+  };
+  const usePluvUndo = () => {
+    const room = usePluvRoom();
+    return room.undo;
+  };
   return {
     // components
     MockedRoomProvider,
     PluvRoomProvider,
     // hooks
     usePluvBroadcast,
+    usePluvCanRedo,
+    usePluvCanUndo,
     usePluvConnection,
     usePluvEvent,
     usePluvMyPresence,
     usePluvMyself,
     usePluvOther,
     usePluvOthers,
+    usePluvRedo,
     usePluvRoom,
-    usePluvStorage
+    usePluvStorage,
+    usePluvTransact,
+    usePluvUndo
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -17,25 +17,25 @@
     "access": "public"
   },
   "dependencies": {
-    "@types/react": "18.2.21",
+    "@types/react": "18.2.23",
     "@types/use-sync-external-store": "^0.0.4",
     "fast-deep-equal": "^3.1.3",
     "use-sync-external-store": "^1.2.0",
-    "@pluv/client": "^0.11.1",
-    "@pluv/types": "^0.11.1"
+    "@pluv/client": "^0.12.1",
+    "@pluv/types": "^0.12.1"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
     "yjs": "^13.0.0"
   },
   "devDependencies": {
-    "eslint": "^8.49.0",
+    "eslint": "^8.50.0",
     "react": "18.2.0",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
-    "yjs": "^13.6.7",
-    "@pluv/tsconfig": "^0.11.1",
-    "eslint-config-pluv": "^0.11.1"
+    "yjs": "^13.6.8",
+    "@pluv/tsconfig": "^0.12.1",
+    "eslint-config-pluv": "^0.12.1"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createBundle.tsx

@@ -17,9 +17,9 @@ export interface CreateBundle<TIO extends IOLike> {
     // factories
     createRoomBundle: <
         TPresence extends JsonObject = {},
-        TStorage extends Record<string, AbstractType<any>> = {}
+        TStorage extends Record<string, AbstractType<any>> = {},
     >(
-        options?: CreateRoomBundleOptions<TIO, TPresence, TStorage>
+        options?: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
     ) => CreateRoomBundle<TIO, TPresence, TStorage>;
 
     // components
@@ -30,7 +30,7 @@ export interface CreateBundle<TIO extends IOLike> {
 }
 
 export const createBundle = <TIO extends IOLike>(
-    client: PluvClient<TIO>
+    client: PluvClient<TIO>,
 ): CreateBundle<TIO> => {
     /**
      * !HACK
@@ -57,9 +57,9 @@ export const createBundle = <TIO extends IOLike>(
 
     const createRoomBundle = <
         TPresence extends JsonObject = {},
-        TStorage extends Record<string, AbstractType<any>> = {}
+        TStorage extends Record<string, AbstractType<any>> = {},
     >(
-        options: CreateRoomBundleOptions<TIO, TPresence, TStorage> = {}
+        options: CreateRoomBundleOptions<TIO, TPresence, TStorage> = {},
     ): CreateRoomBundle<TIO, TPresence, TStorage> =>
         _createRoomBundle(client, options);
 

package/src/createRoomBundle.tsx

@@ -6,6 +6,7 @@ import type {
     PluvRoom,
     PluvRoomAddon,
     PluvRoomDebug,
+    TrackOriginOptions,
     UserInfo,
     WebSocketConnection,
 } from "@pluv/client";
@@ -37,19 +38,19 @@ import {
     useSyncExternalStoreWithSelector,
 } from "./internal";
 
-export interface CreateRoomBundleOptions<
+export type CreateRoomBundleOptions<
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractType<any>> = {}
-> {
+    TStorage extends Record<string, AbstractType<any>> = {},
+> = {
     addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
     initialStorage?: () => TStorage;
     presence?: InputZodLike<TPresence>;
-}
+} & TrackOriginOptions;
 
 type BaseRoomProviderProps<
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractType<any>>
+    TStorage extends Record<string, AbstractType<any>>,
 > = {
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
@@ -61,7 +62,7 @@ type BaseRoomProviderProps<
 export type MockedRoomProviderProps<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractType<any>>
+    TStorage extends Record<string, AbstractType<any>>,
 > = BaseRoomProviderProps<TPresence, TStorage> & {
     events?: MockedRoomEvents<TIO>;
 };
@@ -69,7 +70,7 @@ export type MockedRoomProviderProps<
 export type PluvRoomProviderProps<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractType<any>>
+    TStorage extends Record<string, AbstractType<any>>,
 > = BaseRoomProviderProps<TPresence, TStorage> & {
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
@@ -86,7 +87,7 @@ export type UpdateMyPresenceAction<TPresence extends JsonObject> =
 export interface CreateRoomBundle<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractType<any>>
+    TStorage extends Record<string, AbstractType<any>>,
 > {
     // components
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
@@ -95,54 +96,62 @@ export interface CreateRoomBundle<
     // hooks
     usePluvBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(
         event: TEvent,
-        data: Id<InferIOInput<TIO>[TEvent]>
+        data: Id<InferIOInput<TIO>[TEvent]>,
     ) => void;
+    usePluvCanRedo: () => boolean;
+    usePluvCanUndo: () => boolean;
     usePluvConnection: <T extends unknown = WebSocketConnection>(
         selector: (connection: WebSocketConnection) => T,
-        options?: SubscriptionHookOptions<Id<T>>
+        options?: SubscriptionHookOptions<Id<T>>,
     ) => Id<T>;
     usePluvEvent: <TType extends keyof InferIOOutput<TIO>>(
         type: TType,
-        callback: (data: Id<IOEventMessage<TIO, TType>>) => void
+        callback: (data: Id<IOEventMessage<TIO, TType>>) => void,
     ) => void;
     usePluvMyPresence: <T extends unknown = TPresence>(
         selector?: (myPresence: TPresence) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>
+        options?: SubscriptionHookOptions<Id<T> | null>,
     ) => [
         myPresence: Id<T>,
-        updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>
+        updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>,
     ];
     usePluvMyself: <T extends unknown = UserInfo<TIO, TPresence>>(
         selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>
+        options?: SubscriptionHookOptions<Id<T> | null>,
     ) => Id<T> | null;
     usePluvOther: <T extends unknown = UserInfo<TIO, TPresence>>(
         connectionId: string,
         selector?: (other: UserInfo<TIO, TPresence>) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>
+        options?: SubscriptionHookOptions<Id<T> | null>,
     ) => Id<T> | null;
     usePluvOthers: <T extends unknown = UserInfo<TIO, TPresence>>(
         selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[],
-        options?: SubscriptionHookOptions<readonly Id<T>[]>
+        options?: SubscriptionHookOptions<readonly Id<T>[]>,
     ) => readonly Id<T>[];
+    usePluvRedo: () => () => void;
     usePluvRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
     usePluvStorage: <
         TKey extends keyof TStorage,
-        TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>
+        TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>,
     >(
         key: TKey,
         selector?: (data: InferYjsSharedTypeJson<TStorage[TKey]>) => TData,
-        options?: SubscriptionHookOptions<TData | null>
-    ) => [data: TData | null, sharedType: TStorage[TKey] | null];
+        options?: SubscriptionHookOptions<TData>,
+    ) => [data: TData, sharedType: TStorage[TKey]];
+    usePluvTransact: () => (
+        fn: (storage: TStorage) => void,
+        origin?: string,
+    ) => void;
+    usePluvUndo: () => () => void;
 }
 
 export const createRoomBundle = <
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractType<any>> = {}
+    TStorage extends Record<string, AbstractType<any>> = {},
 >(
     client: PluvClient<TIO>,
-    options: CreateRoomBundleOptions<TIO, TPresence, TStorage> = {}
+    options: CreateRoomBundleOptions<TIO, TPresence, TStorage> = {},
 ): CreateRoomBundle<TIO, TPresence, TStorage> => {
     /**
      * !HACK
@@ -172,6 +181,7 @@ export const createRoomBundle = <
 
         const [room] = useState<MockedRoom<TIO, TPresence, TStorage>>(() => {
             return new MockedRoom<TIO, TPresence, TStorage>(_room, {
+                captureTimeout: options.captureTimeout,
                 events,
                 initialPresence,
                 initialStorage:
@@ -179,6 +189,7 @@ export const createRoomBundle = <
                         ? initialStorage
                         : options.initialStorage,
                 presence: options.presence,
+                trackedOrigins: options.trackedOrigins,
             });
         });
 
@@ -211,6 +222,7 @@ export const createRoomBundle = <
         const [room] = useState<PluvRoom<TIO, TPresence, TStorage>>(() => {
             return client.createRoom<TPresence, TStorage>(_room, {
                 addons: options.addons,
+                captureTimeout: options.captureTimeout,
                 debug,
                 initialPresence,
                 initialStorage:
@@ -219,6 +231,7 @@ export const createRoomBundle = <
                         : options.initialStorage,
                 presence: options.presence,
                 onAuthorizationFail,
+                trackedOrigins: options.trackedOrigins,
             });
         });
 
@@ -253,24 +266,64 @@ export const createRoomBundle = <
 
     const usePluvBroadcast = (): (<TEvent extends keyof InferIOInput<TIO>>(
         event: TEvent,
-        data: Id<InferIOInput<TIO>[TEvent]>
+        data: Id<InferIOInput<TIO>[TEvent]>,
     ) => void) => {
         const room = usePluvRoom();
 
         return useCallback(
             <TEvent extends keyof InferIOInput<TIO>>(
                 event: TEvent,
-                data: Id<InferIOInput<TIO>[TEvent]>
+                data: Id<InferIOInput<TIO>[TEvent]>,
             ) => {
                 room.broadcast(event, data);
             },
-            [room]
+            [room],
+        );
+    };
+
+    const usePluvCanRedo = (): boolean => {
+        const room = usePluvRoom();
+
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => room.storageRoot(onStoreChange),
+            [room],
+        );
+
+        const getSnapshot = useCallback((): boolean => room.canRedo(), [room]);
+
+        const canRedo = useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            identity,
+        );
+
+        return canRedo;
+    };
+
+    const usePluvCanUndo = (): boolean => {
+        const room = usePluvRoom();
+
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => room.storageRoot(onStoreChange),
+            [room],
         );
+
+        const getSnapshot = useCallback((): boolean => room.canUndo(), [room]);
+
+        const canRedo = useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            identity,
+        );
+
+        return canRedo;
     };
 
     const usePluvConnection = <T extends unknown = WebSocketConnection>(
         selector = identity as (connection: WebSocketConnection) => T,
-        options?: SubscriptionHookOptions<Id<T>>
+        options?: SubscriptionHookOptions<Id<T>>,
     ): Id<T> => {
         const room = usePluvRoom();
 
@@ -278,14 +331,14 @@ export const createRoomBundle = <
             (onStoreChange: () => void) => {
                 return room.subscribe("connection", onStoreChange);
             },
-            [room]
+            [room],
         );
 
         const getSnapshot = room.getConnection;
 
         const _selector = useCallback(
             (snapshot: WebSocketConnection) => selector(snapshot) as Id<T>,
-            [selector]
+            [selector],
         );
 
         return useSyncExternalStoreWithSelector(
@@ -293,13 +346,13 @@ export const createRoomBundle = <
             getSnapshot,
             getSnapshot,
             _selector,
-            options?.isEqual ?? fastDeepEqual
+            options?.isEqual ?? fastDeepEqual,
         );
     };
 
     const usePluvEvent = <TType extends keyof InferIOOutput<TIO>>(
         type: TType,
-        callback: (data: Id<IOEventMessage<TIO, TType>>) => void
+        callback: (data: Id<IOEventMessage<TIO, TType>>) => void,
     ): void => {
         const room = usePluvRoom();
 
@@ -314,7 +367,7 @@ export const createRoomBundle = <
 
     const usePluvMyPresence = <T extends unknown = TPresence>(
         selector = identity as (myPresence: TPresence) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>
+        options?: SubscriptionHookOptions<Id<T> | null>,
     ): [Id<T>, Dispatch<UpdateMyPresenceAction<TPresence>>] => {
         const room = usePluvRoom();
 
@@ -322,14 +375,14 @@ export const createRoomBundle = <
             (onStoreChange: () => void) => {
                 return room.subscribe("my-presence", onStoreChange);
             },
-            [room]
+            [room],
         );
 
         const getSnapshot = room.getMyPresence;
 
         const _selector = useCallback(
             (snapshot: TPresence) => selector(snapshot) as Id<T>,
-            [selector]
+            [selector],
         );
 
         const myPresence = useSyncExternalStoreWithSelector(
@@ -337,7 +390,7 @@ export const createRoomBundle = <
             getSnapshot,
             getSnapshot,
             _selector,
-            options?.isEqual ?? fastDeepEqual
+            options?.isEqual ?? fastDeepEqual,
         );
 
         const updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>> =
@@ -350,7 +403,7 @@ export const createRoomBundle = <
 
                     room.updateMyPresence(presence);
                 },
-                [room]
+                [room],
             );
 
         return [myPresence, updateMyPresence];
@@ -358,7 +411,7 @@ export const createRoomBundle = <
 
     const usePluvMyself = <T extends unknown = UserInfo<TIO, TPresence>>(
         selector = identity as (myself: Id<UserInfo<TIO, TPresence>>) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>
+        options?: SubscriptionHookOptions<Id<T> | null>,
     ): Id<T> | null => {
         const room = usePluvRoom();
 
@@ -366,7 +419,7 @@ export const createRoomBundle = <
             (onStoreChange: () => void) => {
                 return room.subscribe("myself", onStoreChange);
             },
-            [room]
+            [room],
         );
 
         const getSnapshot = room.getMyself;
@@ -375,7 +428,7 @@ export const createRoomBundle = <
             (snapshot: Id<UserInfo<TIO, TPresence>> | null) => {
                 return !snapshot ? null : (selector(snapshot) as Id<T>);
             },
-            [selector]
+            [selector],
         );
 
         return useSyncExternalStoreWithSelector(
@@ -383,14 +436,14 @@ export const createRoomBundle = <
             getSnapshot,
             getSnapshot,
             _selector,
-            options?.isEqual ?? fastDeepEqual
+            options?.isEqual ?? fastDeepEqual,
         );
     };
 
     const usePluvOther = <T extends unknown = UserInfo<TIO, TPresence>>(
         connectionId: string,
         selector = identity as (other: UserInfo<TIO, TPresence>) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>
+        options?: SubscriptionHookOptions<Id<T> | null>,
     ): Id<T> | null => {
         const room = usePluvRoom();
 
@@ -398,19 +451,19 @@ export const createRoomBundle = <
             (onStoreChange: () => void) => {
                 return room.other(connectionId, onStoreChange);
             },
-            [room, connectionId]
+            [room, connectionId],
         );
 
         const getSnapshot = useCallback(
             () => room.getOther(connectionId),
-            [room, connectionId]
+            [room, connectionId],
         );
 
         const _selector = useCallback(
             (snapshot: Id<UserInfo<TIO, TPresence>> | null) => {
                 return !snapshot ? null : (selector(snapshot) as Id<T>);
             },
-            [selector]
+            [selector],
         );
 
         return useSyncExternalStoreWithSelector(
@@ -418,15 +471,15 @@ export const createRoomBundle = <
             getSnapshot,
             getSnapshot,
             _selector,
-            options?.isEqual ?? fastDeepEqual
+            options?.isEqual ?? fastDeepEqual,
         );
     };
 
     const usePluvOthers = <T extends unknown = UserInfo<TIO, TPresence>>(
         selector = identity as (
-            other: readonly Id<UserInfo<TIO, TPresence>>[]
+            other: readonly Id<UserInfo<TIO, TPresence>>[],
         ) => T[],
-        options?: SubscriptionHookOptions<readonly Id<T>[]>
+        options?: SubscriptionHookOptions<readonly Id<T>[]>,
     ): readonly Id<T>[] => {
         const room = usePluvRoom();
 
@@ -434,7 +487,7 @@ export const createRoomBundle = <
             (onStoreChange: () => void) => {
                 return room.subscribe("others", onStoreChange);
             },
-            [room]
+            [room],
         );
 
         const getSnapshot = room.getOthers;
@@ -444,40 +497,46 @@ export const createRoomBundle = <
             getSnapshot,
             getSnapshot,
             selector as (
-                other: readonly Id<UserInfo<TIO, TPresence>>[]
+                other: readonly Id<UserInfo<TIO, TPresence>>[],
             ) => Id<T>[],
-            options?.isEqual ?? shallowArrayEqual
+            options?.isEqual ?? shallowArrayEqual,
         );
     };
 
+    const usePluvRedo = () => {
+        const room = usePluvRoom();
+
+        return room.redo;
+    };
+
     const usePluvStorage = <
         TKey extends keyof TStorage,
-        TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>
+        TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>,
     >(
         key: TKey,
         selector = identity as (
-            data: InferYjsSharedTypeJson<TStorage[TKey]>
+            data: InferYjsSharedTypeJson<TStorage[TKey]>,
         ) => TData,
-        options?: SubscriptionHookOptions<TData | null>
-    ): [data: TData | null, sharedType: TStorage[TKey] | null] => {
+        options?: SubscriptionHookOptions<TData>,
+    ): [data: TData, sharedType: TStorage[TKey]] => {
         const room = usePluvRoom();
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => room.storage(key, onStoreChange),
-            [key, room]
+            [key, room],
         );
 
         const getSnapshot = useCallback((): InferYjsSharedTypeJson<
             TStorage[TKey]
-        > | null => {
-            return room.getStorage(key)?.toJSON() ?? null;
+        > => {
+            return room.getStorage(key).toJSON();
         }, [key, room]);
 
         const _selector = useCallback(
-            (snapshot: InferYjsSharedTypeJson<TStorage[TKey]> | null) => {
-                return !snapshot ? null : selector(snapshot);
+            (snapshot: InferYjsSharedTypeJson<TStorage[TKey]>) => {
+                return selector(snapshot);
             },
-            [selector]
+            [selector],
         );
 
         const data = useSyncExternalStoreWithSelector(
@@ -485,7 +544,7 @@ export const createRoomBundle = <
             getSnapshot,
             getSnapshot,
             _selector,
-            options?.isEqual ?? fastDeepEqual
+            options?.isEqual ?? fastDeepEqual,
         );
 
         const sharedType = room.getStorage(key);
@@ -493,6 +552,18 @@ export const createRoomBundle = <
         return [data, sharedType];
     };
 
+    const usePluvTransact = () => {
+        const room = usePluvRoom();
+
+        return room.transact;
+    };
+
+    const usePluvUndo = () => {
+        const room = usePluvRoom();
+
+        return room.undo;
+    };
+
     return {
         // components
         MockedRoomProvider,
@@ -500,13 +571,18 @@ export const createRoomBundle = <
 
         // hooks
         usePluvBroadcast,
+        usePluvCanRedo,
+        usePluvCanUndo,
         usePluvConnection,
         usePluvEvent,
         usePluvMyPresence,
         usePluvMyself,
         usePluvOther,
         usePluvOthers,
+        usePluvRedo,
         usePluvRoom,
         usePluvStorage,
+        usePluvTransact,
+        usePluvUndo,
     };
 };