@mittwald/flow-remote-react-renderer 0.2.0-alpha.102 → 0.2.0-alpha.111

package/dist/js/RemoteRendererClient.mjs

@@ -2,12 +2,13 @@
 /* */
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { components } from "./components.mjs";
+import { useAwaiter } from "./hooks/useAwaiter.mjs";
+import { useMergedComponents } from "./hooks/useMergedComponents.mjs";
 import { RemoteReceiver, RemoteRootRenderer } from "@mfalkenberg/remote-dom-react/host";
-import { connectRemoteIframeRef } from "@mittwald/flow-remote-core";
-import { useState, useRef, useMemo, useLayoutEffect } from "react";
-import { reduce } from "remeda";
-const HiddenIframeStyle = {
+import { RemoteError, connectRemoteIframeRef } from "@mittwald/flow-remote-core";
+import { usePromise } from "@mittwald/react-use-promise";
+import { useState, useMemo } from "react";
+const hiddenIframeStyle = {
   visibility: "hidden",
   height: 0,
   width: 0,
@@ -15,90 +16,74 @@ const HiddenIframeStyle = {
   position: "absolute",
   marginLeft: "-9999px"
 };
-const voidFunction = () => null;
 const RemoteRendererClient = (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 {
+    integrations = [],
+    timeoutMs = 1e4,
+    src,
+    extBridgeImplementation
+  } = props;
+  const renderAwaiter = useAwaiter([src]);
+  const connectionAwaiter = useAwaiter([src]);
+  const loadingAwaiter = useAwaiter([src]);
+  const [connectedSrc, setConnectedSrc] = useState(null);
+  const [remoteError, setRemoteError] = useState();
+  if (remoteError) {
+    throw new RemoteError(`Remote rendering failed: ${remoteError}`);
   }
-  const clearRenderTimeout = () => {
-    if (checkRenderTimeout.current) {
-      clearTimeout(checkRenderTimeout.current);
-    }
-  };
-  const mergedComponents = useMemo(() => {
-    return new Map(
-      Object.entries(
-        reduce(
-          [...integrations, components],
-          (merged, current) => ({
-            ...merged,
-            ...current
-          }),
-          {}
-        )
-      )
-    );
-  }, [...integrations]);
+  const remoteComponents = useMergedComponents(integrations);
   const receiver = useMemo(() => {
     const remoteReceiver = new RemoteReceiver();
     remoteReceiver.subscribe(
       { id: remoteReceiver.root.id },
-      () => awaiter.resolve()
+      renderAwaiter.resolve
     );
     return remoteReceiver;
-  }, []);
-  const connect = connectRemoteIframeRef(receiver.connection);
-  useLayoutEffect(() => {
-    if (!src || !iframeRef.current || iframeRef.current.src === src) {
-      return;
-    }
-    clearRenderTimeout();
-    iframeRef.current.src = src;
-    awaiter.result = new Promise((resolve, reject) => {
-      awaiter.resolve = () => {
-        clearRenderTimeout();
-        resolve();
-        awaiter.result = null;
-      };
-      awaiter.reject = (reason) => {
-        clearRenderTimeout();
-        reject();
-        awaiter.result = new Error(reason);
-      };
-    });
-    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.");
+  }, [src]);
+  const connect = connectRemoteIframeRef({
+    connection: receiver.connection,
+    extBridgeImplementation,
+    onReady: connectionAwaiter.resolve,
+    onError: setRemoteError
+  });
+  const timeoutPromise = (message) => new Promise((_, rej) => {
+    setTimeout(() => {
+      rej(new RemoteError(`${message}: Timeout reached`));
+    }, timeoutMs);
+  });
+  const overallLoading = () => Promise.all([
+    Promise.race([
+      loadingAwaiter.promise,
+      timeoutPromise("Remote URL could not be loaded")
+    ]),
+    Promise.race([
+      connectionAwaiter.promise,
+      timeoutPromise("Could not establish remote connection")
+    ]),
+    Promise.race([
+      renderAwaiter.promise,
+      timeoutPromise("Remote rendering failed")
+    ])
+  ]);
+  const awaitLoadingPromise = connectedSrc === src;
+  usePromise(overallLoading, awaitLoadingPromise ? [] : null, {
+    loaderId: src
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RemoteRootRenderer, { components: mergedComponents, receiver }),
+    /* @__PURE__ */ jsx(RemoteRootRenderer, { components: remoteComponents, receiver }),
     /* @__PURE__ */ jsx(
       "iframe",
       {
+        src,
         ref: (ref) => {
-          iframeRef.current = ref;
-          return connect(ref);
+          connect(ref);
+          setConnectedSrc(src);
         },
-        onLoad: onIframeLoaded,
-        onError: onIframeError,
-        style: HiddenIframeStyle
-      }
+        onLoad: loadingAwaiter.resolve,
+        onError: loadingAwaiter.reject,
+        style: hiddenIframeStyle
+      },
+      src
     )
   ] });
 };

