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

package/dist/js/components/Preview.mjs

@@ -2,18 +2,13 @@
 /* */
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-const Fallback = () => null;
-const RemoteRenderer = React.lazy(async () => {
-  try {
-    return await import("@mittwald/flow-remote-react-renderer/RemoteRenderer");
-  } catch {
-    return { default: Fallback };
-  }
-});
+const LazyRemoteRenderer = React.lazy(
+  () => import("@mittwald/flow-remote-react-renderer/RemoteRenderer")
+);
 const Preview = (props) => {
   const previewUrl = new URL(document.location.href);
   previewUrl.searchParams.set("preview", "");
-  return /* @__PURE__ */ jsx(RemoteRenderer, { src: previewUrl.toString(), ...props });
+  return /* @__PURE__ */ jsx(LazyRemoteRenderer, { src: previewUrl.toString(), ...props });
 };
 export {
   Preview,

package/dist/js/components/Preview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.mjs","sources":["../../../src/components/Preview.tsx"],"sourcesContent":["import React, { type FC, type ReactNode } from \"react\";\n\nconst Fallback: FC = () => null;\n\nconst RemoteRenderer = React.lazy(async () => {\n  try {\n    return await import(\"@mittwald/flow-remote-react-renderer/RemoteRenderer\");\n  } catch {\n    return { default: Fallback };\n  }\n});\n\ninterface Props {\n  fallback?: ReactNode;\n}\n\nexport const Preview: FC<Props> = (props) => {\n  const previewUrl = new URL(document.location.href);\n  previewUrl.searchParams.set(\"preview\", \"\");\n  return <RemoteRenderer src={previewUrl.toString()} {...props} />;\n};\n\nexport default Preview;\n"],"names":[],"mappings":";;AAEA,MAAM,WAAe,MAAM;AAE3B,MAAM,iBAAiB,MAAM,KAAK,YAAY;AACxC,MAAA;AACK,WAAA,MAAM,OAAO,qDAAqD;AAAA,EAAA,QACnE;AACC,WAAA,EAAE,SAAS,SAAS;AAAA,EAAA;AAE/B,CAAC;AAMY,MAAA,UAAqB,CAAC,UAAU;AAC3C,QAAM,aAAa,IAAI,IAAI,SAAS,SAAS,IAAI;AACtC,aAAA,aAAa,IAAI,WAAW,EAAE;AACzC,6BAAQ,gBAAe,EAAA,KAAK,WAAW,SAAS,GAAI,GAAG,OAAO;AAChE;"}
+{"version":3,"file":"Preview.mjs","sources":["../../../src/components/Preview.tsx"],"sourcesContent":["import type { ExtBridgeRemoteApi } from \"@mittwald/ext-bridge\";\nimport React, { type FC } from \"react\";\n\nconst LazyRemoteRenderer = React.lazy(\n  () => import(\"@mittwald/flow-remote-react-renderer/RemoteRenderer\"),\n);\n\ninterface Props {\n  extBridgeImplementation?: ExtBridgeRemoteApi;\n}\n\nexport const Preview: FC<Props> = (props) => {\n  const previewUrl = new URL(document.location.href);\n  previewUrl.searchParams.set(\"preview\", \"\");\n  return <LazyRemoteRenderer src={previewUrl.toString()} {...props} />;\n};\n\nexport default Preview;\n"],"names":[],"mappings":";;AAGA,MAAM,qBAAqB,MAAM;AAAA,EAC/B,MAAM,OAAO,qDAAqD;AACpE;AAMa,MAAA,UAAqB,CAAC,UAAU;AAC3C,QAAM,aAAa,IAAI,IAAI,SAAS,SAAS,IAAI;AACtC,aAAA,aAAa,IAAI,WAAW,EAAE;AACzC,6BAAQ,oBAAmB,EAAA,KAAK,WAAW,SAAS,GAAI,GAAG,OAAO;AACpE;"}

package/dist/js/components/RemoteRootClient.mjs

@@ -4,20 +4,49 @@
 import { jsx } from "react/jsx-runtime";
 import * as index from "../auto-generated/index.mjs";
 import { Preview } from "./Preview.mjs";
