@pluv/react 1.0.2 → 2.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@1.0.2 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@2.0.0 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 16.71 KB
-ESM ⚡️ Build success in 88ms
-CJS dist/index.js 19.09 KB
-CJS ⚡️ Build success in 93ms
+ESM dist/index.mjs 16.73 KB
+ESM ⚡️ Build success in 107ms
+CJS dist/index.js 19.10 KB
+CJS ⚡️ Build success in 107ms
 DTS Build start
-DTS ⚡️ Build success in 5328ms
-DTS dist/index.d.mts 5.54 KB
-DTS dist/index.d.ts  5.54 KB
+DTS ⚡️ Build success in 6197ms
+DTS dist/index.d.mts 5.70 KB
+DTS dist/index.d.ts  5.70 KB

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @pluv/react
 
+## 2.0.0
+
+### Minor Changes
+
+- 5cec54a: **Deprecated** Declaring top-level types on your CRDT storage via the `yjs` or `loro` utility (e.g. `yjs.array` or `loro.list`) for the `initialStorage` prop on `PluvRoomProvider` is now deprecated, to be removed in the next major release (v2). Continuing to use the `yjs` or `loro` utilities to declare top-level types will log a warning to your console while in development mode (i.e. when `process.env.NODE_ENV === "development"`). To declare top-level types, you should now use the builder type exposed in the `initialStorage` function. See the example below:
+
+  ```tsx
+  import { yjs } from "@pluv/crdt-yjs";
+
+  // Before
+  <PluvRoomProvider
+      room="example-room"
+      initialStorage={() => ({
+          // Using the `yjs` or `loro` utility (in this case `yjs.map`) when
+          // declaring top-level types is now deprecated
+          topType: yjs.map([
+              ["key1", yjs.text("")],
+              ["key2", yjs.text("")],
+          ]),
+      })}
+  >
+      <div />
+  </PluvRoomProvider>
+
+  // After
+  <PluvRoomProvider
+      room="example-room"
+      initialStorage={(t) => ({
+          // Top-level properties must now use the builder (in this case `t`).
+          // This effectively calls `yjs.getMap("topType")` to instantiate the type on
+          // the root document.
+          // This simply returns the native Yjs shared-types (e.g. Y.Map), which
+          // allows you operate on your yjs shared-typess in a more native way.
+          topType: t.map("topType", [
+              // Declaring nested types should continue to use the `yjs` utilities
+              // you've used before
+              ["key1", yjs.text("")],
+              ["key2", yjs.text("")],
+          ]),
+      })}
+  >
+      <div />
+  </PluvRoomProvider>
+  ```
+
+  The functions on the builder type calls the native yjs shared-type (or loro container type) instantiating methods and returns the native types (e.g. `t.map("topType")` is simply just a `Y.Doc.getMap("topType")`) call under the hood. This allows you to declare your type in a more yjs-native and predictable way, and enables declaring more complex initial storage states if needed.
+
+### Patch Changes
+
+- Updated dependencies [047a1d8]
+- Updated dependencies [0806212]
+- Updated dependencies [3a34dbb]
+  - @pluv/client@2.0.0
+  - @pluv/types@2.0.0
+  - @pluv/crdt@2.0.0
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,25 +1,25 @@
-import { PluvRouterEventConfig, PluvClient, PluvRoomAddon, PluvRouter, MockedRoomEvents, MergeEvents, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom } from '@pluv/client';
-import { CrdtType, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
-import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput } from '@pluv/types';
+import { PluvRouterEventConfig, PluvClient, PluvRoomAddon, PluvRouter, MockedRoomEvents, MergeEvents, PluvRoomDebug, WebSocketConnection, UserInfo } from '@pluv/client';
+import { AbstractCrdtDocFactory, NoopCrdtDocFactory, InferStorage, InferInitialStorageFn, InferCrdtJson } from '@pluv/crdt';
+import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput, CrdtDocLike, RoomLike } from '@pluv/types';
 import { FC, ReactNode, Dispatch } from 'react';
 
 interface PluvProviderProps {
     children?: ReactNode;
 }
