request-iframe 0.0.1 → 0.0.2

package/react/library/index.d.ts

@@ -0,0 +1,117 @@
+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(() => {
+ *     server.on('/api/data', (req, res) => {
+ *       res.send({ data: 'Hello' });
+ *     });
+ *   }, [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,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"}

package/react/library/index.js

@@ -0,0 +1,223 @@
+"use strict";
+
+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/web.dom-collections.iterator.js");
+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 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]);
+  (0, _react.useEffect)(() => {
+    // Get current target
+    var target = 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
+    if (clientRef.current) {
+      clientRef.current.destroy();
+      clientRef.current = null;
+    }
+
+    // Create new client instance
+    var client = (0, _.requestIframeClient)(target, optionsRef.current);
+    clientRef.current = client;
+
+    // Cleanup: destroy client on unmount
+    return () => {
+      if (clientRef.current) {
+        clientRef.current.destroy();
+        clientRef.current = null;
+      }
+    };
+  }, deps !== undefined ? deps : [targetFnOrRef, options]);
+  return clientRef.current;
+}
+
+/**
+ * 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>;
+ * };
+ * ```
+ */
+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]);
+  (0, _react.useEffect)(() => {
+    // Create server instance
+    var server = (0, _.requestIframeServer)(optionsRef.current);
+    serverRef.current = server;
+
+    // Cleanup: destroy server on unmount
+    return () => {
+      if (serverRef.current) {
+        serverRef.current.destroy();
+        serverRef.current = null;
+      }
+    };
+  }, deps !== undefined ? deps : []); // Only create once on mount by default
+
+  return serverRef.current;
+}
+
+/**
+ * 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) {
+  (0, _react.useEffect)(() => {
+    if (!server) {
+      return;
+    }
+
+    // Register handler and get unregister function
+    var unregister = server.on(path, handler);
+
+    // Cleanup: unregister handler on unmount or when deps change
+    return () => {
+      unregister();
+    };
+  }, [server, path, handler, ...(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) {
+  (0, _react.useEffect)(() => {
+    if (!server) {
+      return;
+    }
+    // Register handlers using map
+    server.map(map);
+
+    // Cleanup: unregister all handlers on unmount or when deps change
+    return () => {
+      server.off(Object.keys(map));
+    };
+  }, [server, map, ...(deps || [])]);
+}