+import { stringifyError } from "../lib/stringifyError.mjs";
 import { ViewComponentContextProvider } from "@mittwald/flow-react-components/internal";
 import { connectHostRenderRootRef } from "@mittwald/flow-remote-core";
-import "react";
+import { useRef, Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 const RemoteRootClient = (props) => {
   const { children, showPreview = false, ...previewProps } = props;
   const params = new URLSearchParams(document.location.search);
   const isInPreviewFrame = params.has("preview");
-  const root = /* @__PURE__ */ jsx("div", { ref: connectHostRenderRootRef, children: /* @__PURE__ */ jsx(
-    ViewComponentContextProvider,
+  const connectionRef = useRef(void 0);
+  const errorRef = useRef(void 0);
+  const handleRenderError = (error) => {
+    var _a;
+    errorRef.current = error;
+    (_a = connectionRef.current) == null ? void 0 : _a.imports.setError(stringifyError(error));
+  };
+  const root = /* @__PURE__ */ jsx(
+    "div",
     {
-      components: index,
-      children
+      ref: (div) => {
+        connectionRef.current = connectHostRenderRootRef(div);
+        if (errorRef.current) {
+          handleRenderError(errorRef.current);
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        ErrorBoundary,
+        {
+          fallbackRender: ({ error }) => {
+            handleRenderError(error);
+            return null;
+          },
+          children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
+            ViewComponentContextProvider,
+            {
+              components: index,
+              children
+            }
+          ) })
+        }
+      )
     }
-  ) });
+  );
   if (isInPreviewFrame || !showPreview) {
     return root;
   }

