@emeryld/rrroutes-client 2.2.5 → 2.2.6

package/dist/index.mjs

@@ -655,7 +655,50 @@ import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as us
 function createSocketedRouteHook(args) {
   const { buildRoute, useClient = () => useSocketClient() } = args;
   return function useSocketedRoute(params) {
-    const { routeKey, socketEvent, handlers, buildOptions, buildMeta, useOptions } = params;
+    const { routeKey, socketEvent, handlers, buildOptions, buildMeta, debug, useOptions } = params;
+    const renderRef = useRef2(0);
+    const prevInputsRef = useRef2();
+    const debugName = buildMeta?.name;
+    const render = ++renderRef.current;
+    const renderChanged = [];
+    const prevInputs = prevInputsRef.current;
+    if (prevInputs) {
+      if (!Object.is(prevInputs.routeKey, routeKey)) renderChanged.push("routeKey");
+      if (!Object.is(prevInputs.socketEvent, socketEvent)) renderChanged.push("socketEvent");
+      if (!Object.is(prevInputs.buildOptions, buildOptions)) renderChanged.push("buildOptions");
+      if (!Object.is(prevInputs.buildMeta, buildMeta)) renderChanged.push("buildMeta");
+      if (!Object.is(prevInputs.debug, debug)) renderChanged.push("debug");
+      if (!Object.is(prevInputs.args, useOptions?.args)) renderChanged.push("args");
+      if (!Object.is(prevInputs.options, useOptions?.options)) renderChanged.push("options");
+    }
+    prevInputsRef.current = {
+      routeKey,
+      socketEvent,
+      buildOptions,
+      buildMeta,
+      debug,
+      args: useOptions?.args,
+      options: useOptions?.options
+    };
+    const debugRef = useRef2(debug);
+    useEffect2(() => {
+      debugRef.current = debug;
+    }, [debug]);
+    const emitDebug = useCallback(
+      (event) => {
+        const d = debugRef.current;
+        if (!d?.logger) return;
+        if (!d[event.type]) return;
+        const name = event.name ?? debugName;
+        if (d.only && name && !d.only.includes(name)) return;
+        d.logger({ ...event, name });
+      },
+      [debugName]
+    );
+    const verboseRef = useRef2(!!debug?.verbose);
+    useEffect2(() => {
+      verboseRef.current = !!debug?.verbose;
+    }, [debug]);
     const handlersRef = useRef2(handlers);
     useEffect2(() => {
       handlersRef.current = handlers;
@@ -664,23 +707,74 @@ function createSocketedRouteHook(args) {
       () => buildRoute(routeKey, buildOptions, buildMeta),
       [buildRoute, routeKey, buildOptions, buildMeta]
     );
+    useEffect2(() => {
+      emitDebug({
+        type: "build",
+        routeKey,
+        socketEvent,
+        options: verboseRef.current ? { buildOptions, buildMeta, useOptions } : void 0
+      });
+    }, [emitDebug, routeKey, socketEvent, buildOptions, buildMeta, useOptions]);
     const client = useClient();
     const [rooms, setRooms] = useState2([]);
     const roomsKey = rooms.slice().sort().join("|");
+    const roomsRef = useRef2([]);
+    roomsRef.current = rooms;
+    const prevRoomsKeyRef = useRef2(roomsKey);
+    const prevClientRef = useRef2(client);
+    const prevRouteKeyRef = useRef2(routeKey);
+    const prevSocketEventRef = useRef2(socketEvent);
+    const prevSubscribeDepsRef = useRef2({
+      client,
+      socketEvent,
+      routeArgs: useOptions?.args,
+      routeKey
+    });
+    useEffect2(() => {
+      emitDebug({
+        type: "render",
+        render,
+        routeKey,
+        socketEvent,
+        changed: renderChanged,
+        rooms: verboseRef.current ? roomsRef.current : void 0
+      });
+    }, [emitDebug, render, routeKey, socketEvent]);
     const applyRooms = useCallback(
-      (page) => {
+      (page, source) => {
         const onReceiveRooms = handlersRef.current.onReceiveRooms;
         if (!onReceiveRooms) return;
         setRooms((prev) => {
           const next = onReceiveRooms(page, prev);
           const unique = Array.from(new Set(next.filter(Boolean)));
           if (prev.length === unique.length && prev.every((room, idx) => room === unique[idx])) {
+            emitDebug({
+              type: "rooms",
+              phase: "derive",
+              routeKey,
+              socketEvent,
+              rooms: unique,
+              prev,
+              reason: "unchanged",
+              meta: verboseRef.current ? { page, source } : void 0,
+              source
+            });
             return prev;
           }
+          emitDebug({
+            type: "rooms",
+            phase: "derive",
+            routeKey,
+            socketEvent,
+            rooms: unique,
+            prev,
+            meta: verboseRef.current ? { page, source } : void 0,
+            source
+          });
           return unique;
         });
       },
-      []
+      [emitDebug, routeKey, socketEvent]
     );
     const routeArgs = useOptions?.args;
     const callerOptions = useOptions?.options;
@@ -689,10 +783,17 @@ function createSocketedRouteHook(args) {
         ...callerOptions ?? {},
         onReceive(page) {
           callerOptions?.onReceive?.(page);
-          applyRooms(page);
+          applyRooms(page, "onReceive");
+          emitDebug({
+            type: "onReceive",
+            routeKey,
+            socketEvent,
+            page: verboseRef.current ? page : void 0,
+            rooms: verboseRef.current ? roomsRef.current : void 0
+          });
         }
       }),
-      [callerOptions, applyRooms]
+      [callerOptions, applyRooms, emitDebug, routeKey, socketEvent]
     );
     const endpointArgs = routeArgs ? [routeArgs, mergedOptions] : [mergedOptions];
     const { data } = endpoint.useEndpoint(...endpointArgs);
@@ -700,24 +801,84 @@ function createSocketedRouteHook(args) {
       if (!data) return;
       const pages = data?.pages;
       if (Array.isArray(pages)) {
-        pages.forEach(applyRooms);
+        pages.forEach((p) => applyRooms(p, "hydrate"));
         return;
       }
-      applyRooms(data);
+      applyRooms(data, "hydrate");
     }, [data, applyRooms]);
     useEffect2(() => {
+      const prev = prevSubscribeDepsRef.current;
+      const changedDeps = [];
+      if (prev.client !== client) changedDeps.push("client");
+      if (prev.socketEvent !== socketEvent) changedDeps.push("socketEvent");
+      if (!Object.is(prev.routeArgs, routeArgs)) changedDeps.push("args");
+      if (prev.routeKey !== routeKey) changedDeps.push("routeKey");
+      prevSubscribeDepsRef.current = { client, socketEvent, routeArgs, routeKey };
+      emitDebug({
+        type: "effect",
+        effect: "subscribe",
+        phase: "run",
+        changedDeps: changedDeps.length ? changedDeps : void 0
+      });
       const stop = client.on(socketEvent, (payload, meta) => {
-        const updater = (prev) => handlersRef.current.handleMessage(prev, payload, meta);
+        const updater = (prev2) => handlersRef.current.handleMessage(prev2, payload, meta);
         const setDataArgs = routeArgs ? [routeArgs] : [];
         endpoint.setData(updater, ...setDataArgs);
+        emitDebug({
+          type: "receive",
+          routeKey,
+          socketEvent,
+          payload: verboseRef.current ? payload : void 0,
+          envelope: verboseRef.current ? {
+            eventName: meta.envelope.eventName,
+            sentAt: meta.envelope.sentAt,
+            sentTo: meta.envelope.sentTo,
+            metadata: meta.envelope.metadata
+          } : void 0
+        });
+        emitDebug({
+          type: "setData",
+          routeKey,
+          socketEvent,
+          args: verboseRef.current ? routeArgs : void 0
+        });
       });
-      return stop;
-    }, [client, socketEvent, endpoint, routeArgs]);
+      emitDebug({ type: "subscribe", phase: "start", routeKey, socketEvent });
+      return () => {
+        emitDebug({ type: "subscribe", phase: "stop", routeKey, socketEvent });
+        stop();
+        emitDebug({ type: "effect", effect: "subscribe", phase: "cleanup" });
+      };
+    }, [client, socketEvent, endpoint, routeArgs, emitDebug, routeKey]);
     useEffect2(() => {
       let cancelled = false;
       const { joinMeta, leaveMeta } = handlersRef.current;
+      const changedDeps = [];
+      if (prevRoomsKeyRef.current !== roomsKey) changedDeps.push("rooms");
+      if (prevClientRef.current !== client) changedDeps.push("client");
+      if (prevRouteKeyRef.current !== routeKey) changedDeps.push("routeKey");
+      if (prevSocketEventRef.current !== socketEvent) changedDeps.push("socketEvent");
+      prevRoomsKeyRef.current = roomsKey;
+      prevClientRef.current = client;
+      prevRouteKeyRef.current = routeKey;
+      prevSocketEventRef.current = socketEvent;
+      emitDebug({
+        type: "effect",
+        effect: "rooms",
+        phase: "run",
+        changedDeps: changedDeps.length ? changedDeps : void 0,
+        rooms
+      });
       (async () => {
         if (!rooms.length) return;
+        emitDebug({
+          type: "rooms",
+          phase: "join",
+          routeKey,
+          socketEvent,
+          rooms,
+          meta: verboseRef.current ? joinMeta : void 0
+        });
         try {
           await client.joinRooms(rooms, joinMeta);
         } catch {
@@ -734,8 +895,22 @@ function createSocketedRouteHook(args) {
         if (!rooms.length) return;
         client.leaveRooms(rooms, leaveMeta).catch(() => {
         });
+        emitDebug({
+          type: "rooms",
+          phase: "leave",
+          routeKey,
+          socketEvent,
+          rooms,
+          meta: verboseRef.current ? leaveMeta : void 0
+        });
+        emitDebug({
+          type: "effect",
+          effect: "rooms",
+          phase: "cleanup",
+          rooms
+        });
       };
-    }, [client, roomsKey, rooms]);
+    }, [client, roomsKey, rooms, emitDebug, routeKey, socketEvent]);
     return { data, rooms };
   };
 }