xpe 1.0.11 → 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. `);
@@ -727,7 +739,11 @@ function wrapInlineScriptWithSandbox(code) {
 }
 function createExecNextScriptContent() {
     return [
-        "const sandbox = window.__XPE_INTERNAL_SANDBOX__;",
+        // This helper is injected as a classic script repeatedly. `const` would
+        // create a global lexical binding and fail on the second queued script
+        // (notably when Vite's dev client precedes the app entry). `var` is
+        // intentionally used so each queue step remains re-entrant.
+        "var sandbox = window.__XPE_INTERNAL_SANDBOX__;",
         "if(sandbox.execQueue && sandbox.execQueue.length){ sandbox.execQueue.shift()()}",
     ].join("");
 }
@@ -923,7 +939,7 @@ export function syncIframeUrlToWindow(iframeWindow) {
  * @param rawElement 原始的脚本
  */
 export function insertScriptToIframe(scriptResult, iframeWindow, rawElement) {
-    const { src, module, content, crossorigin, crossoriginType, async, attrs, callback, onload } = scriptResult;
+    const { src, module, isEntry, content, crossorigin, crossoriginType, async, attrs, callback, onload } = scriptResult;
     const sandbox = getActiveSandbox(iframeWindow);
     const container = rawDocumentQuerySelector.call(iframeWindow.document, "head");
     const execNextScript = () => {
@@ -1001,9 +1017,19 @@ export function insertScriptToIframe(scriptResult, iframeWindow, rawElement) {
         scriptElement.onerror = afterExecScript;
     }
     container.appendChild(scriptElement);
-    if (isOutlineScript && module) {
+    // Vite injects an HMR client module before the actual application entry in
+    // development HTML. That client keeps a long-lived websocket and may not
+    // dispatch the module load event in the sandbox, so waiting for it would
+    // prevent the real entry module from ever being inserted. It is not an
+    // application lifecycle module and must not participate in the serial
+    // entry gate.
+    const isViteClientModule = module && /(?:^|\/)@vite\/client(?:$|\?)/.test(src);
+    if (isOutlineScript && module && isEntry && !isViteClientModule) {
         waitForModuleLifecycleReady(iframeWindow, afterExecScript);
     }
+    if (isOutlineScript && isViteClientModule) {
+        afterExecScript();
+    }
     // 调用回调
     callback?.(iframeWindow);
     // 执行 hooks

package/dist/kernel/index.js

@@ -1,4 +1,5 @@
 import { XpeRuntimeError, } from "../core/index.js";
+import { createRuntimeFetch } from "./runtime-fetch.js";
 let runtimeEngineModule;
 let runtimeEngineModulePromise;
 export function createRuntimeKernel() {
@@ -46,7 +47,7 @@ function toEnginePreloadOptions(manifest) {
         alive: runtime.alive,
         sync: runtime.sync,
         prefix: toRuntimePrefix(runtime),
-        fetch: toRuntimeFetch(runtime.credentials),
+        fetch: createRuntimeFetch(runtime.credentials),
         props: {
             appCode: manifest.appCode,
             manifest,
@@ -82,8 +83,3 @@ function toRuntimePrefix(runtime) {
         return undefined;
     return { [runtime.name]: runtime.basename };
 }
-function toRuntimeFetch(credentials) {
-    if (!credentials)
-        return undefined;
-    return (input, init) => window.fetch(input, { ...init, credentials: init?.credentials ?? credentials });
-}

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/runtime-engine.d.ts

@@ -8,6 +8,8 @@ export interface ScriptObjectLoader {
     src?: string;
     /** 脚本是否为module模块 */
     module?: boolean;
+    /** 是否为应用入口脚本。仅入口模块需要等待 XPE 生命周期挂载。 */
+    isEntry?: boolean;
     /** 脚本是否为async执行 */
     async?: boolean;
     /** 脚本是否设置crossorigin */

package/dist/kernel/runtime-fetch.d.ts

@@ -0,0 +1,2 @@
+import type { RuntimeCredentials } from "../core/index.js";
+export declare function createRuntimeFetch(runtimeCredentials: RuntimeCredentials | undefined, browserFetch?: typeof fetch): ((input: RequestInfo, init?: RequestInit) => Promise<Response>) | undefined;

package/dist/kernel/runtime-fetch.js

@@ -0,0 +1,14 @@
+export function createRuntimeFetch(runtimeCredentials, browserFetch = window.fetch.bind(window)) {
+    if (!runtimeCredentials)
+        return undefined;
+    return (input, init) => {
+        // Request objects created inside an XPE child iframe belong to another
+        // JavaScript Realm, so `input instanceof Request` is false in the Host.
+        // RequestInfo is Request|string; use the contract shape instead.
+        const requestCredentials = typeof input === "string" ? undefined : input.credentials;
+        return browserFetch(input, {
+            ...init,
+            credentials: init?.credentials ?? requestCredentials ?? runtimeCredentials,
+        });
+    };
+}

package/dist/kernel/template.d.ts

@@ -11,6 +11,8 @@ export interface ScriptBaseObject {
     defer?: boolean;
     /** 脚本是否为module模块 */
     module?: boolean;
+    /** 是否为应用入口脚本。仅入口模块需要等待 XPE 生命周期挂载。 */
+    isEntry?: boolean;
     /** 脚本是否设置crossorigin */
     crossorigin?: boolean;
     /** 脚本crossorigin的类型 */

package/dist/kernel/template.js

@@ -212,9 +212,17 @@ export default function processTpl(tpl, baseURI, postProcessTemplate) {
             return inlineScriptReplaceSymbol;
         }
     });
+    const entrySrc = typeof entry === "string" ? entry : entry?.src;
+    const entryIndex = entrySrc
+        ? scripts.findIndex((script) => script.src === entrySrc)
+        : scripts.length - 1;
+    const scriptsWithEntry = scripts.map((script, index) => ({
+        ...script,
+        isEntry: index === entryIndex,
+    }));
     let tplResult = {
         template,
-        scripts,
+        scripts: scriptsWithEntry,
         styles,
         // set the last script as entry if have not set
         entry: entry || scripts[scripts.length - 1],

package/package.json

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