@mittwald/flow-remote-react-renderer 0.2.0-alpha.85 → 0.2.0-alpha.86

package/dist/js/RemoteRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteRenderer.mjs","sources":["../../src/RemoteRenderer.tsx"],"sourcesContent":["\"use client\";\nimport type { FC } from \"react\";\nimport React from \"react\";\nimport { useIsMounted } from \"@/hooks/useIsMounted\";\nimport type { RemoteRendererProps } from \"@/RemoteRendererClient\";\n\nconst RemoteRendererClient = React.lazy(() => import(\"./RemoteRendererClient\"));\n\nexport const RemoteRenderer: FC<RemoteRendererProps> = (props) => {\n  const isMounted = useIsMounted();\n  return isMounted ? <RemoteRendererClient {...props} /> : null;\n};\n\nexport default RemoteRenderer;\n"],"names":[],"mappings":";;;;AAMA,MAAM,uBAAuB,MAAM,KAAK,MAAM,OAAO,4BAAwB,CAAC;AAEjE,MAAA,iBAA0C,CAAC,UAAU;AAChE,QAAM,YAAY,aAAa;AAC/B,SAAO,YAAY,oBAAC,sBAAsB,EAAA,GAAG,MAAO,CAAA,IAAK;AAC3D;"}
+{"version":3,"file":"RemoteRenderer.mjs","sources":["../../src/RemoteRenderer.tsx"],"sourcesContent":["\"use client\";\nimport { type FC } from \"react\";\nimport React from \"react\";\nimport { useIsMounted } from \"@/hooks/useIsMounted\";\nimport type { RemoteRendererProps } from \"@/RemoteRendererClient\";\n\nconst RemoteRendererClient = React.lazy(() => import(\"./RemoteRendererClient\"));\n\nexport const RemoteRenderer: FC<RemoteRendererProps> = (props) => {\n  const isMounted = useIsMounted();\n  return isMounted ? <RemoteRendererClient {...props} /> : null;\n};\n\nexport default RemoteRenderer;\n"],"names":[],"mappings":";;;;AAMA,MAAM,uBAAuB,MAAM,KAAK,MAAM,OAAO,4BAAwB,CAAC;AAEjE,MAAA,iBAA0C,CAAC,UAAU;AAChE,QAAM,YAAY,aAAa;AAC/B,SAAO,YAAY,oBAAC,sBAAsB,EAAA,GAAG,MAAO,CAAA,IAAK;AAC3D;"}

package/dist/js/RemoteRendererClient.mjs

