@pluv/react 0.0.0 → 0.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@0.0.0 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.1.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
@@ -8,10 +8,10 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
+ESM dist/index.mjs 7.70 KB
+ESM ⚡️ Build success in 153ms
 CJS dist/index.js 9.71 KB
-CJS ⚡️ Build success in 107ms
-ESM dist/index.mjs 7.71 KB
-ESM ⚡️ Build success in 112ms
+CJS ⚡️ Build success in 153ms
 DTS Build start
-DTS ⚡️ Build success in 4395ms
+DTS ⚡️ Build success in 6342ms
 DTS dist/index.d.ts 3.92 KB

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @pluv/react
+
+## 0.1.0
+
+### Minor Changes
+
+- a22f525: Added documentation
+
+### Patch Changes
+
+- Updated dependencies [a22f525]
+  - @pluv/client@0.1.0
+  - @pluv/types@0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Shoubhit Dash
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,148 @@
+<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>
+  Pluv.IO (preview)
+  <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> 💕 Built with <a href="https://docs.yjs.dev/">yjs</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>
+  <img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript">
+  <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://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" />
+
+## `@pluv/react`
+
+> [React.js](https://reactjs.org/) bindings for [@pluv/client](https://img.shields.io/npm/v/@pluv/client).
+
+## Installation
+
+```bash
+# npm
+npm install @pluv/react yjs
+
+# yarn
+yarn add @pluv/react yjs
+
+# pnpm
+pnpm add @pluv/react yjs
+```
+
+If you plan on using presence and/or storage, make sure to also install `zod`.
+
+## Basic Example
+
+```tsx
+import { createBundle, createClient, y } 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
+    usePluvClient,
+} = createBundle(client);
+
+export const {
+    // components
+    PluvRoomProvider,
+
+    // hooks
+    usePluvBroadcast,
+    usePluvConnection,
+    usePluvEvent,
+    usePluvMyPresence,
+    usePluvMyself,
+    usePluvOther,
+    usePluvOthers,
+    usePluvRoom,
+    usePluvStorage,
+} = createRoomBundle({
+    initialStorage: () => ({
+        messages: y.array([
+            y.unstable__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 = usePluvBroadcast();
+
+    usePluvEvent("RECEIVE_MESSAGE", ({ data }) => {
+        // data is typed as { message: string }
+        console.log(data.message);
+    });
+
+    return (
+        <button
+            onClick={() => {
+                broadcast({
+                    type: "SEND_MESSAGE",
+                    data: {
+                        // 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.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, InferEventMessage, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
+import { JsonObject, InputZodLike, IOLike, Id, InferEventMessage, InferIOInput, 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 InferEventMessage<InferIOInput<TIO>>>() => (message: TMessage) => void;
+    usePluvBroadcast: <TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>>() => (message: TMessage) => 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

@@ -97,11 +97,11 @@ var createRoomBundle = (client, options = {}) => {
       };
     }, [rerender, room]);
     (0, import_react3.useEffect)(() => {
-      client.enter(_room);
+      client.enter(room);
       return () => {
-        client.leave(_room);
+        client.leave(room);
       };
-    }, [_room]);
+    }, [room]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, {
       value: room,
       children

package/dist/index.mjs

@@ -64,11 +64,11 @@ var createRoomBundle = (client, options = {}) => {
       };
     }, [rerender, room]);
     useEffect(() => {
-      client.enter(_room);
+      client.enter(room);
       return () => {
-        client.leave(_room);
+        client.leave(room);
       };
-    }, [_room]);
+    }, [room]);
     return /* @__PURE__ */ jsx(PluvRoomContext.Provider, {
       value: room,
       children

package/package.json

@@ -1,6 +1,15 @@
 {
   "name": "@pluv/react",
-  "version": "0.0.0",
+  "version": "0.1.0",
+  "description": "@pluv/client React.js bindings",
+  "author": "leedavidcs",
+  "license": "MIT",
+  "homepage": "https://github.com/pluv-io/pluv",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pluv-io/pluv.git",
+    "directory": "packages/react"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -8,8 +17,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@pluv/client": "^0.0.0",
-    "@pluv/types": "^0.0.0",
+    "@pluv/client": "^0.1.0",
+    "@pluv/types": "^0.1.0",
     "@types/use-sync-external-store": "^0.0.3",
     "fast-deep-equal": "^3.1.3",
     "use-sync-external-store": "^1.2.0"
@@ -19,9 +28,9 @@
     "yjs": "^13.0.0"
   },
   "devDependencies": {
-    "@pluv/tsconfig": "^0.0.0",
+    "@pluv/tsconfig": "^0.1.0",
     "@types/react": "18.0.26",
-    "eslint-config-pluv": "^0.0.0",
+    "eslint-config-pluv": "^0.1.0",
     "react": "18.2.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",

package/src/createRoomBundle.tsx

@@ -5,7 +5,7 @@ import type {
     UserInfo,
     WebSocketConnection,
 } from "@pluv/client";
-import { ConnectionState, PluvRoom } from "@pluv/client";
+import type { PluvRoom } from "@pluv/client";
 import type {
     Id,
     InferEventMessage,
@@ -69,7 +69,7 @@ export interface CreateRoomBundle<
 
     // hooks
     usePluvBroadcast: <
-        TMessage extends InferEventMessage<InferIOInput<TIO>>
+        TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>
     >() => (message: TMessage) => void;
     usePluvConnection: <T extends unknown = WebSocketConnection>(
         selector: (connection: WebSocketConnection) => T,
@@ -167,12 +167,12 @@ export const createRoomBundle = <
         }, [rerender, room]);
 
         useEffect(() => {
-            client.enter(_room);
+            client.enter(room);
 
             return () => {
-                client.leave(_room);
+                client.leave(room);
             };
-        }, [_room]);
+        }, [room]);
 
         return (
             <PluvRoomContext.Provider value={room}>
@@ -186,7 +186,7 @@ export const createRoomBundle = <
     const usePluvRoom = () => useContext(PluvRoomContext);
 
     const usePluvBroadcast = <
-        TMessage extends InferEventMessage<InferIOInput<TIO>>
+        TMessage extends Id<InferEventMessage<InferIOInput<TIO>>>
     >(): ((message: TMessage) => void) => {
         const room = usePluvRoom();
 
@@ -284,7 +284,7 @@ export const createRoomBundle = <
                     room.broadcast({
                         type: "$UPDATE_PRESENCE",
                         data: { presence },
-                    } as InferEventMessage<InferIOInput<TIO>>);
+                    } as Id<InferEventMessage<InferIOInput<TIO>>>);
                 },
                 [room]
             );