@mittwald/flow-remote-react-renderer 0.2.0-alpha.91 → 0.2.0-alpha.92

package/dist/js/RemoteRendererClient.mjs

@@ -5,10 +5,35 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { components } from "./components.mjs";
 import { RemoteReceiver, RemoteRootRenderer } from "@mfalkenberg/remote-dom-react/host";
 import { connectRemoteIframeRef } from "@mittwald/flow-remote-core";
-import { useMemo, useRef, useState, useLayoutEffect } from "react";
+import { useState, useRef, useMemo, useLayoutEffect } from "react";
 import { reduce } from "remeda";
+const HiddenIframeStyle = {
+  visibility: "hidden",
+  height: 0,
+  width: 0,
+  border: "none",
+  position: "absolute",
+  marginLeft: "-9999px"
+};
+const voidFunction = () => null;
 const RemoteRendererClient = (props) => {
-  const { integrations = [], src } = props;
+  const { integrations = [], timeout = 1e4, src } = props;
+  const [, forceRerender] = useState(false);
+  const iframeRef = useRef(null);
+  const checkRenderTimeout = useRef(null);
+  const awaiter = useRef({
+    result: null,
+    resolve: voidFunction,
+    reject: voidFunction
+  }).current;
+  if (awaiter.result !== null) {
+    throw awaiter.result;
+  }
+  const clearRenderTimeout = () => {
+    if (checkRenderTimeout.current) {
+      clearTimeout(checkRenderTimeout.current);
+    }
+  };
   const mergedComponents = useMemo(() => {
     return new Map(
       Object.entries(
@@ -23,47 +48,56 @@ const RemoteRendererClient = (props) => {
       )
     );
   }, [...integrations]);
-  const receiver = useMemo(() => new RemoteReceiver(), []);
-  const awaiter = useRef({
-    promise: null
-  }).current;
-  const [initialRendered, forceRerender] = useState(false);
+  const receiver = useMemo(() => {
+    const remoteReceiver = new RemoteReceiver();
+    remoteReceiver.subscribe(
+      { id: remoteReceiver.root.id },
+      () => awaiter.resolve()
+    );
+    return remoteReceiver;
+  }, []);
   const connect = connectRemoteIframeRef(receiver.connection);
-  receiver.subscribe({ id: receiver.root.id }, () => {
-    if (awaiter.promise !== null && awaiter.resolve) {
-      awaiter.resolve();
-    }
-  });
   useLayoutEffect(() => {
-    if (awaiter.promise !== null || initialRendered) {
+    if (!src || !iframeRef.current || iframeRef.current.src === src) {
       return;
     }
-    awaiter.promise = new Promise((resolve) => {
+    clearRenderTimeout();
+    iframeRef.current.src = src;
+    awaiter.result = new Promise((resolve, reject) => {
       awaiter.resolve = () => {
-        awaiter.promise = null;
+        clearRenderTimeout();
         resolve();
+        awaiter.result = null;
+      };
+      awaiter.reject = (reason) => {
+        clearRenderTimeout();
+        reject();
+        awaiter.result = new Error(reason);
       };
     });
-    forceRerender(true);
-  }, [forceRerender]);
-  if (awaiter.promise !== null) {
-    throw awaiter.promise;
-  }
+    forceRerender((old) => !old);
+  }, [src, iframeRef]);
+  const onIframeLoaded = () => {
+    checkRenderTimeout.current = setTimeout(
+      () => awaiter.reject(
+        "RemoteRenderTimeout reached. Remote URL was successfully loaded but no Remote Component was rendered in time."
+      ),
+      timeout
+    );
+  };
+  const onIframeError = () => awaiter.reject("Remote URL could not be reached and was not loaded.");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(RemoteRootRenderer, { components: mergedComponents, receiver }),
     /* @__PURE__ */ jsx(
       "iframe",
       {
-        ref: connect,
-        src,
-        style: {
-          visibility: "hidden",
-          height: 0,
-          width: 0,
-          border: "none",
-          position: "absolute",
-          marginLeft: "-9999px"
-        }
+        ref: (ref) => {
+          iframeRef.current = ref;
+          return connect(ref);
+        },
+        onLoad: onIframeLoaded,
+        onError: onIframeError,
+        style: HiddenIframeStyle
       }
     )
   ] });