-type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
+type BaseRoomProviderProps<TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>> = {
     children?: ReactNode;
-    initialStorage?: keyof TStorage extends never ? never : () => TStorage;
+    initialStorage?: keyof InferStorage<TCrdt> extends never ? never : InferInitialStorageFn<TCrdt>;
     room: string;
 } & (keyof TPresence extends never ? {
     initialPresence?: never;
 } : {
     initialPresence: TPresence;
 });
-type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> = BaseRoomProviderProps<TPresence, TStorage> & {
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = BaseRoomProviderProps<TPresence, TCrdt> & {
     events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
 type MetadataGetter<TMetadata extends JsonObject> = TMetadata | (() => MaybePromise<TMetadata>);
-type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>> = BaseRoomProviderProps<TPresence, TCrdt> & {
     connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
@@ -40,32 +40,32 @@ type EventProxy<TIO extends IOLike> = {
         useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
     };
 };
-interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> {
-    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
+interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> {
+    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TCrdt>>;
     PluvProvider: FC<PluvProviderProps>;
-    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>;
+    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TCrdt>>;
     event: EventProxy<MergeEvents<TEvents, TIO>>;
     useBroadcast: () => BroadcastProxy<MergeEvents<TEvents, TIO>>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
-    useClient: () => PluvClient<TIO, TPresence, TStorage, TMetadata>;
+    useClient: () => PluvClient<TIO, TPresence, TCrdt, TMetadata>;
     useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
-    useDoc: () => AbstractCrdtDoc<TStorage>;
+    useDoc: () => CrdtDocLike<InferStorage<TCrdt>>;
     useEvent: <TType extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(type: TType, callback: (data: Id<IOEventMessage<MergeEvents<TEvents, TIO>, TType>>) => void) => void;
     useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [myPresence: Id<T>, updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>];
     useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<T | null>) => T | null;
     useOthers: <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T, options?: SubscriptionHookOptions<T>) => T;
     useRedo: () => () => void;
-    useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
-    useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
-    useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
+    useRoom: () => RoomLike<TIO, TPresence, InferStorage<TCrdt>>;
+    useStorage: <TKey extends keyof InferStorage<TCrdt>, TData extends unknown = InferCrdtJson<InferStorage<TCrdt>[TKey]>>(key: TKey, selector?: (data: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: InferStorage<TCrdt>[TKey] | null];
+    useTransact: () => (fn: (storage: InferStorage<TCrdt>) => void, origin?: string) => void;
     useUndo: () => () => void;
 }
-type CreateBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> = {
-    addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TStorage>[];
-    router?: PluvRouter<TIO, TPresence, TStorage, TEvents>;
+type CreateBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = {
+    addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TCrdt>[];
+    router?: PluvRouter<TIO, TPresence, InferStorage<TCrdt>, TEvents>;
 };
-declare const createBundle: <TIO extends IOLike<any, any>, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}>(client: PluvClient<TIO, TPresence, TStorage, TMetadata>, options?: CreateBundleOptions<TIO, TMetadata, TPresence, TStorage, TEvents>) => CreateBundle<TIO, TMetadata, TPresence, TStorage, TEvents>;
+declare const createBundle: <TIO extends IOLike<any, any>, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}>(client: PluvClient<TIO, TPresence, TCrdt, TMetadata>, options?: CreateBundleOptions<TIO, TMetadata, TPresence, TCrdt, TEvents>) => CreateBundle<TIO, TMetadata, TPresence, TCrdt, TEvents>;
 
 export { type CreateBundle, type EventProxy, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.d.ts

@@ -1,25 +1,25 @@
-import { PluvRouterEventConfig, PluvClient, PluvRoomAddon, PluvRouter, MockedRoomEvents, MergeEvents, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom } from '@pluv/client';
-import { CrdtType, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
-import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput } from '@pluv/types';
+import { PluvRouterEventConfig, PluvClient, PluvRoomAddon, PluvRouter, MockedRoomEvents, MergeEvents, PluvRoomDebug, WebSocketConnection, UserInfo } from '@pluv/client';
+import { AbstractCrdtDocFactory, NoopCrdtDocFactory, InferStorage, InferInitialStorageFn, InferCrdtJson } from '@pluv/crdt';
+import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput, CrdtDocLike, RoomLike } from '@pluv/types';
 import { FC, ReactNode, Dispatch } from 'react';
 
 interface PluvProviderProps {
     children?: ReactNode;
 }
-type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
+type BaseRoomProviderProps<TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>> = {
     children?: ReactNode;
-    initialStorage?: keyof TStorage extends never ? never : () => TStorage;
+    initialStorage?: keyof InferStorage<TCrdt> extends never ? never : InferInitialStorageFn<TCrdt>;
     room: string;
 } & (keyof TPresence extends never ? {
     initialPresence?: never;
 } : {
     initialPresence: TPresence;
 });
-type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> = BaseRoomProviderProps<TPresence, TStorage> & {
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = BaseRoomProviderProps<TPresence, TCrdt> & {
     events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
 type MetadataGetter<TMetadata extends JsonObject> = TMetadata | (() => MaybePromise<TMetadata>);
-type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>> = BaseRoomProviderProps<TPresence, TCrdt> & {
     connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
@@ -40,32 +40,32 @@ type EventProxy<TIO extends IOLike> = {
         useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
     };
 };
-interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> {
-    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
+interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> {
+    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TCrdt>>;
     PluvProvider: FC<PluvProviderProps>;
-    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>;
+    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TCrdt>>;
     event: EventProxy<MergeEvents<TEvents, TIO>>;
     useBroadcast: () => BroadcastProxy<MergeEvents<TEvents, TIO>>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
-    useClient: () => PluvClient<TIO, TPresence, TStorage, TMetadata>;
+    useClient: () => PluvClient<TIO, TPresence, TCrdt, TMetadata>;
     useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
-    useDoc: () => AbstractCrdtDoc<TStorage>;
+    useDoc: () => CrdtDocLike<InferStorage<TCrdt>>;
     useEvent: <TType extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(type: TType, callback: (data: Id<IOEventMessage<MergeEvents<TEvents, TIO>, TType>>) => void) => void;
     useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [myPresence: Id<T>, updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>];
     useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<T | null>) => T | null;
     useOthers: <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T, options?: SubscriptionHookOptions<T>) => T;
     useRedo: () => () => void;
-    useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
-    useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
-    useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
+    useRoom: () => RoomLike<TIO, TPresence, InferStorage<TCrdt>>;
+    useStorage: <TKey extends keyof InferStorage<TCrdt>, TData extends unknown = InferCrdtJson<InferStorage<TCrdt>[TKey]>>(key: TKey, selector?: (data: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: InferStorage<TCrdt>[TKey] | null];
+    useTransact: () => (fn: (storage: InferStorage<TCrdt>) => void, origin?: string) => void;
     useUndo: () => () => void;
 }
-type CreateBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> = {
-    addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TStorage>[];
-    router?: PluvRouter<TIO, TPresence, TStorage, TEvents>;
+type CreateBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = {
+    addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TCrdt>[];
+    router?: PluvRouter<TIO, TPresence, InferStorage<TCrdt>, TEvents>;
 };
-declare const createBundle: <TIO extends IOLike<any, any>, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}>(client: PluvClient<TIO, TPresence, TStorage, TMetadata>, options?: CreateBundleOptions<TIO, TMetadata, TPresence, TStorage, TEvents>) => CreateBundle<TIO, TMetadata, TPresence, TStorage, TEvents>;
+declare const createBundle: <TIO extends IOLike<any, any>, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}>(client: PluvClient<TIO, TPresence, TCrdt, TMetadata>, options?: CreateBundleOptions<TIO, TMetadata, TPresence, TCrdt, TEvents>) => CreateBundle<TIO, TMetadata, TPresence, TCrdt, TEvents>;
 
 export { type CreateBundle, type EventProxy, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.js

@@ -225,8 +225,12 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
 var import_jsx_runtime = require("react/jsx-runtime");
 var createBundle = (client, options = {}) => {
   const PluvContext = (0, import_react6.createContext)(null);
-  const PluvRoomContext = (0, import_react6.createContext)(null);
-  const MockedRoomContext = (0, import_react6.createContext)(null);
+  const PluvRoomContext = (0, import_react6.createContext)(
+    null
+  );
+  const MockedRoomContext = (0, import_react6.createContext)(
+    null
+  );
   const MockedRoomProvider = (0, import_react6.memo)((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
     const [room] = (0, import_react6.useState)(() => {

package/dist/index.mjs

@@ -192,8 +192,12 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
 import { jsx } from "react/jsx-runtime";
 var createBundle = (client, options = {}) => {
   const PluvContext = createContext(null);
-  const PluvRoomContext = createContext(null);
-  const MockedRoomContext = createContext(null);
+  const PluvRoomContext = createContext(
+    null
+  );
+  const MockedRoomContext = createContext(
+    null
+  );
   const MockedRoomProvider = memo((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
     const [room] = useState4(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,13 +18,13 @@
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
-    "@pluv/crdt": "^1.0.2",
-    "@pluv/types": "^1.0.2"
+    "@pluv/crdt": "^2.0.0",
+    "@pluv/types": "^2.0.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "@pluv/client": "^1.0.2"
+    "@pluv/client": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.2",
@@ -32,9 +32,9 @@
     "react": "^19.1.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "@pluv/client": "^1.0.2",
-    "@pluv/tsconfig": "^1.0.2",
-    "eslint-config-pluv": "^1.0.2"
+    "@pluv/client": "^2.0.0",
+    "@pluv/tsconfig": "^2.0.0",
+    "eslint-config-pluv": "^2.0.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createBundle.tsx

@@ -1,5 +1,4 @@
 import type {
-    AbstractRoom,
     CreateRoomOptions,
     EnterRoomParams,
     MergeEvents,
@@ -13,8 +12,15 @@ import type {
     WebSocketConnection,
 } from "@pluv/client";
 import { MockedRoom, PluvRoom } from "@pluv/client";
-import type { AbstractCrdtDoc, CrdtType, InferCrdtJson } from "@pluv/crdt";
 import type {
+    AbstractCrdtDocFactory,
+    InferCrdtJson,
+    InferInitialStorageFn,
+    InferStorage,
+    NoopCrdtDocFactory,
+} from "@pluv/crdt";
+import type {
+    CrdtDocLike,
     Id,
     InferIOInput,
     InferIOOutput,
@@ -22,6 +28,7 @@ import type {
     IOLike,
     JsonObject,
     MaybePromise,
+    RoomLike,
 } from "@pluv/types";
 import fastDeepEqual from "fast-deep-equal";
 import type { Dispatch, FC, ReactNode } from "react";
@@ -41,19 +48,19 @@ export interface PluvProviderProps {
 
 type BaseRoomProviderProps<
     TPresence extends JsonObject,
-    TStorage extends Record<string, CrdtType<any, any>>,
+    TCrdt extends AbstractCrdtDocFactory<any>,
 > = {
     children?: ReactNode;
-    initialStorage?: keyof TStorage extends never ? never : () => TStorage;
+    initialStorage?: keyof InferStorage<TCrdt> extends never ? never : InferInitialStorageFn<TCrdt>;
     room: string;
 } & (keyof TPresence extends never ? { initialPresence?: never } : { initialPresence: TPresence });
 
 export type MockedRoomProviderProps<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, CrdtType<any, any>>,
-    TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {},
-> = BaseRoomProviderProps<TPresence, TStorage> & {
+    TCrdt extends AbstractCrdtDocFactory<any>,
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
+> = BaseRoomProviderProps<TPresence, TCrdt> & {
     events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
 
@@ -65,8 +72,8 @@ export type PluvRoomProviderProps<
     TIO extends IOLike<any, any>,
     TMetadata extends JsonObject,
     TPresence extends JsonObject,
-    TStorage extends Record<string, CrdtType<any, any>>,
-> = BaseRoomProviderProps<TPresence, TStorage> & {
+    TCrdt extends AbstractCrdtDocFactory<any>,
+> = BaseRoomProviderProps<TPresence, TCrdt> & {
     connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
@@ -99,13 +106,13 @@ export interface CreateBundle<
     TIO extends IOLike,
     TMetadata extends JsonObject,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, CrdtType<any, any>> = {},
-    TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {},
+    TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory,
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
 > {
     // components
-    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
+    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TCrdt>>;
     PluvProvider: FC<PluvProviderProps>;
-    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>;
+    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TCrdt>>;
 
     // proxies
     event: EventProxy<MergeEvents<TEvents, TIO>>;
@@ -114,12 +121,12 @@ export interface CreateBundle<
     useBroadcast: () => BroadcastProxy<MergeEvents<TEvents, TIO>>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
-    useClient: () => PluvClient<TIO, TPresence, TStorage, TMetadata>;
+    useClient: () => PluvClient<TIO, TPresence, TCrdt, TMetadata>;
     useConnection: <T extends unknown = WebSocketConnection>(
         selector: (connection: WebSocketConnection) => T,
         options?: SubscriptionHookOptions<Id<T>>,
     ) => Id<T>;
-    useDoc: () => AbstractCrdtDoc<TStorage>;
+    useDoc: () => CrdtDocLike<InferStorage<TCrdt>>;
     useEvent: <TType extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(
         type: TType,
         callback: (data: Id<IOEventMessage<MergeEvents<TEvents, TIO>, TType>>) => void,
@@ -142,16 +149,16 @@ export interface CreateBundle<
         options?: SubscriptionHookOptions<T>,
     ) => T;
     useRedo: () => () => void;
-    useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
+    useRoom: () => RoomLike<TIO, TPresence, InferStorage<TCrdt>>;
     useStorage: <
-        TKey extends keyof TStorage,
-        TData extends unknown = InferCrdtJson<TStorage[TKey]>,
+        TKey extends keyof InferStorage<TCrdt>,
+        TData extends unknown = InferCrdtJson<InferStorage<TCrdt>[TKey]>,
     >(
         key: TKey,
-        selector?: (data: InferCrdtJson<TStorage[TKey]>) => TData,
+        selector?: (data: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => TData,
         options?: SubscriptionHookOptions<TData | null>,
-    ) => [data: TData | null, sharedType: TStorage[TKey] | null];
-    useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
+    ) => [data: TData | null, sharedType: InferStorage<TCrdt>[TKey] | null];
+    useTransact: () => (fn: (storage: InferStorage<TCrdt>) => void, origin?: string) => void;
     useUndo: () => () => void;
 }
 
@@ -159,30 +166,30 @@ export type CreateBundleOptions<
     TIO extends IOLike,
     TMetadata extends JsonObject = {},
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, CrdtType<any, any>> = {},
-    TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {},
+    TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory,
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
 > = {
-    addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TStorage>[];
-    router?: PluvRouter<TIO, TPresence, TStorage, TEvents>;
+    addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TCrdt>[];
+    router?: PluvRouter<TIO, TPresence, InferStorage<TCrdt>, TEvents>;
 };
 
 export const createBundle = <
     TIO extends IOLike<any, any>,
     TMetadata extends JsonObject = {},
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, CrdtType<any, any>> = {},
-    TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {},
+    TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory,
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
 >(
-    client: PluvClient<TIO, TPresence, TStorage, TMetadata>,
-    options: CreateBundleOptions<TIO, TMetadata, TPresence, TStorage, TEvents> = {},
-): CreateBundle<TIO, TMetadata, TPresence, TStorage, TEvents> => {
+    client: PluvClient<TIO, TPresence, TCrdt, TMetadata>,
+    options: CreateBundleOptions<TIO, TMetadata, TPresence, TCrdt, TEvents> = {},
+): CreateBundle<TIO, TMetadata, TPresence, TCrdt, TEvents> => {
     /**
      * !HACK
      * @description We'll let the context error out if client is not provided,
      * and let the users deal with it.
      * @date October 27, 2022
      */
-    const PluvContext = createContext<PluvClient<TIO, TPresence, TStorage, TMetadata>>(null as any);
+    const PluvContext = createContext<PluvClient<TIO, TPresence, TCrdt, TMetadata>>(null as any);
 
     /**
      * !HACK
@@ -190,20 +197,24 @@ export const createBundle = <
      * and let the users deal with it.
      * @date November 11, 2022
      */
-    const PluvRoomContext = createContext<AbstractRoom<TIO, TPresence, TStorage>>(null as any);
+    const PluvRoomContext = createContext<RoomLike<TIO, TPresence, InferStorage<TCrdt>>>(
+        null as any,
+    );
 
-    const MockedRoomContext = createContext<AbstractRoom<TIO, TPresence, TStorage> | null>(null);
+    const MockedRoomContext = createContext<RoomLike<TIO, TPresence, InferStorage<TCrdt>> | null>(
+        null,
+    );
 
-    const MockedRoomProvider = memo<MockedRoomProviderProps<TIO, TPresence, TStorage>>((props) => {
+    const MockedRoomProvider = memo<MockedRoomProviderProps<TIO, TPresence, TCrdt>>((props) => {
         const { children, events, initialPresence, initialStorage, room: _room } = props;
 
-        const [room] = useState<MockedRoom<TIO, TPresence, TStorage, TEvents>>(() => {
-            return new MockedRoom<TIO, TPresence, TStorage, TEvents>(_room, {
+        const [room] = useState<MockedRoom<TIO, TPresence, TCrdt, TEvents>>(() => {
+            return new MockedRoom<TIO, TPresence, TCrdt, TEvents>(_room, {
                 events,
                 initialPresence,
                 initialStorage:
                     typeof initialStorage === "function"
-                        ? client._defs.initialStorage?.getFactory(initialStorage)
+                        ? (client._defs.initialStorage?.getFactory(initialStorage) as TCrdt)
                         : client._defs.initialStorage,
             });
         });
@@ -217,7 +228,7 @@ export const createBundle = <
 
     MockedRoomProvider.displayName = "MockedRoomProvider";
 
-    const PluvRoomProvider = memo<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>(
+    const PluvRoomProvider = memo<PluvRoomProviderProps<TIO, TMetadata, TPresence, TCrdt>>(
         (props) => {
             const {
                 children,
@@ -242,7 +253,7 @@ export const createBundle = <
                 return !!room.metadata ? room.metadata.parse(resolved) : resolved;
             });
 
-            const [room] = useState<PluvRoom<TIO, TMetadata, TPresence, TStorage, TEvents>>(() => {
+            const [room] = useState<PluvRoom<TIO, TMetadata, TPresence, TCrdt, TEvents>>(() => {
                 return client.createRoom(_room, {
                     addons: options.addons,
                     debug,
@@ -254,7 +265,7 @@ export const createBundle = <
                     metadata,
                     onAuthorizationFail,
                     router: options.router,
-                } as CreateRoomOptions<TIO, TPresence, TStorage, TMetadata, TEvents>);
+                } as CreateRoomOptions<TIO, TPresence, TCrdt, TMetadata, TEvents>);
             });
 
             useEffect(() => {
@@ -320,8 +331,7 @@ export const createBundle = <
 
     PluvProvider.displayName = "PluvProvider";
 
-    const useClient = (): PluvClient<TIO, TPresence, TStorage, TMetadata> =>
-        useContext(PluvContext);
+    const useClient = (): PluvClient<TIO, TPresence, TCrdt, TMetadata> => useContext(PluvContext);
 
     const useRoom = () => {
         const room = useContext(PluvRoomContext);
@@ -619,13 +629,13 @@ export const createBundle = <
     };
 
     const useStorage = <
-        TKey extends keyof TStorage,
-        TData extends unknown = InferCrdtJson<TStorage[TKey]>,
+        TKey extends keyof InferStorage<TCrdt>,
+        TData extends unknown = InferCrdtJson<InferStorage<TCrdt>[TKey]>,
     >(
         key: TKey,
-        selector = identity as (data: InferCrdtJson<TStorage[TKey]>) => TData,
+        selector = identity as (data: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => TData,
         options?: SubscriptionHookOptions<TData | null>,
-    ): [data: TData | null, sharedType: TStorage[TKey] | null] => {
+    ): [data: TData | null, sharedType: InferStorage<TCrdt>[TKey] | null] => {
         const room = useRoom();
         const rerender = useRerender();
 
@@ -638,12 +648,12 @@ export const createBundle = <
             [key, room],
         );
 
-        const getSnapshot = useCallback((): InferCrdtJson<TStorage[TKey]> | null => {
+        const getSnapshot = useCallback((): InferCrdtJson<InferStorage<TCrdt>[TKey]> | null => {
             return room.getStorageJson(key);
         }, [key, room]);
 
         const _selector = useCallback(
-            (snapshot: InferCrdtJson<TStorage[TKey]> | null) => {
+            (snapshot: InferCrdtJson<InferStorage<TCrdt>[TKey]> | null) => {
                 return snapshot === null ? null : selector(snapshot);
             },
             [selector],