package/dist/js/components/RemoteRootClient.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteRootClient.mjs","sources":["../../../src/components/RemoteRootClient.tsx"],"sourcesContent":["\"use client\";\nimport * as viewComponents from \"@/auto-generated\";\nimport Preview from \"@/components/Preview\";\nimport { ViewComponentContextProvider } from \"@mittwald/flow-react-components/internal\";\nimport { connectHostRenderRootRef } from \"@mittwald/flow-remote-core\";\nimport { type FC, type PropsWithChildren } from \"react\";\n\nexport interface RootClientProps extends PropsWithChildren {\n  showPreview?: boolean;\n}\n\nexport const RemoteRootClient: FC<RootClientProps> = (props) => {\n  const { children, showPreview = false, ...previewProps } = props;\n\n  const params = new URLSearchParams(document.location.search);\n  const isInPreviewFrame = params.has(\"preview\");\n\n  const root = (\n    <div ref={connectHostRenderRootRef}>\n      <ViewComponentContextProvider\n        components={viewComponents as FlowViewComponents}\n      >\n        {children}\n      </ViewComponentContextProvider>\n    </div>\n  );\n\n  if (isInPreviewFrame || !showPreview) {\n    return root;\n  }\n\n  return <Preview {...previewProps} />;\n};\n\nexport default RemoteRootClient;\n"],"names":["viewComponents"],"mappings":";;;;;;;AAWa,MAAA,mBAAwC,CAAC,UAAU;AAC9D,QAAM,EAAE,UAAU,cAAc,OAAO,GAAG,aAAiB,IAAA;AAE3D,QAAM,SAAS,IAAI,gBAAgB,SAAS,SAAS,MAAM;AACrD,QAAA,mBAAmB,OAAO,IAAI,SAAS;AAE7C,QAAM,OACJ,oBAAC,OAAI,EAAA,KAAK,0BACR,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,YAAYA;AAAAA,MAEX;AAAA,IAAA;AAAA,EAAA,GAEL;AAGE,MAAA,oBAAoB,CAAC,aAAa;AAC7B,WAAA;AAAA,EAAA;AAGF,SAAA,oBAAC,SAAS,EAAA,GAAG,aAAc,CAAA;AACpC;"}
+{"version":3,"file":"RemoteRootClient.mjs","sources":["../../../src/components/RemoteRootClient.tsx"],"sourcesContent":["\"use client\";\nimport * as viewComponents from \"@/auto-generated\";\nimport Preview from \"@/components/Preview\";\nimport { stringifyError } from \"@/lib/stringifyError\";\nimport type { ExtBridgeRemoteApi } from \"@mittwald/ext-bridge\";\nimport { ViewComponentContextProvider } from \"@mittwald/flow-react-components/internal\";\nimport {\n  connectHostRenderRootRef,\n  type RemoteToHostConnection,\n} from \"@mittwald/flow-remote-core\";\nimport { Suspense, useRef, type FC, type PropsWithChildren } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nexport interface RootClientProps extends PropsWithChildren {\n  showPreview?: boolean;\n  extBridgeImplementation?: ExtBridgeRemoteApi;\n}\n\nexport const RemoteRootClient: FC<RootClientProps> = (props) => {\n  const { children, showPreview = false, ...previewProps } = props;\n\n  const params = new URLSearchParams(document.location.search);\n  const isInPreviewFrame = params.has(\"preview\");\n  const connectionRef = useRef<RemoteToHostConnection>(undefined);\n  const errorRef = useRef<unknown>(undefined);\n\n  const handleRenderError = (error: unknown) => {\n    errorRef.current = error;\n    connectionRef.current?.imports.setError(stringifyError(error));\n  };\n\n  const root = (\n    <div\n      ref={(div) => {\n        connectionRef.current = connectHostRenderRootRef(div);\n        if (errorRef.current) {\n          handleRenderError(errorRef.current);\n        }\n      }}\n    >\n      <ErrorBoundary\n        fallbackRender={({ error }) => {\n          handleRenderError(error);\n          return null;\n        }}\n      >\n        <Suspense>\n          <ViewComponentContextProvider\n            components={viewComponents as FlowViewComponents}\n          >\n            {children}\n          </ViewComponentContextProvider>\n        </Suspense>\n      </ErrorBoundary>\n    </div>\n  );\n\n  if (isInPreviewFrame || !showPreview) {\n    return root;\n  }\n\n  return <Preview {...previewProps} />;\n};\n\nexport default RemoteRootClient;\n"],"names":["viewComponents"],"mappings":";;;;;;;;;AAkBa,MAAA,mBAAwC,CAAC,UAAU;AAC9D,QAAM,EAAE,UAAU,cAAc,OAAO,GAAG,aAAiB,IAAA;AAE3D,QAAM,SAAS,IAAI,gBAAgB,SAAS,SAAS,MAAM;AACrD,QAAA,mBAAmB,OAAO,IAAI,SAAS;AACvC,QAAA,gBAAgB,OAA+B,MAAS;AACxD,QAAA,WAAW,OAAgB,MAAS;AAEpC,QAAA,oBAAoB,CAAC,UAAmB;;AAC5C,aAAS,UAAU;AACnB,wBAAc,YAAd,mBAAuB,QAAQ,SAAS,eAAe,KAAK;AAAA,EAC9D;AAEA,QAAM,OACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,CAAC,QAAQ;AACE,sBAAA,UAAU,yBAAyB,GAAG;AACpD,YAAI,SAAS,SAAS;AACpB,4BAAkB,SAAS,OAAO;AAAA,QAAA;AAAA,MAEtC;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAgB,CAAC,EAAE,YAAY;AAC7B,8BAAkB,KAAK;AAChB,mBAAA;AAAA,UACT;AAAA,UAEA,8BAAC,UACC,EAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,YAAYA;AAAAA,cAEX;AAAA,YAAA;AAAA,UAAA,EAEL,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAGE,MAAA,oBAAoB,CAAC,aAAa;AAC7B,WAAA;AAAA,EAAA;AAGF,SAAA,oBAAC,SAAS,EAAA,GAAG,aAAc,CAAA;AACpC;"}

package/dist/js/lib/stringifyError.mjs

@@ -0,0 +1,7 @@
+"use client"
+/* */
+const stringifyError = (error) => typeof error === "object" && error instanceof Error ? error.message : String(error);
+export {
+  stringifyError
+};
+//# sourceMappingURL=stringifyError.mjs.map

package/dist/js/lib/stringifyError.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringifyError.mjs","sources":["../../../src/lib/stringifyError.ts"],"sourcesContent":["export const stringifyError = (error: unknown) =>\n  typeof error === \"object\" && error instanceof Error\n    ? error.message\n    : String(error);\n"],"names":[],"mappings":"AAAa,MAAA,iBAAiB,CAAC,UAC7B,OAAO,UAAU,YAAY,iBAAiB,QAC1C,MAAM,UACN,OAAO,KAAK;"}

