@pluv/react 0.18.0 → 0.20.0

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;
@@ -65,7 +62,7 @@ export type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOI
     event: TEvent,
     data: Id<InferIOInput<TIO>[TEvent]>,
 ) => void) & {
-    [event in keyof InferIOInput<TIO>]: (callback: Id<InferIOInput<TIO>[event]>) => void;
+    [event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
 };
 
 export type EventProxy<TIO extends IOLike> = {
@@ -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>>;
@@ -110,17 +107,17 @@ export interface CreateRoomBundle<
     useOther: <T extends unknown = UserInfo<TIO, TPresence>>(
         connectionId: string,
         selector?: (other: UserInfo<TIO, TPresence>) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>,
-    ) => Id<T> | null;
-    useOthers: <T extends unknown = UserInfo<TIO, TPresence>>(
-        selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[],
-        options?: SubscriptionHookOptions<readonly Id<T>[]>,
-    ) => readonly Id<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 = 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>,
@@ -258,9 +255,9 @@ export const createRoomBundle = <
 
         const getSnapshot = useCallback((): boolean => room.canUndo(), [room]);
 
-        const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+        const canUndo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
 
-        return canRedo;
+        return canUndo;
     };
 
     const useConnection = <T extends unknown = WebSocketConnection>(
@@ -350,16 +347,7 @@ export const createRoomBundle = <
             options?.isEqual ?? fastDeepEqual,
         );
 
-        const updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>> = useCallback(
-            (value: UpdateMyPresenceAction<TPresence>): void => {
-                const presence = typeof value === "function" ? value(room.getMyPresence()) : value;
-
-                room.updateMyPresence(presence);
-            },
-            [room],
-        );
-
-        return [myPresence, updateMyPresence];
+        return [myPresence, room.updateMyPresence];
     };
 
     const useMyself = <T extends unknown = UserInfo<TIO, TPresence>>(
@@ -396,8 +384,8 @@ export const createRoomBundle = <
     const useOther = <T extends unknown = UserInfo<TIO, TPresence>>(
         connectionId: string,
         selector = identity as (other: UserInfo<TIO, TPresence>) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>,
-    ): Id<T> | null => {
+        options?: SubscriptionHookOptions<T | null>,
+    ): T | null => {
         const room = useRoom();
 
         const subscribe = useCallback(
@@ -411,7 +399,7 @@ export const createRoomBundle = <
 
         const _selector = useCallback(
             (snapshot: Id<UserInfo<TIO, TPresence>> | null) => {
-                return !snapshot ? null : (selector(snapshot) as Id<T>);
+                return !snapshot ? null : (selector(snapshot) as T);
             },
             [selector],
         );
@@ -425,10 +413,10 @@ export const createRoomBundle = <
         );
     };
 
-    const useOthers = <T extends unknown = UserInfo<TIO, TPresence>>(
-        selector = identity as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[],
-        options?: SubscriptionHookOptions<readonly Id<T>[]>,
-    ): readonly Id<T>[] => {
+    const useOthers = <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(
+        selector = identity as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T,
+        options?: SubscriptionHookOptions<T>,
+    ): T => {
         const room = useRoom();
 
         const subscribe = useCallback(
@@ -444,8 +432,23 @@ export const createRoomBundle = <
             subscribe,
             getSnapshot,
             getSnapshot,
-            selector as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => Id<T>[],
-            options?.isEqual ?? shallowArrayEqual,
+            selector as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T,
+            options?.isEqual ??
+                ((a, b) => {
+                    /**
+                     * !HACK
+                     * @description Assume the return type will always be an array when this occurs
+                     * and do a shallow comparison instead like how standard React dependency
+                     * arrays work. This is for performance's sake and may lead to bugs if the
+                     * selector doesn't always return an array
+                     * @date June 22, 2024
+                     */
+                    if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+                        return shallowArrayEqual(a, b);
+                    }
+
+                    return fastDeepEqual(a, b);
+                }),
         );
     };
 
@@ -455,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();
@@ -469,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/index.ts

@@ -1,3 +1,3 @@
+export { useNoSsr } from "./useNoSsr";
 export { useRerender } from "./useRerender";
-export { useSyncExternalStore } from "./useSyncExternalStore";
 export { useSyncExternalStoreWithSelector } from "./useSyncExternalStoreWithSelector";

package/src/internal/hooks/useNoSsr.ts

@@ -0,0 +1,18 @@
+import { useCallback, useEffect, useState } from "react";
+
+export type NoSsrFunction = <T = null>(value: T | (() => T), fallback?: T) => T;
+
+export const useNoSsr = (): NoSsrFunction => {
+    const [didMount, setDidMount] = useState<boolean>(false);
+
+    useEffect(() => setDidMount(typeof window !== "undefined"), []);
+
+    const noSsr = useCallback(
+        <T = null>(value: T | (() => T), fallback: T = null as T): T => {
+            return didMount ? (typeof value !== "function" ? value : (value as () => T)()) : fallback;
+        },
+        [didMount],
+    );
+
+    return noSsr;
+};

package/src/internal/hooks/useSyncExternalStoreWithSelector.ts

@@ -1 +1,56 @@
-export { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
+import { useRef, useSyncExternalStore } from "react";
+import { shallowEqual } from "../utils";
+import { useNoSsr } from "./useNoSsr";
+
+export const useSyncExternalStoreWithSelector = <TSnapshot, TSelection>(
+    subscribe: (onStoreChange: () => void) => () => void,
+    getClientSnapshot: () => TSnapshot,
+    getServerSnapshot: undefined | null | (() => TSnapshot),
+    selector: (snapshot: TSnapshot) => TSelection,
+    isEqual?: (a: TSelection, b: TSelection) => boolean,
+): TSelection => {
+    const noSsr = useNoSsr();
+    const cacheRef = useRef<TSelection | null>(null);
+
+    const _getServerSnapshot = getServerSnapshot
+        ? () => {
+              const data = getServerSnapshot();
+              const snapshot = selector(data);
+              const compare = isEqual ?? shallowEqual;
+              const cached = cacheRef.current;
+
+              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;
+
+    const _getClientSnapshot = () => {
+        const data = getClientSnapshot();
+        const snapshot = selector(data);
+        const compare = isEqual ?? shallowEqual;
+        const cached = cacheRef.current;
+
+        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;
+    };
+
+    const result = useSyncExternalStore(subscribe, _getClientSnapshot, _getServerSnapshot);
+
+    return typeof window !== "undefined" ? noSsr(result, _getServerSnapshot?.()) : result;
+};

package/src/internal/utils/index.ts

@@ -1,2 +1,3 @@
 export { identity } from "./identity";
 export { shallowArrayEqual } from "./shallowArrayEqual";
+export { shallowEqual } from "./shallowEqual";

package/src/internal/utils/shallowEqual.ts

@@ -0,0 +1 @@
+export const shallowEqual = (a: any, b: any): boolean => a === b;

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
 	"extends": "@pluv/tsconfig/react-library.json",
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-	"exclude": ["node_modules"]
+	"exclude": ["node_modules"],
+	"compilerOptions": {
+		"lib": ["dom", "esnext"]
+	}
 }

package/src/internal/hooks/useSyncExternalStore.ts

@@ -1,10 +0,0 @@
-import { useSyncExternalStoreWithSelector } from "./useSyncExternalStoreWithSelector";
-import { identity } from "../utils";
-
-export const useSyncExternalStore = <TSnapshot extends unknown>(
-    subscribe: (onStoreChange: () => void) => () => void,
-    getSnapshot: () => TSnapshot,
-    getServerSnapshot: undefined | null | (() => TSnapshot),
-) => {
-    return useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, identity);
-};