@pluv/client 0.0.0 → 0.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/client@0.0.0 build /home/runner/work/pluv/pluv/packages/client
+> @pluv/client@0.1.0 build /home/runner/work/pluv/pluv/packages/client
 > tsup src/index.ts --format esm,cjs --dts
 
 CLI Building entry: src/index.ts
@@ -8,10 +8,10 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 29.80 KB
-CJS ⚡️ Build success in 129ms
-ESM dist/index.mjs 28.72 KB
-ESM ⚡️ Build success in 136ms
+ESM dist/index.mjs 29.33 KB
+ESM ⚡️ Build success in 157ms
+CJS dist/index.js 30.41 KB
+CJS ⚡️ Build success in 165ms
 DTS Build start
-DTS ⚡️ Build success in 3389ms
-DTS dist/index.d.ts 8.01 KB
+DTS ⚡️ Build success in 3438ms
+DTS dist/index.d.ts 8.21 KB

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @pluv/client
+
+## 0.1.0
+
+### Minor Changes
+
+- a22f525: Added documentation
+
+### Patch Changes
+
+- Updated dependencies [a22f525]
+  - @pluv/crdt-yjs@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,110 @@
+<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/client">
+    <img src="https://img.shields.io/npm/v/@pluv/client" alt="npm @pluv/client" />
+  </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/client`
+
+> Framework agnostic frontend client for [@pluv/io](https://img.shields.io/npm/v/@pluv/io)
+
+## Installation
+
+```bash
+# npm
+npm install @pluv/client yjs
+
+# yarn
+yarn add @pluv/client yjs
+
+# pnpm
+pnpm add @pluv/client yjs
+```
+
+If you plan on using presence and/or storage, make sure to also install `zod`.
+
+## Basic Example
+
+```ts
+import { createClient, y } from "@pluv/client";
+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}`;
+    },
+});
+
+interface Presence {
+    cursor: { x: number; y: number } | null;
+}
+
+interface Storage {
+    messages: readonly { name: string; message: string }[]
+}
+
+// Create a room to join
+const room = client.createRoom<Presence, Storage>("my-room", {
+    initialPresence: { cursor: null },
+    initialStorage: () => ({ messages: y.array([]) }),
+    onAuthorizationFail: (error) => {
+        console.log(error.message);
+    },
+    presence: z.object({
+        cursor: z.nullable(
+            z.object({
+                x: z.number(),
+                y: z.number(),
+            })
+        ),
+    }),
+});
+
+const main = async () => {
+    await client.enter(room);
+
+    const unsubscribe = client.event("RECEIVE_MESSAGE", ({ data }) => {
+        console.log(data.message);
+    });
+
+    client.broadcast({
+        type: "SEND_MESSAGE",
+        data: { message: "Hello world!" },
+    });
+
+    unsubscribe();
+
+    client.leave(room);
+};
+```
+
+## 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

@@ -87,7 +87,7 @@ type PluvRoomOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TSto
 type RoomConfig<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> = RoomEndpoints<TIO> & PluvRoomOptions<TIO, TPresence, TStorage>;
 declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}> {
     readonly _endpoints: RoomEndpoints<TIO>;
-    readonly room: string;
+    readonly id: string;
     private _crdtManager;
     private _crdtNotifier;
     private _debug;
@@ -105,7 +105,7 @@ declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TS
     private _usersManager;
     constructor(room: string, options: RoomConfig<TIO, TPresence, TStorage>);
     get webSocket(): WebSocket | null;
-    broadcast(message: InferEventMessage<InferIOInput<TIO>>): void;
+    broadcast(message: Id<InferEventMessage<InferIOInput<TIO>>>): void;
     connect(): Promise<void>;
     disconnect(): void;
     event: <TEvent extends keyof InferIOOutput<TIO>>(name: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>) => (() => void);
@@ -163,16 +163,21 @@ declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TS
     private _updateState;
 }
 
