@motiadev/stream-client-react 0.17.6-beta.188-583581 → 0.17.6-beta.188-977165
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/dist/index.js +8 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
- package/src/use-stream-group.ts +4 -1
package/dist/index.js
CHANGED
|
@@ -94,7 +94,14 @@ const useStreamGroup = (args) => {
|
|
|
94
94
|
const subscriptionRef = useRef(null);
|
|
95
95
|
const { streamName, groupId, sortKey, setData: setDataCallback } = args || {};
|
|
96
96
|
useEffect(() => {
|
|
97
|
-
if (!streamName || !groupId || !stream)
|
|
97
|
+
if (!streamName || !groupId || !stream) {
|
|
98
|
+
console.error("useStreamGroup: streamName, groupId or stream is not defined", {
|
|
99
|
+
streamName,
|
|
100
|
+
groupId,
|
|
101
|
+
stream
|
|
102
|
+
});
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
98
105
|
subscriptionRef.current = stream.subscribeGroup(streamName, groupId, sortKey);
|
|
99
106
|
subscriptionRef.current.addChangeListener((data$1) => {
|
|
100
107
|
const typedData = data$1;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["MotiaStreamProvider: React.FC<Props>","Stream","data","data"],"sources":["../src/motia-stream-context.ts","../src/motia-stream-provider.tsx","../src/use-motia-stream.ts","../src/use-stream-event-handler.ts","../src/use-stream-group.ts","../src/use-stream-item.ts"],"sourcesContent":["import type { Stream } from '@motiadev/stream-client-browser'\nimport React from 'react'\n\ntype MotiaStreamContextType = {\n stream: Stream | null\n}\n\nexport const MotiaStreamContext = React.createContext<MotiaStreamContextType>({\n stream: null,\n})\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useEffect, useMemo, useState } from 'react'\nimport { MotiaStreamContext } from './motia-stream-context'\n\ntype Props = React.PropsWithChildren<{\n /**\n * The address of the stream server.\n *\n * @example\n * ```tsx\n * <MotiaStreamProvider address=\"ws://localhost:3000\">\n * <App />\n * </MotiaStreamProvider>\n * */\n address: string\n protocols?: string | string[] | undefined\n}>\n\nexport const MotiaStreamProvider: React.FC<Props> = ({ children, address, protocols }) => {\n const [stream, setStream] = useState<Stream | null>(null)\n\n useEffect(() => {\n const streamInstance = new Stream(address, { protocols })\n setStream(streamInstance)\n return () => streamInstance.close()\n }, [address, protocols])\n\n const contextValue = useMemo(() => ({ stream }), [stream])\n\n return <MotiaStreamContext.Provider value={contextValue}>{children}</MotiaStreamContext.Provider>\n}\n","import React from 'react'\nimport { MotiaStreamContext } from './motia-stream-context'\n\n/**\n * A hook to get the stream context.\n *\n * @example\n * ```tsx\n * const { stream } = useMotiaStream()\n * ```\n */\nexport const useMotiaStream = () => {\n const context = React.useContext(MotiaStreamContext)\n\n if (!context) {\n throw new Error('useMotiaStream must be used within a MotiaStreamProvider')\n }\n\n return context\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { type DependencyList, useEffect } from 'react'\n\ntype UseStreamEventHandler = {\n event: StreamSubscription | null\n type: string\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listener: (event: any) => void\n}\n\n/**\n * A hook to handle custom stream events.\n *\n * @example\n * ```tsx\n * const { event } = useStreamItem({ streamName: 'my-stream', id: '123' })\n *\n * const onEventHandled = (event: any) => {\n * // this is going to be called whenever 'on-custom-event' is sent from the server\n * console.log(event)\n * }\n *\n * useStreamEventHandler({ event, type: 'on-custom-event', listener: onEventHandled }, [])\n * ```\n */\nexport const useStreamEventHandler = (\n { event, type, listener }: UseStreamEventHandler,\n dependencies: DependencyList,\n) => {\n useEffect(() => {\n if (event) {\n event.onEvent(type, listener)\n return () => event.offEvent(type, listener)\n }\n }, [event, type, ...dependencies])\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { useEffect, useRef, useState } from 'react'\nimport { useMotiaStream } from './use-motia-stream'\n\nexport type StreamGroupArgs<TData extends { id: string }> = {\n streamName: string\n groupId: string\n sortKey?: keyof TData\n setData?: (data: TData[]) => void\n}\n\n/**\n * A hook to get a group of items from a stream.\n *\n * @example\n * ```tsx\n * const { data } = useStreamGroup<{ id:string; name: string }>({\n * streamName: 'my-stream',\n * groupId: '123',\n * })\n *\n * return (\n * <div>\n * {data.map((item) => (\n * <div key={item.id}>{item.name}</div>\n * ))}\n * </div>\n * )\n * ```\n */\nexport const useStreamGroup = <TData extends { id: string }>(args?: StreamGroupArgs<TData>) => {\n const { stream } = useMotiaStream()\n const [data, setData] = useState<TData[]>([])\n const subscriptionRef = useRef<StreamSubscription | null>(null)\n\n const { streamName, groupId, sortKey, setData: setDataCallback } = args || {}\n\n useEffect(() => {\n if (!streamName || !groupId || !stream) return\n\n subscriptionRef.current = stream.subscribeGroup(streamName, groupId, sortKey)\n\n subscriptionRef.current.addChangeListener((data) => {\n const typedData = data as TData[]\n setData(typedData)\n setDataCallback?.(typedData)\n })\n\n return () => {\n subscriptionRef.current?.close()\n subscriptionRef.current = null\n setData([])\n }\n }, [stream, streamName, groupId, sortKey, setDataCallback])\n\n return { data, event: subscriptionRef.current }\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { useCallback, useEffect, useState } from 'react'\nimport { useMotiaStream } from './use-motia-stream'\n\nexport type StreamItemArgs = {\n streamName: string\n groupId: string\n id?: string\n}\n\n/**\n * A hook to get a single item from a stream.\n *\n * @example\n * ```tsx\n * const { data } = useStreamItem<{ id:string; name: string }>({\n * streamName: 'my-stream',\n * groupId: '123',\n * id: '123',\n * })\n *\n * return (\n * <div>{data?.name}</div>\n * )\n * ```\n */\nexport const useStreamItem = <TData>(args?: StreamItemArgs) => {\n const { stream } = useMotiaStream()\n const [data, setData] = useState<TData | null | undefined>()\n const [event, setEvent] = useState<StreamSubscription | null>(null)\n const { streamName, groupId, id } = args || {}\n\n const handleChange = useCallback((data: unknown) => {\n setData(data as TData)\n }, [])\n\n useEffect(() => {\n if (!streamName || !groupId || !id || !stream) return\n\n const subscription = stream.subscribeItem(streamName, groupId, id)\n\n subscription.addChangeListener(handleChange)\n setEvent(subscription)\n\n return () => {\n setData(undefined)\n setEvent(null)\n subscription.close()\n }\n }, [stream, streamName, groupId, id, handleChange])\n\n return { data, event }\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,MAAM,cAAsC,EAC5E,QAAQ,MACT,CAAC;;;;ACSF,MAAaA,uBAAwC,EAAE,UAAU,SAAS,gBAAgB;CACxF,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;AAEzD,iBAAgB;EACd,MAAM,iBAAiB,IAAIC,SAAO,SAAS,EAAE,WAAW,CAAC;AACzD,YAAU,eAAe;AACzB,eAAa,eAAe,OAAO;IAClC,CAAC,SAAS,UAAU,CAAC;CAExB,MAAM,eAAe,eAAe,EAAE,QAAQ,GAAG,CAAC,OAAO,CAAC;AAE1D,QAAO,oBAAC,mBAAmB;EAAS,OAAO;EAAe;GAAuC;;;;;;;;;;;;;AClBnG,MAAa,uBAAuB;CAClC,MAAM,UAAU,MAAM,WAAW,mBAAmB;AAEpD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,2DAA2D;AAG7E,QAAO;;;;;;;;;;;;;;;;;;;;ACOT,MAAa,yBACX,EAAE,OAAO,MAAM,YACf,iBACG;AACH,iBAAgB;AACd,MAAI,OAAO;AACT,SAAM,QAAQ,MAAM,SAAS;AAC7B,gBAAa,MAAM,SAAS,MAAM,SAAS;;IAE5C;EAAC;EAAO;EAAM,GAAG;EAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;ACJpC,MAAa,kBAAgD,SAAkC;CAC7F,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,CAAC,MAAM,WAAW,SAAkB,EAAE,CAAC;CAC7C,MAAM,kBAAkB,OAAkC,KAAK;CAE/D,MAAM,EAAE,YAAY,SAAS,SAAS,SAAS,oBAAoB,QAAQ,EAAE;AAE7E,iBAAgB;AACd,MAAI,CAAC,cAAc,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","names":["MotiaStreamProvider: React.FC<Props>","Stream","data","data"],"sources":["../src/motia-stream-context.ts","../src/motia-stream-provider.tsx","../src/use-motia-stream.ts","../src/use-stream-event-handler.ts","../src/use-stream-group.ts","../src/use-stream-item.ts"],"sourcesContent":["import type { Stream } from '@motiadev/stream-client-browser'\nimport React from 'react'\n\ntype MotiaStreamContextType = {\n stream: Stream | null\n}\n\nexport const MotiaStreamContext = React.createContext<MotiaStreamContextType>({\n stream: null,\n})\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useEffect, useMemo, useState } from 'react'\nimport { MotiaStreamContext } from './motia-stream-context'\n\ntype Props = React.PropsWithChildren<{\n /**\n * The address of the stream server.\n *\n * @example\n * ```tsx\n * <MotiaStreamProvider address=\"ws://localhost:3000\">\n * <App />\n * </MotiaStreamProvider>\n * */\n address: string\n protocols?: string | string[] | undefined\n}>\n\nexport const MotiaStreamProvider: React.FC<Props> = ({ children, address, protocols }) => {\n const [stream, setStream] = useState<Stream | null>(null)\n\n useEffect(() => {\n const streamInstance = new Stream(address, { protocols })\n setStream(streamInstance)\n return () => streamInstance.close()\n }, [address, protocols])\n\n const contextValue = useMemo(() => ({ stream }), [stream])\n\n return <MotiaStreamContext.Provider value={contextValue}>{children}</MotiaStreamContext.Provider>\n}\n","import React from 'react'\nimport { MotiaStreamContext } from './motia-stream-context'\n\n/**\n * A hook to get the stream context.\n *\n * @example\n * ```tsx\n * const { stream } = useMotiaStream()\n * ```\n */\nexport const useMotiaStream = () => {\n const context = React.useContext(MotiaStreamContext)\n\n if (!context) {\n throw new Error('useMotiaStream must be used within a MotiaStreamProvider')\n }\n\n return context\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { type DependencyList, useEffect } from 'react'\n\ntype UseStreamEventHandler = {\n event: StreamSubscription | null\n type: string\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listener: (event: any) => void\n}\n\n/**\n * A hook to handle custom stream events.\n *\n * @example\n * ```tsx\n * const { event } = useStreamItem({ streamName: 'my-stream', id: '123' })\n *\n * const onEventHandled = (event: any) => {\n * // this is going to be called whenever 'on-custom-event' is sent from the server\n * console.log(event)\n * }\n *\n * useStreamEventHandler({ event, type: 'on-custom-event', listener: onEventHandled }, [])\n * ```\n */\nexport const useStreamEventHandler = (\n { event, type, listener }: UseStreamEventHandler,\n dependencies: DependencyList,\n) => {\n useEffect(() => {\n if (event) {\n event.onEvent(type, listener)\n return () => event.offEvent(type, listener)\n }\n }, [event, type, ...dependencies])\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { useEffect, useRef, useState } from 'react'\nimport { useMotiaStream } from './use-motia-stream'\n\nexport type StreamGroupArgs<TData extends { id: string }> = {\n streamName: string\n groupId: string\n sortKey?: keyof TData\n setData?: (data: TData[]) => void\n}\n\n/**\n * A hook to get a group of items from a stream.\n *\n * @example\n * ```tsx\n * const { data } = useStreamGroup<{ id:string; name: string }>({\n * streamName: 'my-stream',\n * groupId: '123',\n * })\n *\n * return (\n * <div>\n * {data.map((item) => (\n * <div key={item.id}>{item.name}</div>\n * ))}\n * </div>\n * )\n * ```\n */\nexport const useStreamGroup = <TData extends { id: string }>(args?: StreamGroupArgs<TData>) => {\n const { stream } = useMotiaStream()\n const [data, setData] = useState<TData[]>([])\n const subscriptionRef = useRef<StreamSubscription | null>(null)\n\n const { streamName, groupId, sortKey, setData: setDataCallback } = args || {}\n\n useEffect(() => {\n if (!streamName || !groupId || !stream) {\n console.error('useStreamGroup: streamName, groupId or stream is not defined', { streamName, groupId, stream })\n return\n }\n\n subscriptionRef.current = stream.subscribeGroup(streamName, groupId, sortKey)\n\n subscriptionRef.current.addChangeListener((data) => {\n const typedData = data as TData[]\n setData(typedData)\n setDataCallback?.(typedData)\n })\n\n return () => {\n subscriptionRef.current?.close()\n subscriptionRef.current = null\n setData([])\n }\n }, [stream, streamName, groupId, sortKey, setDataCallback])\n\n return { data, event: subscriptionRef.current }\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { useCallback, useEffect, useState } from 'react'\nimport { useMotiaStream } from './use-motia-stream'\n\nexport type StreamItemArgs = {\n streamName: string\n groupId: string\n id?: string\n}\n\n/**\n * A hook to get a single item from a stream.\n *\n * @example\n * ```tsx\n * const { data } = useStreamItem<{ id:string; name: string }>({\n * streamName: 'my-stream',\n * groupId: '123',\n * id: '123',\n * })\n *\n * return (\n * <div>{data?.name}</div>\n * )\n * ```\n */\nexport const useStreamItem = <TData>(args?: StreamItemArgs) => {\n const { stream } = useMotiaStream()\n const [data, setData] = useState<TData | null | undefined>()\n const [event, setEvent] = useState<StreamSubscription | null>(null)\n const { streamName, groupId, id } = args || {}\n\n const handleChange = useCallback((data: unknown) => {\n setData(data as TData)\n }, [])\n\n useEffect(() => {\n if (!streamName || !groupId || !id || !stream) return\n\n const subscription = stream.subscribeItem(streamName, groupId, id)\n\n subscription.addChangeListener(handleChange)\n setEvent(subscription)\n\n return () => {\n setData(undefined)\n setEvent(null)\n subscription.close()\n }\n }, [stream, streamName, groupId, id, handleChange])\n\n return { data, event }\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,MAAM,cAAsC,EAC5E,QAAQ,MACT,CAAC;;;;ACSF,MAAaA,uBAAwC,EAAE,UAAU,SAAS,gBAAgB;CACxF,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;AAEzD,iBAAgB;EACd,MAAM,iBAAiB,IAAIC,SAAO,SAAS,EAAE,WAAW,CAAC;AACzD,YAAU,eAAe;AACzB,eAAa,eAAe,OAAO;IAClC,CAAC,SAAS,UAAU,CAAC;CAExB,MAAM,eAAe,eAAe,EAAE,QAAQ,GAAG,CAAC,OAAO,CAAC;AAE1D,QAAO,oBAAC,mBAAmB;EAAS,OAAO;EAAe;GAAuC;;;;;;;;;;;;;AClBnG,MAAa,uBAAuB;CAClC,MAAM,UAAU,MAAM,WAAW,mBAAmB;AAEpD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,2DAA2D;AAG7E,QAAO;;;;;;;;;;;;;;;;;;;;ACOT,MAAa,yBACX,EAAE,OAAO,MAAM,YACf,iBACG;AACH,iBAAgB;AACd,MAAI,OAAO;AACT,SAAM,QAAQ,MAAM,SAAS;AAC7B,gBAAa,MAAM,SAAS,MAAM,SAAS;;IAE5C;EAAC;EAAO;EAAM,GAAG;EAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;ACJpC,MAAa,kBAAgD,SAAkC;CAC7F,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,CAAC,MAAM,WAAW,SAAkB,EAAE,CAAC;CAC7C,MAAM,kBAAkB,OAAkC,KAAK;CAE/D,MAAM,EAAE,YAAY,SAAS,SAAS,SAAS,oBAAoB,QAAQ,EAAE;AAE7E,iBAAgB;AACd,MAAI,CAAC,cAAc,CAAC,WAAW,CAAC,QAAQ;AACtC,WAAQ,MAAM,gEAAgE;IAAE;IAAY;IAAS;IAAQ,CAAC;AAC9G;;AAGF,kBAAgB,UAAU,OAAO,eAAe,YAAY,SAAS,QAAQ;AAE7E,kBAAgB,QAAQ,mBAAmB,WAAS;GAClD,MAAM,YAAYC;AAClB,WAAQ,UAAU;AAClB,qBAAkB,UAAU;IAC5B;AAEF,eAAa;AACX,mBAAgB,SAAS,OAAO;AAChC,mBAAgB,UAAU;AAC1B,WAAQ,EAAE,CAAC;;IAEZ;EAAC;EAAQ;EAAY;EAAS;EAAS;EAAgB,CAAC;AAE3D,QAAO;EAAE;EAAM,OAAO,gBAAgB;EAAS;;;;;;;;;;;;;;;;;;;;;AChCjD,MAAa,iBAAwB,SAA0B;CAC7D,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,CAAC,MAAM,WAAW,UAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,SAAoC,KAAK;CACnE,MAAM,EAAE,YAAY,SAAS,OAAO,QAAQ,EAAE;CAE9C,MAAM,eAAe,aAAa,WAAkB;AAClD,UAAQC,OAAc;IACrB,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,OAAQ;EAE/C,MAAM,eAAe,OAAO,cAAc,YAAY,SAAS,GAAG;AAElE,eAAa,kBAAkB,aAAa;AAC5C,WAAS,aAAa;AAEtB,eAAa;AACX,WAAQ,OAAU;AAClB,YAAS,KAAK;AACd,gBAAa,OAAO;;IAErB;EAAC;EAAQ;EAAY;EAAS;EAAI;EAAa,CAAC;AAEnD,QAAO;EAAE;EAAM;EAAO"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@motiadev/stream-client-react",
|
|
3
3
|
"description": "Motia Stream Client React Package – Responsible for managing streams of data.",
|
|
4
|
-
"version": "0.17.6-beta.188-
|
|
4
|
+
"version": "0.17.6-beta.188-977165",
|
|
5
5
|
"license": "Elastic-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.js",
|
|
@@ -11,12 +11,13 @@
|
|
|
11
11
|
"react": "^19.2.3"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@motiadev/stream-client-browser": "0.17.6-beta.188-
|
|
14
|
+
"@motiadev/stream-client-browser": "0.17.6-beta.188-977165"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
17
17
|
"@types/react": "^19.2.7",
|
|
18
18
|
"tsdown": "^0.16.6",
|
|
19
|
-
"typescript": "^5.7.2"
|
|
19
|
+
"typescript": "^5.7.2",
|
|
20
|
+
"react": "^19.2.3"
|
|
20
21
|
},
|
|
21
22
|
"exports": {
|
|
22
23
|
".": "./dist/index.js",
|
package/src/use-stream-group.ts
CHANGED
|
@@ -36,7 +36,10 @@ export const useStreamGroup = <TData extends { id: string }>(args?: StreamGroupA
|
|
|
36
36
|
const { streamName, groupId, sortKey, setData: setDataCallback } = args || {}
|
|
37
37
|
|
|
38
38
|
useEffect(() => {
|
|
39
|
-
if (!streamName || !groupId || !stream)
|
|
39
|
+
if (!streamName || !groupId || !stream) {
|
|
40
|
+
console.error('useStreamGroup: streamName, groupId or stream is not defined', { streamName, groupId, stream })
|
|
41
|
+
return
|
|
42
|
+
}
|
|
40
43
|
|
|
41
44
|
subscriptionRef.current = stream.subscribeGroup(streamName, groupId, sortKey)
|
|
42
45
|
|