xpe 0.0.0-alpha.1 → 1.0.0

package/dist/kernel/common.js

@@ -0,0 +1,207 @@
+import { getXpeInject, getXpeInternalSandbox, getXpeRawDocumentQuerySelector, isPoweredByXpe, setXpeInject, } from "./xpe-bridge.js";
+// 全部沙盒实例和配置存储 map
+// 除了挂载到 sandbox 实例上，还挂载到 XPE inject 全局上，防止重复创建
+export const idToSandboxCacheMap = (() => {
+    const inject = getXpeInject(window);
+    if (inject?.idToSandboxMap)
+        return inject.idToSandboxMap;
+    else {
+        const cacheMap = (isPoweredByXpe(window) ? getXpeInternalSandbox(window)?.inject?.idToSandboxMap : undefined) ??
+            new Map();
+        setXpeInject(window, { idToSandboxMap: cacheMap });
+        return cacheMap;
+    }
+})();
+export function getSandboxById(id) {
+    return idToSandboxCacheMap.get(id)?.sandbox || null;
+}
+export function getOptionsById(id) {
+    return idToSandboxCacheMap.get(id)?.options || null;
+}
+export function addSandboxCacheWithSandbox(id, sandbox) {
+    const sandboxCache = idToSandboxCacheMap.get(id);
+    if (sandboxCache)
+        idToSandboxCacheMap.set(id, { ...sandboxCache, sandbox });
+    else
+        idToSandboxCacheMap.set(id, { sandbox });
+}
+export function deleteSandboxById(id) {
+    const sandboxCache = idToSandboxCacheMap.get(id);
+    // 有 setupApp 缓存时只移除 sandbox 实例，保留 options 供下次快速启动
+    // 无 setupApp 缓存时整体删除 entry，避免泄漏
+    if (sandboxCache?.options) {
+        idToSandboxCacheMap.set(id, { options: sandboxCache.options });
+    }
+    else {
+        idToSandboxCacheMap.delete(id);
+    }
+}
+export function addSandboxCacheWithOptions(id, options) {
+    const sandboxCache = idToSandboxCacheMap.get(id);
+    if (sandboxCache)
+        idToSandboxCacheMap.set(id, { ...sandboxCache, options });
+    else
+        idToSandboxCacheMap.set(id, { options });
+}
+// 分类document上需要处理的属性，不同类型会进入不同的处理逻辑
+export const documentProxyProperties = {
+    // 降级场景下需要本地特殊处理的属性
+    modifyLocalProperties: [
+        "createElement",
+        "createTextNode",
+        "documentURI",
+        "URL",
+        "getElementsByTagName",
+        "getElementById",
+    ],
+    // 子应用需要手动修正的属性方法
+    modifyProperties: [
+        "createElement",
+        "createTextNode",
+        "documentURI",
+        "URL",
+        "getElementsByTagName",
+        "getElementsByClassName",
+        "getElementsByName",
+        "getElementById",
+        "querySelector",
+        "querySelectorAll",
+        "documentElement",
+        "scrollingElement",
+        "forms",
+        "images",
+        "links",
+    ],
+    // 需要从shadowRoot中获取的属性
+    shadowProperties: [
+        "activeElement",
+        "childElementCount",
+        "children",
+        "firstElementChild",
+        "firstChild",
+        "fullscreenElement",
+        "lastElementChild",
+        "pictureInPictureElement",
+        "pointerLockElement",
+        "styleSheets",
+    ],
+    // 需要从shadowRoot中获取的方法
+    shadowMethods: [
+        "append",
+        "contains",
+        "getSelection",
+        "elementFromPoint",
+        "elementsFromPoint",
+        "getAnimations",
+        "replaceChildren",
+    ],
+    // 需要从主应用document中获取的属性
+    documentProperties: [
+        "characterSet",
+        "compatMode",
+        "contentType",
+        "designMode",
+        "dir",
+        "doctype",
+        "embeds",
+        "fullscreenEnabled",
+        "hidden",
+        "implementation",
+        "lastModified",
+        "pictureInPictureEnabled",
+        "plugins",
+        "readyState",
+        "referrer",
+        "visibilityState",
+        "fonts",
+    ],
+    // 需要从主应用document中获取的方法
+    documentMethods: [
+        "execCommand",
+        "caretPositionFromPoint",
+        "createRange",
+        "exitFullscreen",
+        "exitPictureInPicture",
+        "getElementsByTagNameNS",
+        "hasFocus",
+        "prepend",
+    ],
+    // 需要从主应用document中获取的事件
+    documentEvents: [
+        "onpointerlockchange",
+        "onpointerlockerror",
+        "onbeforecopy",
+        "onbeforecut",
+        "onbeforepaste",
+        "onfreeze",
+        "onresume",
+        "onsearch",
+        "onfullscreenchange",
+        "onfullscreenerror",
+        "onsecuritypolicyviolation",
+        "onvisibilitychange",
+    ],
+    // 无需修改原型的属性
+    ownerProperties: ["head", "body"],
+};
+// 需要挂载到子应用iframe document上的事件
+export const appDocumentAddEventListenerEvents = ["DOMContentLoaded", "readystatechange"];
+export const appDocumentOnEvents = ["onreadystatechange"];
+// 需要挂载到主应用document上的事件
+export const mainDocumentAddEventListenerEvents = [
+    "fullscreenchange",
+    "fullscreenerror",
+    "selectionchange",
+    "visibilitychange",
+    "wheel",
+    "keydown",
+    "keypress",
+    "keyup",
+];
+// 需要同时挂载到主应用document和shadow上的事件（互斥）
+export const mainAndAppAddEventListenerEvents = ["gotpointercapture", "lostpointercapture"];
+// 子应用window监听需要挂载到iframe沙箱上的事件
+export const appWindowAddEventListenerEvents = [
+    "hashchange",
+    "popstate",
+    "DOMContentLoaded",
+    "load",
+    "beforeunload",
+    "unload",
+    "message",
+    "error",
+    "unhandledrejection",
+];
+// 子应用window.onXXX需要挂载到iframe沙箱上的事件
+export const appWindowOnEvent = ["onload", "onbeforeunload", "onunload", "onerror", "onunhandledrejection"];
+// 相对路径问题元素的tag和attr的map
+export const relativeElementTagAttrMap = {
+    IMG: "src",
+    A: "href",
+    SOURCE: "src",
+};
+// 需要单独处理的window属性
+export const windowProxyProperties = ["getComputedStyle", "visualViewport", "matchMedia", "DOMParser"];
+// window白名单
+export const windowRegWhiteList = [
+    /animationFrame$/i,
+    /resizeObserver$|mutationObserver$|intersectionObserver$/i,
+    /height$|width$|left$/i,
+    /^screen/i,
+    /CSSStyleSheet$/i,
+    /X$|Y$/,
+];
+// 保存原型方法
+// 子应用的Document.prototype已经被改写了
+export const rawElementAppendChild = HTMLElement.prototype.appendChild;
+export const rawElementRemoveChild = HTMLElement.prototype.removeChild;
+export const rawElementContains = HTMLElement.prototype.contains;
+export const rawHeadInsertBefore = HTMLHeadElement.prototype.insertBefore;
+export const rawBodyInsertBefore = HTMLBodyElement.prototype.insertBefore;
+export const rawInsertAdjacentElement = HTMLStyleElement.prototype.insertAdjacentElement;
+export const rawAddEventListener = Node.prototype.addEventListener;
+export const rawRemoveEventListener = Node.prototype.removeEventListener;
+export const rawWindowAddEventListener = window.addEventListener;
+export const rawWindowRemoveEventListener = window.removeEventListener;
+export const rawAppendChild = Node.prototype.appendChild;
+export const rawDocumentQuerySelector = (isPoweredByXpe(window) ? getXpeRawDocumentQuerySelector(window) : undefined) ?? Document.prototype.querySelector;

