@pluv/react 0.19.0 → 0.21.0

package/.turbo/turbo-build.log

@@ -1,18 +1,18 @@
 
-> @pluv/react@0.19.0 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.21.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
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.1.0
-CLI Target: es6
-ESM Build start
-CJS Build start
-ESM dist/index.mjs 11.61 KB
-ESM ⚡️ Build success in 85ms
-CJS dist/index.js 14.02 KB
-CJS ⚡️ Build success in 86ms
-DTS Build start
-DTS ⚡️ Build success in 4322ms
-DTS dist/index.d.mts 5.35 KB
-DTS dist/index.d.ts  5.35 KB
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.2.4
+CLI Target: es6
+ESM Build start
+CJS Build start
+ESM dist/index.mjs 11.87 KB
+ESM ⚡️ Build success in 103ms
+CJS dist/index.js 14.27 KB
+CJS ⚡️ Build success in 106ms
+DTS Build start
+DTS ⚡️ Build success in 4500ms
+DTS dist/index.d.mts 5.17 KB
+DTS dist/index.d.ts  5.17 KB

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # @pluv/react
 
+## 0.21.0
+
+### Patch Changes
+
+- Updated dependencies [b98ab6b]
+  - @pluv/client@0.21.0
+  - @pluv/crdt@0.21.0
+  - @pluv/types@0.21.0
+
+## 0.20.0
+
+### Minor Changes
+
+- 9492085: **BREAKING**: `@pluv/crdt-yjs` and `@pluv/crdt-loro` have been updated so that the utilities to create shared-types/containers no-longer return a wrapper around the underlying shared-types and containers, but rather return the shared-types/containers directly.
+
+  This means that for methods such as `getStorage` from `@pluv/client` and `useStorage` from `@pluv/react`, the shared-types/containers are also returned instead of the wrapper types.
+
+  The motivation for these changes are so that pluv.io is supplementary to `yjs` and `loro-crdt`, instead of having these libraries be an internal implementation of pluv.io.
+
+  ```ts
+  // Before
+
+  import { yjs } from "@pluv/crdt-yjs";
+
+  yjs.array([]); // Returns CrdtYjsArray
+  yjs.object([]); // Returns CrdtYjsObject
+
+  const room: PluvRoom = /* ... */;
+
+  room.getStorage("messages"); // Returns AbstractCrdtType
+
+  const [, sharedType] = useStorage("messages"); // sharedType is an AbstractCrdtType
+  ```
+
+  ```ts
+  // Now
+
+  import { yjs } from "@pluv/crdt-yjs";
+
+  yjs.array([]); // Returns yjs.Array
+  yjs.object([]); // Returns yjs.Map
+
+  const room: PluvRoom = /* ... */;
+
+  room.getStorage("messages"); // Returns yjs.AbstractType
+
+  const [, sharedType] = useStorage("messages"); // sharedType is a yjs.AbstractType
+  ```
+
+  For `@pluv/crdt-loro` specifically, `@pluv/client` relies on [loro events and subscriptions](https://www.loro.dev/docs/tutorial/get_started#event) to detect changes. The `AbstractLoroCrdt` types previously called `Loro.commit` after each change as an abstraction, but now this no-longer happens. To ensure that changes to loro containers are properly handled in `@pluv/react`, make sure to commit your changes whenever possible:
+
+  ```ts
+  // Before
+
+  const [data, container] = useStorage("messages");
+
+  // This automatically called Loro.commit under the hood and rerendered the page with updated data.
+  container.push(loro.object({ name: "John Doe", age: 35 }));
+  ```
+
+  ```ts
+  // Now
+
+  const [data, container] = useStorage("messages");
+
+  const doc = useDoc();
+  const transact = useTransact();
+
+  // Updates need to be committed back to the doc whenever the changes need to be emitted to other users
+  // The returned data also will not update until the changes are commited
+
+  // The two operations below are functionally equivalent
+  transact(() => {
+    container.push(loro.object({ name: "John Doe", age: 35 }));
+  });
+
+  container.push(loro.object({ name: "John Doe", age: 35 }));
+  doc.value.commit();
+  ```
+
+### Patch Changes
+
+- Updated dependencies [9492085]
+  - @pluv/client@0.20.0
+  - @pluv/crdt@0.20.0
+  - @pluv/types@0.20.0
+
 ## 0.19.0
 
 ### Minor Changes

package/README.md

@@ -1,30 +1,3 @@
-> **Disclaimer:**
-> This package is currently in preview and may have breaking changes between versions. Please wait for a `v1.0.0` stable release before using this in production.
-
-<h1 align="center">
-  <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 />
-  <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> 💕 <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/react">
-    <img src="https://img.shields.io/npm/v/@pluv/react" alt="npm @pluv/react" />
-  </a>
-  <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>
-  <a href="https://commitizen.github.io/cz-cli/">
-    <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen friendly" />
-  </a>
-  <img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript" />
-</p>
-
 ## `@pluv/react`
 
 > [React.js](https://reactjs.org/) bindings for [@pluv/client](https://www.npmjs.com/package/@pluv/client).
@@ -43,114 +16,3 @@ yarn add @pluv/react @pluv/crdt-yjs yjs zod
 # pnpm
 pnpm add @pluv/react @pluv/crdt-yjs yjs zod
 ```
-
-## Basic Example
-
-```tsx
-import { yjs } from "@pluv/crdt-yjs";
-import { createBundle, createClient } from "@pluv/react";
-import { z } from "zod";
-// Import the PluvIO instance as a type from your server file
-import { type io } from "./server";
-
-// Initialize the @pluv/client client
-const client = createClient<typeof io>({
-    authEndpoint: (room) => {
-        return `https://localhost:3000/api/authorize?room=${room}`;
-    },
-    wsEndpoint: (room) => {
-        return `ws://localhost:3000/api/room/${room}`;
-    },
-});
-
-export const {
-    // factories
-    createRoomBundle,
-
-    // components
-    PluvProvider,
-
-    // hooks
-    useClient,
-} = createBundle(client);
-
-export const {
-    // components
-    MockedRoomProvider,
-    PluvRoomProvider,
-
-    // utils
-    event,
-
-    // hooks
-    useBroadcast,
-    useCanRedo,
-    useCanUndo,
-    useConnection,
-    useDoc,
-    useEvent,
-    useMyPresence,
-    useMyself,
-    useOther,
-    useOthers,
-    useRedo,
-    useRoom,
-    useStorage,
-    useTransact,
-    useUndo,
-} = createRoomBundle({
-    initialStorage: yjs.doc(() => ({
-        messages: yjs.array([
-            yjs.object({
-                message: "Hello World!",
-                name: "johnathan_doe",
-            }),
-        ]),
-    })),
-    presence: z.object({
-        cursor: z.nullable(
-            z.object({
-                x: z.number(),
-                y: z.number(),
-            })
-        ),
-    }),
-});
-
-import { FC } from "react";
-
-export const MyPage: FC<Record<string, never>> = () => {
-    return (
-        <PluvProvider>
-            <MyRoom />
-        </PluvProvider>
-    );
-};
-
-export const MyRoom: FC<Record<string, never>> = () => {
-    const broadcast = useBroadcast();
-
-    event.RECEIVE_MESSAGE.useEvent(({ data }) => {
-        // data is typed as { message: string }
-        console.log(data.message);
-    });
-
-    return (
-        <button
-            onClick={() => {
-                broadcast.SEND_MESSAGE({
-                    // TypeScript will require that message is typed as string
-                    message: "Hello world!",
-                });
-            }}
-            type="button"
-        >
-            Send Message
-        </button>
-    );
-};
-```
-
-## Reference
-
-Check us out on [GitHub](https://github.com/pluv-io/pluv) for more information on how to use `@pluv/io`.

package/dist/index.d.mts

@@ -1,18 +1,17 @@
 import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
 export { ConnectionState, createClient } from '@pluv/client';
-import { AbstractCrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtStorageJson } from '@pluv/crdt';
-export { AbstractCrdtType, InferCrdtStorageJson } from '@pluv/crdt';
-import * as _pluv_types from '@pluv/types';
+import { CrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
+export { CrdtType, InferCrdtJson } from '@pluv/crdt';
 import { IOLike, JsonObject, InputZodLike, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
 import { FC, Dispatch, ReactNode } from 'react';
 
-type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractCrdtType<any, any>> = {}> = {
+type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}> = {
     addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
     initialStorage?: AbstractCrdtDocFactory<TStorage>;
     presence?: InputZodLike<TPresence>;
 };
-type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = {
+type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
     room: string;
@@ -21,10 +20,10 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
 } : {
     initialPresence: TPresence;
 });
-type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
     events?: MockedRoomEvents<TIO>;
 };
-type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
 };
@@ -40,7 +39,7 @@ type EventProxy<TIO extends IOLike> = {
         useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
     };
 };
-interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> {
+interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
     event: EventProxy<TIO>;
@@ -56,7 +55,7 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     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 = InferCrdtStorageJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
+    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;
     useUndo: () => () => void;
 }
@@ -66,10 +65,10 @@ interface PluvProviderProps {
     children?: ReactNode;
 }
 interface CreateBundle<TIO extends IOLike> {
-    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractCrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
+    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
     PluvProvider: FC<PluvProviderProps>;
     useClient: () => PluvClient<TIO>;
 }
-declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
+declare const createBundle: <TIO extends IOLike>(client: PluvClient<TIO>) => CreateBundle<TIO>;
 
 export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.d.ts

@@ -1,18 +1,17 @@
 import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
 export { ConnectionState, createClient } from '@pluv/client';
-import { AbstractCrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtStorageJson } from '@pluv/crdt';
-export { AbstractCrdtType, InferCrdtStorageJson } from '@pluv/crdt';
-import * as _pluv_types from '@pluv/types';
+import { CrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
+export { CrdtType, InferCrdtJson } from '@pluv/crdt';
 import { IOLike, JsonObject, InputZodLike, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
 import { FC, Dispatch, ReactNode } from 'react';
 
-type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractCrdtType<any, any>> = {}> = {
+type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}> = {
     addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
     initialStorage?: AbstractCrdtDocFactory<TStorage>;
     presence?: InputZodLike<TPresence>;
 };
-type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = {
+type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
     room: string;
@@ -21,10 +20,10 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
 } : {
     initialPresence: TPresence;
 });
-type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
     events?: MockedRoomEvents<TIO>;
 };
-type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
 };
@@ -40,7 +39,7 @@ type EventProxy<TIO extends IOLike> = {
         useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
     };
 };
-interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> {
+interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
     event: EventProxy<TIO>;
@@ -56,7 +55,7 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     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 = InferCrdtStorageJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
+    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;
     useUndo: () => () => void;
 }
@@ -66,10 +65,10 @@ interface PluvProviderProps {
     children?: ReactNode;
 }
 interface CreateBundle<TIO extends IOLike> {
-    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractCrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
+    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
     PluvProvider: FC<PluvProviderProps>;
     useClient: () => PluvClient<TIO>;
 }
-declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
+declare const createBundle: <TIO extends IOLike>(client: PluvClient<TIO>) => CreateBundle<TIO>;
 
 export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.js

@@ -89,7 +89,12 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
   const cacheRef = (0, import_react3.useRef)(null);
   const _getServerSnapshot = getServerSnapshot ? () => {
     const data = getServerSnapshot();
-    return selector(data);
+    const snapshot = selector(data);
+    const compare = isEqual != null ? isEqual : shallowEqual;
+    const cached = cacheRef.current;
+    const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+    cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
+    return cacheRef.current;
   } : void 0;
   const _getClientSnapshot = () => {
     const data = getClientSnapshot();
@@ -335,8 +340,7 @@ var createRoomBundle = (client, options) => {
     });
     const subscribe = (0, import_react4.useCallback)((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
     const getSnapshot = (0, import_react4.useCallback)(() => {
-      var _a3;
-      return (_a3 = room.getStorage(key)) == null ? void 0 : _a3.toJson();
+      return room.getStorageJson(key);
     }, [key, room]);
     const _selector = (0, import_react4.useCallback)(
       (snapshot) => {

package/dist/index.mjs

@@ -53,7 +53,12 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
   const cacheRef = useRef(null);
   const _getServerSnapshot = getServerSnapshot ? () => {
     const data = getServerSnapshot();
-    return selector(data);
+    const snapshot = selector(data);
+    const compare = isEqual != null ? isEqual : shallowEqual;
+    const cached = cacheRef.current;
+    const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+    cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
+    return cacheRef.current;
   } : void 0;
   const _getClientSnapshot = () => {
     const data = getClientSnapshot();
@@ -299,8 +304,7 @@ var createRoomBundle = (client, options) => {
     });
     const subscribe = useCallback3((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
     const getSnapshot = useCallback3(() => {
-      var _a3;
-      return (_a3 = room.getStorage(key)) == null ? void 0 : _a3.toJson();
+      return room.getStorageJson(key);
     }, [key, room]);
     const _selector = useCallback3(
       (snapshot) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
-    "@pluv/client": "^0.19.0",
-    "@pluv/crdt": "^0.19.0",
-    "@pluv/types": "^0.19.0"
+    "@pluv/client": "^0.21.0",
+    "@pluv/crdt": "^0.21.0",
+    "@pluv/types": "^0.21.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",
@@ -30,10 +30,10 @@
     "@types/react": "^18.3.3",
     "eslint": "^8.57.0",
     "react": "^18.3.1",
-    "tsup": "^8.1.0",
-    "typescript": "^5.4.5",
-    "@pluv/tsconfig": "^0.19.0",
-    "eslint-config-pluv": "^0.19.0"
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
+    "@pluv/tsconfig": "^0.21.0",
+    "eslint-config-pluv": "^0.21.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createBundle.tsx

@@ -1,5 +1,5 @@
 import type { PluvClient } from "@pluv/client";
-import type { AbstractCrdtType } from "@pluv/crdt";
+import type { CrdtType } from "@pluv/crdt";
 import type { IOLike, JsonObject } from "@pluv/types";
 import type { FC, ReactNode } from "react";
 import { createContext, memo, useContext } from "react";
@@ -12,10 +12,7 @@ export interface PluvProviderProps {
 
 export interface CreateBundle<TIO extends IOLike> {
     // factories
-    createRoomBundle: <
-        TPresence extends JsonObject = {},
-        TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
-    >(
+    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(
         options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
     ) => CreateRoomBundle<TIO, TPresence, TStorage>;
 
@@ -48,7 +45,7 @@ export const createBundle = <TIO extends IOLike>(client: PluvClient<TIO>): Creat
 
     const createRoomBundle = <
         TPresence extends JsonObject = {},
-        TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
+        TStorage extends Record<string, CrdtType<any, any>> = {},
     >(
         options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
     ): CreateRoomBundle<TIO, TPresence, TStorage> => _createRoomBundle(client, options);

package/src/createRoomBundle.tsx

@@ -9,7 +9,7 @@ import type {
     WebSocketConnection,
 } from "@pluv/client";
 import { MockedRoom } from "@pluv/client";
-import type { AbstractCrdtDoc, AbstractCrdtDocFactory, AbstractCrdtType, InferCrdtStorageJson } from "@pluv/crdt";
+import type { AbstractCrdtDoc, AbstractCrdtDocFactory, CrdtType, InferCrdtJson } from "@pluv/crdt";
 import { noop } from "@pluv/crdt";
 import type { IOEventMessage, IOLike, Id, InferIOInput, InferIOOutput, InputZodLike, JsonObject } from "@pluv/types";
 import fastDeepEqual from "fast-deep-equal";
@@ -20,17 +20,14 @@ import { identity, shallowArrayEqual, useRerender, useSyncExternalStoreWithSelec
 export type CreateRoomBundleOptions<
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
+    TStorage extends Record<string, CrdtType<any, any>> = {},
 > = {
     addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
     initialStorage?: AbstractCrdtDocFactory<TStorage>;
     presence?: InputZodLike<TPresence>;
 };
 
-type BaseRoomProviderProps<
-    TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractCrdtType<any, any>>,
-> = {
+type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
     room: string;
@@ -39,7 +36,7 @@ type BaseRoomProviderProps<
 export type MockedRoomProviderProps<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractCrdtType<any, any>>,
+    TStorage extends Record<string, CrdtType<any, any>>,
 > = BaseRoomProviderProps<TPresence, TStorage> & {
     events?: MockedRoomEvents<TIO>;
 };
@@ -47,7 +44,7 @@ export type MockedRoomProviderProps<
 export type PluvRoomProviderProps<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractCrdtType<any, any>>,
+    TStorage extends Record<string, CrdtType<any, any>>,
 > = BaseRoomProviderProps<TPresence, TStorage> & {
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
@@ -77,7 +74,7 @@ export type EventProxy<TIO extends IOLike> = {
 export interface CreateRoomBundle<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractCrdtType<any, any>>,
+    TStorage extends Record<string, CrdtType<any, any>>,
 > {
     // components
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
@@ -118,9 +115,9 @@ export interface CreateRoomBundle<
     ) => T;
     useRedo: () => () => void;
     useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
-    useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(
+    useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtJson<TStorage[TKey]>>(
         key: TKey,
-        selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData,
+        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;
@@ -133,7 +130,7 @@ export type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any>
 export const createRoomBundle = <
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
+    TStorage extends Record<string, CrdtType<any, any>> = {},
 >(
     client: PluvClient<TIO>,
     options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
@@ -461,9 +458,9 @@ export const createRoomBundle = <
         return room.redo;
     };
 
-    const useStorage = <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(
+    const useStorage = <TKey extends keyof TStorage, TData extends unknown = InferCrdtJson<TStorage[TKey]>>(
         key: TKey,
-        selector = identity as (data: InferCrdtStorageJson<TStorage[TKey]>) => TData,
+        selector = identity as (data: InferCrdtJson<TStorage[TKey]>) => TData,
         options?: SubscriptionHookOptions<TData | null>,
     ): [data: TData | null, sharedType: TStorage[TKey] | null] => {
         const room = useRoom();
@@ -475,12 +472,12 @@ export const createRoomBundle = <
 
         const subscribe = useCallback((onStoreChange: () => void) => room.storage(key, onStoreChange), [key, room]);
 
-        const getSnapshot = useCallback((): InferCrdtStorageJson<TStorage[TKey]> | null => {
-            return room.getStorage(key)?.toJson();
+        const getSnapshot = useCallback((): InferCrdtJson<TStorage[TKey]> | null => {
+            return room.getStorageJson(key);
         }, [key, room]);
 
         const _selector = useCallback(
-            (snapshot: InferCrdtStorageJson<TStorage[TKey]> | null) => {
+            (snapshot: InferCrdtJson<TStorage[TKey]> | null) => {
                 return snapshot === null ? null : selector(snapshot);
             },
             [selector],

package/src/index.ts

@@ -1,5 +1,5 @@
 export { ConnectionState, createClient } from "@pluv/client";
-export type { AbstractCrdtType, InferCrdtStorageJson } from "@pluv/crdt";
+export type { CrdtType, InferCrdtJson } from "@pluv/crdt";
 export type { BaseUser, EventMessage, EventRecord, IOEventMessage } from "@pluv/types";
 export { createBundle } from "./createBundle";
 export type { CreateBundle, PluvProviderProps } from "./createBundle";

package/src/internal/hooks/useSyncExternalStoreWithSelector.ts

@@ -15,8 +15,20 @@ export const useSyncExternalStoreWithSelector = <TSnapshot, TSelection>(
     const _getServerSnapshot = getServerSnapshot
         ? () => {
               const data = getServerSnapshot();
+              const snapshot = selector(data);
+              const compare = isEqual ?? shallowEqual;
+              const cached = cacheRef.current;
 
-              return selector(data);
+              const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+
+              /**
+               * !HACK
+               * @description Memoize only the last snapshot so that we can only rerender on changes
+               * @date June 22, 2024
+               */
+              cacheRef.current = isUnchanged ? cached ?? snapshot : snapshot;
+
+              return cacheRef.current;
           }
         : undefined;