package/dist/js/RemoteRendererClient.mjs.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"RemoteRendererClient.mjs","sources":["../../src/RemoteRendererClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { useAwaiter } from \"@/hooks/useAwaiter\";\nimport { useMergedComponents } from \"@/hooks/useMergedComponents\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport {\n  RemoteReceiver,\n  RemoteRootRenderer,\n} from \"@mfalkenberg/remote-dom-react/host\";\nimport type { ExtBridgeRemoteApi } from \"@mittwald/ext-bridge\";\nimport {\n  connectRemoteIframeRef,\n  RemoteError,\n} from \"@mittwald/flow-remote-core\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport { type CSSProperties, type FC, useMemo, useState } from \"react\";\n\nexport interface RemoteRendererProps {\n  integrations?: RemoteComponentsMap<never>[];\n  src: string;\n  timeoutMs?: number;\n  extBridgeImplementation?: ExtBridgeRemoteApi;\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\nexport const RemoteRendererClient: FC<RemoteRendererProps> = (props) => {\n  const {\n    integrations = [],\n    timeoutMs = 10_000,\n    src,\n    extBridgeImplementation,\n  } = props;\n\n  const renderAwaiter = useAwaiter([src]);\n  const connectionAwaiter = useAwaiter([src]);\n  const loadingAwaiter = useAwaiter([src]);\n\n  const [connectedSrc, setConnectedSrc] = useState<string | null>(null);\n  const [remoteError, setRemoteError] = useState<string | undefined>();\n\n  if (remoteError) {\n    throw new RemoteError(`Remote rendering failed: ${remoteError}`);\n  }\n\n  const remoteComponents = useMergedComponents(integrations);\n\n  const receiver = useMemo(() => {\n    const remoteReceiver = new RemoteReceiver();\n    remoteReceiver.subscribe(\n      { id: remoteReceiver.root.id },\n      renderAwaiter.resolve,\n    );\n    return remoteReceiver;\n  }, [src]);\n\n  const connect = connectRemoteIframeRef({\n    connection: receiver.connection,\n    extBridgeImplementation: extBridgeImplementation,\n    onReady: connectionAwaiter.resolve,\n    onError: setRemoteError,\n  });\n\n  const timeoutPromise = (message: string) =>\n    new Promise((_, rej) => {\n      setTimeout(() => {\n        rej(new RemoteError(`${message}: Timeout reached`));\n      }, timeoutMs);\n    });\n\n  const overallLoading = () =>\n    Promise.all([\n      Promise.race([\n        loadingAwaiter.promise,\n        timeoutPromise(\"Remote URL could not be loaded\"),\n      ]),\n      Promise.race([\n        connectionAwaiter.promise,\n        timeoutPromise(\"Could not establish remote connection\"),\n      ]),\n      Promise.race([\n        renderAwaiter.promise,\n        timeoutPromise(\"Remote rendering failed\"),\n      ]),\n    ]);\n\n  const awaitLoadingPromise = connectedSrc === src;\n  usePromise(overallLoading, awaitLoadingPromise ? [] : null, {\n    loaderId: src,\n  });\n\n  return (\n    <>\n      <RemoteRootRenderer components={remoteComponents} receiver={receiver} />\n      <iframe\n        key={src}\n        src={src}\n        ref={(ref) => {\n          connect(ref);\n          setConnectedSrc(src);\n        }}\n        onLoad={loadingAwaiter.resolve}\n        onError={loadingAwaiter.reject}\n        style={hiddenIframeStyle}\n      />\n    </>\n  );\n};\n\nexport default RemoteRendererClient;\n"],"names":[],"mappings":";;;;;;;;AAwBA,MAAM,oBAAmC;AAAA,EACvC,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AACd;AAEa,MAAA,uBAAgD,CAAC,UAAU;AAChE,QAAA;AAAA,IACJ,eAAe,CAAC;AAAA,IAChB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,gBAAgB,WAAW,CAAC,GAAG,CAAC;AACtC,QAAM,oBAAoB,WAAW,CAAC,GAAG,CAAC;AAC1C,QAAM,iBAAiB,WAAW,CAAC,GAAG,CAAC;AAEvC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B;AAEnE,MAAI,aAAa;AACf,UAAM,IAAI,YAAY,4BAA4B,WAAW,EAAE;AAAA,EAAA;AAG3D,QAAA,mBAAmB,oBAAoB,YAAY;AAEnD,QAAA,WAAW,QAAQ,MAAM;AACvB,UAAA,iBAAiB,IAAI,eAAe;AAC3B,mBAAA;AAAA,MACb,EAAE,IAAI,eAAe,KAAK,GAAG;AAAA,MAC7B,cAAc;AAAA,IAChB;AACO,WAAA;AAAA,EAAA,GACN,CAAC,GAAG,CAAC;AAER,QAAM,UAAU,uBAAuB;AAAA,IACrC,YAAY,SAAS;AAAA,IACrB;AAAA,IACA,SAAS,kBAAkB;AAAA,IAC3B,SAAS;AAAA,EAAA,CACV;AAED,QAAM,iBAAiB,CAAC,YACtB,IAAI,QAAQ,CAAC,GAAG,QAAQ;AACtB,eAAW,MAAM;AACf,UAAI,IAAI,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAAA,OACjD,SAAS;AAAA,EAAA,CACb;AAEG,QAAA,iBAAiB,MACrB,QAAQ,IAAI;AAAA,IACV,QAAQ,KAAK;AAAA,MACX,eAAe;AAAA,MACf,eAAe,gCAAgC;AAAA,IAAA,CAChD;AAAA,IACD,QAAQ,KAAK;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe,uCAAuC;AAAA,IAAA,CACvD;AAAA,IACD,QAAQ,KAAK;AAAA,MACX,cAAc;AAAA,MACd,eAAe,yBAAyB;AAAA,IACzC,CAAA;AAAA,EAAA,CACF;AAEH,QAAM,sBAAsB,iBAAiB;AAC7C,aAAW,gBAAgB,sBAAsB,CAAA,IAAK,MAAM;AAAA,IAC1D,UAAU;AAAA,EAAA,CACX;AAED,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,oBAAA,EAAmB,YAAY,kBAAkB,SAAoB,CAAA;AAAA,IACtE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,KAAK,CAAC,QAAQ;AACZ,kBAAQ,GAAG;AACX,0BAAgB,GAAG;AAAA,QACrB;AAAA,QACA,QAAQ,eAAe;AAAA,QACvB,SAAS,eAAe;AAAA,QACxB,OAAO;AAAA,MAAA;AAAA,MARF;AAAA,IAAA;AAAA,EASP,GACF;AAEJ;"}

