@persona/layout-editor-remote-module 0.8.1 → 0.9.0

package/dist/bridge-host.d.mts

@@ -1,5 +1,5 @@
 import { n as Json, t as RemoteModuleContext } from "./protocol-Dqnl8JTs.mjs";
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactNode, Ref } from "react";
 
 //#region src/bridge/host/buildModuleSrc.d.ts
 type BuildModuleSrcOptions = {
@@ -30,6 +30,8 @@ type RemoteModuleFrameProps = {
   minHeight?: number;
   className?: string;
   style?: CSSProperties;
+  /** Receives the underlying <iframe> so a host can attach extra postMessage bridges. */
+  iframeRef?: Ref<HTMLIFrameElement>;
   data: Json;
   context: RemoteModuleContext;
   resolveDataPath: ResolveDataPath;
@@ -52,6 +54,7 @@ declare function RemoteModuleFrame({
   minHeight,
   className,
   style,
+  iframeRef: externalIframeRef,
   data,
   context,
   resolveDataPath,

package/dist/bridge-host.mjs

@@ -1,5 +1,5 @@
 import { a as assertNotSelfOrigin, i as parseModuleToHostMessage, n as SOURCE, t as PROTOCOL_VERSION } from "./protocol-D_pdVZjs.mjs";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/bridge/host/buildModuleSrc.ts
@@ -145,14 +145,27 @@ function withDynamicHeight(context, dynamicHeight) {
 		dynamicHeight
 	};
 }
-function RemoteModuleFrame({ documentUrl, moduleOrigin, accessToken, environmentId, locale, extraParams, title, sandbox, referrerPolicy = "no-referrer", initRetryMs, initRetryTimeoutMs, dynamicHeight = false, heightOffset = 0, minHeight, className, style, data, context, resolveDataPath, onRenderError }) {
+function RemoteModuleFrame({ documentUrl, moduleOrigin, accessToken, environmentId, locale, extraParams, title, sandbox, referrerPolicy = "no-referrer", initRetryMs, initRetryTimeoutMs, dynamicHeight = false, heightOffset = 0, minHeight, className, style, iframeRef: externalIframeRef, data, context, resolveDataPath, onRenderError }) {
 	const iframeRef = useRef(null);
 	const dataRef = useRef(data);
 	const contextRef = useRef(withDynamicHeight(context, dynamicHeight));
 	const onRenderErrorRef = useRef(onRenderError);
 	const resolveDataPathRef = useRef(resolveDataPath);
 	const bridgeRef = useRef(void 0);
+	const externalCleanupRef = useRef(void 0);
 	const [height, setHeight] = useState();
+	const setRefs = useCallback((node) => {
+		iframeRef.current = node;
+		if (typeof externalIframeRef === "function") if (node) {
+			const cleanup = externalIframeRef(node);
+			externalCleanupRef.current = typeof cleanup === "function" ? cleanup : void 0;
+		} else if (externalCleanupRef.current) {
+			const cleanup = externalCleanupRef.current;
+			externalCleanupRef.current = void 0;
+			cleanup();
+		} else externalIframeRef(null);
+		else if (externalIframeRef) externalIframeRef.current = node;
+	}, [externalIframeRef]);
 	const hostContext = useMemo(() => withDynamicHeight(context, dynamicHeight), [context, dynamicHeight]);
 	dataRef.current = data;
 	contextRef.current = hostContext;
@@ -205,7 +218,7 @@ function RemoteModuleFrame({ documentUrl, moduleOrigin, accessToken, environment
 	}, [hostContext]);
 	const computedHeight = dynamicHeight && height !== void 0 ? `${Math.max(height + heightOffset, minHeight ?? 0)}px` : minHeight === void 0 ? "100%" : `${minHeight}px`;
 	return /* @__PURE__ */ jsx("iframe", {
-		ref: iframeRef,
+		ref: setRefs,
 		src,
 		title,
 		sandbox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/layout-editor-remote-module",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Shared manifest format, Vite plugin, and host/iframe bridge for remotely-defined dashboard layout modules in Persona dashboard apps.",
   "license": "SEE LICENSE",
   "type": "module",