@pluv/react 0.1.2 → 0.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@0.1.2 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.2.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
@@ -9,9 +9,9 @@
 ESM Build start
 CJS Build start
 ESM dist/index.mjs 7.70 KB
-ESM ⚡️ Build success in 144ms
-CJS dist/index.js 9.71 KB
-CJS ⚡️ Build success in 143ms
+ESM ⚡️ Build success in 61ms
+CJS dist/index.js 9.70 KB
+CJS ⚡️ Build success in 69ms
 DTS Build start
-DTS ⚡️ Build success in 5827ms
+DTS ⚡️ Build success in 5341ms
 DTS dist/index.d.ts 3.92 KB

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @pluv/react
 
+## 0.2.0
+
+### Minor Changes
+
+- 95b5ef8: breaking: update PluvRoom.broadcast api
+
+### Patch Changes
+
+- Updated dependencies [95b5ef8]
+  - @pluv/client@0.2.0
+  - @pluv/types@0.1.2
+
+## 0.1.3
+
+### Patch Changes
+
+- fe80d7b: added preview disclaimer about breaking changes in the readme
+- Updated dependencies [fe80d7b]
+  - @pluv/client@0.1.3
+  - @pluv/types@0.1.2
+
 ## 0.1.2
 
 ### Patch Changes

package/README.md

@@ -1,3 +1,6 @@
+> **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">
@@ -23,7 +26,9 @@
   <img src="https://img.shields.io/badge/docs-coming%20soon!-blue" alt="Docs coming soon!" />
 </p>
 
-<img src="https://github.com/pluv-io/pluv/blob/master/assets/demo-events.gif?raw=true" alt="Demo" />
+<p align="center">
+  <img src="https://github.com/pluv-io/pluv/blob/master/assets/demo-events.gif?raw=true" alt="Demo" />
+</p>
 
 ## `@pluv/react`
 