package/dist/kernel/constant.d.ts

@@ -0,0 +1,26 @@
+export declare const XPE_APP_ID = "data-xpe-id";
+export declare const XPE_SCRIPT_ID = "data-xpe-script-id";
+export declare const XPE_DATA_FLAG = "data-xpe-flag";
+export declare const CONTAINER_POSITION_DATA_FLAG = "data-container-position-flag";
+export declare const CONTAINER_OVERFLOW_DATA_FLAG = "data-container-overflow-flag";
+export declare const LOADING_DATA_FLAG = "data-loading-flag";
+export declare const XPE_DATA_ATTACH_CSS_FLAG = "data-xpe-attach-css-flag";
+export declare const XPE_APP_ELEMENT_TAG = "xpe-app";
+export declare const XPE_IFRAME_CLASS = "xpe_iframe";
+export declare const XPE_ALL_EVENT = "_xpe_all_event";
+export declare const XPE_SHADE_STYLE = "position: fixed; z-index: 2147483647; visibility: hidden; inset: 0px; backface-visibility: hidden;";
+export declare const XPE_LOADING_STYLE = "position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index:1;";
+export declare const XPE_LOADING_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"30px\" viewBox=\"0 0 24 30\">\n<rect x=\"0\" y=\"13\" width=\"4\" height=\"5\" fill=\"#909090\">\n  <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0s\" dur=\"0.6s\" repeatCount=\"indefinite\"></animate>\n  <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0s\" dur=\"0.6s\" repeatCount=\"indefinite\"></animate>\n</rect>\n<rect x=\"10\" y=\"13\" width=\"4\" height=\"5\" fill=\"#909090\">\n  <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0.15s\" dur=\"0.6s\" repeatCount=\"indefinite\"></animate>\n  <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0.15s\" dur=\"0.6s\" repeatCount=\"indefinite\"></animate>\n</rect>\n<rect x=\"20\" y=\"13\" width=\"4\" height=\"5\" fill=\"#909090\">\n  <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0.3s\" dur=\"0.6s\" repeatCount=\"indefinite\"></animate>\n  <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0.3s\" dur=\"0.6s\" repeatCount=\"indefinite\"></animate>\n</rect>\n</svg>";
+export declare const XPE_TIPS_NO_URL = "url\u53C2\u6570\u4E3A\u7A7A";
+export declare const XPE_TIPS_RELOAD_DISABLED = "\u5B50\u5E94\u7528\u8C03\u7528reload\u65E0\u6CD5\u751F\u6548";
+export declare const XPE_TIPS_STOP_APP = "\u6B64\u62A5\u9519\u53EF\u4EE5\u5FFD\u7565\uFF0Ciframe\u4E3B\u52A8\u4E2D\u65AD\u4E3B\u5E94\u7528\u4EE3\u7801\u5728\u5B50\u5E94\u7528\u8FD0\u884C";
+export declare const XPE_TIPS_STOP_APP_DETAIL: string;
+export declare const XPE_TIPS_NO_SUBJECT = "\u4E8B\u4EF6\u8BA2\u9605\u6570\u91CF\u4E3A\u7A7A";
+export declare const XPE_TIPS_NO_FETCH = "window\u4E0A\u4E0D\u5B58\u5728fetch\u5C5E\u6027\uFF0C\u9700\u8981\u81EA\u884Cpolyfill";
+export declare const XPE_TIPS_NOT_SUPPORTED = "\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 XPE Web Component \u6E32\u67D3\uFF0C\u5B50\u5E94\u7528\u5C06\u91C7\u7528 iframe \u65B9\u5F0F\u6E32\u67D3";
+export declare const XPE_TIPS_SCRIPT_ERROR_REQUESTED = "\u811A\u672C\u8BF7\u6C42\u51FA\u73B0\u9519\u8BEF";
+export declare const XPE_TIPS_CSS_ERROR_REQUESTED = "\u6837\u5F0F\u8BF7\u6C42\u51FA\u73B0\u9519\u8BEF";
+export declare const XPE_TIPS_HTML_ERROR_REQUESTED = "html\u8BF7\u6C42\u51FA\u73B0\u9519\u8BEF";
+export declare const XPE_TIPS_REPEAT_RENDER = "XPE runtime \u77ED\u65F6\u95F4\u91CD\u590D\u6E32\u67D3\u4E86\u4E24\u6B21\uFF0C\u53EF\u80FD\u5B58\u5728\u6027\u80FD\u95EE\u9898\u8BF7\u68C0\u67E5\u4EE3\u7801";
+export declare const XPE_TIPS_NO_SCRIPT = "\u76EE\u6807Script\u5C1A\u672A\u51C6\u5907\u597D\u6216\u5DF2\u7ECF\u88AB\u79FB\u9664";
+export declare const XPE_TIPS_GET_ELEMENT_BY_ID = "\u4E0D\u652F\u6301document.getElementById()\u4F20\u5165\u7279\u6B8A\u5B57\u7B26\uFF0C\u8BF7\u53C2\u8003document.querySelector\u6587\u6863";

