request-iframe 0.0.2 → 0.0.4

package/react/library/index.d.ts

@@ -52,9 +52,10 @@ export declare function useClient(targetFnOrRef: (() => HTMLIFrameElement | Wind
  *   const server = useServer({ secretKey: 'my-app' });
  *
  *   useEffect(() => {
- *     server.on('/api/data', (req, res) => {
+ *     const off = server.on('/api/data', (req, res) => {
  *       res.send({ data: 'Hello' });
  *     });
+ *     return off;
  *   }, [server]);
  *
  *   return <div>Server Component</div>;
@@ -85,7 +86,7 @@ export declare function useServer(options?: RequestIframeServerOptions, deps?: r
  * };
  * ```
  */
-export declare function useServerHandler(server: RequestIframeServer | null, path: string, handler: ServerHandler, deps?: readonly unknown[]): void;
+export declare function useServerHandler(server: RequestIframeServer | null, path: string, handler: ServerHandler, deps: readonly unknown[]): void;
 /**
  * React hook for registering server handlers map
  *
@@ -113,5 +114,5 @@ export declare function useServerHandler(server: RequestIframeServer | null, pat
  * };
  * ```
  */
-export declare function useServerHandlerMap(server: RequestIframeServer | null, map: Record<string, ServerHandler>, deps?: readonly unknown[]): void;
+export declare function useServerHandlerMap(server: RequestIframeServer | null, map: Record<string, ServerHandler>, deps: readonly unknown[]): void;
 //# sourceMappingURL=index.d.ts.map

package/react/library/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAC/B,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,SAAS,CACvB,aAAa,EAAE,CAAC,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAAC,EACvG,OAAO,CAAC,EAAE,0BAA0B,EACpC,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,GACxB,mBAAmB,GAAG,IAAI,CA8C5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CACvB,OAAO,CAAC,EAAE,0BAA0B,EACpC,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,GACxB,mBAAmB,GAAG,IAAI,CAwB5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,mBAAmB,GAAG,IAAI,EAClC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,aAAa,EACtB,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,GACxB,IAAI,CAcN;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,mBAAmB,GAAG,IAAI,EAClC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EAClC,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,GACxB,IAAI,CAaN"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1F,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAC/B,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,SAAS,CACvB,aAAa,EAAE,CAAC,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAAC,EACvG,OAAO,CAAC,EAAE,0BAA0B,EACpC,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,GACxB,mBAAmB,GAAG,IAAI,CA2E5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CACvB,OAAO,CAAC,EAAE,0BAA0B,EACpC,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,GACxB,mBAAmB,GAAG,IAAI,CA2C5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,mBAAmB,GAAG,IAAI,EAClC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,SAAS,OAAO,EAAE,GACvB,IAAI,CAmBN;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,mBAAmB,GAAG,IAAI,EAClC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EAClC,IAAI,EAAE,SAAS,OAAO,EAAE,GACvB,IAAI,CA2BN"}

package/react/library/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,215 +10,281 @@ exports.useServerHandler = useServerHandler;
 exports.useServerHandlerMap = useServerHandlerMap;
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.array.sort.js");
 require("core-js/modules/web.dom-collections.iterator.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _ = require("../..");
-/**
- * React hook for using request-iframe client
- * 
- * @param targetFnOrRef - function that returns iframe element or Window object, or a React ref object
- * @param options - client options
- * @param deps - dependency array (optional, for re-creating client when dependencies change)
- * @returns client instance
- * 
- * @example
- * ```tsx
- * // Using function
- * const MyComponent = () => {
- *   const iframeRef = useRef<HTMLIFrameElement>(null);
- *   const client = useClient(() => iframeRef.current, { secretKey: 'my-app' });
- * 
- *   const handleClick = async () => {
- *     if (client) {
- *       const response = await client.send('/api/data', { id: 1 });
- *       console.log(response.data);
- *     }
- *   };
- * 
- *   return (
- *     <div>
- *       <iframe ref={iframeRef} src="/iframe.html" />
- *       <button onClick={handleClick}>Send Request</button>
- *     </div>
- *   );
- * };
- * 
- * // Using ref directly
- * const MyComponent2 = () => {
- *   const iframeRef = useRef<HTMLIFrameElement>(null);
- *   const client = useClient(iframeRef, { secretKey: 'my-app' });
- *   // ...
- * };
- * ```
+/**
+ * React hook for using request-iframe client
+ * 
+ * @param targetFnOrRef - function that returns iframe element or Window object, or a React ref object
+ * @param options - client options
+ * @param deps - dependency array (optional, for re-creating client when dependencies change)
+ * @returns client instance
+ * 
+ * @example
+ * ```tsx
+ * // Using function
+ * const MyComponent = () => {
+ *   const iframeRef = useRef<HTMLIFrameElement>(null);
+ *   const client = useClient(() => iframeRef.current, { secretKey: 'my-app' });
+ * 
+ *   const handleClick = async () => {
+ *     if (client) {
+ *       const response = await client.send('/api/data', { id: 1 });
+ *       console.log(response.data);
+ *     }
+ *   };
+ * 
+ *   return (
+ *     <div>
+ *       <iframe ref={iframeRef} src="/iframe.html" />
+ *       <button onClick={handleClick}>Send Request</button>
+ *     </div>
+ *   );
+ * };
+ * 
+ * // Using ref directly
+ * const MyComponent2 = () => {
+ *   const iframeRef = useRef<HTMLIFrameElement>(null);
+ *   const client = useClient(iframeRef, { secretKey: 'my-app' });
+ *   // ...
+ * };
+ * ```
  */
 function useClient(targetFnOrRef, options, deps) {
   var clientRef = (0, _react.useRef)(null);
-  var optionsRef = (0, _react.useRef)(options);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    client = _useState2[0],
+    setClient = _useState2[1];
+  var lastTargetRef = (0, _react.useRef)(null);
   var targetFnOrRefRef = (0, _react.useRef)(targetFnOrRef);
+  var optionsRef = (0, _react.useRef)(options);
 
-  // Update refs when they change
-  (0, _react.useEffect)(() => {
-    optionsRef.current = options;
-    targetFnOrRefRef.current = targetFnOrRef;
-  }, [options, targetFnOrRef]);
-  (0, _react.useEffect)(() => {
-    // Get current target
-    var target = typeof targetFnOrRefRef.current === 'function' ? targetFnOrRefRef.current() : targetFnOrRefRef.current.current;
+  /** Keep latest inputs without re-creating effect deps */
+  targetFnOrRefRef.current = targetFnOrRef;
+  optionsRef.current = options;
+  var getTarget = (0, _react.useCallback)(() => {
+    return typeof targetFnOrRefRef.current === 'function' ? targetFnOrRefRef.current() : targetFnOrRefRef.current.current;
+  }, []);
 
-    // Only create client if target is available
-    if (!target) {
-      if (clientRef.current) {
-        clientRef.current.destroy();
-        clientRef.current = null;
-      }
-      return;
-    }
-
-    // Destroy previous client if exists
+  /**
+   * Snapshot the current target during render (pure read).
+   * We use this value as an effect dependency so the effect only runs when
+   * the target actually changes (avoids StrictMode update-depth loops).
+   */
+  var target = getTarget();
+  var destroy = (0, _react.useCallback)(() => {
     if (clientRef.current) {
       clientRef.current.destroy();
       clientRef.current = null;
     }
+    lastTargetRef.current = null;
+  }, []);
 
-    // Create new client instance
-    var client = (0, _.requestIframeClient)(target, optionsRef.current);
-    clientRef.current = client;
+  /**
+   * Create/destroy client in effect to be compatible with React 18 StrictMode
+   * and concurrent rendering (avoid render-phase side effects).
+   */
+  (0, _react.useEffect)(() => {
+    /** If target unchanged, keep current client */
+    if (target === lastTargetRef.current) return;
 
-    // Cleanup: destroy client on unmount
+    /** Target changed: destroy old client and maybe create a new one */
+    if (clientRef.current) {
+      clientRef.current.destroy();
+      clientRef.current = null;
+    }
+    lastTargetRef.current = target;
+    if (!target) {
+      setClient(null);
+      return;
+    }
+    var newClient = (0, _.requestIframeClient)(target, optionsRef.current);
+    clientRef.current = newClient;
+    setClient(newClient);
     return () => {
-      if (clientRef.current) {
-        clientRef.current.destroy();
+      /** Cleanup only if it's still the current client */
+      if (clientRef.current === newClient) {
+        newClient.destroy();
         clientRef.current = null;
+        lastTargetRef.current = null;
       }
     };
-  }, deps !== undefined ? deps : [targetFnOrRef, options]);
-  return clientRef.current;
+  }, deps ? [...deps, target] : [target]);
+
+  // Cleanup on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      destroy();
+    };
+  }, []);
+  return client;
 }
 
-/**
- * React hook for using request-iframe server
- * 
- * @param options - server options
- * @param deps - dependency array (optional, for re-creating server when dependencies change)
- * @returns server instance
- * 
- * @example
- * ```tsx
- * const MyComponent = () => {
- *   const server = useServer({ secretKey: 'my-app' });
- * 
- *   useEffect(() => {
- *     server.on('/api/data', (req, res) => {
- *       res.send({ data: 'Hello' });
- *     });
- *   }, [server]);
- * 
- *   return <div>Server Component</div>;
- * };
- * ```
+/**
+ * React hook for using request-iframe server
+ * 
+ * @param options - server options
+ * @param deps - dependency array (optional, for re-creating server when dependencies change)
+ * @returns server instance
+ * 
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const server = useServer({ secretKey: 'my-app' });
+ * 
+ *   useEffect(() => {
+ *     const off = server.on('/api/data', (req, res) => {
+ *       res.send({ data: 'Hello' });
+ *     });
+ *     return off;
+ *   }, [server]);
+ * 
+ *   return <div>Server Component</div>;
+ * };
+ * ```
  */
 function useServer(options, deps) {
   var serverRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    server = _useState4[0],
+    setServer = _useState4[1];
   var optionsRef = (0, _react.useRef)(options);
+  optionsRef.current = options;
+  var destroy = (0, _react.useCallback)(() => {
+    if (serverRef.current) {
+      serverRef.current.destroy();
+      serverRef.current = null;
+    }
+  }, []);
 
-  // Update options ref when options change
+  /**
+   * Create/destroy server in effect to be compatible with React 18 StrictMode
+   * and concurrent rendering (avoid render-phase side effects).
+   */
   (0, _react.useEffect)(() => {
-    optionsRef.current = options;
-  }, [options]);
-  (0, _react.useEffect)(() => {
-    // Create server instance
-    var server = (0, _.requestIframeServer)(optionsRef.current);
-    serverRef.current = server;
-
-    // Cleanup: destroy server on unmount
+    if (serverRef.current) {
+      serverRef.current.destroy();
+      serverRef.current = null;
+    }
+    var newServer = (0, _.requestIframeServer)(optionsRef.current);
+    serverRef.current = newServer;
+    setServer(newServer);
     return () => {
-      if (serverRef.current) {
-        serverRef.current.destroy();
+      if (serverRef.current === newServer) {
+        newServer.destroy();
         serverRef.current = null;
       }
     };
-  }, deps !== undefined ? deps : []); // Only create once on mount by default
+  }, deps !== null && deps !== void 0 ? deps : []);
 
-  return serverRef.current;
+  // Cleanup on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      destroy();
+    };
+  }, []);
+  return server;
 }
 