@@ -127,12 +132,9 @@ export const MyRoom: FC<Record<string, never>> = () => {
     return (
         <button
             onClick={() => {
-                broadcast({
-                    type: "SEND_MESSAGE",
-                    data: {
-                        // TypeScript will require that message is typed as string
-                        message: "Hello world!",
-                    }
+                broadcast("SEND_MESSAGE", {
+                    // TypeScript will require that message is typed as string
+                    message: "Hello world!",
                 });
             }}
             type="button"

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { PluvRoomDebug, WebSocketConnection, UserInfo, PluvRoom, InferYjsSharedTypeJson, PluvClient } from '@pluv/client';
 export { AbstractType, ConnectionState, createClient, y } from '@pluv/client';
 import * as _pluv_types from '@pluv/types';
-import { JsonObject, InputZodLike, IOLike, Id, InferEventMessage, InferIOInput, InferIOOutput, IOEventMessage } from '@pluv/types';
+import { JsonObject, InputZodLike, IOLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
 import { ReactNode, FC, Dispatch } from 'react';
 import { AbstractType } from 'yjs';
@@ -30,7 +30,7 @@ interface SubscriptionHookOptions<T extends unknown> {
 type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
 interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractType<any>>> {
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
-    usePluvBroadcast: <TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>>() => (message: TMessage) => void;
+    usePluvBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
     usePluvConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
     usePluvEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
     usePluvMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [

package/dist/index.js

@@ -112,8 +112,8 @@ var createRoomBundle = (client, options = {}) => {
   const usePluvBroadcast = () => {
     const room = usePluvRoom();
     return (0, import_react3.useCallback)(
-      (message) => {
-        room.broadcast(message);
+      (event, data) => {
+        room.broadcast(event, data);
       },
       [room]
     );
@@ -174,10 +174,10 @@ var createRoomBundle = (client, options = {}) => {
       (value) => {
         const oldMyPresence = room.getMyPresence();
         const presence = typeof value === "function" ? value(oldMyPresence) : value;
-        room.broadcast({
-          type: "$UPDATE_PRESENCE",
-          data: { presence }
-        });
+        room.broadcast(
+          "$UPDATE_PRESENCE",
+          { presence }
+        );
       },
       [room]
     );

package/dist/index.mjs

@@ -79,8 +79,8 @@ var createRoomBundle = (client, options = {}) => {
   const usePluvBroadcast = () => {
     const room = usePluvRoom();
     return useCallback2(
-      (message) => {
-        room.broadcast(message);
+      (event, data) => {
+        room.broadcast(event, data);
       },
       [room]
     );
@@ -141,10 +141,10 @@ var createRoomBundle = (client, options = {}) => {
       (value) => {
         const oldMyPresence = room.getMyPresence();
         const presence = typeof value === "function" ? value(oldMyPresence) : value;
-        room.broadcast({
-          type: "$UPDATE_PRESENCE",
-          data: { presence }
-        });
+        room.broadcast(
+          "$UPDATE_PRESENCE",
+          { presence }
+        );
       },
       [room]
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -17,24 +17,24 @@
     "access": "public"
   },
   "dependencies": {
-    "@pluv/client": "^0.1.2",
-    "@pluv/types": "^0.1.1",
     "@types/use-sync-external-store": "^0.0.3",
     "fast-deep-equal": "^3.1.3",
-    "use-sync-external-store": "^1.2.0"
+    "use-sync-external-store": "^1.2.0",
+    "@pluv/client": "^0.2.0",
+    "@pluv/types": "^0.1.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
     "yjs": "^13.0.0"
   },
   "devDependencies": {
-    "@pluv/tsconfig": "^0.1.1",
     "@types/react": "18.0.26",
-    "eslint-config-pluv": "^0.1.1",
     "react": "18.2.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
-    "yjs": "^13.5.44"
+    "yjs": "^13.5.44",
+    "@pluv/tsconfig": "^0.1.2",
+    "eslint-config-pluv": "^0.1.3"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createRoomBundle.tsx

@@ -8,7 +8,6 @@ import type {
 import type { PluvRoom } from "@pluv/client";
 import type {
     Id,
-    InferEventMessage,
     InferIOInput,
     InferIOOutput,
     InputZodLike,
@@ -68,9 +67,10 @@ export interface CreateRoomBundle<
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
 
     // hooks
-    usePluvBroadcast: <
-        TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>
-    >() => (message: TMessage) => void;
+    usePluvBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(
+        event: TEvent,
+        data: Id<InferIOInput<TIO>[TEvent]>
+    ) => void;
     usePluvConnection: <T extends unknown = WebSocketConnection>(
         selector: (connection: WebSocketConnection) => T,
         options?: SubscriptionHookOptions<Id<T>>
@@ -185,14 +185,18 @@ export const createRoomBundle = <
 
     const usePluvRoom = () => useContext(PluvRoomContext);
 
-    const usePluvBroadcast = <
-        TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>
-    >(): ((message: TMessage) => void) => {
+    const usePluvBroadcast = (): (<TEvent extends keyof InferIOInput<TIO>>(
+        event: TEvent,
+        data: Id<InferIOInput<TIO>[TEvent]>
+    ) => void) => {
         const room = usePluvRoom();
 
         return useCallback(
-            (message: TMessage) => {
-                room.broadcast(message);
+            <TEvent extends keyof InferIOInput<TIO>>(
+                event: TEvent,
+                data: Id<InferIOInput<TIO>[TEvent]>
+            ) => {
+                room.broadcast(event, data);
             },
             [room]
         );
@@ -281,10 +285,10 @@ export const createRoomBundle = <
                             ? value(oldMyPresence)
                             : value;
 
-                    room.broadcast({
-                        type: "$UPDATE_PRESENCE",
-                        data: { presence },
-                    } as Id<InferEventMessage<InferIOInput<TIO>>>);
+                    room.broadcast(
+                        "$UPDATE_PRESENCE" as keyof InferIOInput<TIO>,
+                        { presence } as any
+                    );
                 },
                 [room]
             );