xpe 1.0.10 → 1.0.11

package/dist/host/xpe-host.js

@@ -10,7 +10,9 @@ export function createHost(options) {
         onHostNavigate: options.onHostNavigate,
         onRouteChange(event) {
             options.onNavigate?.(event);
-            void router.navigate(event.appCode, event.target);
+            void router.navigate(event.appCode, event.target).catch((error) => {
+                options.onError?.(error);
+            });
         },
     });
     const router = createAppPathRouter({

package/dist/kernel/effect.js

@@ -21,13 +21,30 @@ function patchCustomEvent(e, elementGetter) {
 /**
  * 手动触发事件回调
  */
-function manualInvokeElementEvent(element, event) {
+function manualInvokeElementEvent(element, event, sandboxId) {
+    // 动态 link/script 节点由子应用 realm 创建，但被 XPE 转发到宿主
+    // shadowRoot。此时节点上的原生 dispatchEvent 可能无法命中由子应用
+    // Node.prototype.addEventListener 注册的回调。事件代理已经把回调保存在
+    // sandbox 的缓存中，优先从缓存派发，保证 Vite 的 load/error Promise 收敛。
     const customEvent = new CustomEvent(event);
     const patchedEvent = patchCustomEvent(customEvent, () => element);
-    if (isFunction(element[`on${event}`])) {
+    const hasPropertyHandler = isFunction(element[`on${event}`]);
+    if (hasPropertyHandler) {
         element[`on${event}`](patchedEvent);
     }
-    else {
+    const listeners = sandboxId
+        ? getSandboxById(sandboxId)?.elementEventCacheMap.get(element)
+        : undefined;
+    const cachedListeners = listeners?.filter((listener) => listener.type === event) ?? [];
+    if (cachedListeners.length) {
+        cachedListeners.forEach((listener) => {
+            if (typeof listener.callback === "function")
+                listener.callback.call(element, patchedEvent);
+            else
+                listener.callback.handleEvent(patchedEvent);
+        });
+    }
+    else if (!hasPropertyHandler) {
         element.dispatchEvent(patchedEvent);
     }
 }
@@ -235,7 +252,7 @@ export function deferStyleSheetByHref(opts) {
         const target = element;
         finalize();
         if (target)
-            manualInvokeElementEvent(target, "error");
+            manualInvokeElementEvent(target, "error", sandboxId);
     }, DEFER_STYLE_HREF_TIMEOUT);
 }
 function rewriteAppendOrInsertChild(opts) {
@@ -296,12 +313,12 @@ function rewriteAppendOrInsertChild(opts) {
                                 rawDOMAppendOrInsertBefore.call(this, stylesheetElement, refChild);
                                 // 处理样式补丁
                                 handleStylesheetElementPatch(stylesheetElement, latestContext.sandbox);
-                                manualInvokeElementEvent(linkElement, "load");
+                                manualInvokeElementEvent(linkElement, "load", sandboxId);
                             }
                             if (element === linkElement)
                                 element = null;
                         }, () => {
-                            manualInvokeElementEvent(linkElement, "error");
+                            manualInvokeElementEvent(linkElement, "error", sandboxId);
                             if (element === linkElement)
                                 element = null;
                         }));
@@ -346,7 +363,7 @@ function rewriteAppendOrInsertChild(opts) {
                             if (!latestContext)
                                 return warn(XPE_TIPS_REPEAT_RENDER);
                             const onload = () => {
-                                manualInvokeElementEvent(element, "load");
+                                manualInvokeElementEvent(element, "load", sandboxId);
                                 element = null;
                             };
                             insertScriptToIframe({ ...scriptResult, onload }, latestContext.iframeWindow, element);
@@ -373,7 +390,7 @@ function rewriteAppendOrInsertChild(opts) {
                                 if (!execQueueLength)
                                     sandbox.execQueue.shift()();
                             }, () => {
-                                manualInvokeElementEvent(element, "error");
+                                manualInvokeElementEvent(element, "error", sandboxId);
                                 element = null;
                             }));
                         });

package/dist/kernel/entry.js