-type PluvClientOptions<TIO extends IOLike> = RoomEndpoints<TIO>;
+type PluvClientOptions<TIO extends IOLike> = RoomEndpoints<TIO> & {
+    debug?: boolean;
+};
 declare class PluvClient<TIO extends IOLike = IOLike> {
     private _authEndpoint;
+    private _debug;
     private _wsEndpoint;
     private _rooms;
     constructor(options: PluvClientOptions<TIO>);
     createRoom: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}>(room: string, options: PluvRoomOptions<TIO, TPresence, TStorage>) => PluvRoom<TIO, TPresence, TStorage>;
-    enter: (room: string) => Promise<void>;
+    enter: (room: string | PluvRoom<TIO, JsonObject, any>) => Promise<void>;
     getRoom: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}>(room: string) => PluvRoom<TIO, TPresence, TStorage> | null;
-    leave: (room: string) => void;
+    getRooms: () => readonly PluvRoom<TIO, JsonObject, any>[];
+    leave: (room: string | PluvRoom<TIO, JsonObject, any>) => void;
+    private _logDebug;
 }
 
 declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}> = IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;

package/dist/index.js

@@ -336,7 +336,7 @@ var PluvRoom = class {
       presence,
       wsEndpoint
     } = options;
-    this.room = room;
+    this.id = room;
     this._debug = debug;
     this._endpoints = {
       authEndpoint,
@@ -385,10 +385,10 @@ var PluvRoom = class {
         oldState.connection.state = "Connecting" /* Connecting */;
         return oldState;
       });
-      const url = new URL(this._getWsEndpoint(this.room));
+      const url = new URL(this._getWsEndpoint(this.id));
       let authToken = null;
       try {
-        authToken = yield this._getAuthorization(this.room);
+        authToken = yield this._getAuthorization(this.id);
       } catch (err) {
         this._onAuthorizationFail(err);
         return;
@@ -952,28 +952,43 @@ var PluvClient = class {
         wsEndpoint: this._wsEndpoint
       });
       this._rooms.set(room, newRoom);
+      this._logDebug(`New room was created: ${room}`);
       return newRoom;
     };
     this.enter = (room) => __async(this, null, function* () {
-      const toEnter = this.getRoom(room);
+      const toEnter = typeof room === "string" ? this.getRoom(room) : room;
       if (!toEnter) {
         throw new Error(`Could not find room: ${room}.`);
       }
+      this._rooms.set(toEnter.id, toEnter);
       yield toEnter.connect();
+      this._logDebug(`Entered room: ${room}`);
     });
     this.getRoom = (room) => {
       const found = this._rooms.get(room);
       return found != null ? found : null;
     };
+    this.getRooms = () => {
+      return Array.from(this._rooms.values());
+    };
     this.leave = (room) => {
-      const toLeave = this.getRoom(room);
+      const toLeave = typeof room === "string" ? this.getRoom(room) : room;
       if (!toLeave)
         return;
       toLeave.disconnect();
-      this._rooms.delete(room);
+      this._rooms.delete(toLeave.id);
+      this._logDebug(`Left and deleted room: ${room}`);
     };
-    this._authEndpoint = options.authEndpoint;
-    this._wsEndpoint = options.wsEndpoint;
+    const { authEndpoint, debug = false, wsEndpoint } = options;
+    this._authEndpoint = authEndpoint;
+    this._debug = debug;
+    this._wsEndpoint = wsEndpoint;
+  }
+  _logDebug(...data) {
+    var _a;
+    if (((_a = process == null ? void 0 : process.env) == null ? void 0 : _a.NODE_ENV) === "production")
+      return;
+    this._debug && console.log(...data);
   }
 };
 

package/dist/index.mjs

@@ -313,7 +313,7 @@ var PluvRoom = class {
       presence,
       wsEndpoint
     } = options;