package/dist/js/hooks/useAwaiter.mjs

@@ -0,0 +1,26 @@
+"use client"
+/* */
+import { useMemo } from "react";
+function useAwaiter(deps = []) {
+  return useMemo(() => {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    return {
+      promise,
+      resolve: (res) => {
+        resolve(res);
+      },
+      reject: (error) => {
+        reject(error);
+      }
+    };
+  }, deps);
+}
+export {
+  useAwaiter
+};
+//# sourceMappingURL=useAwaiter.mjs.map

package/dist/js/hooks/useAwaiter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAwaiter.mjs","sources":["../../../src/hooks/useAwaiter.ts"],"sourcesContent":["import { useMemo, type DependencyList } from \"react\";\n\ninterface Awaiter<T = undefined> {\n  promise: Promise<T>;\n  resolve: T extends undefined ? () => void : (res: T) => void;\n  reject: (error: unknown) => void;\n}\n\nexport function useAwaiter<T = undefined>(\n  deps: DependencyList = [],\n): Awaiter<T> {\n  return useMemo(() => {\n    let resolve: (res: T) => void;\n    let reject: (error: unknown) => void;\n    const promise = new Promise<T>((res, rej) => {\n      resolve = res;\n      reject = rej;\n    });\n    return {\n      promise,\n      resolve: (res) => {\n        resolve(res);\n      },\n      reject: (error) => {\n        reject(error);\n      },\n    } as Awaiter<T>;\n  }, deps);\n}\n"],"names":[],"mappings":";AAQgB,SAAA,WACd,OAAuB,IACX;AACZ,SAAO,QAAQ,MAAM;AACf,QAAA;AACA,QAAA;AACJ,UAAM,UAAU,IAAI,QAAW,CAAC,KAAK,QAAQ;AACjC,gBAAA;AACD,eAAA;AAAA,IAAA,CACV;AACM,WAAA;AAAA,MACL;AAAA,MACA,SAAS,CAAC,QAAQ;AAChB,gBAAQ,GAAG;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,UAAU;AACjB,eAAO,KAAK;AAAA,MAAA;AAAA,IAEhB;AAAA,KACC,IAAI;AACT;"}

