@leancodepl/hook-pipe-client 9.7.0 → 9.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/index.cjs.js +22 -1
- package/index.esm.js +22 -1
- package/package.json +1 -1
- package/src/lib/mkPipeClient.d.ts +3 -1
package/README.md
CHANGED
|
@@ -22,6 +22,15 @@ Creates React hooks for real-time data subscriptions using @leancodepl/pipe.
|
|
|
22
22
|
|
|
23
23
|
**Returns:** Object containing `createTopic` method for creating typed hooks
|
|
24
24
|
|
|
25
|
+
### `UseSubscriptionOptions<TNotifications>`
|
|
26
|
+
|
|
27
|
+
Options for topic subscription hooks.
|
|
28
|
+
|
|
29
|
+
**Properties:**
|
|
30
|
+
|
|
31
|
+
- `[NotificationType]?: (data: NotificationData) => void` - Type-specific handlers for each notification type
|
|
32
|
+
- `onData?: (data: NotificationsUnion<TNotifications>) => void` - Callback for all notifications
|
|
33
|
+
|
|
25
34
|
## Usage Examples
|
|
26
35
|
|
|
27
36
|
### Basic Setup
|
|
@@ -63,6 +72,10 @@ function ChatRoom({ roomId }: { roomId: string }) {
|
|
|
63
72
|
const { data } = useChatTopic(
|
|
64
73
|
{ roomId },
|
|
65
74
|
{
|
|
75
|
+
MessageReceived: (data) => {
|
|
76
|
+
setMessages(prev => [...prev, data.content]);
|
|
77
|
+
},
|
|
78
|
+
// or
|
|
66
79
|
onData: (notification) => {
|
|
67
80
|
if (notification.type === 'MessageReceived') {
|
|
68
81
|
setMessages(prev => [...prev, notification.data.content]);
|
|
@@ -104,6 +117,13 @@ function Dashboard() {
|
|
|
104
117
|
useMetricsTopic(
|
|
105
118
|
{ dashboardId: 'main' },
|
|
106
119
|
{
|
|
120
|
+
CpuUpdate: (data) => {
|
|
121
|
+
setCpu(data.value);
|
|
122
|
+
},
|
|
123
|
+
MemoryUpdate: (data) => {
|
|
124
|
+
setMemory(data.value);
|
|
125
|
+
}
|
|
126
|
+
// or
|
|
107
127
|
onData: (notification) => {
|
|
108
128
|
if (notification.type === 'CpuUpdate') {
|
|
109
129
|
setCpu(notification.data.value);
|
package/index.cjs.js
CHANGED
|
@@ -4,6 +4,19 @@ var react = require('react');
|
|
|
4
4
|
var deepEqual = require('deep-equal');
|
|
5
5
|
var rxjs = require('rxjs');
|
|
6
6
|
|
|
7
|
+
function _object_without_properties_loose(source, excluded) {
|
|
8
|
+
if (source == null) return {};
|
|
9
|
+
var target = {};
|
|
10
|
+
var sourceKeys = Object.keys(source);
|
|
11
|
+
var key, i;
|
|
12
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
13
|
+
key = sourceKeys[i];
|
|
14
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
15
|
+
target[key] = source[key];
|
|
16
|
+
}
|
|
17
|
+
return target;
|
|
18
|
+
}
|
|
19
|
+
|
|
7
20
|
/**
|
|
8
21
|
* Creates React hooks for real-time data subscriptions using "@leancodepl/pipe".
|
|
9
22
|
*
|
|
@@ -19,10 +32,15 @@ var rxjs = require('rxjs');
|
|
|
19
32
|
*/ function mkPipeClient({ pipe }) {
|
|
20
33
|
return {
|
|
21
34
|
createTopic (topicType) {
|
|
22
|
-
function useTopic(topic,
|
|
35
|
+
function useTopic(topic, _param) {
|
|
36
|
+
var { onData } = _param, onDataByType = _object_without_properties_loose(_param, [
|
|
37
|
+
"onData"
|
|
38
|
+
]);
|
|
23
39
|
const [data, setData] = react.useState();
|
|
24
40
|
const onDataRef = react.useRef(onData);
|
|
41
|
+
const onDataByTypeRef = react.useRef(onDataByType);
|
|
25
42
|
onDataRef.current = onData;
|
|
43
|
+
onDataByTypeRef.current = onDataByType;
|
|
26
44
|
const memoizedTopic = react.useRef(null);
|
|
27
45
|
if (memoizedTopic.current === null || !deepEqual(memoizedTopic.current, topic)) {
|
|
28
46
|
memoizedTopic.current = topic;
|
|
@@ -30,8 +48,11 @@ var rxjs = require('rxjs');
|
|
|
30
48
|
react.useEffect(()=>{
|
|
31
49
|
const topic$ = pipe.topic(topicType, memoizedTopic.current).pipe(rxjs.share());
|
|
32
50
|
const subscription = topic$.subscribe((data)=>{
|
|
51
|
+
var _onDataByTypeRef_current_type;
|
|
33
52
|
setData(data);
|
|
34
53
|
onDataRef.current == null ? void 0 : onDataRef.current.call(onDataRef, data);
|
|
54
|
+
const [type, rawData] = data;
|
|
55
|
+
(_onDataByTypeRef_current_type = onDataByTypeRef.current[type]) == null ? void 0 : _onDataByTypeRef_current_type.call(onDataByTypeRef.current, rawData);
|
|
35
56
|
});
|
|
36
57
|
return ()=>subscription.unsubscribe();
|
|
37
58
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
package/index.esm.js
CHANGED
|
@@ -2,6 +2,19 @@ import { useState, useRef, useEffect } from 'react';
|
|
|
2
2
|
import deepEqual from 'deep-equal';
|
|
3
3
|
import { share } from 'rxjs';
|
|
4
4
|
|
|
5
|
+
function _object_without_properties_loose(source, excluded) {
|
|
6
|
+
if (source == null) return {};
|
|
7
|
+
var target = {};
|
|
8
|
+
var sourceKeys = Object.keys(source);
|
|
9
|
+
var key, i;
|
|
10
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
11
|
+
key = sourceKeys[i];
|
|
12
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
13
|
+
target[key] = source[key];
|
|
14
|
+
}
|
|
15
|
+
return target;
|
|
16
|
+
}
|
|
17
|
+
|
|
5
18
|
/**
|
|
6
19
|
* Creates React hooks for real-time data subscriptions using "@leancodepl/pipe".
|
|
7
20
|
*
|
|
@@ -17,10 +30,15 @@ import { share } from 'rxjs';
|
|
|
17
30
|
*/ function mkPipeClient({ pipe }) {
|
|
18
31
|
return {
|
|
19
32
|
createTopic (topicType) {
|
|
20
|
-
function useTopic(topic,
|
|
33
|
+
function useTopic(topic, _param) {
|
|
34
|
+
var { onData } = _param, onDataByType = _object_without_properties_loose(_param, [
|
|
35
|
+
"onData"
|
|
36
|
+
]);
|
|
21
37
|
const [data, setData] = useState();
|
|
22
38
|
const onDataRef = useRef(onData);
|
|
39
|
+
const onDataByTypeRef = useRef(onDataByType);
|
|
23
40
|
onDataRef.current = onData;
|
|
41
|
+
onDataByTypeRef.current = onDataByType;
|
|
24
42
|
const memoizedTopic = useRef(null);
|
|
25
43
|
if (memoizedTopic.current === null || !deepEqual(memoizedTopic.current, topic)) {
|
|
26
44
|
memoizedTopic.current = topic;
|
|
@@ -28,8 +46,11 @@ import { share } from 'rxjs';
|
|
|
28
46
|
useEffect(()=>{
|
|
29
47
|
const topic$ = pipe.topic(topicType, memoizedTopic.current).pipe(share());
|
|
30
48
|
const subscription = topic$.subscribe((data)=>{
|
|
49
|
+
var _onDataByTypeRef_current_type;
|
|
31
50
|
setData(data);
|
|
32
51
|
onDataRef.current == null ? void 0 : onDataRef.current.call(onDataRef, data);
|
|
52
|
+
const [type, rawData] = data;
|
|
53
|
+
(_onDataByTypeRef_current_type = onDataByTypeRef.current[type]) == null ? void 0 : _onDataByTypeRef_current_type.call(onDataByTypeRef.current, rawData);
|
|
33
54
|
});
|
|
34
55
|
return ()=>subscription.unsubscribe();
|
|
35
56
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
package/package.json
CHANGED
|
@@ -16,12 +16,14 @@ export declare function mkPipeClient({ pipe }: {
|
|
|
16
16
|
pipe: Pipe;
|
|
17
17
|
}): {
|
|
18
18
|
createTopic<TTopic, TNotifications extends Record<string, unknown>>(topicType: string): {
|
|
19
|
-
(topic: TTopic, { onData }: UseSubscriptionOptions<TNotifications>): {
|
|
19
|
+
(topic: TTopic, { onData, ...onDataByType }: UseSubscriptionOptions<TNotifications>): {
|
|
20
20
|
data: NotificationsUnion<TNotifications> | undefined;
|
|
21
21
|
};
|
|
22
22
|
topic(topic: TTopic): import("rxjs").Observable<NotificationsUnion<TNotifications>>;
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
25
|
export type UseSubscriptionOptions<TNotifications extends Record<string, unknown>> = {
|
|
26
|
+
[K in NotificationsUnion<TNotifications>[0]]?: (data: Extract<NotificationsUnion<TNotifications>, [K, any]>[1]) => void;
|
|
27
|
+
} & {
|
|
26
28
|
onData?: (data: NotificationsUnion<TNotifications>) => void;
|
|
27
29
|
};
|