xpe 1.0.12 → 1.0.13

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/package.json

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