@motiadev/stream-client-react 0.17.6-beta.188-259338 → 0.17.6-beta.188-998351

package/dist/index.js

@@ -1,5 +1,6 @@
 import { Stream, Stream as Stream$1, StreamGroupSubscription, StreamItemSubscription } from "@motiadev/stream-client-browser";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import React, { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/motia-stream-context.ts
@@ -7,18 +8,46 @@ const MotiaStreamContext = React.createContext({ stream: null });
 
 //#endregion
 //#region src/motia-stream-provider.tsx
-const MotiaStreamProvider = ({ children, address, protocols }) => {
+const MotiaStreamProvider = (t0) => {
+	const $ = c(9);
+	const { children, address, protocols } = t0;
 	const [stream, setStream] = useState(null);
-	useEffect(() => {
-		const streamInstance = new Stream$1(address, { protocols });
-		setStream(streamInstance);
-		return () => streamInstance.close();
-	}, [address, protocols]);
-	const contextValue = useMemo(() => ({ stream }), [stream]);
-	return /* @__PURE__ */ jsx(MotiaStreamContext.Provider, {
-		value: contextValue,
-		children
-	});
+	let t1;
+	let t2;
+	if ($[0] !== address || $[1] !== protocols) {
+		t1 = () => {
+			const streamInstance = new Stream$1(address, { protocols });
+			setStream(streamInstance);
+			return () => streamInstance.close();
+		};
+		t2 = [address, protocols];
+		$[0] = address;
+		$[1] = protocols;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[4] !== stream) {
+		t3 = { stream };
+		$[4] = stream;
+		$[5] = t3;
+	} else t3 = $[5];
+	const contextValue = t3;
+	let t4;
+	if ($[6] !== children || $[7] !== contextValue) {
+		t4 = /* @__PURE__ */ jsx(MotiaStreamContext.Provider, {
+			value: contextValue,
+			children
+		});
+		$[6] = children;
+		$[7] = contextValue;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
 };
 
 //#endregion
@@ -54,17 +83,35 @@ const useMotiaStream = () => {
 * useStreamEventHandler({ event, type: 'on-custom-event', listener: onEventHandled }, [])
 * ```
 */
-const useStreamEventHandler = ({ event, type, listener }, dependencies) => {
-	useEffect(() => {
-		if (event) {
-			event.onEvent(type, listener);
-			return () => event.offEvent(type, listener);
-		}
-	}, [
-		event,
-		type,
-		...dependencies
-	]);
+const useStreamEventHandler = (t0, dependencies) => {
+	const $ = c(8);
+	const { event, type, listener } = t0;
+	let t1;
+	if ($[0] !== event || $[1] !== listener || $[2] !== type) {
+		t1 = () => {
+			if (event) {
+				event.onEvent(type, listener);
+				return () => event.offEvent(type, listener);
+			}
+		};
+		$[0] = event;
+		$[1] = listener;
+		$[2] = type;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== dependencies || $[5] !== event || $[6] !== type) {
+		t2 = [
+			event,
+			type,
+			...dependencies
+		];
+		$[4] = dependencies;
+		$[5] = event;
+		$[6] = type;
+		$[7] = t2;
+	} else t2 = $[7];
+	useEffect(t1, t2);
 };
 
 //#endregion
@@ -103,8 +150,8 @@ const useStreamGroup = (args) => {
 			return;
 		}
 		subscriptionRef.current = stream.subscribeGroup(streamName, groupId, sortKey);
-		subscriptionRef.current.addChangeListener((data$1) => {
-			const typedData = data$1;
+		subscriptionRef.current.addChangeListener((data_0) => {
+			const typedData = data_0;
 			setData(typedData);
 			setDataCallback?.(typedData);
 		});
@@ -145,34 +192,68 @@ const useStreamGroup = (args) => {
 * ```
 */
 const useStreamItem = (args) => {
+	const $ = c(12);
 	const { stream } = useMotiaStream();
 	const [data, setData] = useState();
 	const [event, setEvent] = useState(null);
-	const { streamName, groupId, id } = args || {};
-	const handleChange = useCallback((data$1) => {
-		setData(data$1);
-	}, []);
-	useEffect(() => {
-		if (!streamName || !groupId || !id || !stream) return;
-		const subscription = stream.subscribeItem(streamName, groupId, id);
-		subscription.addChangeListener(handleChange);
-		setEvent(subscription);
-		return () => {
-			setData(void 0);
-			setEvent(null);
-			subscription.close();
+	let t0;
+	if ($[0] !== args) {
+		t0 = args || {};
+		$[0] = args;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { streamName, groupId, id } = t0;
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (data_0) => {
+			setData(data_0);
 		};
-	}, [
-		stream,
-		streamName,
-		groupId,
-		id,
-		handleChange
-	]);
-	return {
-		data,
-		event
-	};
+		$[2] = t1;
+	} else t1 = $[2];
+	const handleChange = t1;
+	let t2;
+	let t3;
+	if ($[3] !== groupId || $[4] !== id || $[5] !== stream || $[6] !== streamName) {
+		t2 = () => {
+			if (!streamName || !groupId || !id || !stream) return;
+			const subscription = stream.subscribeItem(streamName, groupId, id);
+			subscription.addChangeListener(handleChange);
+			setEvent(subscription);
+			return () => {
+				setData(void 0);
+				setEvent(null);
+				subscription.close();
+			};
+		};
+		t3 = [
+			stream,
+			streamName,
+			groupId,
+			id,
+			handleChange
+		];
+		$[3] = groupId;
+		$[4] = id;
+		$[5] = stream;
+		$[6] = streamName;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t2 = $[7];
+		t3 = $[8];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[9] !== data || $[10] !== event) {
+		t4 = {
+			data,
+			event
+		};
+		$[9] = data;
+		$[10] = event;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 };
 
 //#endregion

package/dist/index.js.map

@@ -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) {\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"}
+{"version":3,"file":"index.js","names":["Stream","React","MotiaStreamContextType","stream","MotiaStreamContext","createContext","Stream","useEffect","useMemo","useState","MotiaStreamContext","Props","React","PropsWithChildren","address","protocols","MotiaStreamProvider","FC","t0","$","_c","children","stream","setStream","t1","t2","streamInstance","close","t3","contextValue","t4","React","MotiaStreamContext","useMotiaStream","context","useContext","Error","StreamSubscription","DependencyList","useEffect","UseStreamEventHandler","event","type","listener","useStreamEventHandler","t0","dependencies","$","_c","t1","onEvent","offEvent","t2","StreamSubscription","useEffect","useRef","useState","useMotiaStream","StreamGroupArgs","id","streamName","groupId","sortKey","TData","setData","data","useStreamGroup","args","stream","subscriptionRef","setDataCallback","console","error","current","subscribeGroup","addChangeListener","typedData","close","event","StreamSubscription","useCallback","useEffect","useState","useMotiaStream","StreamItemArgs","streamName","groupId","id","useStreamItem","args","$","_c","stream","data","setData","event","setEvent","t0","t1","Symbol","for","data_0","TData","handleChange","t2","t3","subscription","subscribeItem","addChangeListener","undefined","close","t4"],"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":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@motiadev/stream-client-react",
   "description": "Motia Stream Client React Package – Responsible for managing streams of data.",
-  "version": "0.17.6-beta.188-259338",
+  "version": "0.17.6-beta.188-998351",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,13 +11,14 @@
     "react": "^19.2.3"
   },
   "dependencies": {
-    "@motiadev/stream-client-browser": "0.17.6-beta.188-259338"
+    "@motiadev/stream-client-browser": "0.17.6-beta.188-998351"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^6.1.0",
     "@types/react": "^19.2.7",
+    "react": "^19.2.3",
     "tsdown": "^0.16.6",
-    "typescript": "^5.7.2",
-    "react": "^19.2.3"
+    "typescript": "^5.7.2"
   },
   "exports": {
     ".": "./dist/index.js",

package/tsdown.config.ts

@@ -1,3 +1,4 @@
+import pluginBabel from '@rollup/plugin-babel'
 import { defineConfig } from 'tsdown'
 
 export default defineConfig({
@@ -6,7 +7,7 @@ export default defineConfig({
   },
   format: 'esm',
   platform: 'browser',
-  external: ['@motiadev/stream-client-browser', /^react($|\/)/, /^react-dom($|\/)/],
+  external: ['@motiadev/stream-client-browser', /^react($|\/)/, /^react-dom($|\/)/, 'react/jsx-runtime'],
   dts: {
     build: true,
   },
@@ -15,4 +16,15 @@ export default defineConfig({
   exports: {
     devExports: 'development',
   },
+  plugins: [
+    pluginBabel({
+      babelHelpers: 'bundled',
+      parserOpts: {
+        sourceType: 'module',
+        plugins: ['jsx', 'typescript'],
+      },
+      plugins: ['babel-plugin-react-compiler'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }),
+  ],
 })