xpe 1.0.12 → 1.0.14

package/dist/kernel/iframe.js

@@ -415,11 +415,11 @@ export function recoverShadowRootEventListeners(iframeWindow) {
             rawRemoveEventListener.call(nextElement, listener.type, listener.callback, listener.options);
             rawAddEventListener.call(nextElement, listener.type, listener.callback, listener.options);
         });
-        recoverFrameworkEventInvokers(nextElement);
+        recoverFrameworkEventInvokers(nextElement, elementListenerList);
         nextElement = walker.nextNode();
     }
 }
-function recoverFrameworkEventInvokers(element) {
+function recoverFrameworkEventInvokers(element, cachedListeners) {
     if (element.nodeType !== Node.ELEMENT_NODE)
         return;
     Object.getOwnPropertySymbols(element)
@@ -435,6 +435,11 @@ function recoverFrameworkEventInvokers(element) {
             const eventType = toDomEventType(key);
             if (!eventType)
                 return;
+            // A tracked Vue invoker is already restored through its realm-safe
+            // callback. Adding the raw invoker as well executes one click twice.
+            if (cachedListeners?.some((listener) => listener.type === eventType && listener.handler === invoker)) {
+                return;
+            }
             rawRemoveEventListener.call(element, eventType, invoker);
             rawAddEventListener.call(element, eventType, invoker);
         });
@@ -669,6 +674,10 @@ function patchNodeEffect(iframeWindow) {
     const rawAppendChild = iframeWindow.Node.prototype.appendChild;
     const rawInsertBefore = iframeWindow.Node.prototype.insertBefore;
     const rawRemoveChild = iframeWindow.Node.prototype.removeChild;
+    const hostAppendChild = window.Node.prototype.appendChild;
+    const hostInsertBefore = window.Node.prototype.insertBefore;
+    const hostRemoveChild = window.Node.prototype.removeChild;
+    const nodeOperation = (node, iframeOperation, hostOperation) => (window.Node.prototype.isPrototypeOf(node) ? hostOperation : iframeOperation);
     iframeWindow.Node.prototype.getRootNode = function (options) {
         const rootNode = rawGetRootNode.call(this, options);
         if (rootNode === sandbox.shadowRoot)
@@ -677,13 +686,15 @@ function patchNodeEffect(iframeWindow) {
             return rootNode;
     };
     iframeWindow.Node.prototype.appendChild = function (node) {
-        const res = rawAppendChild.call(this, node);
+        const operation = nodeOperation(node, rawAppendChild, hostAppendChild);
+        const res = operation.call(this, node);
         patchElementEffect(node, iframeWindow);
         recoverEventListeners(this, iframeWindow);
         return res;
     };
     iframeWindow.Node.prototype.insertBefore = function (node, child) {
-        const res = rawInsertBefore.call(this, node, child);
+        const operation = nodeOperation(node, rawInsertBefore, hostInsertBefore);
+        const res = operation.call(this, node, child);
         patchElementEffect(node, iframeWindow);
         recoverEventListeners(this, iframeWindow);
         return res;
@@ -691,7 +702,8 @@ function patchNodeEffect(iframeWindow) {
     iframeWindow.Node.prototype.removeChild = function (node) {
         let res;
         try {
-            res = rawRemoveChild.call(this, node);
+            const operation = nodeOperation(node, rawRemoveChild, hostRemoveChild);
+            res = operation.call(this, node);
         }
         catch (e) {
             console.warn(`Failed to removeChild: ${node.nodeName.toLowerCase()} is not a child of ${this.nodeName.toLowerCase()}, try again with parentNode attribute. `);

package/dist/kernel/proxy.js

@@ -76,7 +76,14 @@ export function proxyGenerator(iframe, urlElement, mainHostPath, appHostPath) {
                 return new Proxy(document[propKey], {
                     apply(_createElement, _ctx, args) {
                         const rawCreateMethod = propKey === "createElement" ? rawCreateElement : rawCreateTextNode;
-                        const element = rawCreateMethod.apply(iframeDocument, args);
+                        // Vue compiles static template blocks through one shared
+                        // HTMLTemplateElement. A template created in the execution iframe
+                        // exposes a fragment from that realm, which native host DOM
+                        // insertion rejects. Keep templates and their content fragment in
+                        // the visible host realm.
+                        const element = propKey === "createElement" && String(args[0]).toLowerCase() === "template"
+                            ? window.document.createElement("template")
+                            : rawCreateMethod.apply(iframeDocument, args);
                         patchElementEffect(element, iframeWindow);
                         return element;
                     },
@@ -276,7 +283,9 @@ export function localGenerator(iframe, urlElement, mainHostPath, appHostPath) {
                     const activeIframe = getActiveIframe(iframeRef);
                     const activeWindow = getIframeWindow(activeIframe);
                     const activeDocument = getIframeDocument(activeIframe);
-                    const element = getXpeRawDocumentCreateElement(activeWindow).apply(activeDocument, args);
+                    const element = String(args[0]).toLowerCase() === "template"
+                        ? window.document.createElement("template")
+                        : getXpeRawDocumentCreateElement(activeWindow).apply(activeDocument, args);
                     patchElementEffect(element, activeWindow);
                     return element;
                 };

package/dist/kernel/utils.d.ts

@@ -41,7 +41,8 @@ export declare function getAbsolutePath(url: string, base: string, hash?: boolea
 export declare function getSyncUrl(id: string, prefix: {
     [key: string]: string;
 }): string;
-export declare const requestIdleCallback: ((callback: IdleRequestCallback, options?: IdleRequestOptions) => number) & typeof globalThis.requestIdleCallback;
+/** Required startup work must progress even when a background tab gets no idle callback. */
+export declare function requestIdleCallback(callback: IdleRequestCallback): number;
 export declare function getContainer(container: string | HTMLElement): HTMLElement;
 export declare function warn(msg: string, data?: any): void;
 export declare function error(msg: string, data?: any): void;

package/dist/kernel/utils.js

@@ -198,7 +198,32 @@ export function getSyncUrl(id, prefix) {
     return syncUrl;
 }
 // @ts-ignore
-export const requestIdleCallback = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+/** Required startup work must progress even when a background tab gets no idle callback. */
+export function requestIdleCallback(callback) {
+    const target = window;
+    const native = target.requestIdleCallback;
+    if (!native) {
+        return target.setTimeout(() => callback({ didTimeout: true, timeRemaining: () => 0 }), 1);
+    }
+    let completed = false;
+    let idleId;
+    const fallback = target.setTimeout(() => {
+        if (completed)
+            return;
+        completed = true;
+        if (idleId !== undefined)
+            target.cancelIdleCallback?.(idleId);
+        callback({ didTimeout: true, timeRemaining: () => 0 });
+    }, 100);
+    idleId = native.call(target, (deadline) => {
+        if (completed)
+            return;
+        completed = true;
+        target.clearTimeout(fallback);
+        callback(deadline);
+    }, { timeout: 100 });
+    return idleId;
+}
 export function getContainer(container) {
     return typeof container === "string" ? document.querySelector(container) : container;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpe",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "下一代微前端应用运行底座",
   "type": "module",
   "license": "MIT",