-    this.room = room;
+    this.id = room;
     this._debug = debug;
     this._endpoints = {
       authEndpoint,
@@ -362,10 +362,10 @@ var PluvRoom = class {
         oldState.connection.state = "Connecting" /* Connecting */;
         return oldState;
       });
-      const url = new URL(this._getWsEndpoint(this.room));
+      const url = new URL(this._getWsEndpoint(this.id));
       let authToken = null;
       try {
-        authToken = yield this._getAuthorization(this.room);
+        authToken = yield this._getAuthorization(this.id);
       } catch (err) {
         this._onAuthorizationFail(err);
         return;
@@ -929,28 +929,43 @@ var PluvClient = class {
         wsEndpoint: this._wsEndpoint
       });
       this._rooms.set(room, newRoom);
+      this._logDebug(`New room was created: ${room}`);
       return newRoom;
     };
     this.enter = (room) => __async(this, null, function* () {
-      const toEnter = this.getRoom(room);
+      const toEnter = typeof room === "string" ? this.getRoom(room) : room;
       if (!toEnter) {
         throw new Error(`Could not find room: ${room}.`);
       }
+      this._rooms.set(toEnter.id, toEnter);
       yield toEnter.connect();
+      this._logDebug(`Entered room: ${room}`);
     });
     this.getRoom = (room) => {
       const found = this._rooms.get(room);
       return found != null ? found : null;
     };
+    this.getRooms = () => {
+      return Array.from(this._rooms.values());
+    };
     this.leave = (room) => {
-      const toLeave = this.getRoom(room);
+      const toLeave = typeof room === "string" ? this.getRoom(room) : room;
       if (!toLeave)
         return;
       toLeave.disconnect();
-      this._rooms.delete(room);
+      this._rooms.delete(toLeave.id);
+      this._logDebug(`Left and deleted room: ${room}`);
     };
-    this._authEndpoint = options.authEndpoint;
-    this._wsEndpoint = options.wsEndpoint;
+    const { authEndpoint, debug = false, wsEndpoint } = options;
+    this._authEndpoint = authEndpoint;
+    this._debug = debug;
+    this._wsEndpoint = wsEndpoint;
+  }
+  _logDebug(...data) {
+    var _a;
+    if (((_a = process == null ? void 0 : process.env) == null ? void 0 : _a.NODE_ENV) === "production")
+      return;
+    this._debug && console.log(...data);
   }
 };
 

package/package.json