package/dist/js/RemoteRendererClient.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteRendererClient.mjs","sources":["../../src/RemoteRendererClient.tsx"],"sourcesContent":["\"use client\";\nimport { components } from \"@/components\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport type { RemoteComponentRendererProps } from \"@mfalkenberg/remote-dom-react/host\";\nimport {\n  RemoteReceiver,\n  RemoteRootRenderer,\n} from \"@mfalkenberg/remote-dom-react/host\";\nimport { connectRemoteIframeRef } from \"@mittwald/flow-remote-core\";\nimport {\n  type ComponentType,\n  type FC,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useMemo } from \"react\";\nimport { reduce } from \"remeda\";\n\nexport interface RemoteRendererProps {\n  integrations?: RemoteComponentsMap<never>[];\n  src: string;\n}\n\ninterface PromiseObject {\n  promise: null | Promise<void>;\n  resolve?: CallableFunction;\n}\n\nexport const RemoteRendererClient: FC<RemoteRendererProps> = (props) => {\n  const { integrations = [], src } = props;\n\n  const mergedComponents = useMemo(() => {\n    return new Map<string, ComponentType<RemoteComponentRendererProps>>(\n      Object.entries(\n        reduce(\n          [...integrations, components],\n          (merged, current) => ({\n            ...merged,\n            ...current,\n          }),\n          {},\n        ),\n      ),\n    );\n  }, [...integrations]);\n\n  const receiver = useMemo(() => new RemoteReceiver(), []);\n  const awaiter = useRef<PromiseObject>({\n    promise: null,\n  }).current;\n\n  const [initialRendered, forceRerender] = useState(false);\n  const connect = connectRemoteIframeRef(receiver.connection);\n  receiver.subscribe({ id: receiver.root.id }, () => {\n    if (awaiter.promise !== null && awaiter.resolve) {\n      awaiter.resolve();\n    }\n  });\n\n  useLayoutEffect(() => {\n    if (awaiter.promise !== null || initialRendered) {\n      return;\n    }\n\n    awaiter.promise = new Promise((resolve) => {\n      awaiter.resolve = () => {\n        awaiter.promise = null;\n        resolve();\n      };\n    });\n\n    forceRerender(true);\n  }, [forceRerender]);\n\n  if (awaiter.promise !== null) {\n    throw awaiter.promise;\n  }\n\n  return (\n    <>\n      <RemoteRootRenderer components={mergedComponents} receiver={receiver} />\n      <iframe\n        ref={connect}\n        src={src}\n        style={{\n          visibility: \"hidden\",\n          height: 0,\n          width: 0,\n          border: \"none\",\n          position: \"absolute\",\n          marginLeft: \"-9999px\",\n        }}\n      />\n    </>\n  );\n};\n\nexport default RemoteRendererClient;\n"],"names":[],"mappings":";;;;;;;AA6Ba,MAAA,uBAAgD,CAAC,UAAU;AACtE,QAAM,EAAE,eAAe,IAAI,IAAQ,IAAA;AAE7B,QAAA,mBAAmB,QAAQ,MAAM;AACrC,WAAO,IAAI;AAAA,MACT,OAAO;AAAA,QACL;AAAA,UACE,CAAC,GAAG,cAAc,UAAU;AAAA,UAC5B,CAAC,QAAQ,aAAa;AAAA,YACpB,GAAG;AAAA,YACH,GAAG;AAAA,UAAA;AAAA,UAEL,CAAA;AAAA,QAAC;AAAA,MACH;AAAA,IAEJ;AAAA,EAAA,GACC,CAAC,GAAG,YAAY,CAAC;AAEpB,QAAM,WAAW,QAAQ,MAAM,IAAI,eAAe,GAAG,CAAA,CAAE;AACvD,QAAM,UAAU,OAAsB;AAAA,IACpC,SAAS;AAAA,EACV,CAAA,EAAE;AAEH,QAAM,CAAC,iBAAiB,aAAa,IAAI,SAAS,KAAK;AACjD,QAAA,UAAU,uBAAuB,SAAS,UAAU;AAC1D,WAAS,UAAU,EAAE,IAAI,SAAS,KAAK,GAAA,GAAM,MAAM;AACjD,QAAI,QAAQ,YAAY,QAAQ,QAAQ,SAAS;AAC/C,cAAQ,QAAQ;AAAA,IAAA;AAAA,EAClB,CACD;AAED,kBAAgB,MAAM;AAChB,QAAA,QAAQ,YAAY,QAAQ,iBAAiB;AAC/C;AAAA,IAAA;AAGF,YAAQ,UAAU,IAAI,QAAQ,CAAC,YAAY;AACzC,cAAQ,UAAU,MAAM;AACtB,gBAAQ,UAAU;AACV,gBAAA;AAAA,MACV;AAAA,IAAA,CACD;AAED,kBAAc,IAAI;AAAA,EAAA,GACjB,CAAC,aAAa,CAAC;AAEd,MAAA,QAAQ,YAAY,MAAM;AAC5B,UAAM,QAAQ;AAAA,EAAA;AAGhB,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,oBAAA,EAAmB,YAAY,kBAAkB,SAAoB,CAAA;AAAA,IACtE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"RemoteRendererClient.mjs","sources":["../../src/RemoteRendererClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { components } from \"@/components\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport type { RemoteComponentRendererProps } from \"@mfalkenberg/remote-dom-react/host\";\nimport {\n  RemoteReceiver,\n  RemoteRootRenderer,\n} from \"@mfalkenberg/remote-dom-react/host\";\nimport { connectRemoteIframeRef } from \"@mittwald/flow-remote-core\";\nimport {\n  type ComponentType,\n  type CSSProperties,\n  type FC,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { reduce } from \"remeda\";\n\nexport interface RemoteRendererProps {\n  integrations?: RemoteComponentsMap<never>[];\n  src: string;\n  timeout?: number;\n}\n\ninterface PromiseObject {\n  result: null | Promise<void> | Error;\n  resolve: CallableFunction;\n  reject: CallableFunction;\n}\n\nconst HiddenIframeStyle: CSSProperties = {\n  visibility: \"hidden\",\n  height: 0,\n  width: 0,\n  border: \"none\",\n  position: \"absolute\",\n  marginLeft: \"-9999px\",\n};\n\nconst voidFunction = () => null;\n\nexport const RemoteRendererClient: FC<RemoteRendererProps> = (props) => {\n  const { integrations = [], timeout = 10000, src } = props;\n  const [, forceRerender] = useState<boolean>(false);\n\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const checkRenderTimeout = useRef<number>(null);\n  const awaiter = useRef<PromiseObject>({\n    result: null,\n    resolve: voidFunction,\n    reject: voidFunction,\n  }).current;\n\n  if (awaiter.result !== null) {\n    throw awaiter.result;\n  }\n\n  const clearRenderTimeout = () => {\n    if (checkRenderTimeout.current) {\n      clearTimeout(checkRenderTimeout.current);\n    }\n  };\n\n  const mergedComponents = useMemo(() => {\n    return new Map<string, ComponentType<RemoteComponentRendererProps>>(\n      Object.entries(\n        reduce(\n          [...integrations, components],\n          (merged, current) => ({\n            ...merged,\n            ...current,\n          }),\n          {},\n        ),\n      ),\n    );\n  }, [...integrations]);\n\n  const receiver = useMemo(() => {\n    const remoteReceiver = new RemoteReceiver();\n    remoteReceiver.subscribe({ id: remoteReceiver.root.id }, () =>\n      awaiter.resolve(),\n    );\n\n    return remoteReceiver;\n  }, []);\n\n  const connect = connectRemoteIframeRef(receiver.connection);\n\n  useLayoutEffect(() => {\n    if (!src || !iframeRef.current || iframeRef.current.src === src) {\n      return;\n    }\n\n    clearRenderTimeout();\n    iframeRef.current.src = src;\n\n    awaiter.result = new Promise((resolve, reject) => {\n      awaiter.resolve = () => {\n        clearRenderTimeout();\n        resolve();\n        awaiter.result = null;\n      };\n      awaiter.reject = (reason: string) => {\n        clearRenderTimeout();\n        reject();\n        awaiter.result = new Error(reason);\n      };\n    });\n\n    forceRerender((old) => !old);\n  }, [src, iframeRef]);\n\n  const onIframeLoaded = () => {\n    checkRenderTimeout.current = setTimeout(\n      () =>\n        awaiter.reject(\n          \"RemoteRenderTimeout reached. Remote URL was successfully loaded but no Remote Component was rendered in time.\",\n        ),\n      timeout,\n    );\n  };\n\n  const onIframeError = () =>\n    awaiter.reject(\"Remote URL could not be reached and was not loaded.\");\n\n  return (\n    <>\n      <RemoteRootRenderer components={mergedComponents} receiver={receiver} />\n      <iframe\n        ref={(ref) => {\n          iframeRef.current = ref;\n          return connect(ref);\n        }}\n        onLoad={onIframeLoaded}\n        onError={onIframeError}\n        style={HiddenIframeStyle}\n      />\n    </>\n  );\n};\n\nexport default RemoteRendererClient;\n"],"names":[],"mappings":";;;;;;;AAiCA,MAAM,oBAAmC;AAAA,EACvC,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AACd;AAEA,MAAM,eAAe,MAAM;AAEd,MAAA,uBAAgD,CAAC,UAAU;AACtE,QAAM,EAAE,eAAe,IAAI,UAAU,KAAO,QAAQ;AACpD,QAAM,GAAG,aAAa,IAAI,SAAkB,KAAK;AAE3C,QAAA,YAAY,OAA0B,IAAI;AAC1C,QAAA,qBAAqB,OAAe,IAAI;AAC9C,QAAM,UAAU,OAAsB;AAAA,IACpC,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACT,CAAA,EAAE;AAEC,MAAA,QAAQ,WAAW,MAAM;AAC3B,UAAM,QAAQ;AAAA,EAAA;AAGhB,QAAM,qBAAqB,MAAM;AAC/B,QAAI,mBAAmB,SAAS;AAC9B,mBAAa,mBAAmB,OAAO;AAAA,IAAA;AAAA,EAE3C;AAEM,QAAA,mBAAmB,QAAQ,MAAM;AACrC,WAAO,IAAI;AAAA,MACT,OAAO;AAAA,QACL;AAAA,UACE,CAAC,GAAG,cAAc,UAAU;AAAA,UAC5B,CAAC,QAAQ,aAAa;AAAA,YACpB,GAAG;AAAA,YACH,GAAG;AAAA,UAAA;AAAA,UAEL,CAAA;AAAA,QAAC;AAAA,MACH;AAAA,IAEJ;AAAA,EAAA,GACC,CAAC,GAAG,YAAY,CAAC;AAEd,QAAA,WAAW,QAAQ,MAAM;AACvB,UAAA,iBAAiB,IAAI,eAAe;AAC3B,mBAAA;AAAA,MAAU,EAAE,IAAI,eAAe,KAAK,GAAG;AAAA,MAAG,MACvD,QAAQ,QAAQ;AAAA,IAClB;AAEO,WAAA;AAAA,EACT,GAAG,EAAE;AAEC,QAAA,UAAU,uBAAuB,SAAS,UAAU;AAE1D,kBAAgB,MAAM;AAChB,QAAA,CAAC,OAAO,CAAC,UAAU,WAAW,UAAU,QAAQ,QAAQ,KAAK;AAC/D;AAAA,IAAA;AAGiB,uBAAA;AACnB,cAAU,QAAQ,MAAM;AAExB,YAAQ,SAAS,IAAI,QAAQ,CAAC,SAAS,WAAW;AAChD,cAAQ,UAAU,MAAM;AACH,2BAAA;AACX,gBAAA;AACR,gBAAQ,SAAS;AAAA,MACnB;AACQ,cAAA,SAAS,CAAC,WAAmB;AAChB,2BAAA;AACZ,eAAA;AACC,gBAAA,SAAS,IAAI,MAAM,MAAM;AAAA,MACnC;AAAA,IAAA,CACD;AAEa,kBAAA,CAAC,QAAQ,CAAC,GAAG;AAAA,EAAA,GAC1B,CAAC,KAAK,SAAS,CAAC;AAEnB,QAAM,iBAAiB,MAAM;AAC3B,uBAAmB,UAAU;AAAA,MAC3B,MACE,QAAQ;AAAA,QACN;AAAA,MACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,MACpB,QAAQ,OAAO,qDAAqD;AAEtE,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,oBAAA,EAAmB,YAAY,kBAAkB,SAAoB,CAAA;AAAA,IACtE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,CAAC,QAAQ;AACZ,oBAAU,UAAU;AACpB,iBAAO,QAAQ,GAAG;AAAA,QACpB;AAAA,QACA,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACT,GACF;AAEJ;"}

