@pluv/react 0.17.3 → 0.19.0

package/.turbo/turbo-build.log

@@ -1,18 +1,18 @@
 
-> @pluv/react@0.17.3 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.19.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.0.2
-CLI Target: es6
-ESM Build start
-CJS Build start
-ESM dist/index.mjs 9.96 KB
-ESM ⚡️ Build success in 80ms
-CJS dist/index.js 12.53 KB
-CJS ⚡️ Build success in 81ms
-DTS Build start
-DTS ⚡️ Build success in 4595ms
-DTS dist/index.d.mts 5.05 KB
-DTS dist/index.d.ts  5.05 KB
+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

package/CHANGELOG.md

@@ -1,5 +1,178 @@
 # @pluv/react
 
+## 0.19.0
+
+### Minor Changes
+
+- 798e32d: **Breaking**: useOthers now allows returning any data besides arrays when using a custom selector.
+- 8450306: **Breaking**: Require minimum react version of ^18.0.0.
+
+### Patch Changes
+
+- 607afe3: Update the `updateMyPresence` function from `useMyPresence` to simply forward the function from the `PluvRoom`. This means all `updateMyPresence` functions should be the same underlying reference across all `useMyPresence` hooks.
+- Updated dependencies [137444b]
+- Updated dependencies [f5e4370]
+  - @pluv/client@0.19.0
+  - @pluv/crdt@0.19.0
+  - @pluv/types@0.19.0
+
+## 0.18.0
+
+### Minor Changes
+
+- 99b5ca9: ## Breaking Changes
+
+  - `@pluv/io` has been updated to introduce `PluvProcedure`, `PluvRouter` and `PluvServer`. This change is intended to improve the ergonomics of declaring events and simplifying inferences of event types.
+
+  ### Before:
+
+  ```ts
+  // backend/io.ts
+
+  import { createIO } from "@pluv/io";
+  import { createPluvHandler, platformNode } from "@pluv/platform-node";
+  import { z } from "zod";
+
+  export const io = createIO({
+    platform: platformNode(),
+  })
+    .event("SEND_MESSAGE", {
+      input: z.object({ message: z.string() }),
+      resolver: ({ message }) => ({ RECEIVE_MESSAGE: { message } }),
+    })
+    .event("DOUBLE_VALUE", {
+      input: z.object({ value: z.number() }),
+      resolver: ({ value }) => ({ VALUE_DOUBLED: { value: value * 2 } }),
+    });
+
+  const Pluv = createPluvHandler({
+    io,
+    /* ... */
+  });
+  ```
+
+  ```ts
+  // frontend/pluv.ts
+
+  import { createClient } from "@pluv/react";
+  import type { io } from "../backend/io";
+
+  const client = createClient<typeof io>({
+    /* ... */
+  });
+  ```
+
+  ### Now:
+
+  ```ts
+  import { createIO } from "@pluv/io";
+  import { createPluvHandler, platformNode } from "@pluv/platform-node";
+  import { z } from "zod";
+
+  const io = createIO({
+    platform: platformNode(),
+  });
+
+  const router = io.router({
+    SEND_MESSAGE: io.procedure
+      .input(z.object({ message: z.string() }))
+      .broadcast(({ message }) => ({
+        RECEIVE_MESSAGE: { message },
+      })),
+    DOUBLE_VALUE: io.procedure
+      .input(z.object({ value: z.number() }))
+      .broadcast(({ value }) => ({
+        VALUE_DOUBLED: { value: value * 2 },
+      })),
+  });
+
+  export const ioServer = io.server({ router });
+
+  const Pluv = createPluvHandler({
+    io: ioServer, // <- This uses the PluvServer now
+    /* ... */
+  });
+  ```
+
+  ```ts
+  // frontend/pluv.ts
+
+  import { createClient } from "@pluv/react";
+  import type { ioServer } from "../backend/io";
+
+  // This users the PluvServer type now
+  const client = createClient<typeof ioServer>({
+    /* ... */
+  });
+  ```
+
+  - `PluvRouter` instances can also be merged via the `mergeRouters` method, which effectively performs an `Object.assign` of the events object and returns a new `PluvRouter` with the correct types:
+
+  ```ts
+  const router = io.mergeRouters(router1, router2);
+  ```
+
+- 07a7725: Added broadcast proxy as a new way to broadcast events to other users.
+
+  ```tsx
+  // backend
+
+  const router = io.router({
+    SEND_MESSAGE: io.procedure
+      .input(z.object({ message: z.string() }))
+      .broadcast(({ message }) => ({ RECEIVE_MESSAGE: { message } })),
+  });
+
+  // frontend
+  const pluv = createRoomBundle(/* ... */);
+
+  const broadcast = pluv.useBroadcast();
+
+  // Both of the examples below are equivalent.
+
+  broadcast("SEND_MESSAGE", { message: "Hello world~!" });
+
+  broadcast.SEND_MESSAGE({ message: "Hello world~!" });
+  ```
+
+### Patch Changes
+
+- e587c18: Added event proxy as a new way to listen to events.
+
+  ```tsx
+  // backend
+
+  const router = io.router({
+    SEND_MESSAGE: io.procedure
+      .input(z.object({ message: z.string() }))
+      .broadcast(({ message }) => ({ RECEIVE_MESSAGE: { message } })),
+  });
+
+  // frontend
+  const pluv = createRoomBundle(/* ... */);
+
+  // Both of the examples below are equivalent.
+
+  pluv.useEvent("RECEIVE_MESSAGE", ({ data }) => {
+    const { message } = data;
+
+    console.log(message);
+  });
+
+  pluv.event.RECEIVE_MESSAGE.useEvent(({ data }) => {
+    const { message } = data;
+
+    console.log(message);
+  });
+  ```
+
+- Updated dependencies [06c67be]
+- Updated dependencies [99b5ca9]
+- Updated dependencies [df1342c]
+  - @pluv/client@0.18.0
+  - @pluv/types@0.18.0
+  - @pluv/crdt@0.18.0
+
 ## 0.17.3
 
 ### Patch Changes

