request-iframe 0.0.1 → 0.0.3

package/react/library/index.d.ts

@@ -0,0 +1,118 @@
+import { type RefObject } from 'react';
+import { type RequestIframeClient, type RequestIframeClientOptions, type RequestIframeServer, type RequestIframeServerOptions, type ServerHandler } from '../..';
+/**
+ * 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' });
+ *   // ...
+ * };
+ * ```
+ */
+export declare function useClient(targetFnOrRef: (() => HTMLIFrameElement | Window | null) | RefObject<HTMLIFrameElement | Window | null>, options?: RequestIframeClientOptions, deps?: readonly unknown[]): RequestIframeClient | null;
+/**
+ * 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>;
+ * };
+ * ```
+ */
+export declare function useServer(options?: RequestIframeServerOptions, deps?: readonly unknown[]): RequestIframeServer | null;
+/**
+ * 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>;
+ * };
+ * ```
+ */
+export declare function useServerHandler(server: RequestIframeServer | null, path: string, handler: ServerHandler, deps: readonly unknown[]): void;
+/**
+ * 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>;
+ * };
+ * ```
+ */
+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

@@ -0,0 +1 @@
+{"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,CAkC5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CACvB,OAAO,CAAC,EAAE,0BAA0B,EACpC,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,GACxB,mBAAmB,GAAG,IAAI,CAkB5B;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

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClient = useClient;
+exports.useServer = useServer;
+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' });
+ *   // ...
+ * };
+ * ```
+ */
+function useClient(targetFnOrRef, options, deps) {
+  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 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) {
+      return;
+    }
+
+    // Create new client instance
+    var newClient = (0, _.requestIframeClient)(target, options);
+    setClient(newClient);
+
+    // Cleanup: destroy client on unmount
+    return () => {
+      if (newClient) {
+        newClient.destroy();
+        setClient(null);
+      }
+    };
+  }, 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(() => {
+ *     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 _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    server = _useState4[0],
+    setServer = _useState4[1];
+  (0, _react.useEffect)(() => {
+    // Create server instance
+    var newServer = (0, _.requestIframeServer)(options);
+    setServer(newServer);
+
+    // Cleanup: destroy server on unmount
+    return () => {
+      if (newServer) {
+        newServer.destroy();
+        setServer(null);
+      }
+    };
+  }, deps !== undefined ? deps : []); // Only create once on mount by default
+
+  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>;
+ * };
+ * ```
+ */
+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 with stable wrapper
+    var off = server.on(path, handlerWrapper);
+
+    // Cleanup: unregister handler on unmount or when deps change
+    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>;
+ * };
+ * ```
+ */
+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 with stable wrappers
+    var off = server.map(mapWrapper);
+
+    // Cleanup: unregister all handlers on unmount or when deps change
+    return off;
+  }, [server, mapWrapper, ...(deps || [])]);
+}