@leancodepl/hook-pipe-client 8.5.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.default.js

@@ -0,0 +1 @@
+exports._default = require('./index.cjs.js').default;

package/index.cjs.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var react = require('react');
+var deepEqual = require('deep-equal');
+var rxjs = require('rxjs');
+
+/**
+ * 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 }) {
+                const [data, setData] = react.useState();
+                const onDataRef = react.useRef(onData);
+                onDataRef.current = onData;
+                const memoizedTopic = react.useRef();
+                if (memoizedTopic.current === undefined || !deepEqual(memoizedTopic.current, topic)) {
+                    memoizedTopic.current = topic;
+                }
+                react.useEffect(()=>{
+                    const topic$ = pipe.topic(topicType, memoizedTopic.current).pipe(rxjs.share());
+                    const subscription = topic$.subscribe((data)=>{
+                        setData(data);
+                        onDataRef.current == null ? void 0 : onDataRef.current.call(onDataRef, data);
+                    });
+                    return ()=>subscription.unsubscribe();
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                }, [
+                    memoizedTopic.current
+                ]);
+                return {
+                    data
+                };
+            }
+            useTopic.topic = (topic)=>pipe.topic(topicType, topic);
+            return useTopic;
+        }
+    };
+}
+
+exports.mkPipeClient = mkPipeClient;

package/index.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './index.cjs.js';
+export { _default as default } from './index.cjs.default.js';

package/index.d.ts

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

package/index.esm.js

@@ -0,0 +1,49 @@
+import { useState, useRef, useEffect } from 'react';
+import deepEqual from 'deep-equal';
+import { share } from 'rxjs';
+
+/**
+ * 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 }) {
+                const [data, setData] = useState();
+                const onDataRef = useRef(onData);
+                onDataRef.current = onData;
+                const memoizedTopic = useRef();
+                if (memoizedTopic.current === undefined || !deepEqual(memoizedTopic.current, topic)) {
+                    memoizedTopic.current = topic;
+                }
+                useEffect(()=>{
+                    const topic$ = pipe.topic(topicType, memoizedTopic.current).pipe(share());
+                    const subscription = topic$.subscribe((data)=>{
+                        setData(data);
+                        onDataRef.current == null ? void 0 : onDataRef.current.call(onDataRef, data);
+                    });
+                    return ()=>subscription.unsubscribe();
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                }, [
+                    memoizedTopic.current
+                ]);
+                return {
+                    data
+                };
+            }
+            useTopic.topic = (topic)=>pipe.topic(topicType, topic);
+            return useTopic;
+        }
+    };
+}
+
+export { mkPipeClient };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leancodepl/hook-pipe-client",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "license": "Apache-2.0",
   "dependencies": {
     "@leancodepl/pipe": "^1.0.0",
@@ -43,11 +43,6 @@
     "name": "LeanCode",
     "url": "https://leancode.co"
   },
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md"
-  ],
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./lib/mkPipeClient";

package/src/lib/mkPipeClient.d.ts

@@ -0,0 +1,27 @@
+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;
+}): {
+    createTopic<TTopic, TNotifications extends Record<string, unknown>>(topicType: string): {
+        (topic: TTopic, { onData }: UseSubscriptionOptions<TNotifications>): {
+            data: NotificationsUnion<TNotifications> | undefined;
+        };
+        topic(topic: TTopic): import("rxjs").Observable<NotificationsUnion<TNotifications>>;
+    };
+};
+export type UseSubscriptionOptions<TNotifications extends Record<string, unknown>> = {
+    onData?: (data: NotificationsUnion<TNotifications>) => void;
+};