-/**
- * React hook for registering server handlers
- * 
- * @param server - server instance (from useServer)
- * @param path - route path
- * @param handler - handler function
- * @param deps - dependency array (optional, for re-registering when dependencies change)
- * 
- * @example
- * ```tsx
- * const MyComponent = () => {
- *   const server = useServer();
- *   const [userId, setUserId] = useState(1);
- * 
- *   // Register handler that depends on userId
- *   useServerHandler(server, '/api/user', (req, res) => {
- *     res.send({ userId, data: 'Hello' });
- *   }, [userId]);
- * 
- *   return <div>Server Component</div>;
- * };
- * ```
+/**
+ * React hook for registering server handlers
+ * 
+ * @param server - server instance (from useServer)
+ * @param path - route path
+ * @param handler - handler function
+ * @param deps - dependency array (optional, for re-registering when dependencies change)
+ * 
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const server = useServer();
+ *   const [userId, setUserId] = useState(1);
+ * 
+ *   // Register handler that depends on userId
+ *   useServerHandler(server, '/api/user', (req, res) => {
+ *     res.send({ userId, data: 'Hello' });
+ *   }, [userId]);
+ * 
+ *   return <div>Server Component</div>;
+ * };
+ * ```
  */
 function useServerHandler(server, path, handler, deps) {
+  var handlerRef = (0, _react.useRef)(handler);
+  handlerRef.current = handler;
+  var handlerWrapper = (0, _react.useCallback)((req, res) => {
+    var _handlerRef$current;
+    return (_handlerRef$current = handlerRef.current) === null || _handlerRef$current === void 0 ? void 0 : _handlerRef$current.call(handlerRef, req, res);
+  }, []);
   (0, _react.useEffect)(() => {
     if (!server) {
       return;
     }
 
-    // Register handler and get unregister function
-    var unregister = server.on(path, handler);
+    // Register handler with stable wrapper
+    var off = server.on(path, handlerWrapper);
 
     // Cleanup: unregister handler on unmount or when deps change
-    return () => {
-      unregister();
-    };
-  }, [server, path, handler, ...(deps || [])]);
+    return off;
+  }, [server, path, handlerWrapper, ...(deps || [])]);
 }
 
