@vvfx/sdk 0.2.5 → 0.2.6

package/dist/html-overlay/auto-height-runtime.d.ts

@@ -11,8 +11,11 @@ export type CardHTMLAutoHeightRequest = {
 export type CardHTMLAutoHeightOptions = {
     autoHeightId?: string;
     onAutoHeight?: (height: number) => void;
+    onStreamRuntimePhase?: (phase: CardHTMLStreamRuntimePhase) => void;
 };
+export type CardHTMLStreamRuntimePhase = 'parsing' | 'draining' | 'complete' | 'finalizing' | 'disposed' | 'error';
 export declare function createAutoHeightMessageListener(iframe: HTMLIFrameElement, options?: CardHTMLAutoHeightOptions): CardHTMLRenderCleanup;
+export declare function getCardHTMLStreamRuntimePhase(data: unknown): CardHTMLStreamRuntimePhase | undefined;
 export declare function isCardHTMLAutoHeightMessage(data: unknown, id: string): data is CardHTMLAutoHeightMessage;
 export declare function requestCardHTMLAutoHeight(iframe: HTMLIFrameElement, id: string): void;
 export declare function withCardHTMLAutoHeightBridge(html: string, id?: string): string;

package/dist/html-overlay/manager.d.ts

@@ -133,9 +133,10 @@ export declare class HTMLOverlayManager {
     private getChildrenNaturalHeight;
     private cleanupAutoHeight;
     private applyAutoHeight;
+    private setAutoHeightStreamPhase;
+    private isAutoHeightStreamActive;
     private getAutoHeightAnchor;
     private getAutoHeightItemHeight;
-    private isAutoHeightMessage;
     private isAutoHeightEnabled;
     private isAutoScaleEnabled;
 }

package/dist/index.cjs

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.5
+ * Version: v0.2.6
  */
 
 'use strict';
@@ -69616,16 +69616,41 @@ function createAutoHeightMessageListener(iframe, options) {
         };
     }
     var handleMessage = function handleMessage(event) {
-        if (event.source !== iframe.contentWindow || !isCardHTMLAutoHeightMessage(event.data, options.autoHeightId)) {
+        if (event.source !== iframe.contentWindow) {
             return;
         }
-        options.onAutoHeight == null ? void 0 : options.onAutoHeight.call(options, event.data.height);
+        if (isCardHTMLAutoHeightMessage(event.data, options.autoHeightId)) {
+            options.onAutoHeight == null ? void 0 : options.onAutoHeight.call(options, event.data.height);
+            return;
+        }
+        var phase = getCardHTMLStreamRuntimePhase(event.data);
+        if (phase) {
+            options.onStreamRuntimePhase == null ? void 0 : options.onStreamRuntimePhase.call(options, phase);
+        }
     };
     window.addEventListener('message', handleMessage);
     return function() {
         window.removeEventListener('message', handleMessage);
     };
 }
