@pluv/react 0.14.1 → 0.16.0

package/src/createBundle.tsx

@@ -1,8 +1,8 @@
 import type { PluvClient } from "@pluv/client";
+import type { AbstractCrdtType } from "@pluv/crdt";
 import type { IOLike, JsonObject } from "@pluv/types";
-import { createContext, FC, ReactNode } from "react";
-import { memo, useContext } from "react";
-import type { AbstractType } from "yjs";
+import type { FC, ReactNode } from "react";
+import { createContext, memo, useContext } from "react";
 import type {
     CreateRoomBundle,
     CreateRoomBundleOptions,
@@ -17,16 +17,16 @@ export interface CreateBundle<TIO extends IOLike> {
     // factories
     createRoomBundle: <
         TPresence extends JsonObject = {},
-        TStorage extends Record<string, AbstractType<any>> = {},
+        TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
     >(
-        options?: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
+        options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
     ) => CreateRoomBundle<TIO, TPresence, TStorage>;
 
     // components
     PluvProvider: FC<PluvProviderProps>;
 
     // hooks
-    usePluvClient: () => PluvClient<TIO>;
+    useClient: () => PluvClient<TIO>;
 }
 
 export const createBundle = <TIO extends IOLike>(
@@ -53,19 +53,19 @@ export const createBundle = <TIO extends IOLike>(
 
     PluvProvider.displayName = "PluvProvider";
 
-    const usePluvClient = (): PluvClient<TIO> => useContext(PluvContext);
+    const useClient = (): PluvClient<TIO> => useContext(PluvContext);
 
     const createRoomBundle = <
         TPresence extends JsonObject = {},
-        TStorage extends Record<string, AbstractType<any>> = {},
+        TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
     >(
-        options: CreateRoomBundleOptions<TIO, TPresence, TStorage> = {},
+        options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
     ): CreateRoomBundle<TIO, TPresence, TStorage> =>
         _createRoomBundle(client, options);
 
     return {
         createRoomBundle,
         PluvProvider,
-        usePluvClient,
+        useClient,
     };
 };

package/src/createRoomBundle.tsx

@@ -1,16 +1,21 @@
 import type {
     AbstractRoom,
-    InferYjsSharedTypeJson,
     MockedRoomEvents,
     PluvClient,
     PluvRoom,
     PluvRoomAddon,
     PluvRoomDebug,
-    TrackOriginOptions,
     UserInfo,
     WebSocketConnection,
 } from "@pluv/client";
 import { MockedRoom } from "@pluv/client";
+import type {
+    AbstractCrdtDoc,
+    AbstractCrdtDocFactory,
+    AbstractCrdtType,
+    InferCrdtStorageJson,
+} from "@pluv/crdt";
+import { noop } from "@pluv/crdt";
 import type {
     IOEventMessage,
     IOLike,
@@ -30,7 +35,6 @@ import {
     useEffect,
     useState,
 } from "react";
-import type { AbstractType, Doc } from "yjs";
 import {
     identity,
     shallowArrayEqual,
@@ -41,16 +45,16 @@ import {
 export type CreateRoomBundleOptions<
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractType<any>> = {},
+    TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
 > = {
     addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
-    initialStorage?: () => TStorage;
+    initialStorage?: AbstractCrdtDocFactory<TStorage>;
     presence?: InputZodLike<TPresence>;
-} & TrackOriginOptions;
+};
 
 type BaseRoomProviderProps<
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractType<any>>,
+    TStorage extends Record<string, AbstractCrdtType<any, any>>,
 > = {
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
@@ -62,7 +66,7 @@ type BaseRoomProviderProps<
 export type MockedRoomProviderProps<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractType<any>>,
+    TStorage extends Record<string, AbstractCrdtType<any, any>>,
 > = BaseRoomProviderProps<TPresence, TStorage> & {
     events?: MockedRoomEvents<TIO>;
 };
@@ -70,7 +74,7 @@ export type MockedRoomProviderProps<
 export type PluvRoomProviderProps<
     TIO extends IOLike,
     TPresence extends JsonObject,
-    TStorage extends Record<string, AbstractType<any>>,
+    TStorage extends Record<string, AbstractCrdtType<any, any>>,
 > = BaseRoomProviderProps<TPresence, TStorage> & {
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
@@ -87,73 +91,83 @@ 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, AbstractCrdtType<any, any>>,
 > {
     // components
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
 
     // hooks
-    usePluvBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(
+    useBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(
         event: TEvent,
         data: Id<InferIOInput<TIO>[TEvent]>,
     ) => void;
-    usePluvCanRedo: () => boolean;
-    usePluvCanUndo: () => boolean;
-    usePluvConnection: <T extends unknown = WebSocketConnection>(
+    useCanRedo: () => boolean;
+    useCanUndo: () => boolean;
+    useConnection: <T extends unknown = WebSocketConnection>(
         selector: (connection: WebSocketConnection) => T,
         options?: SubscriptionHookOptions<Id<T>>,
     ) => Id<T>;
-    usePluvDoc: () => Doc;
-    usePluvEvent: <TType extends keyof InferIOOutput<TIO>>(
+    useDoc: () => AbstractCrdtDoc<TStorage>;
+    useEvent: <TType extends keyof InferIOOutput<TIO>>(
         type: TType,
         callback: (data: Id<IOEventMessage<TIO, TType>>) => void,
     ) => void;
-    usePluvMyPresence: <T extends unknown = TPresence>(
+    useMyPresence: <T extends unknown = TPresence>(
         selector?: (myPresence: TPresence) => T,
         options?: SubscriptionHookOptions<Id<T> | null>,
     ) => [
         myPresence: Id<T>,
         updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>,
     ];
-    usePluvMyself: <T extends unknown = UserInfo<TIO, TPresence>>(
+    useMyself: <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>>(
+    useOther: <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>>(
+    useOthers: <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: <
+    useRedo: () => () => void;
+    useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
+    useStorage: <
         TKey extends keyof TStorage,
-        TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>,
+        TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>,
     >(
         key: TKey,
-        selector?: (data: InferYjsSharedTypeJson<TStorage[TKey]>) => TData,
-        options?: SubscriptionHookOptions<TData>,
-    ) => [data: TData, sharedType: TStorage[TKey]];
-    usePluvTransact: () => (
+        selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData,
+        options?: SubscriptionHookOptions<TData | null>,
+    ) => [data: TData | null, sharedType: TStorage[TKey] | null];
+    useTransact: () => (
         fn: (storage: TStorage) => void,
         origin?: string,
     ) => void;
-    usePluvUndo: () => () => void;
+    useUndo: () => () => void;
 }
 
+export type InferRoomStorage<
+    TRoomBundle extends CreateRoomBundle<any, any, any>,
+> =
+    TRoomBundle extends CreateRoomBundle<any, any, infer IStorage>
+        ? IStorage
+        : never;
+
 export const createRoomBundle = <
     TIO extends IOLike,
     TPresence extends JsonObject = {},
-    TStorage extends Record<string, AbstractType<any>> = {},
+    TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
 >(
     client: PluvClient<TIO>,
-    options: CreateRoomBundleOptions<TIO, TPresence, TStorage> = {},
+    options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
 ): CreateRoomBundle<TIO, TPresence, TStorage> => {
+    const _initialStorage = (options.initialStorage ??
+        noop.doc()) as AbstractCrdtDocFactory<TStorage>;
+
     /**
      * !HACK
      * @description We'll let the context error out if the room is not provided,
@@ -182,15 +196,13 @@ export const createRoomBundle = <
 
         const [room] = useState<MockedRoom<TIO, TPresence, TStorage>>(() => {
             return new MockedRoom<TIO, TPresence, TStorage>(_room, {
-                captureTimeout: options.captureTimeout,
                 events,
                 initialPresence,
                 initialStorage:
                     typeof initialStorage === "function"
-                        ? initialStorage
-                        : options.initialStorage,
+                        ? _initialStorage.getFactory(initialStorage)
+                        : _initialStorage,
                 presence: options.presence,
-                trackedOrigins: options.trackedOrigins,
             });
         });
 
@@ -223,16 +235,14 @@ 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:
                     typeof initialStorage === "function"
-                        ? initialStorage
-                        : options.initialStorage,
+                        ? _initialStorage.getFactory(initialStorage)
+                        : _initialStorage,
                 presence: options.presence,
                 onAuthorizationFail,
-                trackedOrigins: options.trackedOrigins,
             });
         });
 
@@ -263,13 +273,13 @@ export const createRoomBundle = <
 
     PluvRoomProvider.displayName = "PluvRoomProvider";
 
-    const usePluvRoom = () => useContext(PluvRoomContext);
+    const useRoom = () => useContext(PluvRoomContext);
 
-    const usePluvBroadcast = (): (<TEvent extends keyof InferIOInput<TIO>>(
+    const useBroadcast = (): (<TEvent extends keyof InferIOInput<TIO>>(
         event: TEvent,
         data: Id<InferIOInput<TIO>[TEvent]>,
     ) => void) => {
-        const room = usePluvRoom();
+        const room = useRoom();
 
         return useCallback(
             <TEvent extends keyof InferIOInput<TIO>>(
@@ -282,8 +292,8 @@ export const createRoomBundle = <
         );
     };
 
-    const usePluvCanRedo = (): boolean => {
-        const room = usePluvRoom();
+    const useCanRedo = (): boolean => {
+        const room = useRoom();
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => room.storageRoot(onStoreChange),
@@ -302,8 +312,8 @@ export const createRoomBundle = <
         return canRedo;
     };
 
-    const usePluvCanUndo = (): boolean => {
-        const room = usePluvRoom();
+    const useCanUndo = (): boolean => {
+        const room = useRoom();
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => room.storageRoot(onStoreChange),
@@ -322,11 +332,11 @@ export const createRoomBundle = <
         return canRedo;
     };
 
-    const usePluvConnection = <T extends unknown = WebSocketConnection>(
+    const useConnection = <T extends unknown = WebSocketConnection>(
         selector = identity as (connection: WebSocketConnection) => T,
         options?: SubscriptionHookOptions<Id<T>>,
     ): Id<T> => {
-        const room = usePluvRoom();
+        const room = useRoom();
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
@@ -351,17 +361,17 @@ export const createRoomBundle = <
         );
     };
 
-    const usePluvDoc = () => {
-        const room = usePluvRoom();
+    const useDoc = () => {
+        const room = useRoom();
 
         return room.getDoc();
     };
 
-    const usePluvEvent = <TType extends keyof InferIOOutput<TIO>>(
+    const useEvent = <TType extends keyof InferIOOutput<TIO>>(
         type: TType,
         callback: (data: Id<IOEventMessage<TIO, TType>>) => void,
     ): void => {
-        const room = usePluvRoom();
+        const room = useRoom();
 
         useEffect(() => {
             const unsubscribe = room.event(type, callback);
@@ -372,11 +382,11 @@ export const createRoomBundle = <
         }, [callback, room, type]);
     };
 
-    const usePluvMyPresence = <T extends unknown = TPresence>(
+    const useMyPresence = <T extends unknown = TPresence>(
         selector = identity as (myPresence: TPresence) => T,
         options?: SubscriptionHookOptions<Id<T> | null>,
     ): [Id<T>, Dispatch<UpdateMyPresenceAction<TPresence>>] => {
-        const room = usePluvRoom();
+        const room = useRoom();
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
@@ -416,11 +426,11 @@ export const createRoomBundle = <
         return [myPresence, updateMyPresence];
     };
 
-    const usePluvMyself = <T extends unknown = UserInfo<TIO, TPresence>>(
+    const useMyself = <T extends unknown = UserInfo<TIO, TPresence>>(
         selector = identity as (myself: Id<UserInfo<TIO, TPresence>>) => T,
         options?: SubscriptionHookOptions<Id<T> | null>,
     ): Id<T> | null => {
-        const room = usePluvRoom();
+        const room = useRoom();
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
@@ -447,12 +457,12 @@ export const createRoomBundle = <
         );
     };
 
-    const usePluvOther = <T extends unknown = UserInfo<TIO, TPresence>>(
+    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 => {
-        const room = usePluvRoom();
+        const room = useRoom();
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
@@ -482,13 +492,13 @@ export const createRoomBundle = <
         );
     };
 
-    const usePluvOthers = <T extends unknown = UserInfo<TIO, TPresence>>(
+    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 room = usePluvRoom();
+        const room = useRoom();
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
@@ -510,38 +520,43 @@ export const createRoomBundle = <
         );
     };
 
-    const usePluvRedo = () => {
-        const room = usePluvRoom();
+    const useRedo = () => {
+        const room = useRoom();
 
         return room.redo;
     };
 
-    const usePluvStorage = <
+    const useStorage = <
         TKey extends keyof TStorage,
-        TData extends unknown = InferYjsSharedTypeJson<TStorage[TKey]>,
+        TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>,
     >(
         key: TKey,
         selector = identity as (
-            data: InferYjsSharedTypeJson<TStorage[TKey]>,
+            data: InferCrdtStorageJson<TStorage[TKey]>,
         ) => TData,
-        options?: SubscriptionHookOptions<TData>,
-    ): [data: TData, sharedType: TStorage[TKey]] => {
-        const room = usePluvRoom();
+        options?: SubscriptionHookOptions<TData | null>,
+    ): [data: TData | null, sharedType: TStorage[TKey] | null] => {
+        const room = useRoom();
+        const rerender = useRerender();
+
+        room.subscribe("storage-loaded", () => {
+            rerender();
+        });
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => room.storage(key, onStoreChange),
             [key, room],
         );
 
-        const getSnapshot = useCallback((): InferYjsSharedTypeJson<
+        const getSnapshot = useCallback((): InferCrdtStorageJson<
             TStorage[TKey]
-        > => {
-            return room.getStorage(key).toJSON();
+        > | null => {
+            return room.getStorage(key)?.toJson();
         }, [key, room]);
 
         const _selector = useCallback(
-            (snapshot: InferYjsSharedTypeJson<TStorage[TKey]>) => {
-                return selector(snapshot);
+            (snapshot: InferCrdtStorageJson<TStorage[TKey]> | null) => {
+                return snapshot === null ? null : selector(snapshot);
             },
             [selector],
         );
@@ -554,19 +569,19 @@ export const createRoomBundle = <
             options?.isEqual ?? fastDeepEqual,
         );
 
-        const sharedType = room.getStorage(key);
+        const sharedType = room.getStorage(key) ?? null;
 
         return [data, sharedType];
     };
 
-    const usePluvTransact = () => {
-        const room = usePluvRoom();
+    const useTransact = () => {
+        const room = useRoom();
 
         return room.transact;
     };
 
-    const usePluvUndo = () => {
-        const room = usePluvRoom();
+    const useUndo = () => {
+        const room = useRoom();
 
         return room.undo;
     };
@@ -577,20 +592,20 @@ export const createRoomBundle = <
         PluvRoomProvider,
 
         // hooks
-        usePluvBroadcast,
-        usePluvCanRedo,
-        usePluvCanUndo,
-        usePluvConnection,
-        usePluvDoc,
-        usePluvEvent,
-        usePluvMyPresence,
-        usePluvMyself,
-        usePluvOther,
-        usePluvOthers,
-        usePluvRedo,
-        usePluvRoom,
-        usePluvStorage,
-        usePluvTransact,
-        usePluvUndo,
+        useBroadcast,
+        useCanRedo,
+        useCanUndo,
+        useConnection,
+        useDoc,
+        useEvent,
+        useMyPresence,
+        useMyself,
+        useOther,
+        useOthers,
+        useRedo,
+        useRoom,
+        useStorage,
+        useTransact,
+        useUndo,
     };
 };

package/src/index.ts

@@ -1,16 +1,17 @@
-export type { AbstractType } from "@pluv/client";
-export { ConnectionState, createClient, y } from "@pluv/client";
+export { ConnectionState, createClient } from "@pluv/client";
+export type { AbstractCrdtType, InferCrdtStorageJson } from "@pluv/crdt";
 export type {
     BaseUser,
     EventMessage,
     EventRecord,
     IOEventMessage,
 } from "@pluv/types";
-export type { CreateBundle, PluvProviderProps } from "./createBundle";
 export { createBundle } from "./createBundle";
+export type { CreateBundle, PluvProviderProps } from "./createBundle";
 export type {
     CreateRoomBundle,
     CreateRoomBundleOptions,
+    InferRoomStorage,
     PluvRoomProviderProps,
     SubscriptionHookOptions,
 } from "./createRoomBundle";