@leancodepl/hook-pipe-client 8.4.0 → 8.5.1

package/README.md

@@ -0,0 +1,124 @@
+# @leancodepl/hook-pipe-client
+
+React hooks for real-time data subscriptions using @leancodepl/pipe.
+
+## Installation
+
+```bash
+npm install @leancodepl/hook-pipe-client
+# or
+yarn add @leancodepl/hook-pipe-client
+```
+
+## API
+
+### `mkPipeClient(pipe)`
+
+Creates React hooks for real-time data subscriptions using @leancodepl/pipe.
+
+**Parameters:**
+
+- `pipe: Pipe` - Pipe instance from @leancodepl/pipe
+
+**Returns:** Object containing `createTopic` method for creating typed hooks
+
+## Usage Examples
+
+### Basic Setup
+
+```typescript
+import { mkPipeClient } from "@leancodepl/hook-pipe-client"
+import { createPipe } from "@leancodepl/pipe"
+
+const pipe = createPipe({
+    url: "wss://api.example.com/pipe",
+    getAccessToken: () => localStorage.getItem("token"),
+})
+
+const pipeClient = mkPipeClient({ pipe })
+```
+
+### Chat Messages
+
+```typescript
+import React, { useState } from 'react';
+
+interface ChatTopic {
+  roomId: string;
+}
+
+interface ChatNotifications {
+  MessageReceived: {
+    id: string;
+    content: string;
+    authorId: string;
+  };
+}
+
+const useChatTopic = pipeClient.createTopic<ChatTopic, ChatNotifications>('chat');
+
+function ChatRoom({ roomId }: { roomId: string }) {
+  const [messages, setMessages] = useState<string[]>([]);
+
+  const { data } = useChatTopic(
+    { roomId },
+    {
+      onData: (notification) => {
+        if (notification.type === 'MessageReceived') {
+          setMessages(prev => [...prev, notification.data.content]);
+        }
+      },
+    }
+  );
+
+  return (
+    <div>
+      {messages.map((message, index) => (
+        <div key={index}>{message}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Live Metrics
+
+```typescript
+import React, { useState } from 'react';
+
+interface MetricsTopic {
+  dashboardId: string;
+}
+
+interface MetricsNotifications {
+  CpuUpdate: { value: number };
+  MemoryUpdate: { value: number };
+}
+
+const useMetricsTopic = pipeClient.createTopic<MetricsTopic, MetricsNotifications>('metrics');
+
+function Dashboard() {
+  const [cpu, setCpu] = useState(0);
+  const [memory, setMemory] = useState(0);
+
+  useMetricsTopic(
+    { dashboardId: 'main' },
+    {
+      onData: (notification) => {
+        if (notification.type === 'CpuUpdate') {
+          setCpu(notification.data.value);
+        } else if (notification.type === 'MemoryUpdate') {
+          setMemory(notification.data.value);
+        }
+      },
+    }
+  );
+
+  return (
+    <div>
+      <div>CPU: {cpu}%</div>
+      <div>Memory: {memory}%</div>
+    </div>
+  );
+}
+```

package/index.cjs.js

@@ -4,7 +4,19 @@ var react = require('react');
 var deepEqual = require('deep-equal');
 var rxjs = require('rxjs');
 
-function mkPipeClient({ pipe }) {
+/**
+ * Creates React hooks for real-time data subscriptions using "@leancodepl/pipe".
+ * 
+ * @param pipe - Pipe instance from "@leancodepl/pipe"
+ * @returns Object containing `createTopic` method for creating typed hooks
+ * @example
+ * ```typescript
+ * const pipe = createPipe({ url: 'wss://api.example.com/pipe' });
+ * const pipeClient = mkPipeClient({ pipe });
+ * 
+ * const useChatTopic = pipeClient.createTopic('chat');
+ * ```
+ */ function mkPipeClient({ pipe }) {
     return {
         createTopic (topicType) {
             function useTopic(topic, { onData }) {

package/index.esm.js

@@ -2,7 +2,19 @@ import { useState, useRef, useEffect } from 'react';
 import deepEqual from 'deep-equal';
 import { share } from 'rxjs';
 
-function mkPipeClient({ pipe }) {
+/**
+ * Creates React hooks for real-time data subscriptions using "@leancodepl/pipe".
+ * 
+ * @param pipe - Pipe instance from "@leancodepl/pipe"
+ * @returns Object containing `createTopic` method for creating typed hooks
+ * @example
+ * ```typescript
+ * const pipe = createPipe({ url: 'wss://api.example.com/pipe' });
+ * const pipeClient = mkPipeClient({ pipe });
+ * 
+ * const useChatTopic = pipeClient.createTopic('chat');
+ * ```
+ */ function mkPipeClient({ pipe }) {
     return {
         createTopic (topicType) {
             function useTopic(topic, { onData }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leancodepl/hook-pipe-client",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "license": "Apache-2.0",
   "dependencies": {
     "@leancodepl/pipe": "^1.0.0",
@@ -10,16 +10,50 @@
     "react": "*",
     "rxjs": ">=7.0.0"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leancodepl/js_corelibrary.git",
+    "directory": "packages/pipe-clients/hook-pipe-client"
+  },
+  "homepage": "https://github.com/leancodepl/js_corelibrary",
+  "bugs": {
+    "url": "https://github.com/leancodepl/js_corelibrary/issues"
+  },
+  "description": "React hooks for real-time data streaming and subscriptions using @leancodepl/pipe",
+  "keywords": [
+    "react",
+    "hooks",
+    "real-time",
+    "streaming",
+    "websocket",
+    "signalr",
+    "leanpipe",
+    "typescript",
+    "javascript",
+    "leancode"
+  ],
+  "author": {
+    "name": "LeanCode",
+    "url": "https://leancode.co"
+  },
+  "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "module": "./index.esm.js",
-      "types": "./index.esm.d.ts",
+      "types": "./index.d.ts",
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
     }
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "types": "./index.esm.d.ts"
+  "types": "./index.d.ts"
 }

package/src/lib/mkPipeClient.d.ts

@@ -1,4 +1,17 @@
 import { NotificationsUnion, Pipe } from "@leancodepl/pipe";
+/**
+ * Creates React hooks for real-time data subscriptions using "@leancodepl/pipe".
+ *
+ * @param pipe - Pipe instance from "@leancodepl/pipe"
+ * @returns Object containing `createTopic` method for creating typed hooks
+ * @example
+ * ```typescript
+ * const pipe = createPipe({ url: 'wss://api.example.com/pipe' });
+ * const pipeClient = mkPipeClient({ pipe });
+ *
+ * const useChatTopic = pipeClient.createTopic('chat');
+ * ```
+ */
 export declare function mkPipeClient({ pipe }: {
     pipe: Pipe;
 }): {

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";