+function getCardHTMLStreamRuntimePhase(data) {
+    if ((typeof data === "undefined" ? "undefined" : _type_of(data)) !== 'object' || data === null) {
+        return undefined;
+    }
+    var message = data;
+    if (message.type !== 'huamei:html-stream-runtime-status' || _type_of(message.payload) !== 'object' || message.payload === null) {
+        return undefined;
+    }
+    var phase = message.payload.phase;
+    return [
+        'parsing',
+        'draining',
+        'complete',
+        'finalizing',
+        'disposed',
+        'error'
+    ].includes(String(phase)) ? phase : undefined;
+}
 function isCardHTMLAutoHeightMessage(data, id) {
     if ((typeof data === "undefined" ? "undefined" : _type_of(data)) !== 'object' || data === null) {
         return false;
@@ -69644,7 +69669,7 @@ function withCardHTMLAutoHeightBridge(html, id) {
     if (!id) {
         return html;
     }
-    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + JSON.stringify(id) + ";\n  let frame = 0;\n  const getNodeHeight = (node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      const rect = node.getBoundingClientRect();\n      return rect.bottom + window.scrollY;\n    }\n    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      const rects = Array.from(range.getClientRects());\n      range.detach();\n      return rects.reduce((height, rect) => Math.max(height, rect.bottom + window.scrollY), 0);\n    }\n\n    return 0;\n  };\n  const getContentHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.childNodes).reduce((height, child) => {\n      return Math.max(height, getNodeHeight(child));\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const contentHeight = getContentHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(contentHeight > 0 ? contentHeight : scrollHeight);\n  };\n  const postHeight = () => {\n    frame = 0;\n    window.parent.postMessage({\n      source: 'vvfx-card-html-auto-height',\n      id,\n      height: getHeight(),\n    }, '*');\n  };\n  const schedule = () => {\n    if (frame) return;\n    frame = requestAnimationFrame(postHeight);\n  };\n  window.addEventListener('message', (event) => {\n    const message = event.data;\n    if (!message || message.source !== 'vvfx-card-html-auto-height-request' || message.id !== id) {\n      return;\n    }\n\n    schedule();\n  });\n  window.addEventListener('load', schedule);\n  window.addEventListener('resize', schedule);\n  new ResizeObserver(schedule).observe(document.documentElement);\n  if (document.body) {\n    new ResizeObserver(schedule).observe(document.body);\n    new MutationObserver(schedule).observe(document.body, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  schedule();\n})();\n</script>";
+    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + JSON.stringify(id) + ";\n  let frame = 0;\n  const getNodeHeight = (node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      if (window.getComputedStyle(node).position === 'fixed') {\n        return 0;\n      }\n      const rect = node.getBoundingClientRect();\n      return rect.bottom + window.scrollY;\n    }\n    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      const rects = Array.from(range.getClientRects());\n      range.detach();\n      return rects.reduce((height, rect) => Math.max(height, rect.bottom + window.scrollY), 0);\n    }\n\n    return 0;\n  };\n  const getContentHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.childNodes).reduce((height, child) => {\n      return Math.max(height, getNodeHeight(child));\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const contentHeight = getContentHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(contentHeight > 0 ? contentHeight : scrollHeight);\n  };\n  const postHeight = () => {\n    frame = 0;\n    window.parent.postMessage({\n      source: 'vvfx-card-html-auto-height',\n      id,\n      height: getHeight(),\n    }, '*');\n  };\n  const schedule = () => {\n    if (frame) return;\n    frame = requestAnimationFrame(postHeight);\n  };\n  window.addEventListener('message', (event) => {\n    const message = event.data;\n    if (!message || message.source !== 'vvfx-card-html-auto-height-request' || message.id !== id) {\n      return;\n    }\n\n    schedule();\n  });\n  window.addEventListener('load', schedule);\n  window.addEventListener('resize', schedule);\n  new ResizeObserver(schedule).observe(document.documentElement);\n  if (document.body) {\n    new ResizeObserver(schedule).observe(document.body);\n    new MutationObserver(schedule).observe(document.body, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  schedule();\n})();\n</script>";
     if (/<\/body>/i.test(html)) {
         return html.replace(/<\/body>/i, "" + script + "</body>");
     }
@@ -70074,7 +70099,8 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             cleanups: new Map(),
             autoHeightModes: new Map(),
             autoHeightCleanups: new Map(),
-            autoHeightFrames: new Map()
+            autoHeightFrames: new Map(),
+            autoHeightStreamPhases: new Map()
         };
         this.handleContainerDoubleClick = function(event) {
             var _this_state_editing;
@@ -70168,7 +70194,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 metaKey: event.metaKey
             }));
         };
-        this.isAutoHeightMessage = isCardHTMLAutoHeightMessage;
     }
     var _proto = HTMLOverlayManager.prototype;
     _proto.attach = function attach() {
@@ -70227,6 +70252,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             cancelHTMLOverlayFrame(frame);
         });
         this.state.autoHeightFrames.clear();
+        this.state.autoHeightStreamPhases.clear();
         this.eventCleanups.forEach(function(cleanup) {
             cleanup();
         });
@@ -71269,6 +71295,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                     autoHeightId: (options == null ? void 0 : options.autoHeight) ? options.id : undefined,
                     onAutoHeight: (options == null ? void 0 : options.autoHeight) ? function(height) {
                         _this.applyAutoHeight(options.id, height);
+                    } : undefined,
+                    onStreamRuntimePhase: (options == null ? void 0 : options.autoHeight) ? function(phase) {
+                        _this.setAutoHeightStreamPhase(options.id, phase);
                     } : undefined
                 }));
             case 'dom':