package/dist/kernel/constant.js

@@ -0,0 +1,42 @@
+// 私有元素属性
+export const XPE_APP_ID = "data-xpe-id";
+export const XPE_SCRIPT_ID = "data-xpe-script-id";
+export const XPE_DATA_FLAG = "data-xpe-flag";
+export const CONTAINER_POSITION_DATA_FLAG = "data-container-position-flag";
+export const CONTAINER_OVERFLOW_DATA_FLAG = "data-container-overflow-flag";
+export const LOADING_DATA_FLAG = "data-loading-flag";
+export const XPE_DATA_ATTACH_CSS_FLAG = "data-xpe-attach-css-flag";
+export const XPE_APP_ELEMENT_TAG = "xpe-app";
+// 需要使用的某些固定变量
+export const XPE_IFRAME_CLASS = "xpe_iframe";
+export const XPE_ALL_EVENT = "_xpe_all_event";
+export const XPE_SHADE_STYLE = "position: fixed; z-index: 2147483647; visibility: hidden; inset: 0px; backface-visibility: hidden;";
+export const XPE_LOADING_STYLE = "position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index:1;";
+export const XPE_LOADING_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="30px" viewBox="0 0 24 30">
+<rect x="0" y="13" width="4" height="5" fill="#909090">
+  <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
+  <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
+</rect>
+<rect x="10" y="13" width="4" height="5" fill="#909090">
+  <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
+  <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
+</rect>
+<rect x="20" y="13" width="4" height="5" fill="#909090">
+  <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
+  <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
+</rect>
+</svg>`;
+// 提醒类
+export const XPE_TIPS_NO_URL = "url参数为空";
+export const XPE_TIPS_RELOAD_DISABLED = "子应用调用reload无法生效";
+export const XPE_TIPS_STOP_APP = "此报错可以忽略，iframe主动中断主应用代码在子应用运行";
+export const XPE_TIPS_STOP_APP_DETAIL = XPE_TIPS_STOP_APP + "，XPE runtime 已主动拦截该执行路径";
+export const XPE_TIPS_NO_SUBJECT = "事件订阅数量为空";
+export const XPE_TIPS_NO_FETCH = "window上不存在fetch属性，需要自行polyfill";
+export const XPE_TIPS_NOT_SUPPORTED = "当前浏览器不支持 XPE Web Component 渲染，子应用将采用 iframe 方式渲染";
+export const XPE_TIPS_SCRIPT_ERROR_REQUESTED = "脚本请求出现错误";
+export const XPE_TIPS_CSS_ERROR_REQUESTED = "样式请求出现错误";
+export const XPE_TIPS_HTML_ERROR_REQUESTED = "html请求出现错误";
+export const XPE_TIPS_REPEAT_RENDER = "XPE runtime 短时间重复渲染了两次，可能存在性能问题请检查代码";
+export const XPE_TIPS_NO_SCRIPT = "目标Script尚未准备好或已经被移除";
+export const XPE_TIPS_GET_ELEMENT_BY_ID = "不支持document.getElementById()传入特殊字符，请参考document.querySelector文档";

package/dist/kernel/effect.d.ts

@@ -0,0 +1,32 @@
+import RuntimeSandbox from "./sandbox.js";
+/**
+ * 劫持处理样式元素的属性
+ * @internal 仅出于可测性导出，外部不应直接调用
+ */
+export declare function patchStylesheetElement(stylesheetElement: HTMLStyleElement & {
+    _hasPatchStyle?: boolean;
+}, cssLoader: (code: string, url: string, base: string) => string, sandbox: RuntimeSandbox, curUrl: string): void;
+/**
+ * 处理「先 appendChild(link) 后 setAttribute('href')」的延迟 href 场景。
+ *
+ * 通过 MutationObserver 监听 href 属性赋值，命中后走传入的 loadStyleSheet 完成加载。
+ * 生命周期管理（避免内存泄漏）：
+ *   1. 命中 / 超时 / 子应用已销毁 时立即 disconnect 并从 sandbox 出队；
+ *   2. observer 登记到 sandbox.deferredStyleObservers，destroy 阶段统一兜底 disconnect；
+ *   3. 回调内通过 sandboxId 动态获取 sandbox，不捕获 sandbox/iframe，子应用销毁后闭包不再 pin 上下文。
+ */
+export declare function deferStyleSheetByHref(opts: {
+    element: HTMLLinkElement;
+    sandboxId: string;
+    iframeWindow: Window;
+    loadStyleSheet: (href: string, element: HTMLLinkElement) => void;
+}): void;
+/**
+ * 清空head和body的绑定的事件
+ */
+export declare function removeEventListener(element: HTMLHeadElement | HTMLBodyElement): void;
+/**
+ * patch head and body in render
+ * intercept appendChild and insertBefore
+ */
+export declare function patchRenderEffect(render: ShadowRoot | Document, id: string, degrade: boolean): void;