@vvfx/sdk 0.2.11 → 0.2.13

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

@@ -12,10 +12,11 @@ export type CardHTMLAutoHeightOptions = {
     autoHeightId?: string;
     onAutoHeight?: (height: number) => void;
     onStreamRuntimePhase?: (phase: CardHTMLStreamRuntimePhase) => void;
+    streamRuntimeId?: string;
 };
 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 getCardHTMLStreamRuntimePhase(data: unknown, expectedRuntimeId: string): 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/auto-height-runtime.js

@@ -1,3 +1,4 @@
+import { serializeInlineScriptJson } from './inline-script-json';
 export function createAutoHeightMessageListener(iframe, options) {
     if (!options?.autoHeightId || !options.onAutoHeight) {
         return () => {
@@ -12,7 +13,9 @@ export function createAutoHeightMessageListener(iframe, options) {
             options.onAutoHeight?.(event.data.height);
             return;
         }
-        const phase = getCardHTMLStreamRuntimePhase(event.data);
+        const phase = options.streamRuntimeId
+            ? getCardHTMLStreamRuntimePhase(event.data, options.streamRuntimeId)
+            : undefined;
         if (phase) {
             options.onStreamRuntimePhase?.(phase);
         }
@@ -22,15 +25,21 @@ export function createAutoHeightMessageListener(iframe, options) {
         window.removeEventListener('message', handleMessage);
     };
 }
-export function getCardHTMLStreamRuntimePhase(data) {
+export function getCardHTMLStreamRuntimePhase(data, expectedRuntimeId) {
     if (typeof data !== 'object' || data === null) {
         return undefined;
     }
     const message = data;
-    if (message.type !== 'huamei:html-stream-runtime-status' || typeof message.payload !== 'object' || message.payload === null) {
+    if (message.source !== 'vvfx-card-html-stream-runtime' ||
+        message.type !== 'huamei:html-stream-runtime-status' ||
+        typeof message.payload !== 'object' || message.payload === null) {
         return undefined;
     }
-    const phase = message.payload.phase;
+    const payload = message.payload;
+    if (payload.runtimeId !== expectedRuntimeId) {
+        return undefined;
+    }
+    const phase = payload.phase;
     return ['parsing', 'draining', 'complete', 'finalizing', 'disposed', 'error'].includes(String(phase))
         ? phase
         : undefined;
@@ -57,7 +66,7 @@ export function withCardHTMLAutoHeightBridge(html, id) {
     const script = `
 <script data-vvfx-card-html-auto-height>
 (() => {
-  const id = ${JSON.stringify(id)};
+  const id = ${serializeInlineScriptJson(id)};
   let frame = 0;
   const getNodeHeight = (node) => {
     if (node.nodeType === Node.ELEMENT_NODE) {

package/dist/html-overlay/document-runtime.js

@@ -4,13 +4,18 @@ import { createHostMessageListener } from './host-message-runtime';
 import { normalizePath } from './path-utils';
 import { withCardHTMLViewportStyle } from './html-viewport-style';
 import { withCardHTMLAnchorNavigationGuard } from './anchor-navigation-runtime';
+import { createCardHTMLRuntimeId, withCardHTMLRuntimeContext } from './runtime-context';
 export function renderDocumentContent(overlay, content, options) {
     const iframe = document.createElement('iframe');
     const files = normalizeDocumentFiles(content.files);
     const entry = normalizePath(content.entry);
     const createFileUrl = createDocumentFileUrlFactory(files);
+    const streamRuntimeId = createCardHTMLRuntimeId(options?.autoHeightId);
     const messageCleanup = createHostMessageListener(iframe, content);
-    const autoHeightMessageCleanup = createAutoHeightMessageListener(iframe, options);
+    const autoHeightMessageCleanup = createAutoHeightMessageListener(iframe, {
+        ...options,
+        streamRuntimeId,
+    });
     iframe.style.width = '100%';
     iframe.style.height = '100%';
     iframe.style.border = '0';
@@ -22,7 +27,7 @@ export function renderDocumentContent(overlay, content, options) {
         iframe.setAttribute('sandbox', content.sandbox);
     }
     const entryHtml = files.get(entry) ?? '';
-    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLAnchorNavigationGuard(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), content.allowAnchorNavigation), options?.autoHeightId);
+    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLAnchorNavigationGuard(withCardHTMLRuntimeContext(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), streamRuntimeId), content.allowAnchorNavigation), options?.autoHeightId);
     overlay.appendChild(iframe);
     return () => {
         messageCleanup();

package/dist/html-overlay/inline-script-json.d.ts

@@ -0,0 +1 @@
+export declare function serializeInlineScriptJson(value: unknown): string;

package/dist/html-overlay/inline-script-json.js

@@ -0,0 +1,8 @@
+export function serializeInlineScriptJson(value) {
+    return JSON.stringify(value)
+        .replace(/</g, '\\u003c')
+        .replace(/>/g, '\\u003e')
+        .replace(/&/g, '\\u0026')
+        .replace(/\u2028/g, '\\u2028')
+        .replace(/\u2029/g, '\\u2029');
+}

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

@@ -133,6 +133,7 @@ export declare class HTMLOverlayManager {
     private getChildrenNaturalHeight;
     private cleanupAutoHeight;
     private applyAutoHeight;
+    private isAutoHeightFeedbackLoop;
     private setAutoHeightStreamPhase;
     private isAutoHeightStreamActive;
     private getAutoHeightAnchor;

package/dist/html-overlay/manager.js

@@ -35,6 +35,7 @@ const EDITING_VIEWPORT_PADDING = 48;
 const EDITING_VIEWPORT_BOX_SCALE = 1.1;
 const AUTO_HEIGHT_EPSILON = 0.5;
 const AUTO_HEIGHT_MAX_MULTIPLIER = 32;
+const AUTO_HEIGHT_FEEDBACK_STEP_LIMIT = 2;
 const CARD_RASTERIZE_READY_TIMEOUT = 3000;
 const CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
 const requestHTMLOverlayFrame = (callback) => {
@@ -84,6 +85,7 @@ export class HTMLOverlayManager {
         autoHeightCleanups: new Map(),
         autoHeightFrames: new Map(),
         autoHeightInitialHeights: new Map(),
+        autoHeightFeedback: new Map(),
         autoHeightStreamPhases: new Map(),
     };
     constructor(options) {
@@ -148,6 +150,7 @@ export class HTMLOverlayManager {
         });
         this.state.autoHeightFrames.clear();
         this.state.autoHeightInitialHeights.clear();
+        this.state.autoHeightFeedback.clear();
         this.state.autoHeightStreamPhases.clear();
         this.eventCleanups.forEach(cleanup => {
             cleanup();
@@ -1421,6 +1424,7 @@ export class HTMLOverlayManager {
             cancelHTMLOverlayFrame(frame);
             this.state.autoHeightFrames.delete(id);
         }
+        this.state.autoHeightFeedback.delete(id);
     }
     applyAutoHeight(id, height) {
         const item = this.options.getItems().find(candidate => candidate.id === id);
@@ -1438,11 +1442,28 @@ export class HTMLOverlayManager {
         if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
+        if (this.isAutoHeightFeedbackLoop(id, item.property.height, nextHeight)) {
+            return;
+        }
         this.options.setCardItemHeight(id, nextHeight, {
             anchor: this.getAutoHeightAnchor(item),
             previousHeight: item.property.height,
         });
     }
+    isAutoHeightFeedbackLoop(id, currentHeight, nextHeight) {
+        if (nextHeight <= currentHeight) {
+            this.state.autoHeightFeedback.delete(id);
+            return false;
+        }
+        const offset = nextHeight - currentHeight;
+        const previous = this.state.autoHeightFeedback.get(id);
+        const continues = previous !== undefined &&
+            Math.abs(previous.nextHeight - currentHeight) <= AUTO_HEIGHT_EPSILON &&
+            Math.abs(previous.offset - offset) <= AUTO_HEIGHT_EPSILON;
+        const steps = continues ? previous.steps + 1 : 0;
+        this.state.autoHeightFeedback.set(id, { nextHeight, offset, steps });
+        return steps >= AUTO_HEIGHT_FEEDBACK_STEP_LIMIT;
+    }
     setAutoHeightStreamPhase(id, phase) {
         if (phase === 'parsing' || phase === 'draining' || phase === 'finalizing') {
             this.state.autoHeightStreamPhases.set(id, phase);

package/dist/html-overlay/runtime-context.d.ts

@@ -0,0 +1,2 @@
+export declare function createCardHTMLRuntimeId(cardId?: string): string;
+export declare function withCardHTMLRuntimeContext(html: string, runtimeId: string): string;

package/dist/html-overlay/runtime-context.js

@@ -0,0 +1,16 @@
+import { serializeInlineScriptJson } from './inline-script-json';
+let runtimeSequence = 0;
+export function createCardHTMLRuntimeId(cardId) {
+    runtimeSequence += 1;
+    return `${cardId || 'card'}:${runtimeSequence}`;
+}
+export function withCardHTMLRuntimeContext(html, runtimeId) {
+    const script = `<script data-vvfx-card-html-runtime-context>window.__VVFX_CARD_HTML_RUNTIME_ID__=${serializeInlineScriptJson(runtimeId)};</script>`;
+    if (/<head(?:\s[^>]*)?>/i.test(html)) {
+        return html.replace(/<head(\s[^>]*)?>/i, match => `${match}${script}`);
+    }
+    if (/<html(?:\s[^>]*)?>/i.test(html)) {
+        return html.replace(/<html(\s[^>]*)?>/i, match => `${match}<head>${script}</head>`);
+    }
+    return `<!doctype html><html><head>${script}</head><body>${html}</body></html>`;
+}

package/dist/index.cjs

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.11
+ * Version: v0.2.13
  */
 
 'use strict';
@@ -69603,6 +69603,10 @@ function vi(t) {
     return false;
 }
 
+function serializeInlineScriptJson(value) {
+    return JSON.stringify(value).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
+}
+
 function createAutoHeightMessageListener(iframe, options) {
     if (!(options == null ? void 0 : options.autoHeightId) || !options.onAutoHeight) {
         return function() {
@@ -69617,7 +69621,7 @@ function createAutoHeightMessageListener(iframe, options) {
             options.onAutoHeight == null ? void 0 : options.onAutoHeight.call(options, event.data.height);
             return;
         }
-        var phase = getCardHTMLStreamRuntimePhase(event.data);
+        var phase = options.streamRuntimeId ? getCardHTMLStreamRuntimePhase(event.data, options.streamRuntimeId) : undefined;
         if (phase) {
             options.onStreamRuntimePhase == null ? void 0 : options.onStreamRuntimePhase.call(options, phase);
         }
@@ -69627,15 +69631,19 @@ function createAutoHeightMessageListener(iframe, options) {
         window.removeEventListener('message', handleMessage);
     };
 }
-function getCardHTMLStreamRuntimePhase(data) {
+function getCardHTMLStreamRuntimePhase(data, expectedRuntimeId) {
     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) {
+    if (message.source !== 'vvfx-card-html-stream-runtime' || message.type !== 'huamei:html-stream-runtime-status' || _type_of(message.payload) !== 'object' || message.payload === null) {
+        return undefined;
+    }
+    var payload = message.payload;
+    if (payload.runtimeId !== expectedRuntimeId) {
         return undefined;
     }
-    var phase = message.payload.phase;
+    var phase = payload.phase;
     return [
         'parsing',
         'draining',
@@ -69663,7 +69671,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      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>";
+    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + serializeInlineScriptJson(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>");
     }
@@ -69872,14 +69880,37 @@ function withCardHTMLAnchorNavigationGuard(html, allowAnchorNavigation) {
     return "" + html + script;
 }
 
+var runtimeSequence = 0;
+function createCardHTMLRuntimeId(cardId) {
+    runtimeSequence += 1;
+    return (cardId || 'card') + ":" + runtimeSequence;
+}
+function withCardHTMLRuntimeContext(html, runtimeId) {
+    var script = "<script data-vvfx-card-html-runtime-context>window.__VVFX_CARD_HTML_RUNTIME_ID__=" + serializeInlineScriptJson(runtimeId) + ";</script>";
+    if (/<head(?:\s[^>]*)?>/i.test(html)) {
+        return html.replace(/<head(\s[^>]*)?>/i, function(match) {
+            return "" + match + script;
+        });
+    }
+    if (/<html(?:\s[^>]*)?>/i.test(html)) {
+        return html.replace(/<html(\s[^>]*)?>/i, function(match) {
+            return match + "<head>" + script + "</head>";
+        });
+    }
+    return "<!doctype html><html><head>" + script + "</head><body>" + html + "</body></html>";
+}
+
 function renderDocumentContent(overlay, content, options) {
     var _files_get;
     var iframe = document.createElement('iframe');
     var files = normalizeDocumentFiles(content.files);
     var entry = normalizePath(content.entry);
     var createFileUrl = createDocumentFileUrlFactory(files);
+    var streamRuntimeId = createCardHTMLRuntimeId(options == null ? void 0 : options.autoHeightId);
     var messageCleanup = createHostMessageListener(iframe, content);
-    var autoHeightMessageCleanup = createAutoHeightMessageListener(iframe, options);
+    var autoHeightMessageCleanup = createAutoHeightMessageListener(iframe, _extends({}, options, {
+        streamRuntimeId: streamRuntimeId
+    }));
     iframe.style.width = '100%';
     iframe.style.height = '100%';
     iframe.style.border = '0';
@@ -69890,7 +69921,7 @@ function renderDocumentContent(overlay, content, options) {
         iframe.setAttribute('sandbox', content.sandbox);
     }
     var entryHtml = (_files_get = files.get(entry)) != null ? _files_get : '';
-    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLAnchorNavigationGuard(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), content.allowAnchorNavigation), options == null ? void 0 : options.autoHeightId);
+    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLAnchorNavigationGuard(withCardHTMLRuntimeContext(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), streamRuntimeId), content.allowAnchorNavigation), options == null ? void 0 : options.autoHeightId);
     overlay.appendChild(iframe);
     return function() {
         messageCleanup();
@@ -70485,6 +70516,7 @@ var EDITING_VIEWPORT_PADDING = 48;
 var EDITING_VIEWPORT_BOX_SCALE = 1.1;
 var AUTO_HEIGHT_EPSILON = 0.5;
 var AUTO_HEIGHT_MAX_MULTIPLIER = 32;
+var AUTO_HEIGHT_FEEDBACK_STEP_LIMIT = 2;
 var CARD_RASTERIZE_READY_TIMEOUT = 3000;
 var CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
 var requestHTMLOverlayFrame = function requestHTMLOverlayFrame(callback) {
@@ -70532,6 +70564,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             autoHeightCleanups: new Map(),
             autoHeightFrames: new Map(),
             autoHeightInitialHeights: new Map(),
+            autoHeightFeedback: new Map(),
             autoHeightStreamPhases: new Map()
         };
         this.handleContainerDoubleClick = function(event) {
@@ -70685,6 +70718,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         });
         this.state.autoHeightFrames.clear();
         this.state.autoHeightInitialHeights.clear();
+        this.state.autoHeightFeedback.clear();
         this.state.autoHeightStreamPhases.clear();
         this.eventCleanups.forEach(function(cleanup) {
             cleanup();
@@ -71983,6 +72017,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             cancelHTMLOverlayFrame(frame);
             this.state.autoHeightFrames.delete(id);
         }
+        this.state.autoHeightFeedback.delete(id);
     };
     _proto.applyAutoHeight = function applyAutoHeight(id, height) {
         var item = this.options.getItems().find(function(candidate) {
@@ -72002,11 +72037,30 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
+        if (this.isAutoHeightFeedbackLoop(id, item.property.height, nextHeight)) {
+            return;
+        }
         this.options.setCardItemHeight(id, nextHeight, {
             anchor: this.getAutoHeightAnchor(item),
             previousHeight: item.property.height
         });
     };
+    _proto.isAutoHeightFeedbackLoop = function isAutoHeightFeedbackLoop(id, currentHeight, nextHeight) {
+        if (nextHeight <= currentHeight) {
+            this.state.autoHeightFeedback.delete(id);
+            return false;
+        }
+        var offset = nextHeight - currentHeight;
+        var previous = this.state.autoHeightFeedback.get(id);
+        var continues = previous !== undefined && Math.abs(previous.nextHeight - currentHeight) <= AUTO_HEIGHT_EPSILON && Math.abs(previous.offset - offset) <= AUTO_HEIGHT_EPSILON;
+        var steps = continues ? previous.steps + 1 : 0;
+        this.state.autoHeightFeedback.set(id, {
+            nextHeight: nextHeight,
+            offset: offset,
+            steps: steps
+        });
+        return steps >= AUTO_HEIGHT_FEEDBACK_STEP_LIMIT;
+    };
     _proto.setAutoHeightStreamPhase = function setAutoHeightStreamPhase(id, phase) {
         if (phase === 'parsing' || phase === 'draining' || phase === 'finalizing') {
             this.state.autoHeightStreamPhases.set(id, phase);