package/dist/js/hooks/useMergedComponents.mjs

@@ -0,0 +1,24 @@
+"use client"
+/* */
+import { components } from "../components.mjs";
+import { useMemo } from "react";
+import { reduce } from "remeda";
+const useMergedComponents = (integrations) => useMemo(
+  () => new Map(
+    Object.entries(
+      reduce(
+        [...integrations, components],
+        (merged, current) => ({
+          ...merged,
+          ...current
+        }),
+        {}
+      )
+    )
+  ),
+  [...integrations]
+);
+export {
+  useMergedComponents
+};
+//# sourceMappingURL=useMergedComponents.mjs.map

package/dist/js/hooks/useMergedComponents.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedComponents.mjs","sources":["../../../src/hooks/useMergedComponents.ts"],"sourcesContent":["import { components } from \"@/components\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport type { RemoteComponentRendererProps } from \"@mfalkenberg/remote-dom-react/host\";\nimport { type ComponentType, useMemo } from \"react\";\nimport { reduce } from \"remeda\";\n\nexport const useMergedComponents = (\n  integrations: RemoteComponentsMap<never>[],\n) =>\n  useMemo(\n    () =>\n      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"],"names":[],"mappings":";;;AAMa,MAAA,sBAAsB,CACjC,iBAEA;AAAA,EACE,MACE,IAAI;AAAA,IACF,OAAO;AAAA,MACL;AAAA,QACE,CAAC,GAAG,cAAc,UAAU;AAAA,QAC5B,CAAC,QAAQ,aAAa;AAAA,UACpB,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,QAEL,CAAA;AAAA,MAAC;AAAA,IACH;AAAA,EAEJ;AAAA,EACF,CAAC,GAAG,YAAY;AAClB;"}

package/dist/types/RemoteRendererClient.d.ts

@@ -1,9 +1,11 @@
 import { RemoteComponentsMap } from './lib/types';
+import { ExtBridgeRemoteApi } from '@mittwald/ext-bridge';
 import { FC } from 'react';
 export interface RemoteRendererProps {
     integrations?: RemoteComponentsMap<never>[];
     src: string;
-    timeout?: number;
+    timeoutMs?: number;
+    extBridgeImplementation?: ExtBridgeRemoteApi;
 }
 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":"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"}
