@salesforce/internal-lightning-out-containers 2.2.0 → 2.2.1-rc.1

package/dist/modules/force/lightningOutBaseContainer/lightningOutBaseContainer.js

@@ -7,7 +7,8 @@
 import { api, LightningElement, track } from "lwc";
 import { pdpEventSchema } from "o11y_schema/sf_pdp";
 
-import { MSG } from "./utils/contants";
+import { MSG } from "./utils/constants";
+import { EmbeddingResizer } from "./utils/EmbeddingResizer";
 
 import { createEnvContext } from "./utils/env";
 import { createGlobalError } from "./utils/errorHandling";
@@ -15,12 +16,16 @@ import { createGlobalError } from "./utils/errorHandling";
 import { createInstrumentation } from "./utils/instrumentation";
 import { applyCustomStyleProperties } from "./utils/style";
 
+const ENABLE_RESIZING = false;
+
 // These settings are important for layout and sizing.
-document.documentElement.style.height = "100%";
 document.documentElement.style.display = "block";
 document.body.style.margin = "0px";
-document.body.style.height = "100%";
 document.body.style.display = "block";
+if (!ENABLE_RESIZING) {
+    document.documentElement.style.height = "100%";
+    document.body.style.height = "100%";
+}
 
 // Apply global style overrides from URL parameter during bootstrap
 const urlSearchParams = new URLSearchParams(window.location.search);
@@ -52,6 +57,9 @@ export default class LightningOutBaseContainer extends LightningElement {
     isError = false;
     #instrumentation;
 
+    // Resize observer
+    #resizer = null;
+
     constructor() {
         super();
         this.#env = createEnvContext();
@@ -215,6 +223,28 @@ export default class LightningOutBaseContainer extends LightningElement {
         }
     }
 
+    disconnectedCallback() {
+        if (ENABLE_RESIZING) {
+            this.#resizer?.stop();
+            this.#resizer = null;
+        }
+    }
+
+    #setupResizeObserver = () => {
+        this.#resizer = new EmbeddingResizer({
+            targetElement: document.body,
+            onResize: (height) => {
+                this.#env.parentPostMessage({
+                    type: MSG.RESIZE,
+                    height,
+                });
+            },
+            waitForDOMReady: false, // Already connected, no need to wait
+        });
+
+        this.#resizer.start();
+    };
+
     renderedCallback() {
         if (!this.#embeddedCmp && this.refs?.embeddedCmp) {
             this.#embeddedCmp = this.refs.embeddedCmp;
@@ -226,6 +256,9 @@ export default class LightningOutBaseContainer extends LightningElement {
                 });
             });
             this.#env.parentPostMessage({ type: MSG.READY });
+            if (ENABLE_RESIZING) {
+                this.#setupResizeObserver();
+            }
 
             // PDP_ProductUsage telemetry
             if (this.#instrumentation?.log) {

package/dist/modules/force/lightningOutBaseContainer/utils/EmbeddingResizer.js

@@ -0,0 +1,112 @@
+/**
+ * EmbeddingResizer - Handles dynamic iframe/container resizing
+ * Uses ResizeObserver to monitor element size changes and notify the host
+ */
+class EmbeddingResizer {
+    #observer = null;
+    #targetElement;
+    #onResize;
+    #onReady;
+    #waitForDOMReady;
+    #lastHeight = -1;
+    #scheduled = false;
+    #isObserving = false;
+    constructor(options) {
+        this.#targetElement = options.targetElement || document.body;
+        this.#onResize = options.onResize;
+        this.#onReady = options.onReady;
+        this.#waitForDOMReady = options.waitForDOMReady ?? true;
+    }
+    /**
+     * Start observing the target element for size changes
+     */
+    start() {
+        if (this.#isObserving) {
+            return;
+        }
+        if (this.#waitForDOMReady && document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", () => this.#startObserver(), { once: true });
+        } else {
+            this.#startObserver();
+        }
+    }
+    /**
+     * Stop observing and clean up resources
+     */
+    stop() {
+        if (this.#observer) {
+            this.#observer.disconnect();
+            this.#observer = null;
+        }
+        this.#isObserving = false;
+        this.#lastHeight = -1;
+        this.#scheduled = false;
+    }
+    /**
+     * Get the current observed height
+     */
+    getLastHeight() {
+        return this.#lastHeight;
+    }
+    /**
+     * Check if currently observing
+     */
+    isObserving() {
+        return this.#isObserving;
+    }
+    #startObserver = () => {
+        this.#observer = new ResizeObserver((entries) => {
+            this.#handleResize(entries);
+        });
+        this.#observer.observe(this.#targetElement, { box: "border-box" });
+        this.#isObserving = true;
+        // Invoke ready callback if provided
+        if (this.#onReady) {
+            this.#onReady();
+        }
+    };
+    #handleResize = (entries) => {
+        if (!entries || entries.length === 0) {
+            return;
+        }
+        const entry = entries[0];
+        const measuredHeight = this.#extractHeight(entry);
+        const heightPx = Math.max(0, Math.ceil(Number(measuredHeight)));
+        if (!Number.isFinite(heightPx)) {
+            return;
+        }
+        if (heightPx === this.#lastHeight) {
+            return;
+        }
+        this.#lastHeight = heightPx;
+        if (!this.#scheduled) {
+            this.#scheduled = true;
+            requestAnimationFrame(() => {
+                this.#scheduled = false;
+                if (!this.#isObserving) return;
+                this.#onResize(this.#lastHeight);
+            });
+        }
+    };
+    #extractHeight = (entry) => {
+        // Try borderBoxSize first (more accurate)
+        if (entry.borderBoxSize) {
+            if (Array.isArray(entry.borderBoxSize)) {
+                return entry.borderBoxSize[0]?.blockSize || 0;
+            }
+            // Some browsers return a single object instead of array
+            return entry.borderBoxSize.blockSize || 0;
+        }
+        // Fallback to contentRect
+        if (entry.contentRect && typeof entry.contentRect.height === "number") {
+            return entry.contentRect.height;
+        }
+        // Last resort: getBoundingClientRect
+        if (entry.target && typeof entry.target.getBoundingClientRect === "function") {
+            return entry.target.getBoundingClientRect().height;
+        }
+        return 0;
+    };
+}
+
+export { EmbeddingResizer };

package/dist/modules/force/lightningOutBaseContainer/utils/{contants.js → constants.js}

@@ -14,4 +14,5 @@ export const MSG = {
     SET_COMPONENT_PROPS: "lo.setComponentProps",
     RELOAD: "lo.reload",
     GET_COMPONENT_DATA: "lo.getComponentData",
+    RESIZE: "lo.resize",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforce/internal-lightning-out-containers",
-    "version": "2.2.0",
+    "version": "2.2.1-rc.1",
     "private": false,
     "description": "Lightning Out 2.0 Container Components",
     "type": "module",