-/**
- * React hook for registering server handlers map
- * 
- * @param server - server instance (from useServer)
- * @param map - map of route paths and handler functions
- * @param deps - dependency array (optional, for re-registering when dependencies change)
- * 
- * @example
- * ```tsx
- * const MyComponent = () => {
- *   const server = useServer();
- *   const [userId, setUserId] = useState(1);
- * 
- *   // Register handlers using map
- *   useServerHandlerMap(server, {
- *     '/api/user': (req, res) => {
- *       res.send({ userId, data: 'Hello' });
- *     },
- *     '/api/user2': (req, res) => {
- *       res.send({ userId, data: 'Hello' });
- *     }
- *   }, [userId]);
- * 
- *   return <div>Server Component</div>;
- * };
- * ```
+/**
+ * React hook for registering server handlers map
+ * 
+ * @param server - server instance (from useServer)
+ * @param map - map of route paths and handler functions
+ * @param deps - dependency array (optional, for re-registering when dependencies change)
+ * 
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const server = useServer();
+ *   const [userId, setUserId] = useState(1);
+ * 
+ *   // Register handlers using map
+ *   useServerHandlerMap(server, {
+ *     '/api/user': (req, res) => {
+ *       res.send({ userId, data: 'Hello' });
+ *     },
+ *     '/api/user2': (req, res) => {
+ *       res.send({ userId, data: 'Hello' });
+ *     }
+ *   }, [userId]);
+ * 
+ *   return <div>Server Component</div>;
+ * };
+ * ```
  */
 function useServerHandlerMap(server, map, deps) {
+  var mapRef = (0, _react.useRef)(map);
+  mapRef.current = map;
+  var keys = (0, _react.useMemo)(() => {
+    return Object.keys(map).sort();
+  }, [map]);
+  var mapWrapper = (0, _react.useMemo)(() => {
+    return keys.reduce((acc, key) => {
+      acc[key] = function (req, res) {
+        var _mapRef$current;
+        return (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 || (_mapRef$current = _mapRef$current[key]) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.call(this, req, res);
+      };
+      return acc;
+    }, {});
+  }, [keys]);
   (0, _react.useEffect)(() => {
     if (!server) {
       return;
     }
-    // Register handlers using map
-    server.map(map);
+    // Register handlers using map with stable wrappers
+    var off = server.map(mapWrapper);
 
     // Cleanup: unregister all handlers on unmount or when deps change
-    return () => {
-      server.off(Object.keys(map));
-    };
-  }, [server, map, ...(deps || [])]);
+    return off;
+  }, [server, mapWrapper, ...(deps || [])]);
 }

package/react/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@request-iframe/react",
+  "version": "0.0.1",
+  "main": "./library/index.js",
+  "module": "./library/index.js",
+  "typings": "./library/index.d.ts"
+}