+{"version":3,"file":"RemoteRendererClient.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererClient.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAM/D,OAAO,EAAsB,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,kBAAkB,CAAC;CAC9C;AAWD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,mBAAmB,CAiFxD,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/types/hooks/useAwaiter.d.ts

@@ -0,0 +1,9 @@
+import { DependencyList } from 'react';
+interface Awaiter<T = undefined> {
+    promise: Promise<T>;
+    resolve: T extends undefined ? () => void : (res: T) => void;
+    reject: (error: unknown) => void;
+}
+export declare function useAwaiter<T = undefined>(deps?: DependencyList): Awaiter<T>;
+export {};
+//# sourceMappingURL=useAwaiter.d.ts.map

package/dist/types/hooks/useAwaiter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAwaiter.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAwaiter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAErD,UAAU,OAAO,CAAC,CAAC,GAAG,SAAS;IAC7B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,OAAO,EAAE,CAAC,SAAS,SAAS,GAAG,MAAM,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,CAAC,GAAG,SAAS,EACtC,IAAI,GAAE,cAAmB,GACxB,OAAO,CAAC,CAAC,CAAC,CAkBZ"}

package/dist/types/hooks/useMergedComponents.d.ts

@@ -0,0 +1,5 @@
+import { RemoteComponentsMap } from '../lib/types';
+import { RemoteComponentRendererProps } from '@mfalkenberg/remote-dom-react/host';
+import { ComponentType } from 'react';
+export declare const useMergedComponents: (integrations: RemoteComponentsMap<never>[]) => Map<string, ComponentType<RemoteComponentRendererProps>>;
+//# sourceMappingURL=useMergedComponents.d.ts.map

package/dist/types/hooks/useMergedComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedComponents.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMergedComponents.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,KAAK,aAAa,EAAW,MAAM,OAAO,CAAC;AAGpD,eAAO,MAAM,mBAAmB,GAC9B,cAAc,mBAAmB,CAAC,KAAK,CAAC,EAAE,6DAiBzC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-react-renderer",
-  "version": "0.2.0-alpha.102",
+  "version": "0.2.0-alpha.111",
   "type": "module",
   "description": "React rendering for Flow Remote Elements",
   "homepage": "https://mittwald.github.io/flow",
@@ -29,21 +29,23 @@
   },
   "dependencies": {
     "@mfalkenberg/remote-dom-react": "1.2.3",
-    "@mittwald/flow-remote-core": "0.2.0-alpha.102",
-    "@mittwald/flow-remote-elements": "0.2.0-alpha.102",
-    "@types/react": "^19.0.10",
+    "@mittwald/ext-bridge": "0.2.0-alpha.111",
+    "@mittwald/flow-remote-core": "0.2.0-alpha.111",
+    "@mittwald/flow-remote-elements": "0.2.0-alpha.111",
+    "@mittwald/react-use-promise": "^3.0.3",
+    "@types/react": "^19",
     "clsx": "^2.1.1",
     "react-children-utilities": "^2.10.0",
     "remeda": "^2.21.1"
   },
   "devDependencies": {
-    "@mittwald/flow-react-components": "0.2.0-alpha.102",
+    "@mittwald/flow-react-components": "0.2.0-alpha.111",
     "@mittwald/typescript-config": "",
     "@types/node": "^22.13.10",
     "nx": "^20.5.0",
     "prettier": "^3.5.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19",
+    "react-dom": "^19",
     "react-hook-form": "^7.54.2",
     "rimraf": "^6.0.1",
     "rollup-preserve-directives": "^1.1.3",
@@ -65,5 +67,5 @@
       "optional": true
     }
   },
-  "gitHead": "2a5bde6c6bc4c47b3aa3a8a5b42a8f4e90e781f0"
+  "gitHead": "66ecd717fb7169d9c5985ffc0e995198a988f0a4"
 }