package/dist/types/RemoteRendererClient.d.ts

@@ -3,6 +3,7 @@ import { FC } from 'react';
 export interface RemoteRendererProps {
     integrations?: RemoteComponentsMap<never>[];
     src: string;
+    timeout?: number;
 }
 export declare const RemoteRendererClient: FC<RemoteRendererProps>;
 export default RemoteRendererClient;

package/dist/types/RemoteRendererClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteRendererClient.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererClient.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAOvD,OAAO,EAEL,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,GAAG,EAAE,MAAM,CAAC;CACb;AAOD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,mBAAmB,CAmExD,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"RemoteRendererClient.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAOvD,OAAO,EAGL,KAAK,EAAE,EAKR,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAmBD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,mBAAmB,CAmGxD,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-react-renderer",
-  "version": "0.2.0-alpha.91",
+  "version": "0.2.0-alpha.92",
   "type": "module",
   "description": "React rendering for Flow Remote Elements",
   "homepage": "https://mittwald.github.io/flow",
@@ -29,15 +29,15 @@
   },
   "dependencies": {
     "@mfalkenberg/remote-dom-react": "1.2.3",
-    "@mittwald/flow-remote-core": "0.2.0-alpha.91",
-    "@mittwald/flow-remote-elements": "0.2.0-alpha.91",
+    "@mittwald/flow-remote-core": "0.2.0-alpha.92",
+    "@mittwald/flow-remote-elements": "0.2.0-alpha.92",
     "@types/react": "^19.0.10",
     "clsx": "^2.1.1",
     "react-children-utilities": "^2.10.0",
     "remeda": "^2.21.1"
   },
   "devDependencies": {
-    "@mittwald/flow-react-components": "0.2.0-alpha.91",
+    "@mittwald/flow-react-components": "0.2.0-alpha.92",
     "@mittwald/typescript-config": "",
     "@types/node": "^22.13.10",
     "nx": "^20.5.0",
@@ -65,5 +65,5 @@
       "optional": true
     }
   },
-  "gitHead": "5af564582b459f887e440028171d544f2faa0f39"
+  "gitHead": "6c83276f7161f64783abcf5c086636b39d8d9899"
 }