@emeryld/rrroutes-client 2.2.7 → 2.2.9

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   buildRoomPayloadSchema: () => buildRoomPayloadSchema,
   buildRouter: () => buildRouter,
   buildSocketProvider: () => buildSocketProvider,
+  buildSocketedRoute: () => buildSocketedRoute,
   createRouteClient: () => createRouteClient,
   defaultFetcher: () => defaultFetcher,
   useSocketClient: () => useSocketClient,
@@ -68,19 +69,9 @@ var defaultFetcher = async (req) => {
 };
 
 // src/routesV3.client.index.ts
+var import_react = require("react");
 var import_react_query = require("@tanstack/react-query");
 var import_rrroutes_contract = require("@emeryld/rrroutes-contract");
-function splitUseEndpointArgs(useArgs, expectsArgs) {
-  if (useArgs.length === 0) return { args: void 0, options: void 0 };
-  if (!expectsArgs) {
-    return { args: void 0, options: useArgs[0] };
-  }
-  const [maybeArgs, maybeOptions] = useArgs;
-  return {
-    args: maybeArgs,
-    options: useArgs.length > 1 ? maybeOptions : void 0
-  };
-}
 var toUpper = (m) => m.toUpperCase();
 function zParse(value, schema) {
   return schema ? schema.parse(value) : value;
@@ -332,14 +323,31 @@ function createRouteClient(opts) {
     };
     if (isGet && isFeed) {
       const useEndpoint2 = (...useArgs) => {
-        const { args, options } = splitUseEndpointArgs(useArgs, expectsArgs);
+        const args = useArgs[0];
         emit({ type: "useEndpoint", leaf: leafLabel, variant: "infiniteGet" });
         const tuple = toArgsTuple(args);
         const params = args?.params;
         const query = args?.query;
         const buildOptions = rqOpts ?? {};
+        const listenersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+        const notifyOnReceive = (0, import_react.useCallback)(
+          (data) => {
+            buildOptions?.onReceive?.(data);
+            listenersRef.current.forEach((listener) => listener(data));
+          },
+          []
+        );
+        const registerOnReceive = (0, import_react.useCallback)(
+          (listener) => {
+            listenersRef.current.add(listener);
+            return () => {
+              listenersRef.current.delete(listener);
+            };
+          },
+          []
+        );
         const { normalizedQuery, normalizedParams } = buildUrl(leaf, baseUrl, params, query);
-        return (0, import_react_query.useInfiniteQuery)({
+        const queryResult = (0, import_react_query.useInfiniteQuery)({
           ...buildOptions,
           queryKey: getQueryKeys(...tuple),
           initialPageParam: void 0,
@@ -352,14 +360,12 @@ function createRouteClient(opts) {
             };
             return fetchEndpoint(tuple, {
               queryOverride: pageQuery,
-              onReceive: (data) => {
-                buildOptions?.onReceive?.(data);
-                options?.onReceive?.(data);
-              }
+              onReceive: notifyOnReceive
             });
           }
           // NOTE: TData is InfiniteData<T>, so we don't need a select here.
         }, queryClient);
+        return { ...queryResult, onReceive: registerOnReceive };
       };
       return {
         getQueryKeys,
@@ -371,24 +377,39 @@ function createRouteClient(opts) {
     }
     if (isGet) {
       const useEndpoint2 = (...useArgs) => {
-        const { args, options } = splitUseEndpointArgs(useArgs, expectsArgs);
+        const args = useArgs[0];
         emit({ type: "useEndpoint", leaf: leafLabel, variant: "get" });
         const tuple = toArgsTuple(args);
         const params = args?.params;
         const query = args?.query;
         const buildOptions = rqOpts ?? {};
+        const listenersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+        const notifyOnReceive = (0, import_react.useCallback)(
+          (data) => {
+            buildOptions?.onReceive?.(data);
+            listenersRef.current.forEach((listener) => listener(data));
+          },
+          []
+        );
+        const registerOnReceive = (0, import_react.useCallback)(
+          (listener) => {
+            listenersRef.current.add(listener);
+            return () => {
+              listenersRef.current.delete(listener);
+            };
+          },
+          []
+        );
         buildUrl(leaf, baseUrl, params, query);
-        return (0, import_react_query.useQuery)({
+        const queryResult = (0, import_react_query.useQuery)({
           ...buildOptions,
           queryKey: getQueryKeys(...tuple),
           placeholderData: import_react_query.keepPreviousData,
           queryFn: () => fetchEndpoint(tuple, {
-            onReceive: (data) => {
-              buildOptions?.onReceive?.(data);
-              options?.onReceive?.(data);
-            }
+            onReceive: notifyOnReceive
           })
         }, queryClient);
+        return { ...queryResult, onReceive: registerOnReceive };
       };
       return {
         getQueryKeys,
@@ -414,18 +435,29 @@ function createRouteClient(opts) {
       return result;
     };
     const useEndpoint = (...useArgs) => {
-      const { args, options } = splitUseEndpointArgs(useArgs, expectsArgs);
+      const args = useArgs[0];
       emit({ type: "useEndpoint", leaf: leafLabel, variant: "mutation" });
       const tuple = toArgsTuple(args);
-      return (0, import_react_query.useMutation)({
+      const listenersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+      const notifyListeners = (0, import_react.useCallback)((data) => {
+        listenersRef.current.forEach((listener) => listener(data));
+      }, []);
+      const registerOnReceive = (0, import_react.useCallback)((listener) => {
+        listenersRef.current.add(listener);
+        return () => {
+          listenersRef.current.delete(listener);
+        };
+      }, []);
+      const mutationResult = (0, import_react_query.useMutation)({
         ...mutationBuildOptions,
         mutationKey: getQueryKeys(...tuple),
         mutationFn: async (body) => {
           const result = await fetchMutation(...[...tuple, body]);
-          options?.onReceive?.(result);
+          notifyListeners(result);
           return result;
         }
       }, queryClient);
+      return { ...mutationResult, onReceive: registerOnReceive };
     };
     return {
       getQueryKeys,
@@ -684,6 +716,90 @@ function useSocketConnection(args) {
   }, [client, event, onMessage, autoJoin, autoLeave, ...normalizedRooms]);
 }
 
+// src/sockets/socketedRoute/socket.client.helper.ts
+var import_react2 = require("react");
+function normalizeRooms(rooms) {
+  if (rooms == null) return [];
+  const list = Array.isArray(rooms) ? rooms : [rooms];
+  const seen = /* @__PURE__ */ new Set();
+  const normalized = [];
+  for (const r of list) {
+    if (typeof r !== "string") continue;
+    if (seen.has(r)) continue;
+    seen.add(r);
+    normalized.push(r);
+  }
+  return normalized;
+}
+function roomsFromData(data, toRooms) {
+  if (data == null) return [];
+  const merge = /* @__PURE__ */ new Set();
+  const add = (input) => {
+    for (const r of normalizeRooms(input)) merge.add(r);
+  };
+  const maybePages = data?.pages;
+  if (Array.isArray(maybePages)) {
+    for (const page of maybePages) add(toRooms(page));
+    return Array.from(merge);
+  }
+  add(toRooms(data));
+  return Array.from(merge);
+}
+function buildSocketedRoute(options) {
+  const { built, event, toRooms, applyMessage, joinMeta, leaveMeta, autoJoin = true, autoLeave = true } = options;
+  return (...useArgs) => {
+    const client = useSocketClient();
+    const endpointResult = built.useEndpoint(...useArgs);
+    const argsKey = (0, import_react2.useMemo)(() => JSON.stringify(useArgs[0] ?? null), [useArgs]);
+    const [rooms, setRooms] = (0, import_react2.useState)(
+      () => roomsFromData(endpointResult.data, toRooms)
+    );
+    const roomsKey = (0, import_react2.useMemo)(() => rooms.join("|"), [rooms]);
+    (0, import_react2.useEffect)(() => {
+      const unsubscribe = endpointResult.onReceive((data) => {
+        setRooms((prev) => {
+          const next = normalizeRooms(toRooms(data));
+          if (next.length === 0) return prev;
+          const merged = new Set(prev);
+          next.forEach((r) => merged.add(r));
+          return Array.from(merged);
+        });
+      });
+      return unsubscribe;
+    }, [endpointResult, toRooms]);
+    (0, import_react2.useEffect)(() => {
+      setRooms(roomsFromData(endpointResult.data, toRooms));
+    }, [endpointResult.data, toRooms]);
+    (0, import_react2.useEffect)(() => {
+      if (!autoJoin || rooms.length === 0) return;
+      let active = true;
+      (async () => {
+        try {
+          await client.joinRooms(rooms, joinMeta);
+        } catch {
+        }
+      })();
+      return () => {
+        if (!active || !autoLeave || rooms.length === 0) return;
+        active = false;
+        void client.leaveRooms(rooms, leaveMeta).catch(() => {
+        });
+      };
+    }, [client, joinMeta, leaveMeta, autoJoin, autoLeave, roomsKey]);
+    (0, import_react2.useEffect)(() => {
+      const unsubscribe = client.on(event, (payload, meta) => {
+        built.setData((prev) => {
+          const next = applyMessage(prev, payload, meta);
+          setRooms(roomsFromData(next, toRooms));
+          return next;
+        }, ...useArgs);
+      });
+      return unsubscribe;
+    }, [client, event, applyMessage, built, argsKey]);
+    return { ...endpointResult, rooms };
+  };
+}
+
 // src/sockets/socket.client.index.ts
 var SocketClient = class {
   constructor(events, opts) {
@@ -1306,6 +1422,7 @@ var SocketClient = class {
   buildRoomPayloadSchema,
   buildRouter,
   buildSocketProvider,
+  buildSocketedRoute,
   createRouteClient,
   defaultFetcher,
   useSocketClient,