@@ -5,11 +5,10 @@ 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, useState } from "react";
+import { useMemo, useRef, useState, useLayoutEffect } from "react";
 import { reduce } from "remeda";
 const RemoteRendererClient = (props) => {
-  const { integrations = [], src, iframeStyle, fallback } = props;
-  const receiver = useMemo(() => new RemoteReceiver(), []);
+  const { integrations = [], src } = props;
   const mergedComponents = useMemo(() => {
     return new Map(
       Object.entries(
@@ -24,28 +23,49 @@ const RemoteRendererClient = (props) => {
       )
     );
   }, [...integrations]);
+  const receiver = useMemo(() => new RemoteReceiver(), []);
+  const awaiter = useRef({
+    promise: null
+  }).current;
+  const [initialRendered, forceRerender] = useState(false);
   const connect = connectRemoteIframeRef(receiver.connection);
-  const [iframeHasLoaded, setIframeHasLoaded] = useState(false);
-  const remoteFrame = /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      onLoad: () => setIframeHasLoaded(true),
-      ref: connect,
-      src,
-      style: iframeStyle ?? {
-        visibility: "hidden",
-        height: 0,
-        width: 0,
-        border: "none",
-        position: "absolute",
-        marginLeft: "-9999px"
-      }
+  receiver.subscribe({ id: receiver.root.id }, () => {
+    if (awaiter.promise !== null && awaiter.resolve) {
+      awaiter.resolve();
     }
-  );
+  });
+  useLayoutEffect(() => {
+    if (awaiter.promise !== null || initialRendered) {
+      return;
+    }
+    awaiter.promise = new Promise((resolve) => {
+      awaiter.resolve = () => {
+        awaiter.promise = null;
+        resolve();
+      };
+    });
+    forceRerender(true);
+  }, [forceRerender]);
+  if (awaiter.promise !== null) {
+    throw awaiter.promise;
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !iframeHasLoaded && fallback,
     /* @__PURE__ */ jsx(RemoteRootRenderer, { components: mergedComponents, receiver }),
-    remoteFrame
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref: connect,
+        src,
+        style: {
+          visibility: "hidden",
+          height: 0,
+          width: 0,
+          border: "none",
+          position: "absolute",
+          marginLeft: "-9999px"
+        }
+      }
+    )
   ] });
 };
 export {

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 type { ComponentType, CSSProperties, FC, ReactNode } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { reduce } from \"remeda\";\n\nexport interface RemoteRendererProps {\n  integrations?: RemoteComponentsMap<never>[];\n  src: string;\n  iframeStyle?: CSSProperties;\n  fallback?: ReactNode;\n}\n\nexport const RemoteRendererClient: FC<RemoteRendererProps> = (props) => {\n  const { integrations = [], src, iframeStyle, fallback } = props;\n  const receiver = useMemo(() => new RemoteReceiver(), []);\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 connect = connectRemoteIframeRef(receiver.connection);\n\n  const [iframeHasLoaded, setIframeHasLoaded] = useState(false);\n\n  const remoteFrame = (\n    <iframe\n      onLoad={() => setIframeHasLoaded(true)}\n      ref={connect}\n      src={src}\n      style={\n        iframeStyle ?? {\n          visibility: \"hidden\",\n          height: 0,\n          width: 0,\n          border: \"none\",\n          position: \"absolute\",\n          marginLeft: \"-9999px\",\n        }\n      }\n    />\n  );\n\n  return (\n    <>\n      {!iframeHasLoaded && fallback}\n      <RemoteRootRenderer components={mergedComponents} receiver={receiver} />\n      {remoteFrame}\n    </>\n  );\n};\n\nexport default RemoteRendererClient;\n"],"names":[],"mappings":";;;;;;;AAoBa,MAAA,uBAAgD,CAAC,UAAU;AACtE,QAAM,EAAE,eAAe,IAAI,KAAK,aAAa,aAAa;AAC1D,QAAM,WAAW,QAAQ,MAAM,IAAI,eAAe,GAAG,CAAA,CAAE;AAEjD,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,UAAU,uBAAuB,SAAS,UAAU;AAE1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,cACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,MAAM,mBAAmB,IAAI;AAAA,MACrC,KAAK;AAAA,MACL;AAAA,MACA,OACE,eAAe;AAAA,QACb,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EAEJ;AAGF,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,CAAC,mBAAmB;AAAA,IACpB,oBAAA,oBAAA,EAAmB,YAAY,kBAAkB,SAAoB,CAAA;AAAA,IACrE;AAAA,EAAA,GACH;AAEJ;"}
+{"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;"}

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteRenderer.d.ts","sourceRoot":"","sources":["../../src/RemoteRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIlE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAGlD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RemoteRenderer.d.ts","sourceRoot":"","sources":["../../src/RemoteRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIlE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAGlD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/types/RemoteRendererClient.d.ts

@@ -1,10 +1,8 @@
 import { RemoteComponentsMap } from './lib/types';
-import { CSSProperties, FC, ReactNode } from 'react';
+import { FC } from 'react';
 export interface RemoteRendererProps {
     integrations?: RemoteComponentsMap<never>[];
     src: string;
-    iframeStyle?: CSSProperties;
-    fallback?: ReactNode;
 }
 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,KAAK,EAAiB,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzE,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,mBAAmB,CAgDxD,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-react-renderer",
-  "version": "0.2.0-alpha.85",
+  "version": "0.2.0-alpha.86",
   "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.85",
-    "@mittwald/flow-remote-elements": "0.2.0-alpha.85",
+    "@mittwald/flow-remote-core": "0.2.0-alpha.86",
+    "@mittwald/flow-remote-elements": "0.2.0-alpha.86",
     "@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.85",
+    "@mittwald/flow-react-components": "0.2.0-alpha.86",
     "@mittwald/typescript-config": "",
     "@types/node": "^22.13.10",
     "nx": "^20.5.0",
@@ -65,5 +65,5 @@
       "optional": true
     }
   },
-  "gitHead": "e63cfbd6eb643be82eccce1ba0da914f955535fe"
+  "gitHead": "e7790e1caf7262074ef04aef4e335f19bd648192"
 }