package/dist/types/components/Preview.d.ts

@@ -1,6 +1,7 @@
-import { FC, ReactNode } from 'react';
+import { ExtBridgeRemoteApi } from '@mittwald/ext-bridge';
+import { FC } from 'react';
 interface Props {
-    fallback?: ReactNode;
+    extBridgeImplementation?: ExtBridgeRemoteApi;
 }
 export declare const Preview: FC<Props>;
 export default Preview;

package/dist/types/components/Preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../../src/components/Preview.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,KAAK,CAI7B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../../src/components/Preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,KAAK;IACb,uBAAuB,CAAC,EAAE,kBAAkB,CAAC;CAC9C;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,KAAK,CAI7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/components/RemoteRootClient.d.ts

@@ -1,6 +1,8 @@
+import { ExtBridgeRemoteApi } from '@mittwald/ext-bridge';
 import { FC, PropsWithChildren } from 'react';
 export interface RootClientProps extends PropsWithChildren {
     showPreview?: boolean;
+    extBridgeImplementation?: ExtBridgeRemoteApi;
 }
 export declare const RemoteRootClient: FC<RootClientProps>;
 export default RemoteRootClient;

package/dist/types/components/RemoteRootClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteRootClient.d.ts","sourceRoot":"","sources":["../../../src/components/RemoteRootClient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAExD,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAqBhD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"RemoteRootClient.d.ts","sourceRoot":"","sources":["../../../src/components/RemoteRootClient.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAM/D,OAAO,EAAoB,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,kBAAkB,CAAC;CAC9C;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CA4ChD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/types/lib/stringifyError.d.ts

@@ -0,0 +1,2 @@
+export declare const stringifyError: (error: unknown) => string;
+//# sourceMappingURL=stringifyError.d.ts.map

package/dist/types/lib/stringifyError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringifyError.d.ts","sourceRoot":"","sources":["../../../src/lib/stringifyError.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,WAG1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-react-components",
-  "version": "0.2.0-alpha.102",
+  "version": "0.2.0-alpha.111",
   "type": "module",
   "description": "React components that can be used in a remote environment",
   "homepage": "https://mittwald.github.io/flow",
@@ -33,18 +33,20 @@
   },
   "dependencies": {
     "@mfalkenberg/remote-dom-react": "1.2.3",
-    "@mittwald/flow-react-components": "0.2.0-alpha.102",
-    "@mittwald/flow-remote-core": "0.2.0-alpha.102",
-    "@mittwald/flow-remote-elements": "0.2.0-alpha.102",
-    "@types/react": "^19.0.10"
+    "@mittwald/flow-react-components": "0.2.0-alpha.111",
+    "@mittwald/flow-remote-core": "0.2.0-alpha.111",
+    "@mittwald/flow-remote-elements": "0.2.0-alpha.111",
+    "@types/react": "^19",
+    "react-error-boundary": "^5.0.0"
   },
   "devDependencies": {
-    "@mittwald/flow-remote-react-renderer": "0.2.0-alpha.102",
+    "@mittwald/ext-bridge": "0.2.0-alpha.111",
+    "@mittwald/flow-remote-react-renderer": "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": "^19",
     "react-hook-form": "^7.54.2",
     "rimraf": "^6.0.1",
     "rollup-plugin-auto-named-exports": "1.0.0-beta.3",
@@ -57,11 +59,15 @@
     "vite-plugin-externalize-deps": "^0.9.0"
   },
   "peerDependencies": {
+    "@mittwald/ext-bridge": "*",
     "@mittwald/flow-remote-react-renderer": "*",
     "react": "^19",
     "react-hook-form": "*"
   },
   "peerDependenciesMeta": {
+    "@mittwald/ext-bridge": {
+      "optional": true
+    },
     "@mittwald/flow-remote-react-renderer": {
       "optional": true
     },
@@ -69,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "2a5bde6c6bc4c47b3aa3a8a5b42a8f4e90e781f0"
+  "gitHead": "66ecd717fb7169d9c5985ffc0e995198a988f0a4"
 }