package/README.md

@@ -76,18 +76,28 @@ export const {
 
 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([
@@ -120,7 +130,7 @@ export const MyPage: FC<Record<string, never>> = () => {
 export const MyRoom: FC<Record<string, never>> = () => {
     const broadcast = useBroadcast();
 
-    useEvent("RECEIVE_MESSAGE", ({ data }) => {
+    event.RECEIVE_MESSAGE.useEvent(({ data }) => {
         // data is typed as { message: string }
         console.log(data.message);
     });
@@ -128,7 +138,7 @@ export const MyRoom: FC<Record<string, never>> = () => {
     return (
         <button
             onClick={() => {
-                broadcast("SEND_MESSAGE", {
+                broadcast.SEND_MESSAGE({
                     // TypeScript will require that message is typed as string
                     message: "Hello world!",
                 });

package/dist/index.d.mts

@@ -3,7 +3,7 @@ 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 { IOLike, JsonObject, InputZodLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
+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';
 
@@ -32,22 +32,28 @@ interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;
 }
 type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
+type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
+    [event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
+};
+type EventProxy<TIO extends IOLike> = {
+    [event in keyof InferIOOutput<TIO>]: {
+        useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
+    };
+};
 interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
-    useBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
+    event: EventProxy<TIO>;
+    useBroadcast: () => BroadcastProxy<TIO>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
     useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
     useDoc: () => AbstractCrdtDoc<TStorage>;
     useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<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>>
-    ];
+    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<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>[];
+    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 = InferCrdtStorageJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
@@ -64,6 +70,6 @@ interface CreateBundle<TIO extends IOLike> {
     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<_pluv_types.IOAuthorize<any, any, any>, {}>>(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

@@ -3,7 +3,7 @@ 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 { IOLike, JsonObject, InputZodLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
+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';
 
@@ -32,22 +32,28 @@ interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;
 }
 type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
+type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
+    [event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
+};
+type EventProxy<TIO extends IOLike> = {
+    [event in keyof InferIOOutput<TIO>]: {
+        useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
+    };
+};
 interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
-    useBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
+    event: EventProxy<TIO>;
+    useBroadcast: () => BroadcastProxy<TIO>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
     useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
     useDoc: () => AbstractCrdtDoc<TStorage>;
     useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<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>>
-    ];
+    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<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>[];
+    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 = InferCrdtStorageJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
@@ -64,6 +70,6 @@ interface CreateBundle<TIO extends IOLike> {
     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<_pluv_types.IOAuthorize<any, any, any>, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
 
 export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };