xpe 0.0.0-alpha.1 → 1.0.0

package/dist/kernel/entry.js

@@ -0,0 +1,224 @@
+import processTpl, { genLinkReplaceSymbol, getInlineStyleReplaceSymbol, } from "./template.js";
+import { defaultGetPublicPath, getInlineCode, requestIdleCallback, error, compose, getCurUrl } from "./utils.js";
+import { XPE_TIPS_NO_FETCH, XPE_TIPS_SCRIPT_ERROR_REQUESTED, XPE_TIPS_CSS_ERROR_REQUESTED, XPE_TIPS_HTML_ERROR_REQUESTED, } from "./constant.js";
+import { getEffectLoaders, isMatchUrl } from "./plugin.js";
+// 模块级资源缓存：导出仅供 clearAssetsCache 内部使用，外部代码勿直接 mutate
+export const styleCache = {};
+export const scriptCache = {};
+export const embedHTMLCache = {};
+/**
+ * 清空资源缓存：不传 host 时全清；传单个/数组 host 时按 url 前缀清。
+ * 用于热更新或多 host 子应用切换时主动失效，避免缓存命中已变更资源。
+ */
+export function clearAssetsCache(host) {
+    const matchers = host == null ? null : Array.isArray(host) ? host : [host];
+    const matchAndDelete = (cache) => {
+        if (!matchers) {
+            Object.keys(cache).forEach((key) => delete cache[key]);
+            return;
+        }
+        Object.keys(cache).forEach((key) => {
+            if (matchers.some((prefix) => key.startsWith(prefix))) {
+                delete cache[key];
+            }
+        });
+    };
+    matchAndDelete(styleCache);
+    matchAndDelete(scriptCache);
+    matchAndDelete(embedHTMLCache);
+}
+function getEmbedHTMLCacheKey(url, plugins) {
+    const signature = plugins?.length
+        ? plugins
+            .map((plugin) => [
+            plugin.htmlLoader ? "htmlLoader" : "",
+            plugin.jsExcludes?.length ? `jsExcludes:${plugin.jsExcludes.length}` : "",
+            plugin.cssExcludes?.length ? `cssExcludes:${plugin.cssExcludes.length}` : "",
+            plugin.jsIgnores?.length ? `jsIgnores:${plugin.jsIgnores.length}` : "",
+            plugin.cssIgnores?.length ? `cssIgnores:${plugin.cssIgnores.length}` : "",
+        ]
+            .filter(Boolean)
+            .join("|"))
+            .join("::")
+        : "default";
+    return `${url}::${signature}`;
+}
+if (!window.fetch) {
+    error(XPE_TIPS_NO_FETCH);
+    throw new Error();
+}
+const defaultFetch = window.fetch.bind(window);
+function defaultGetTemplate(tpl) {
+    return tpl;
+}
+/**
+ * 处理css-loader
+ */
+export async function processCssLoader(sandbox, template, getExternalStyleSheets) {
+    const curUrl = getCurUrl(sandbox.proxyLocation);
+    /** css-loader */
+    const composeCssLoader = compose(sandbox.plugins.map((plugin) => plugin.cssLoader));
+    const processedCssList = getExternalStyleSheets().map(({ src, ignore, contentPromise }) => ({
+        src,
+        ignore,
+        contentPromise: contentPromise.then((content) => composeCssLoader(content, src, curUrl)),
+    }));
+    const embedHTML = await getEmbedHTML(template, processedCssList);
+    return sandbox.replace ? sandbox.replace(embedHTML) : embedHTML;
+}
+/**
+ * convert external css link to inline style for performance optimization
+ * @return embedHTML
+ */
+async function getEmbedHTML(template, styleResultList) {
+    let embedHTML = template;
+    return Promise.all(styleResultList.map((styleResult, index) => styleResult.contentPromise.then((content) => {
+        // 用函数式替换：String.replace 的字符串参数会把 content 里的 $&、$1、$$ 等
+        // 当作替换模式解释，css 文本（尤其 @font-face base64、content: "$1" 等）一旦
+        // 命中就会被破坏。函数形式返回的字符串原样写入，杜绝 $ 序列污染。
+        if (styleResult.src) {
+            const replacement = styleResult.ignore
+                ? `<link href="${styleResult.src}" rel="stylesheet" type="text/css">`
+                : `<style>/* ${styleResult.src} */${content}</style>`;
+            embedHTML = embedHTML.replace(genLinkReplaceSymbol(styleResult.src), () => replacement);
+        }
+        else if (content) {
+            const replacement = `<style>/* inline-style-${index} */${content}</style>`;
+            embedHTML = embedHTML.replace(getInlineStyleReplaceSymbol(index), () => replacement);
+        }
+    }))).then(() => embedHTML);
+}
+const isInlineCode = (code) => code.startsWith("<");
+const fetchAssets = (src, cache, fetch, cssFlag, loadError) => cache[src] ||
+    (cache[src] = fetch(src)
+        .then((response) => {
+        // usually browser treats 4xx and 5xx response of script loading as an error and will fire a script error event
+        // https://stackoverflow.com/questions/5625420/what-http-headers-responses-trigger-the-onerror-handler-on-a-script-tag/5625603
+        if (response.status >= 400) {
+            cache[src] = null;
+            if (cssFlag) {
+                error(XPE_TIPS_CSS_ERROR_REQUESTED, { src, response });
+                loadError?.(src, new Error(XPE_TIPS_CSS_ERROR_REQUESTED));
+                return "";
+            }
+            else {
+                error(XPE_TIPS_SCRIPT_ERROR_REQUESTED, { src, response });
+                loadError?.(src, new Error(XPE_TIPS_SCRIPT_ERROR_REQUESTED));
+                throw new Error(XPE_TIPS_SCRIPT_ERROR_REQUESTED);
+            }
+        }
+        return response.text();
+    })
+        .catch((e) => {
+        cache[src] = null;
+        if (cssFlag) {
+            error(XPE_TIPS_CSS_ERROR_REQUESTED, src);
+            loadError?.(src, e);
+            return "";
+        }
+        else {
+            error(XPE_TIPS_SCRIPT_ERROR_REQUESTED, src);
+            loadError?.(src, e);
+            return "";
+        }
+    }));
+// for prefetch
+export function getExternalStyleSheets(styles, fetch = defaultFetch, loadError) {
+    return styles.map(({ src, content, ignore }) => {
+        // 内联
+        if (content) {
+            return { src: "", contentPromise: Promise.resolve(content) };
+        }
+        else if (isInlineCode(src)) {
+            // if it is inline style
+            return { src: "", contentPromise: Promise.resolve(getInlineCode(src)) };
+        }
+        else {
+            // external styles
+            return {
+                src,
+                ignore,
+                contentPromise: ignore ? Promise.resolve("") : fetchAssets(src, styleCache, fetch, true, loadError),
+            };
+        }
+    });
+}
+// for prefetch
+export function getExternalScripts(scripts, fetch = defaultFetch, loadError, fiber) {
+    // module should be requested in iframe
+    return scripts.map((script) => {
+        const { src, async, defer, module, ignore } = script;
+        let contentPromise = null;
+        // async
+        if ((async || defer) && src && !module) {
+            contentPromise = new Promise((resolve, reject) => fiber
+                ? requestIdleCallback(() => fetchAssets(src, scriptCache, fetch, false, loadError).then(resolve, reject))
+                : fetchAssets(src, scriptCache, fetch, false, loadError).then(resolve, reject));
+            // module || ignore
+        }
+        else if ((module && src) || ignore) {
+            contentPromise = Promise.resolve("");
+            // inline
+        }
+        else if (!src) {
+            contentPromise = Promise.resolve(script.content);
+            // outline
+        }
+        else {
+            contentPromise = fetchAssets(src, scriptCache, fetch, false, loadError);
+        }
+        // refer https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer
+        if (module && !async)
+            script.defer = true;
+        return { ...script, contentPromise };
+    });
+}
+export default function importHTML(params) {
+    const { url, opts, html } = params;
+    const fetch = opts.fetch ?? defaultFetch;
+    const fiber = opts.fiber ?? true;
+    const { plugins, loadError } = opts;
+    const htmlLoader = plugins ? compose(plugins.map((plugin) => plugin.htmlLoader)) : defaultGetTemplate;
+    const jsExcludes = getEffectLoaders("jsExcludes", plugins);
+    const cssExcludes = getEffectLoaders("cssExcludes", plugins);
+    const jsIgnores = getEffectLoaders("jsIgnores", plugins);
+    const cssIgnores = getEffectLoaders("cssIgnores", plugins);
+    const getPublicPath = defaultGetPublicPath;
+    const cacheKey = getEmbedHTMLCacheKey(url, plugins);
+    const getHtmlParseResult = (url, html, htmlLoader) => (html
+        ? Promise.resolve(html)
+        : fetch(url)
+            .then((response) => {
+            if (response.status >= 400) {
+                error(XPE_TIPS_HTML_ERROR_REQUESTED, { url, response });
+                loadError?.(url, new Error(XPE_TIPS_HTML_ERROR_REQUESTED));
+                return "";
+            }
+            return response.text();
+        })
+            .catch((e) => {
+            embedHTMLCache[cacheKey] = null;
+            loadError?.(url, e);
+            return Promise.reject(e);
+        })).then((html) => {
+        const assetPublicPath = getPublicPath(url);
+        const { template, scripts, styles } = processTpl(htmlLoader(html), assetPublicPath);
+        return {
+            template: template,
+            assetPublicPath,
+            getExternalScripts: () => getExternalScripts(scripts
+                .filter((script) => !script.src || !isMatchUrl(script.src, jsExcludes))
+                .map((script) => ({ ...script, ignore: script.src && isMatchUrl(script.src, jsIgnores) })), fetch, loadError, fiber),
+            getExternalStyleSheets: () => getExternalStyleSheets(styles
+                .filter((style) => !style.src || !isMatchUrl(style.src, cssExcludes))
+                .map((style) => ({ ...style, ignore: style.src && isMatchUrl(style.src, cssIgnores) })), fetch, loadError),
+        };
+    });
+    if (opts?.plugins?.some((plugin) => plugin.htmlLoader)) {
+        return getHtmlParseResult(url, html, htmlLoader);
+        // 没有html-loader可以做缓存
+    }
+    else {
+        return embedHTMLCache[cacheKey] || (embedHTMLCache[cacheKey] = getHtmlParseResult(url, html, htmlLoader));
+    }
+}

package/dist/kernel/event.d.ts

@@ -0,0 +1,22 @@
+export type EventObj = {
+    [event: string]: Array<Function>;
+};
+export declare const appEventObjMap: Map<String, EventObj>;
+export declare class EventBus {
+    private id;
+    private eventObj;
+    constructor(id: string);
+    $on(event: string, fn: Function): EventBus;
+    /** 任何$emit都会导致监听函数触发，第一个参数为事件名，后续的参数为$emit的参数 */
+    $onAll(fn: (event: string, ...args: Array<any>) => any): EventBus;
+    $once(event: string, fn: Function): void;
+    $off(event: string, fn: Function): EventBus;
+    $offAll(fn: Function): EventBus;
+    $emit(event: string, ...args: Array<any>): EventBus;
+    $clear(): EventBus;
+    /**
+     * 销毁 EventBus：先 $clear 再从全局 appEventObjMap 中移除当前 id 的 entry。
+     * 防止 sandbox.destroy() 之后该子应用仍长期占用一项 map 条目。
+     */
+    $destroy(): void;
+}

package/dist/kernel/event.js

@@ -0,0 +1,120 @@
+import { warn, error } from "./utils.js";
+import { XPE_ALL_EVENT, XPE_TIPS_NO_SUBJECT } from "./constant.js";
+import { getXpeInject, getXpeInternalSandbox, isPoweredByXpe, setXpeInject } from "./xpe-bridge.js";
+// 全部事件存储 map
+// 除了挂载到 sandbox 实例上，还挂载到 XPE inject 全局上，防止重复创建
+export const appEventObjMap = (() => {
+    const inject = getXpeInject(window);
+    if (inject?.appEventObjMap)
+        return inject.appEventObjMap;
+    else {
+        const cacheMap = (isPoweredByXpe(window) ? getXpeInternalSandbox(window)?.inject?.appEventObjMap : undefined) ??
+            new Map();
+        setXpeInject(window, { appEventObjMap: cacheMap });
+        return cacheMap;
+    }
+})();
+// eventBus 事件中心
+export class EventBus {
+    constructor(id) {
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "eventObj", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.id = id;
+        this.$clear();
+        if (!appEventObjMap.get(this.id)) {
+            appEventObjMap.set(this.id, {});
+        }
+        this.eventObj = appEventObjMap.get(this.id);
+    }
+    // 监听事件
+    $on(event, fn) {
+        const cbs = this.eventObj[event];
+        if (!cbs) {
+            this.eventObj[event] = [fn];
+            return this;
+        }
+        if (!cbs.includes(fn))
+            cbs.push(fn);
+        return this;
+    }
+    /** 任何$emit都会导致监听函数触发，第一个参数为事件名，后续的参数为$emit的参数 */
+    $onAll(fn) {
+        return this.$on(XPE_ALL_EVENT, fn);
+    }
+    // 一次性监听事件
+    $once(event, fn) {
+        const on = function (...args) {
+            this.$off(event, on);
+            fn(...args);
+        }.bind(this);
+        this.$on(event, on);
+    }
+    // 取消监听
+    $off(event, fn) {
+        const cbs = this.eventObj[event];
+        if (!event || !cbs || !cbs.length) {
+            warn(`${event} ${XPE_TIPS_NO_SUBJECT}`);
+            return this;
+        }
+        let cb;
+        let i = cbs.length;
+        while (i--) {
+            cb = cbs[i];
+            if (cb === fn) {
+                cbs.splice(i, 1);
+                break;
+            }
+        }
+        return this;
+    }
+    // 取消监听$onAll
+    $offAll(fn) {
+        return this.$off(XPE_ALL_EVENT, fn);
+    }
+    // 发送事件
+    $emit(event, ...args) {
+        const cbs = [...(this.eventObj[event] ?? [])];
+        const allCbs = [...(this.eventObj[XPE_ALL_EVENT] ?? [])];
+        if (!event || (cbs.length === 0 && allCbs.length === 0)) {
+            warn(`${event} ${XPE_TIPS_NO_SUBJECT}`);
+        }
+        else {
+            try {
+                for (let i = 0, l = cbs.length; i < l; i++)
+                    cbs[i](...args);
+                for (let i = 0, l = allCbs.length; i < l; i++)
+                    allCbs[i](event, ...args);
+            }
+            catch (e) {
+                error(e);
+            }
+        }
+        return this;
+    }
+    // 清空当前所有的监听事件
+    $clear() {
+        const eventObj = appEventObjMap.get(this.id) ?? {};
+        const events = Object.keys(eventObj);
+        events.forEach((event) => delete eventObj[event]);
+        return this;
+    }
+    /**
+     * 销毁 EventBus：先 $clear 再从全局 appEventObjMap 中移除当前 id 的 entry。
+     * 防止 sandbox.destroy() 之后该子应用仍长期占用一项 map 条目。
+     */
+    $destroy() {
+        this.$clear();
+        appEventObjMap.delete(this.id);
+        this.eventObj = {};
+    }
+}

package/dist/kernel/iframe.d.ts

@@ -0,0 +1,141 @@
+import RuntimeSandbox from "./sandbox.js";
+import { ScriptObject } from "./template.js";
+import { ScriptObjectLoader } from "./runtime-engine.js";
+import { type XpeEventListenerRecord } from "./xpe-bridge.js";
+export type ElementEventRecord = {
+    type: string;
+    handler: EventListenerOrEventListenerObject;
+    callback: EventListenerOrEventListenerObject;
+    options: any;
+};
+declare global {
+    interface Window {
+        __POWERED_BY_XPE__?: boolean;
+        __XPE_PUBLIC_PATH__: string;
+        __XPE_RAW_DOCUMENT_QUERY_SELECTOR__: typeof Document.prototype.querySelector;
+        __XPE_RAW_DOCUMENT_CREATE_ELEMENT__: typeof Document.prototype.createElement;
+        __XPE_RAW_DOCUMENT_CREATE_TEXT_NODE__: typeof Document.prototype.createTextNode;
+        __XPE_RAW_DOCUMENT_HEAD__: typeof Document.prototype.head;
+        __XPE_RAW_DOCUMENT_QUERY_SELECTOR_ALL__: typeof Document.prototype.querySelectorAll;
+        __XPE_RAW_WINDOW__: Window;
+        __XPE_INTERNAL_SANDBOX__?: RuntimeSandbox;
+        __XPE_INJECT__?: Partial<RuntimeSandbox["inject"]>;
+        __XPE_EVENTLISTENER__: Set<XpeEventListenerRecord>;
+        __XPE_MOUNT__: () => void;
+        __XPE_UNMOUNT__: () => void | Promise<void>;
+        Document: typeof Document;
+        HTMLImageElement: typeof HTMLImageElement;
+        Node: typeof Node;
+        Element: typeof Element;
+        HTMLElement: typeof HTMLElement;
+        HTMLAnchorElement: typeof HTMLAnchorElement;
+        HTMLSourceElement: typeof HTMLSourceElement;
+        HTMLLinkElement: typeof HTMLLinkElement;
+        HTMLScriptElement: typeof HTMLScriptElement;
+        HTMLMediaElement: typeof HTMLMediaElement;
+        EventTarget: typeof EventTarget;
+        Event: typeof Event;
+        ShadowRoot: typeof ShadowRoot;
+    }
+    interface HTMLHeadElement {
+        _cacheListeners: Map<string, EventListenerOrEventListenerObject[]>;
+    }
+    interface HTMLBodyElement {
+        _cacheListeners: Map<string, EventListenerOrEventListenerObject[]>;
+    }
+    interface Document {
+        createTreeWalker(root: Node, whatToShow?: number, filter?: NodeFilter | null, entityReferenceExpansion?: boolean): TreeWalker;
+    }
+}
+/**
+ * patch iframe window effect
+ * @param iframeWindow
+ */
+export declare function patchWindowEffect(iframeWindow: Window): void;
+/**
+ * 让 targetWindow 上的 DOM 构造函数 instanceof 同时认可 peerWindow realm 的对象。
+ * 非降级：targetWindow=子应用 JS iframe，peerWindow=主应用 window（DOM 在 shadowRoot）。
+ * 降级：在 patchDegradeInstanceofAcrossRealms 中对渲染 iframe 与执行 iframe 双向调用。
+ */
+export declare function patchInstanceofAcrossRealms(targetWindow: Window, peerWindow?: Window): void;
+/**
+ * 降级模式：DOM 在渲染 iframe、JS 在执行 iframe，对两侧 window 双向 patch instanceof。
+ * 需在 sandbox.document（渲染 document）就绪后调用，勿在 patchWindowEffect 阶段调用。
+ */
+export declare function patchDegradeInstanceofAcrossRealms(appWindow: Window, renderWindow: Window): void;
+/**
+ * 恢复节点的监听事件
+ */
+export declare function recoverEventListeners(rootElement: Node, iframeWindow: Window): void;
+/**
+ * 恢复根节点的监听事件
+ */
+export declare function recoverDocumentListeners(oldRootElement: Node, newRootElement: Node, iframeWindow: Window): void;
+export declare function recoverShadowRootEventListeners(iframeWindow: Window): void;
+/**
+ * 修复vue绑定事件e.timeStamp < attachedTimestamp 的情况
+ */
+export declare function patchEventTimeStamp(targetWindow: Window, iframeWindow: Window): void;
+/**
+ * patch document effect
+ * @param iframeWindow
+ */
+export declare function patchDocumentEffect(iframeWindow: Window): void;
+/**
+ * 初始化 base 标签，供 document 内相对路径资源解析使用。
+ * @param pathname 可选；降级渲染 iframe 的 location 为 about:blank，需传入 proxyLocation.pathname
+ */
+export declare function initBase(iframeWindow: Window, url: string, pathname?: string): void;
+/**
+ * 给子应用元素打上 baseURI / ownerDocument 补丁，让它在主应用 DOM 中也保留子应用
+ * 的 location / document 语义。
+ *
+ * 闭包持有策略：用 WeakRef<Window> 间接持有 iframeWindow，proxyLocation / plugins
+ * 都通过 iframeWindow 上的内部沙盒全局动态访问。这样一来，当子应用 element 被业务移到
+ * 主应用 DOM 下（portal / 弹窗 / 拖拽等），sandbox.destroy() 清理内部沙盒全局后，
+ * getter 会自动降级到主 document，element 不会把整个子应用上下文钉在内存中。
+ *
+ * WeakRef 是 ES2021 标准（Chrome 84+ / Node 14.6+）；旧环境降级为强引用以保兼容。
+ */
+export declare function patchElementEffect(element: (HTMLElement | Node | ShadowRoot) & {
+    _hasPatch?: boolean;
+}, iframeWindow: Window): void;
+/**
+ * 子应用前进后退，同步路由到主应用
+ * @param iframeWindow
+ */
+export declare function syncIframeUrlToWindow(iframeWindow: Window): void;
+/**
+ * iframe插入脚本
+ * @param scriptResult script请求结果
+ * @param iframeWindow
+ * @param rawElement 原始的脚本
+ */
+export declare function insertScriptToIframe(scriptResult: ScriptObject | ScriptObjectLoader, iframeWindow: Window, rawElement?: HTMLScriptElement): void;
+/**
+ * 加载iframe替换子应用
+ * @param src 地址
+ * @param element
+ * @param degradeAttrs
+ */
+export declare function renderIframeReplaceApp(src: string, element: HTMLElement, degradeAttrs?: {
+    [key: string]: any;
+}): void;
+/**
+ * js沙箱
+ * 创建和主应用同源的iframe，路径携带了子路由的路由信息
+ * iframe必须禁止加载html，防止进入主应用的路由逻辑
+ *
+ * 统一使用 srcdoc 加载空白文档：
+ *   - 不发任何请求加载主应用 host 资源（解决 issue #54）
+ *   - origin 继承自 embedder，主应用可以正常 patch contentDocument
+ *   - 之后通过 document.open() 把 iframe 的 location 改写到主应用 URL，
+ *     使 location.origin、history、router 等行为与主应用同源一致
+ *
+ * attrs.src 不再作为 iframe 的初始 src（HTML spec 规定 srcdoc 优先级高于 src，
+ * 即便保留 src 浏览器也会忽略它）。它被重新解释为「srcdoc trick 失败时的兜底空白页 URL」，
+ * 用户可指向自己提供的 `/empty` 静态文件或 Service Worker 端点；不传则兜底 mainHostPath。
+ */
+export declare function iframeGenerator(sandbox: RuntimeSandbox, attrs: {
+    [key: string]: any;
+}, mainHostPath: string, appHostPath: string, appRoutePath: string): HTMLIFrameElement;