@@ -71294,6 +71323,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                     autoHeightId: (options == null ? void 0 : options.autoHeight) ? options.id : undefined,
                     onAutoHeight: (options == null ? void 0 : options.autoHeight) ? function(height) {
                         _this.applyAutoHeight(options.id, height);
+                    } : undefined,
+                    onStreamRuntimePhase: (options == null ? void 0 : options.autoHeight) ? function(phase) {
+                        _this.setAutoHeightStreamPhase(options.id, phase);
                     } : undefined
                 }));
         }
@@ -71324,6 +71356,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.state.contents.delete(id);
         this.state.contentMountElements.delete(id);
         this.state.autoHeightModes.delete(id);
+        this.state.autoHeightStreamPhases.delete(id);
         this.invalidateContentInteractionZones(id);
         (_this_state_contentInteractionZoneCleanups_get = this.state.contentInteractionZoneCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionZoneCleanups_get();
         this.state.contentInteractionZoneCleanups.delete(id);
@@ -71345,10 +71378,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             return;
         }
         this.ensureAutoHeightMode(id);
-        if (this.state.autoHeightModes.get(id) === 'message') {
-            this.cleanupAutoHeight(id);
-            return;
-        }
         if (!this.state.autoHeightCleanups.has(id)) {
             this.state.autoHeightCleanups.set(id, this.createAutoHeightObserver(id));
         }
@@ -71395,16 +71424,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var mount = this.state.contentMountElements.get(id);
         observeElement(mount);
         mount == null ? void 0 : mount.querySelectorAll('iframe').forEach(function(iframe) {
-            var handleAutoHeightMessage = function handleAutoHeightMessage(event) {
-                if (event.source !== iframe.contentWindow || !_this.isAutoHeightMessage(event.data, id)) {
-                    return;
-                }
-                _this.applyAutoHeight(id, event.data.height);
-            };
-            window.addEventListener('message', handleAutoHeightMessage);
-            cleanupFns.push(function() {
-                window.removeEventListener('message', handleAutoHeightMessage);
-            });
             var syncIframeDocument = function syncIframeDocument() {
                 var doc = null;
                 try {
@@ -71415,12 +71434,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 if (!doc) {
                     return;
                 }
-                doc.documentElement.style.height = 'auto';
-                doc.documentElement.style.minHeight = '0';
-                if (doc.body) {
-                    doc.body.style.height = 'auto';
-                    doc.body.style.minHeight = '0';
-                }
                 observeElement(doc.documentElement);
                 observeElement(doc.body);
                 _this.scheduleAutoHeightMeasure(id);
@@ -71487,6 +71500,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         var body = doc.body;
         var documentElement = doc.documentElement;
+        if (!documentElement) {
+            return undefined;
+        }
         var childHeight = body ? this.getChildrenNaturalHeight(body) : 0;
         if (childHeight > 0) {
             return childHeight;
@@ -71503,6 +71519,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 if (!includeIframes && childElement.tagName === 'IFRAME') {
                     return height;
                 }
+                if (globalThis.getComputedStyle(childElement).position === 'fixed') {
+                    return height;
+                }
                 return Math.max(height, childElement.offsetTop + childElement.offsetHeight);
             }
             if (child.nodeType === Node.TEXT_NODE && ((_child_textContent = child.textContent) == null ? void 0 : _child_textContent.trim())) {
@@ -71541,6 +71560,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             return;
         }
         var nextHeight = Math.ceil(this.getAutoHeightItemHeight(item, height));
+        if (this.isAutoHeightStreamActive(id) && nextHeight < item.property.height) {
+            return;
+        }
         if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
@@ -71549,6 +71571,16 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             previousHeight: item.property.height
         });
     };
+    _proto.setAutoHeightStreamPhase = function setAutoHeightStreamPhase(id, phase) {
+        if (phase === 'parsing' || phase === 'draining' || phase === 'finalizing') {
+            this.state.autoHeightStreamPhases.set(id, phase);
+            return;
+        }
+        this.state.autoHeightStreamPhases.delete(id);
+    };
+    _proto.isAutoHeightStreamActive = function isAutoHeightStreamActive(id) {
+        return this.state.autoHeightStreamPhases.has(id);
+    };
     _proto.getAutoHeightAnchor = function getAutoHeightAnchor(item) {
         var _ref;
         var _this_options_resolveCardTypeConfig;