request-iframe 0.0.2 → 0.0.3

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,223 @@ 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 targetFnOrRefRef = (0, _react.useRef)(targetFnOrRef);
-
-  // Update refs when they change
-  (0, _react.useEffect)(() => {
-    optionsRef.current = options;
-    targetFnOrRefRef.current = targetFnOrRef;
-  }, [options, targetFnOrRef]);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    client = _useState2[0],
+    setClient = _useState2[1];
   (0, _react.useEffect)(() => {
     // Get current target
-    var target = typeof targetFnOrRefRef.current === 'function' ? targetFnOrRefRef.current() : targetFnOrRefRef.current.current;
+    var target = typeof targetFnOrRef === 'function' ? targetFnOrRef() : targetFnOrRef.current;
+
+    // Destroy existing client if it exists
+    if (client) {
+      client.destroy();
+      setClient(null);
+    }
 
     // Only create client if target is available
     if (!target) {
-      if (clientRef.current) {
-        clientRef.current.destroy();
-        clientRef.current = null;
-      }
       return;
     }
 
-    // Destroy previous client if exists
-    if (clientRef.current) {
-      clientRef.current.destroy();
-      clientRef.current = null;
-    }
-
     // Create new client instance
-    var client = (0, _.requestIframeClient)(target, optionsRef.current);
-    clientRef.current = client;
+    var newClient = (0, _.requestIframeClient)(target, options);
+    setClient(newClient);
 
     // Cleanup: destroy client on unmount
     return () => {
-      if (clientRef.current) {
-        clientRef.current.destroy();
-        clientRef.current = null;
+      if (newClient) {
+        newClient.destroy();
+        setClient(null);
       }
     };
-  }, deps !== undefined ? deps : [targetFnOrRef, options]);
-  return clientRef.current;
+  }, deps !== undefined ? deps : []);
+  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 optionsRef = (0, _react.useRef)(options);
-
-  // Update options ref when options change
-  (0, _react.useEffect)(() => {
-    optionsRef.current = options;
-  }, [options]);
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    server = _useState4[0],
+    setServer = _useState4[1];
   (0, _react.useEffect)(() => {
     // Create server instance
-    var server = (0, _.requestIframeServer)(optionsRef.current);
-    serverRef.current = server;
+    var newServer = (0, _.requestIframeServer)(options);
+    setServer(newServer);
 
     // Cleanup: destroy server on unmount
     return () => {
-      if (serverRef.current) {
-        serverRef.current.destroy();
-        serverRef.current = null;
+      if (newServer) {
+        newServer.destroy();
+        setServer(null);
       }
     };
   }, deps !== undefined ? deps : []); // Only create once on mount by default
 
-  return serverRef.current;
+  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 || [])]);
 }