@metapages/metapage 1.10.7 → 1.10.8

package/dist/metapage/metaframeRenderer.d.ts

@@ -0,0 +1,17 @@
+import { Disposer } from "./core.js";
+import { Metapage } from "./Metapage.js";
+import { MetaframeInputMap } from "./v0_4/index.js";
+export interface MetaframeRendererResult {
+    setInputs: (inputs: MetaframeInputMap) => void;
+    setOutputs: (outputs: MetaframeInputMap) => void;
+    dispose: Disposer;
+    metapage: Metapage;
+}
+export declare function renderMetaframe(props: {
+    url: string;
+    onOutputs?: (outputs: MetaframeInputMap) => void;
+    onUrlChange?: (url: string) => void;
+    rootDiv: HTMLElement;
+    debug?: boolean;
+}): Promise<MetaframeRendererResult>;
+//# sourceMappingURL=metaframeRenderer.d.ts.map

package/dist/metapage/metaframeRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metaframeRenderer.d.ts","sourceRoot":"","sources":["../../src/metapage/metaframeRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKpD,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAQD,wBAAsB,eAAe,CAAC,KAAK,EAAE;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAsHnC"}

package/dist/metapage/metapageRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"metapageRenderer.d.ts","sourceRoot":"","sources":["../../src/metapage/metapageRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAGD,UAAU,UAAU;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAGD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAKvD;AAuED,eAAO,MAAM,wBAAwB,eACvB,kBAAkB;wBAEV,UAAU,EAAE;wBACZ,IAAI,MAAM,CAAC;yBACV,IAAI,MAAM,CAAC;4BACR,MAAM;CA8E/B,CAAC;AAMF,wBAAsB,cAAc,CAAC,KAAK,EAAE;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,GAAG,OAAO,CAAC,sBAAsB,CAAC,CA2OlC;AAED,eAAO,MAAM,iBAAiB,eAChB,kBAAkB,eACjB,WAAW,KACvB,OA8CF,CAAC"}
+{"version":3,"file":"metapageRenderer.d.ts","sourceRoot":"","sources":["../../src/metapage/metapageRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAGD,UAAU,UAAU;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAGD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAKvD;AAuED,eAAO,MAAM,wBAAwB,eACvB,kBAAkB;wBAEV,UAAU,EAAE;wBACZ,IAAI,MAAM,CAAC;yBACV,IAAI,MAAM,CAAC;4BACR,MAAM;CA8E/B,CAAC;AAMF,wBAAsB,cAAc,CAAC,KAAK,EAAE;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAuPlC;AAED,eAAO,MAAM,iBAAiB,eAChB,kBAAkB,eACjB,WAAW,KACvB,OA8CF,CAAC"}

package/dist/metapage.css

@@ -0,0 +1 @@
+/* Optional styles for metapage rendering */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@metapages/metapage",
   "public": true,
-  "version": "1.10.7",
+  "version": "1.10.8",
   "description": "Connect web pages together",
   "repository": "https://github.com/metapages/metapage",
   "homepage": "https://metapage.io/",
@@ -15,7 +15,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
-    }
+    },
+    "./metapage.css": "./dist/metapage.css"
   },
   "files": [
     "dist",
@@ -23,8 +24,8 @@
   ],
   "source": "src/index.ts",
   "dependencies": {
-    "@metapages/hash-query": "^0.9.12",
     "@metapages/dataref": "^2.0.1",
+    "@metapages/hash-query": "^0.9.12",
     "base64-arraybuffer": "^1.0.2",
     "compare-versions": "^6.1.1",
     "eventemitter3": "^4.0.0",
@@ -40,7 +41,7 @@
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/object-hash": "^2.2.1",
     "@vitest/browser": "^3.2.4",
-    "playwright": "^1.54.2",
+    "playwright": "^1.59.1",
     "rollup": "^2.79.2",
     "rollup-plugin-typescript-paths": "^1.4.0",
     "tslib": "^2.6.2",

package/src/index.ts

@@ -18,3 +18,4 @@ export * from "./metapage/versions";
 export * from "./metapage/version-detection";
 export * from "./metapage/util";
 export * from "./metapage/metapageRenderer";
+export * from "./metapage/metaframeRenderer";

package/src/metapage/metaframeRenderer.ts

@@ -0,0 +1,147 @@
+import { Disposer } from "./core.js";
+import { MetapageEventDefinitionUpdate, MetapageEvents } from "./events.js";
+import { Metapage } from "./Metapage.js";
+import { pageLoaded } from "./MetapageTools.js";
+import { MetaframeInputMap } from "./v0_4/index.js";
+import { MetapageDefinition } from "./v2/metapage.js";
+
+const METAFRAME_ID = "mf";
+
+export interface MetaframeRendererResult {
+  setInputs: (inputs: MetaframeInputMap) => void;
+  setOutputs: (outputs: MetaframeInputMap) => void;
+  dispose: Disposer;
+  metapage: Metapage;
+}
+
+/**
+ * Renders a single metaframe URL as a full-size iframe.
+ * Creates a minimal metapage definition wrapping the URL,
+ * then renders the iframe at 100% width/height with no
+ * borders, labels, or grid layout.
+ */
+export async function renderMetaframe(props: {
+  url: string;
+  onOutputs?: (outputs: MetaframeInputMap) => void;
+  onUrlChange?: (url: string) => void;
+  rootDiv: HTMLElement;
+  debug?: boolean;
+}): Promise<MetaframeRendererResult> {
+  const { url, onOutputs, onUrlChange, rootDiv, debug = false } = props;
+
+  if (!url) {
+    throw new Error("url must be provided");
+  }
+
+  // Build a minimal metapage definition with a single metaframe
+  const definition: MetapageDefinition = {
+    version: "0.4",
+    metaframes: {
+      [METAFRAME_ID]: { url },
+    },
+    meta: {
+      layouts: {
+        "react-grid-layout": {
+          docs: "https://www.npmjs.com/package/react-grid-layout",
+          props: {
+            cols: 1,
+            margin: [0, 0],
+            rowHeight: 100,
+            containerPadding: [0, 0],
+          },
+          layout: [{ i: METAFRAME_ID, x: 0, y: 0, w: 1, h: 1 }],
+        },
+      },
+    },
+  };
+
+  await pageLoaded();
+
+  const metapage = new Metapage();
+  metapage.debug = debug;
+
+  try {
+    await metapage.setDefinition(JSON.parse(JSON.stringify(definition)));
+  } catch (err) {
+    metapage.dispose();
+    throw new Error(`Failed to set metapage definition: ${err}`);
+  }
+
+  const disposers: Disposer[] = [];
+
+  if (onOutputs) {
+    disposers.push(
+      metapage.addListenerReturnDisposer(MetapageEvents.Outputs, (outputs) => {
+        onOutputs(outputs[METAFRAME_ID] || {});
+      }),
+    );
+  }
+
+  if (onUrlChange) {
+    let lastUrl = url;
+    disposers.push(
+      metapage.addListenerReturnDisposer(
+        MetapageEvents.DefinitionUpdate,
+        (event: MetapageEventDefinitionUpdate) => {
+          const newUrl = event.definition?.metaframes?.[METAFRAME_ID]?.url;
+          if (newUrl && newUrl !== lastUrl) {
+            lastUrl = newUrl;
+            onUrlChange(newUrl);
+          }
+        },
+      ),
+    );
+  }
+
+  // Get the single metaframe's iframe
+  const metaframe = metapage.getMetaframes()[METAFRAME_ID];
+  if (!metaframe) {
+    metapage.dispose();
+    throw new Error("Failed to create metaframe");
+  }
+
+  const iframe = await metaframe.iframe;
+
+  // Container fills the rootDiv completely
+  const container = document.createElement("div");
+  container.style.width = "100%";
+  container.style.height = "100%";
+  container.style.margin = "0";
+  container.style.padding = "0";
+  container.style.overflow = "hidden";
+  container.style.position = "relative";
+
+  // Iframe fills the container
+  iframe.style.position = "absolute";
+  iframe.style.top = "0";
+  iframe.style.left = "0";
+  iframe.style.width = "100%";
+  iframe.style.height = "100%";
+  iframe.style.border = "none";
+  iframe.style.margin = "0";
+  iframe.style.padding = "0";
+
+  container.appendChild(iframe);
+  rootDiv.appendChild(container);
+
+  return {
+    metapage,
+    setInputs: (inputs: MetaframeInputMap) => {
+      if (!metapage.isDisposed()) {
+        metapage.setInputs({ [METAFRAME_ID]: inputs });
+      }
+    },
+    setOutputs: (outputs: MetaframeInputMap) => {
+      if (!metapage.isDisposed()) {
+        metapage.setOutputs({ [METAFRAME_ID]: outputs });
+      }
+    },
+    dispose: () => {
+      disposers.forEach((disposer) => disposer());
+      metapage.dispose();
+      if (container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    },
+  };
+}

package/src/metapage/metapageRenderer.ts

@@ -342,18 +342,30 @@ export async function renderMetapage(props: {
     const itemStyle: Record<string, string | number> = {
       gridColumn: `${layoutItem.x + 1} / span ${layoutItem.w}`,
       gridRow: `${layoutItem.y + 1} / span ${layoutItem.h}`,
-      overflow: "hidden",
+      position: "relative",
+      overflowY: "hidden",
       width: "100%",
-      height: "100%", // Use full height of grid cell
+      height: "100%",
       border: options.hideFrameBorders ? "none" : "1px solid #e0e0e0",
-      position: "relative" as const,
-      alignSelf: "stretch", // Stretch to fill the grid cell height
-      justifySelf: "stretch", // Stretch to fill the grid cell width
+      alignSelf: "stretch",
+      justifySelf: "stretch",
     };
 
     // Create wrapper div for proper grid positioning
     const wrapper = document.createElement("div");
+    wrapper.classList.add("metaframe-container");
     Object.assign(wrapper.style, itemStyle);
+
+    // Absolutely position iframe within its relative container
+    iframe.classList.add("metaframe");
+    iframe.style.position = "absolute";
+    iframe.style.top = "0";
+    iframe.style.left = "0";
+    iframe.style.width = "100%";
+    iframe.style.height = "100%";
+    iframe.style.border = "0";
+    iframe.style.overflow = "hidden";
+
     wrapper.appendChild(iframe);
 
     gridContainer.appendChild(wrapper);

package/src/metapage.css

@@ -0,0 +1 @@
+/* Optional styles for metapage rendering */