request-iframe 0.0.3 → 0.0.5

package/library/utils/index.js

@@ -9,20 +9,32 @@ var _exportNames = {
   generateInstanceId: true,
   getIframeTargetOrigin: true,
   isPromise: true,
+  isWindowAvailable: true,
+  detectContentType: true,
+  blobToBase64: true,
   createPostMessage: true,
   isValidPostMessage: true,
   validatePostMessage: true,
   validateProtocolVersion: true,
   isRequestIframeMessage: true,
   getProtocolVersion: true,
-  isCompatibleVersion: true
+  isCompatibleVersion: true,
+  RequestIframeError: true
 };
+Object.defineProperty(exports, "RequestIframeError", {
+  enumerable: true,
+  get: function get() {
+    return _error.RequestIframeError;
+  }
+});
+exports.blobToBase64 = blobToBase64;
 Object.defineProperty(exports, "createPostMessage", {
   enumerable: true,
   get: function get() {
     return _protocol.createPostMessage;
   }
 });
+exports.detectContentType = detectContentType;
 exports.generateInstanceId = generateInstanceId;
 exports.generateRequestId = generateRequestId;
 exports.getIframeTargetOrigin = getIframeTargetOrigin;
@@ -51,6 +63,7 @@ Object.defineProperty(exports, "isValidPostMessage", {
     return _protocol.isValidPostMessage;
   }
 });
+exports.isWindowAvailable = isWindowAvailable;
 Object.defineProperty(exports, "validatePostMessage", {
   enumerable: true,
   get: function get() {
@@ -63,8 +76,11 @@ Object.defineProperty(exports, "validateProtocolVersion", {
     return _protocol.validateProtocolVersion;
   }
 });
+require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.promise.js");
 require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.string.includes.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.url.js");
 require("core-js/modules/web.url.to-json.js");
@@ -106,6 +122,7 @@ Object.keys(_cookie).forEach(function (key) {
     }
   });
 });
+var _error = require("./error");
 /**
  * Generate unique request ID
  */