@@ -1,6 +1,15 @@
 {
   "name": "@pluv/client",
-  "version": "0.0.0",
+  "version": "0.1.0",
+  "description": "@pluv/io frontend client",
+  "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/client"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -8,16 +17,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@pluv/crdt-yjs": "^0.0.0",
-    "@pluv/types": "^0.0.0",
+    "@pluv/crdt-yjs": "^0.1.0",
+    "@pluv/types": "^0.1.0",
     "wonka": "^6.1.2"
   },
   "peerDependencies": {
     "yjs": "^13.0.0"
   },
   "devDependencies": {
-    "@pluv/tsconfig": "^0.0.0",
-    "eslint-config-pluv": "^0.0.0",
+    "@pluv/tsconfig": "^0.1.0",
+    "eslint-config-pluv": "^0.1.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
     "yjs": "^13.5.44"

package/src/PluvClient.ts

@@ -8,17 +8,23 @@ import type {
 } from "./PluvRoom";
 import { PluvRoom } from "./PluvRoom";
 
-export type PluvClientOptions<TIO extends IOLike> = RoomEndpoints<TIO>;
+export type PluvClientOptions<TIO extends IOLike> = RoomEndpoints<TIO> & {
+    debug?: boolean;
+};
 
 export class PluvClient<TIO extends IOLike = IOLike> {
     private _authEndpoint: AuthEndpoint;
+    private _debug: boolean;
     private _wsEndpoint: WsEndpoint;
 
     private _rooms = new Map<string, PluvRoom<TIO, JsonObject, any>>();
 
     constructor(options: PluvClientOptions<TIO>) {
-        this._authEndpoint = options.authEndpoint as AuthEndpoint;
-        this._wsEndpoint = options.wsEndpoint;
+        const { authEndpoint, debug = false, wsEndpoint } = options;
+
+        this._authEndpoint = authEndpoint as AuthEndpoint;
+        this._debug = debug;
+        this._wsEndpoint = wsEndpoint;
     }
 
     public createRoom = <
@@ -43,17 +49,25 @@ export class PluvClient<TIO extends IOLike = IOLike> {
 
         this._rooms.set(room, newRoom);
 
+        this._logDebug(`New room was created: ${room}`);
+
         return newRoom;
     };
 
-    public enter = async (room: string): Promise<void> => {
-        const toEnter = this.getRoom(room);
+    public enter = async (
+        room: string | PluvRoom<TIO, JsonObject, any>
+    ): Promise<void> => {
+        const toEnter = typeof room === "string" ? this.getRoom(room) : room;
 
         if (!toEnter) {
             throw new Error(`Could not find room: ${room}.`);
         }
 
+        this._rooms.set(toEnter.id, toEnter);
+
         await toEnter.connect();
+
+        this._logDebug(`Entered room: ${room}`);
     };
 
     public getRoom = <
@@ -69,13 +83,26 @@ export class PluvClient<TIO extends IOLike = IOLike> {
         return found ?? null;
     };
 
-    public leave = (room: string): void => {
-        const toLeave = this.getRoom(room);
+    public getRooms = (): readonly PluvRoom<TIO, JsonObject, any>[] => {
+        return Array.from(this._rooms.values());
+    };
+
+    public leave = (room: string | PluvRoom<TIO, JsonObject, any>): void => {
+        const toLeave = typeof room === "string" ? this.getRoom(room) : room;
 
         if (!toLeave) return;
 
         toLeave.disconnect();
 
-        this._rooms.delete(room);
+        this._rooms.delete(toLeave.id);
+
+        this._logDebug(`Left and deleted room: ${room}`);
     };
+
+    private _logDebug(...data: any[]): void {
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        if (process?.env?.NODE_ENV === "production") return;
+
+        this._debug && console.log(...data);
+    }
 }

package/src/PluvRoom.ts

@@ -1,4 +1,4 @@
-import { doc, InferYjsSharedTypeJson, YjsDoc } from "@pluv/crdt-yjs";
+import { doc, InferYjsSharedTypeJson } from "@pluv/crdt-yjs";
 import type {
     BaseIOEventRecord,
     EventMessage,
@@ -121,7 +121,7 @@ export class PluvRoom<
 > {
     readonly _endpoints: RoomEndpoints<TIO>;
 
-    public readonly room: string;
+    public readonly id: string;
 
     private _crdtManager: CrdtManager<TStorage> | null = null;
     private _crdtNotifier = new CrdtNotifier<TStorage>();
@@ -167,7 +167,7 @@ export class PluvRoom<
             wsEndpoint,
         } = options;
 
-        this.room = room;
+        this.id = room;
         this._debug = debug;
 
         this._endpoints = {
@@ -201,7 +201,7 @@ export class PluvRoom<
         return this._state.webSocket;
     }
 
-    public broadcast(message: InferEventMessage<InferIOInput<TIO>>): void {
+    public broadcast(message: Id<InferEventMessage<InferIOInput<TIO>>>): void {
         if (!this._state.webSocket) return;
         if (this._state.connection.state !== ConnectionState.Open) return;
 
@@ -228,12 +228,12 @@ export class PluvRoom<
             return oldState;
         });
 
-        const url = new URL(this._getWsEndpoint(this.room));
+        const url = new URL(this._getWsEndpoint(this.id));
 
         let authToken: string | null = null;
 
         try {
-            authToken = await this._getAuthorization(this.room);
+            authToken = await this._getAuthorization(this.id);
         } catch (err) {
             this._onAuthorizationFail(err);