@@ -191,8 +191,7 @@ export default function importHTML(params) {
             .then((response) => {
             if (response.status >= 400) {
                 error(XPE_TIPS_HTML_ERROR_REQUESTED, { url, response });
-                loadError?.(url, new Error(XPE_TIPS_HTML_ERROR_REQUESTED));
-                return "";
+                throw new Error(XPE_TIPS_HTML_ERROR_REQUESTED);
             }
             return response.text();
         })

package/dist/kernel/iframe.js

@@ -727,11 +727,7 @@ function wrapInlineScriptWithSandbox(code) {
 }
 function createExecNextScriptContent() {
     return [
-        // 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__;",
+        "const sandbox = window.__XPE_INTERNAL_SANDBOX__;",
         "if(sandbox.execQueue && sandbox.execQueue.length){ sandbox.execQueue.shift()()}",
     ].join("");
 }
@@ -927,7 +923,7 @@ export function syncIframeUrlToWindow(iframeWindow) {
  * @param rawElement 原始的脚本
  */
 export function insertScriptToIframe(scriptResult, iframeWindow, rawElement) {
-    const { src, module, isEntry, content, crossorigin, crossoriginType, async, attrs, callback, onload } = scriptResult;
+    const { src, module, content, crossorigin, crossoriginType, async, attrs, callback, onload } = scriptResult;
     const sandbox = getActiveSandbox(iframeWindow);
     const container = rawDocumentQuerySelector.call(iframeWindow.document, "head");
     const execNextScript = () => {
@@ -1005,19 +1001,9 @@ export function insertScriptToIframe(scriptResult, iframeWindow, rawElement) {
         scriptElement.onerror = afterExecScript;
     }
     container.appendChild(scriptElement);
-    // 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) {
+    if (isOutlineScript && module) {
         waitForModuleLifecycleReady(iframeWindow, afterExecScript);
     }
-    if (isOutlineScript && isViteClientModule) {
-        afterExecScript();
-    }
     // 调用回调
     callback?.(iframeWindow);
     // 执行 hooks

package/dist/kernel/index.js

@@ -1,5 +1,4 @@
 import { XpeRuntimeError, } from "../core/index.js";
-import { createRuntimeFetch } from "./runtime-fetch.js";
 let runtimeEngineModule;
 let runtimeEngineModulePromise;
 export function createRuntimeKernel() {
@@ -27,10 +26,10 @@ function loadRuntimeEngine() {
     if (runtimeEngineModule)
         return Promise.resolve(runtimeEngineModule);
     if (!runtimeEngineModulePromise) {
-        // Keep a literal dynamic import so Vite/Rollup bundles the runtime engine
-        // into a deployable child chunk instead of leaving a missing relative URL
-        // in the host's optimized dependency directory.
-        // @ts-expect-error Vite/Rollup resolves the query-suffixed runtime chunk at build time.
+        // 保持字面量动态 import：Vite/Rollup 等消费方只有在构建期看见静态 specifier，
+        // 才会把懒加载内核生成成可部署 chunk。通过变量 import 会在 npm 消费方产物中
+        // 留下 ./runtime-engine.js，并错误解析到 Host 自己的 /assets 目录。
+        // @ts-expect-error Vite/Rollup 会解析查询参数并生成独立 chunk，TypeScript 不解析该运行时 specifier。
         runtimeEngineModulePromise = import("./runtime-engine.js?xpe-runtime").then((module) => {
             runtimeEngineModule = module;
             return runtimeEngineModule;
@@ -47,7 +46,7 @@ function toEnginePreloadOptions(manifest) {
         alive: runtime.alive,
         sync: runtime.sync,
         prefix: toRuntimePrefix(runtime),
-        fetch: createRuntimeFetch(runtime.credentials),
+        fetch: toRuntimeFetch(runtime.credentials),
         props: {
             appCode: manifest.appCode,
             manifest,
@@ -83,3 +82,8 @@ 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/runtime-engine.d.ts

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

package/dist/kernel/template.d.ts

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

package/dist/kernel/template.js

@@ -212,17 +212,9 @@ 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: scriptsWithEntry,
+        scripts,
         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.10",
+  "version": "1.0.11",
   "description": "下一代微前端应用运行底座",
   "type": "module",
   "license": "MIT",
@@ -46,11 +46,12 @@
     "check:example-build": "pnpm run typecheck:browser-smoke && pnpm run build:example",
     "check:host-child-smoke": "node scripts/check-host-child-smoke.mjs",
     "check:dist-surface": "node scripts/check-dist-surface.mjs",
+    "check:vite-consumer-build": "node scripts/check-vite-consumer-build.mjs",
     "check:kernel-surface": "node scripts/check-kernel-surface.mjs",
     "check:pack": "pnpm pack --dry-run",
     "check:public-surface": "node scripts/check-public-surface.mjs",
     "check:release-metadata": "node scripts/check-release-metadata.mjs",
-    "verify": "pnpm run check:release-metadata && pnpm run typecheck && pnpm test && pnpm run build && pnpm run check:pack",
+    "verify": "pnpm run check:release-metadata && pnpm run typecheck && pnpm test && pnpm run build && pnpm run check:vite-consumer-build && pnpm run check:pack",
     "prepack": "pnpm run build",
     "prepublishOnly": "pnpm run verify",
     "test": "vitest run",

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

@@ -1,2 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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,
-        });
-    };
-}