@@ -136,10 +153,132 @@ function getIframeTargetOrigin(iframe) {
 function isPromise(value) {
   return value !== null && typeof value === 'object' && 'then' in value;
 }
+
+/**
+ * Check if target window is still available (not closed/removed)
+ * @param targetWindow Target window to check
+ * @returns true if window is available, false otherwise
+ */
+function isWindowAvailable(targetWindow) {
+  if (!targetWindow) {
+    return false;
+  }
+  try {
+    // Must have postMessage to be a usable target
+    if (typeof targetWindow.postMessage !== 'function') {
+      return false;
+    }
+
+    // For windows opened via window.open(), check closed property
+    if ('closed' in targetWindow && targetWindow.closed === true) {
+      return false;
+    }
+
+    // Avoid touching cross-origin properties (like document) which may throw.
+    // If closed is not true and postMessage exists, treat as available.
+    return true;
+  } catch (e) {
+    // If accessing window properties throws an error, window is likely closed
+    return false;
+  }
+}
 // Export protocol-related functions
 
 // Export cache-related functions
 
 // Export path matching functions
 
-// Export Cookie-related functions
+// Export Cookie-related functions
+
+// Export Error class
+
+/**
+ * Detect Content-Type based on data type
+ * @param data The data to detect Content-Type for
+ * @param options Options for detection
+ * @param options.checkStream Whether to check for IframeWritableStream (default: false)
+ * @param options.isIframeWritableStream Optional function to check if data is a stream (required if checkStream is true)
+ * @returns The detected Content-Type, or null if Content-Type should not be auto-set
+ */
+function detectContentType(data, options) {
+  if (data === null || data === undefined) return null;
+  var _ref = options || {},
+    _ref$checkStream = _ref.checkStream,
+    checkStream = _ref$checkStream === void 0 ? false : _ref$checkStream,
+    isIframeWritableStream = _ref.isIframeWritableStream;
+
+  // Stream - handled separately (only for response)
+  if (checkStream && isIframeWritableStream) {
+    if (isIframeWritableStream(data)) {
+      return null; // Stream will be handled by sendStream
+    }
+  }
+
+  // File
+  if (typeof File !== 'undefined' && data instanceof File) {
+    return data.type || 'application/octet-stream';
+  }
+
+  // Blob
+  if (typeof Blob !== 'undefined' && data instanceof Blob) {
+    return data.type || 'application/octet-stream';
+  }
+
+  // ArrayBuffer
+  if (typeof ArrayBuffer !== 'undefined' && data instanceof ArrayBuffer) {
+    return 'application/octet-stream';
+  }
+
+  // FormData
+  if (typeof FormData !== 'undefined' && data instanceof FormData) {
+    // FormData typically doesn't need Content-Type header (browser sets it with boundary)
+    return null;
+  }
+
+  // URLSearchParams
+  if (typeof URLSearchParams !== 'undefined' && data instanceof URLSearchParams) {
+    return 'application/x-www-form-urlencoded';
+  }
+
+  // String - check if it's JSON string
+  if (typeof data === 'string') {
+    // Try to parse as JSON, if successful, treat as JSON
+    try {
+      JSON.parse(data);
+      return 'application/json';
+    } catch (_unused) {
+      return 'text/plain; charset=utf-8';
+    }
+  }
+
+  // Number, boolean - treat as JSON
+  if (typeof data === 'number' || typeof data === 'boolean') {
+    return 'application/json';
+  }
+
+  // Plain object or array - treat as JSON
+  if (typeof data === 'object') {
+    // Exclude common binary/file types (already checked above, but double-check for safety)
+    if (typeof Blob !== 'undefined' && data instanceof Blob) return null;
+    if (typeof File !== 'undefined' && data instanceof File) return null;
+    if (typeof ArrayBuffer !== 'undefined' && data instanceof ArrayBuffer) return null;
+    if (typeof FormData !== 'undefined' && data instanceof FormData) return null;
+    if (typeof URLSearchParams !== 'undefined' && data instanceof URLSearchParams) return null;
+    return 'application/json';
+  }
+  return null;
+}
+
+/** Convert Blob to base64 string */
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    var reader = new FileReader();
+    reader.onloadend = () => {
+      var result = reader.result;
+      var base64 = result.includes(',') ? result.split(',')[1] : result;
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}

package/library/utils/path-match.d.ts

@@ -14,4 +14,20 @@ export type PathPattern = string;
  * @returns whether matches
  */
 export declare function matchPath(path: string, matcher: PathMatcher): boolean;
+/**
+ * Path match result with extracted parameters
+ */
+export interface PathMatchResult {
+    /** Whether the path matches */
+    match: boolean;
+    /** Extracted path parameters (e.g., { id: '123' } for '/api/users/:id' and '/api/users/123') */
+    params: Record<string, string>;
+}
+/**
+ * Match path with parameter extraction (supports :param syntax like Express)
+ * @param path request path
+ * @param pattern path pattern with parameters (e.g., '/api/users/:id')
+ * @returns match result with extracted parameters
+ */
+export declare function matchPathWithParams(path: string, pattern: string): PathMatchResult;
 //# sourceMappingURL=path-match.d.ts.map

package/library/utils/path-match.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"path-match.d.ts","sourceRoot":"","sources":["../../src/utils/path-match.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC;AAE/F;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,OAAO,CA+CrE"}
+{"version":3,"file":"path-match.d.ts","sourceRoot":"","sources":["../../src/utils/path-match.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC;AAE/F;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,OAAO,CAoDrE;AAkBD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,gGAAgG;IAChG,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,eAAe,CAiDlF"}

package/library/utils/path-match.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.matchPath = matchPath;
+exports.matchPathWithParams = matchPathWithParams;
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.regexp.constructor.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.string.ends-with.js");
 require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.match.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.string.starts-with.js");
 /**
@@ -69,6 +71,11 @@ function matchPath(path, matcher) {
     if (matcher.includes('*')) {
       return matchPattern(normalizedPath, normalizedMatcher);
     }
+
+    // Support parameter patterns (e.g., '/api/users/:id')
+    if (matcher.includes(':')) {
+      return matchPathWithParams(normalizedPath, normalizedMatcher).match;
+    }
     return false;
   }
   return false;
@@ -87,4 +94,62 @@ function matchPattern(path, pattern) {
   .replace(/\*/g, '.*'); // Replace * with .*
   var regex = new RegExp(`^${regexPattern}$`);
   return regex.test(path);
+}
+
+/**
+ * Path match result with extracted parameters
+ */
+
+/**
+ * Match path with parameter extraction (supports :param syntax like Express)
+ * @param path request path
+ * @param pattern path pattern with parameters (e.g., '/api/users/:id')
+ * @returns match result with extracted parameters
+ */
+function matchPathWithParams(path, pattern) {
+  // Normalize paths
+  var normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  var normalizedPattern = pattern.startsWith('/') ? pattern : `/${pattern}`;
+
+  // Check if pattern contains parameters (:param)
+  if (!normalizedPattern.includes(':')) {
+    // No parameters, use exact match
+    return {
+      match: normalizedPath === normalizedPattern,
+      params: {}
+    };
+  }
+
+  // Extract parameter names from pattern
+  var paramNames = [];
+  var paramRegex = /:([^/]+)/g;
+  var match;
+  while ((match = paramRegex.exec(normalizedPattern)) !== null) {
+    paramNames.push(match[1]);
+  }
+
+  // Convert pattern to regex, replacing :param with capture groups
+  // '/api/users/:id' -> '^/api/users/([^/]+)$'
+  // '/api/users/:id/posts/:postId' -> '^/api/users/([^/]+)/posts/([^/]+)$'
+  var regexPattern = normalizedPattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&') // Escape special characters
+  .replace(/:[^/]+/g, '([^/]+)'); // Replace :param with capture group
+
+  var regex = new RegExp(`^${regexPattern}$`);
+  var regexMatch = regex.exec(normalizedPath);
+  if (!regexMatch) {
+    return {
+      match: false,
+      params: {}
+    };
+  }
+
+  // Extract parameter values from match groups
+  var params = {};
+  for (var i = 0; i < paramNames.length; i++) {
+    params[paramNames[i]] = regexMatch[i + 1];
+  }
+  return {
+    match: true,
+    params
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "request-iframe",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Communicate with iframes like sending HTTP requests",
   "main": "library/index.js",
   "types": "library/index.d.ts",
@@ -20,6 +20,7 @@
   "files": [
     "library",
     "react/library",
+    "react/package.json",
     "README.md",
     "README.CN.md",
     "QUICKSTART.md",

package/react/library/__tests__/index.test.tsx

@@ -221,14 +221,18 @@ describe('React Hooks', () => {
         configurable: true
       });
 
-      const { result, rerender } = renderHook(() => useClient(() => iframeRef.current));
+      type Props = { ver: number };
+      const { result, rerender } = renderHook(
+        ({ ver }: Props) => useClient(() => iframeRef.current, undefined, [ver]),
+        { initialProps: { ver: 0 } as Props }
+      );
 
       // Initially null (ref not set)
       expect(result.current).toBeNull();
 
       // Set ref
       iframeRef.current = iframe;
-      rerender();
+      rerender({ ver: 1 } as Props);
 
       await waitFor(() => {
         expect(result.current).toBeDefined();
@@ -302,31 +306,39 @@ describe('React Hooks', () => {
   });
 
   describe('useServer', () => {
-    it('should create server instance', () => {
+    it('should create server instance', async () => {
       const { result } = renderHook(() => useServer());
       
-      expect(result.current).toBeDefined();
-      if (result.current) {
-        expect(result.current.isOpen).toBe(true);
-      }
+      await waitFor(() => {
+        expect(result.current).toBeDefined();
+        expect(result.current).not.toBeNull();
+        if (result.current) {
+          expect(result.current.isOpen).toBe(true);
+        }
+      }, { timeout: 2000 });
     });
 
-    it('should create server with options', () => {
+    it('should create server with options', async () => {
       const options = { secretKey: 'test-key', ackTimeout: 1000 };
       const { result } = renderHook(() => useServer(options));
       
-      expect(result.current).toBeDefined();
-      if (result.current) {
-        expect(result.current.secretKey).toBe('test-key');
-      }
+      await waitFor(() => {
+        expect(result.current).toBeDefined();
+        expect(result.current).not.toBeNull();
+        if (result.current) {
+          expect(result.current.secretKey).toBe('test-key');
+        }
+      }, { timeout: 2000 });
     });
 
     it('should destroy server on unmount', async () => {
       const { result, unmount } = renderHook(() => useServer());
+      await waitFor(() => {
+        expect(result.current).toBeDefined();
+        expect(result.current).not.toBeNull();
+      }, { timeout: 2000 });
       const server = result.current;
       
-      expect(server).toBeDefined();
-      
       unmount();
       
       // Server should be destroyed
@@ -335,16 +347,20 @@ describe('React Hooks', () => {
       }
     });
 
-    it('should create server only once on mount', () => {
+    it('should create server only once on mount', async () => {
       const { result, rerender } = renderHook(() => useServer());
+      await waitFor(() => {
+        expect(result.current).toBeDefined();
+        expect(result.current).not.toBeNull();
+      }, { timeout: 2000 });
       const server1 = result.current;
       
-      expect(server1).toBeDefined();
-      
       rerender();
       
       // Should return the same instance when deps is not provided (default empty array)
-      expect(result.current).toBeDefined();
+      await waitFor(() => {
+        expect(result.current).toBeDefined();
+      }, { timeout: 2000 });
       // Note: When deps is not provided, useEffect runs only once, so server should be the same
       // But if deps changes, a new server might be created
       expect(result.current).toBe(server1);
@@ -373,7 +389,7 @@ describe('React Hooks', () => {
   });
 
   describe('useServerHandler', () => {
-    it('should register handler when server is available', () => {
+    it('should register handler when server is available', async () => {
       const handler = jest.fn((req, res) => {
         res.send({ success: true });
       });
@@ -388,7 +404,10 @@ describe('React Hooks', () => {
       // Verify handler is registered by checking server internals
       // Since we can't easily test the full message flow, we just verify
       // that the hook doesn't throw and the server is created
-      expect(serverInstance).toBeDefined();
+      await waitFor(() => {
+        expect(serverInstance).toBeDefined();
+        expect(serverInstance).not.toBeNull();
+      }, { timeout: 2000 });
       expect(handler).not.toHaveBeenCalled(); // Handler not called yet, just registered
     });
 
@@ -537,7 +556,7 @@ describe('React Hooks', () => {
   });
 
   describe('useServerHandlerMap', () => {
-    it('should register handlers using map when server is available', () => {
+    it('should register handlers using map when server is available', async () => {
       const handlers = {
         'api/user': jest.fn((req, res) => res.send({ user: 'test' })),
         'api/post': jest.fn((req, res) => res.send({ post: 'test' }))
@@ -551,7 +570,10 @@ describe('React Hooks', () => {
       });
 
       // Verify server is created and handlers are registered
-      expect(serverInstance).toBeDefined();
+      await waitFor(() => {
+        expect(serverInstance).toBeDefined();
+        expect(serverInstance).not.toBeNull();
+      }, { timeout: 2000 });
       // Handlers not called yet, just registered
       expect(handlers['api/user']).not.toHaveBeenCalled();
       expect(handlers['api/post']).not.toHaveBeenCalled();

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

@@ -1 +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"}
+{"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

@@ -55,37 +55,73 @@ var _ = require("../..");
  * ```
  */
 function useClient(targetFnOrRef, options, deps) {
+  var clientRef = (0, _react.useRef)(null);
   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;
+  var lastTargetRef = (0, _react.useRef)(null);
+  var targetFnOrRefRef = (0, _react.useRef)(targetFnOrRef);
+  var optionsRef = (0, _react.useRef)(options);
 
-    // Destroy existing client if it exists
-    if (client) {
-      client.destroy();
-      setClient(null);
+  /** 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;
+  }, []);
+
+  /**
+   * 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/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;
 
-    // Only create client if target is available
+    /** 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;
     }
-
-    // Create new client instance
-    var newClient = (0, _.requestIframeClient)(target, options);
+    var newClient = (0, _.requestIframeClient)(target, optionsRef.current);
+    clientRef.current = newClient;
     setClient(newClient);
-
-    // Cleanup: destroy client on unmount
     return () => {
-      if (newClient) {
+      /** Cleanup only if it's still the current client */
+      if (clientRef.current === newClient) {
         newClient.destroy();
-        setClient(null);
+        clientRef.current = null;
+        lastTargetRef.current = null;
       }
     };
-  }, deps !== undefined ? deps : []);
+  }, deps ? [...deps, target] : [target]);
+
+  // Cleanup on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      destroy();
+    };
+  }, []);
   return client;
 }
 
@@ -113,24 +149,46 @@ function useClient(targetFnOrRef, options, deps) {
  * ```
  */
 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;
+    }
+  }, []);
+
+  /**
+   * Create/destroy server in effect to be compatible with React 18 StrictMode
+   * and concurrent rendering (avoid render-phase side effects).
+   */
   (0, _react.useEffect)(() => {
-    // Create server instance
-    var newServer = (0, _.requestIframeServer)(options);
+    if (serverRef.current) {
+      serverRef.current.destroy();
+      serverRef.current = null;
+    }
+    var newServer = (0, _.requestIframeServer)(optionsRef.current);
+    serverRef.current = newServer;
     setServer(newServer);
-
-    // Cleanup: destroy server on unmount
     return () => {
-      if (newServer) {
+      if (serverRef.current === newServer) {
         newServer.destroy();
-        setServer(null);
+        serverRef.current = null;
       }
     };
-  }, deps !== undefined ? deps : []); // Only create once on mount by default
+  }, deps !== null && deps !== void 0 ? deps : []);
 
+  // Cleanup on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      destroy();
+    };
+  }, []);
   return server;
 }
 

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"
+}