mustard-app/lib/bundle.cjs

个人前端微应用建设中。。。

'use strict';

const AppName = 'mustard-app'; // 元素名
const LocationPrefix = 'mApp-'; // location path 前缀
const MainMustardApp = 'main'; // 基座标识（禁用）
// 子应用状态
var IAppStatus;
(function (IAppStatus) {
    IAppStatus[IAppStatus["create"] = 0] = "create";
    IAppStatus[IAppStatus["loading"] = 1] = "loading";
    IAppStatus[IAppStatus["mount"] = 2] = "mount";
    IAppStatus[IAppStatus["unmount"] = 3] = "unmount";
    IAppStatus[IAppStatus["destory"] = 4] = "destory";
    IAppStatus[IAppStatus["error"] = -100] = "error"; // 子应用异常
})(IAppStatus || (IAppStatus = {}));
const APPStAtUSCNKEYS = ['create', 'loading', 'mount', 'unmount', 'destory', 'error'];

function isFunction(value) {
    return value instanceof Function;
}
function isURL(value) {
    return value instanceof URL;
}
/**
 * 是否是子应用的state
 * @param value
 * @returns
 */
function isMustardState(value) {
    return value?.isMustard === 'MustardApp';
}
/**
 * 是否是生命周期的key
 * @param value
 * @returns
 */
function isIAppStatusKey(value) {
    return APPStAtUSCNKEYS.includes(value);
}
/**
 * 是否是远程类型资源
 * @param dom
 * @returns boolean
 */
function isRemotezElement(dom) {
    return dom instanceof HTMLImageElement || dom instanceof HTMLVideoElement || dom instanceof HTMLAudioElement || dom instanceof HTMLSourceElement;
}
/**
 * 是否是相对地址
 * @param src
 * @returns boolean
 */
function isRelativePath(src = '') {
    return /^(\.){0,2}\//.test(src);
}

// 发布订阅系统中心
class EventCenter {
    eventList = new Map();
    /**
     * 初始化
     * @param name 事件名
     * @param options 事件配置
     */
    initEvent(name, options = {}) {
        this.eventList.set(name, {
            data: undefined,
            sourceOfData: undefined,
            assignment: false,
            callbacks: new Set(),
            repeatSend: new WeakSet(),
            ...options
        });
    }
    /**
     * 订阅事件
     * @param name 事件名
     * @param fn 事件
     * @param param2.immediately 是否立即执行（对应消息dispatch过）
     * @param param2.repeatSend 多次dispatch相同的data,只有第一次生效
     */
    on(name, fn, { immediately, repeatSend } = {}) {
        if (!isFunction(fn)) {
            return;
        }
        const events = this.eventList.get(name);
        if (!events) {
            this.initEvent(name, {
                callbacks: new Set([fn]),
                repeatSend: new WeakSet(repeatSend ? [fn] : [])
            });
        }
        else {
            events.callbacks.add(fn);
            repeatSend && events.repeatSend.add(fn);
            immediately && events.assignment && fn(events.data, undefined, events.sourceOfData);
        }
    }
    /**
     * 注销订阅事件
     * @param name 事件名
     * @param fn 事件 不传递全部清空
     */
    off(name, fn) {
        const events = this.eventList.get(name);
        if (events) {
            fn ? events.callbacks.delete(fn) : events.callbacks.clear();
        }
    }
    /**
     * 发布消息
     * @param name 事件名
     * @param source 那个应用发送的消息
     * @param data 数据
     */
    dispatch(name, source, data) {
        const events = this.eventList.get(name);
        const isSameData = events?.data === data;
        if (events) {
            const oldData = events.data;
            events.assignment = true;
            for (const callback of events.callbacks) {
                // 存在且值等于上一次不执行，其他的都执行
                if (!(events.repeatSend.has(callback) && isSameData)) {
                    callback(data, oldData, source);
                }
            }
            events.data = data;
            events.assignment = true;
            events.sourceOfData = source;
        }
        else {
            this.initEvent(name, {
                data: data,
                sourceOfData: source,
                assignment: true,
                callbacks: new Set([])
            });
        }
    }
}
function getEventGlobalLifeKeyByValue(value) {
    return `globalLife_${value}`;
}
function getEventGlobalDataChangeKey() {
    return 'globalDataChange';
}
function getEventDataKey(name) {
    return `data_${name}`;
}
function getEventDataChangeKey(name) {
    return `dataChange_${name}`;
}
function getEventLifeKeyByKey(name, key) {
    return `life_${name}_${key}`;
}
function getEventLifeKeyByValue(name, value) {
    return `life_${name}_${IAppStatus[value]}`;
}
function getEventBindKey(name, method) {
    return `bind_${name}_${method}`;
}

// 订阅实例
const eventCenter$1 = new EventCenter();
function setGlobalEvents(options) {
    Reflect.ownKeys(options).forEach(key => {
        if (isFunction(options[key])) {
            if (key === 'dataChange') {
                eventCenter$1.off(getEventGlobalDataChangeKey());
                eventCenter$1.on(getEventGlobalDataChangeKey(), options[key]);
            }
            else if (isIAppStatusKey(key)) {
                eventCenter$1.off(getEventGlobalLifeKeyByValue(key));
                eventCenter$1.on(getEventGlobalLifeKeyByValue(key), options[key]);
            }
        }
    });
}
function globalDataChangeDispatch(name, data) {
    eventCenter$1.dispatch(getEventGlobalDataChangeKey(), name, data);
}
function globalLifeDispatch(key, name) {
    eventCenter$1.dispatch(getEventGlobalLifeKeyByValue(key), name);
}
// 基座通讯集合
class EventCenterBaseApp {
    /**
     * 向子应用发送data数据
     * @param name 子应用名字
     * @param data 发送数据
     */
    dispatch(name, data) {
        eventCenter$1.dispatch(getEventDataKey(name), MainMustardApp, data);
    }
    /**
     * 订阅props修改事件
     * @param name 子应用名字
     * @param fn 事件
     */
    onData(name, fn) {
        eventCenter$1.on(getEventDataChangeKey(name), fn);
    }
    /**
     * 订阅生命事件
     * @param name 子应用名字
     * @param life 生命周期映射
     * @param fn 事件
     */
    onLife(name, life, fn) {
        eventCenter$1.on(getEventLifeKeyByKey(name, life), fn);
    }
    /**
     * 订阅自定义事件
     * @param name 子应用名字
     * @param method 自定义方法名
     * @param fn 事件
     */
    onCustomize(name, method, fn) {
        eventCenter$1.on(getEventBindKey(name, method), fn);
    }
    /**
     * 取消订阅生命事件
     * @param name 子应用名字
     * @param fn 事件
     */
    offData(name, fn) {
        eventCenter$1.off(getEventDataChangeKey(name), fn);
    }
    /**
     * 取消订阅生命事件
     * @param name 子应用名字
     * @param life 生命周期映射
     * @param fn 事件
     */
    offLife(name, life, fn) {
        eventCenter$1.off(getEventLifeKeyByKey(name, life), fn);
    }
    /**
     * 取消订阅自定义事件
     * @param name 子应用名字
     * @param method 自定义方法名
     * @param fn 事件
     */
    offCustomize(name, method, fn) {
        eventCenter$1.off(getEventBindKey(name, method), fn);
    }
}
// 子应用通讯类（注入到子应用的window.microApp）
class EventCenterMicroApp {
    name;
    constructor(name) {
        this.name = name;
    }
    // 添加data事件监听
    addDataListener(fn) {
        eventCenter$1.on(getEventDataKey(this.name), fn, { immediately: true, repeatSend: true });
    }
    // 解除data监听
    removeDataListener(fn) {
        fn && eventCenter$1.off(getEventDataKey(this.name), fn);
    }
    // 解除所以的data监听事件
    clearDateListener() {
        eventCenter$1.off(getEventDataKey(this.name));
    }
    /**
     * 发送data数据修改事件
     * @param data 发送数据
     */
    dispatch(data) {
        globalDataChangeDispatch(this.name, data);
        eventCenter$1.dispatch(getEventDataChangeKey(this.name), this.name, data);
    }
    /**
     * 发送自定义事件
     * @param method
     */
    dispatchCustomize(method, data) {
        eventCenter$1.dispatch(getEventBindKey(this.name, method), this.name, data);
    }
}
// 子应用生命周期通讯类（内部调用）
class EventCenterMicorLife {
    name;
    constructor(name) {
        this.name = name;
    }
    /**
     * 发送生命周期
     * @param state 子应用的生命周期
     */
    dispatchLife(state) {
        globalLifeDispatch(IAppStatus[state], this.name);
        eventCenter$1.dispatch(getEventLifeKeyByValue(this.name, state), this.name);
    }
}

class ProxyEventListener {
    eventLis = new Map();
    // 添加事件
    addEventListener(type, listener, options) {
        if (!this.eventLis.has(type)) {
            this.eventLis.set(type, new Map());
        }
        const listeners = this.eventLis.get(type);
        listeners?.set(listener, options);
        return window.addEventListener(type, listener, options);
    }
    // 删除事件
    removeEventListener(type, listener, options) {
        if (!this.eventLis.has(type)) {
            this.eventLis.set(type, new Map());
        }
        const listeners = this.eventLis.get(type);
        if (listeners?.get(listener) === options) {
            listeners?.delete(listener);
        }
        return window.removeEventListener(type, listener, options);
    }
    // 全部清除事件
    clear() {
        Array.from(this.eventLis.keys()).forEach(key => {
            const listeners = this.eventLis.get(key);
            if (listeners instanceof Map) {
                Array.from(listeners.keys()).forEach(listener => {
                    window.removeEventListener(key, listener, listeners.get(listener));
                });
            }
        });
    }
}

const mustardAppInfos = window.mustardAppInfos = window?.mustardAppInfos ?? {
    currentReadDocMAppName: '', // 子应用临时标识
    appInstanceMap: new Map(), // 当前子应用的实例
    getAppProxyWindow(appName) {
        // eslint-disable-next-line no-use-before-define
        const app = getAppFromInstance(appName);
        if (app) {
            return app.sandbox.proxyWindow;
        }
        return null;
    }
};
/**
 * 获取所以实例app.name
 * @returns IApp[]
 */
function getAllApp() {
    return Array.from(mustardAppInfos.appInstanceMap.keys());
}
/**
 * 实例写入缓存
 * @param name 子应用标识
 * @param app 实例
 * @returns
 */
function addInstance(name, app) {
    return mustardAppInfos.appInstanceMap.set(name, app);
}
/**
 * 删除实例
 * @param name 子应用标识
 */
function removeInstance(name) {
    mustardAppInfos.appInstanceMap.delete(name);
}
/**
 * 获取实例
 * @param name 子应用标识
 * @returns IApp
 */
function getAppFromInstance(name) {
    return mustardAppInfos.appInstanceMap.get(name);
}
/**
 * 子应用是否存在
 * @param name 子应用标识
 * @returns
 */
function appIsExist(name) {
    return mustardAppInfos.appInstanceMap.has(name);
}
/**
 * 设置子应用标识
 * 用于后续同步步骤的消费
 * e.g document.querySelector
 * @param appName
 */
function setReadDocumentName(appName) {
    return mustardAppInfos.currentReadDocMAppName = appName;
}
/**
 * 消费标识
 * @returns
 */
function consumption() {
    const name = mustardAppInfos.currentReadDocMAppName;
    mustardAppInfos.currentReadDocMAppName = '';
    return name;
}

let templateStyle;
function scopedStyleRule(rule, prefix, path) {
    const { selectorText, cssText } = rule;
    let str = '';
    // 处理选择器
    if (/^((html[\s>~,]+body)|(html|body|:root))$/.test(selectorText)) {
        // 处理顶层选择器，如 body，html 都转换为 micro-app[name=xxx]
        str = cssText.replace(/^((html[\s>~,]+body)|(html|body|:root))/, prefix) + '\n';
    }
    else {
        // 选择器添加前缀
        str = cssText.replace(/^[\s\S]*{/, cssHead => {
            return cssHead.replace(/(^|,)([^,]+)/g, (_, $1, $2) => {
                if (/^[\s]*((html|body|:root)|(html[\s>~]+body))/.test($2)) {
                    return `${$1} ${$2.replace(/^[\s]*((html[\s>~]+body)|(html|body|:root))/, prefix)}` + '\n';
                }
                return `${$1} ${prefix} ${$2} \n`;
            });
        });
    }
    // 处理样式里的相对地址
    return str.replace(/url\(((".+?")|('.+?')|(.+?))\)/gi, (_, url) => {
        const src = url.replace(/["']/g, '');
        return `url(${getCompletePath(src, path)})`;
    });
}
// 处理媒体查询和样式支持查询
function scopedStyleRuleOther(rule, prefix, packName, path) {
    // eslint-disable-next-line no-use-before-define
    const rules = scopedStyleRules(rule.cssRules, prefix, path);
    return `@${packName} ${rule.conditionText} {\n${rules}\n}`;
}
function scopedStyleRules(cssRules, prefix, path) {
    let rules = '';
    if (cssRules?.length) {
        Array.from(cssRules).forEach((cssRule) => {
            switch (cssRule.type) {
                case 1: // STYLE_RULE
                    rules += scopedStyleRule(cssRule, prefix, path) + '\n';
                    break;
                case 4: // MEDIA_RULE 媒体查询
                    rules += scopedStyleRuleOther(cssRule, prefix, 'media', path) + '\n';
                    break;
                case 12: // SUPPORTS_RULE 样式支持
                    rules += scopedStyleRuleOther(cssRule, prefix, 'supports', path) + '\n';
                    break;
                default:
                    rules += cssRule.cssText;
                    break;
            }
        });
    }
    return rules;
}
function scopedCSSTextContent(textContent, appName, path) {
    const prefix = `mustard-app[name='${appName}'] `; // 样式前缀
    if (!templateStyle) {
        templateStyle = document.createElement('style');
        document.body.appendChild(templateStyle);
        if (templateStyle?.sheet) {
            templateStyle.sheet.disabled = false; // 样式标记不可用
        }
    }
    if (textContent && templateStyle.sheet?.cssRules) {
        templateStyle.textContent = textContent;
        const _textContent = scopedStyleRules(templateStyle.sheet.cssRules, prefix, path);
        templateStyle.textContent = '';
        return _textContent;
    }
    return textContent;
}
function scopedCSS(styleEle, appName, path) {
    const s = new Date();
    styleEle.textContent = scopedCSSTextContent(styleEle.textContent, appName, path);
    console.log('============', new Date().getTime() - s.getTime());
}

/**
 * 获取虚拟路由key
 * @param appName
 * @returns
 */
function getLocationNameByAppName(appName) {
    return LocationPrefix + appName;
}
/**
 * 根据相对地址和当前页面地址返回具体资源路径
 * @param relativePath 相对地址
 * @param absolutePath 当前页面地址
 * @returns
 */
function getCompletePath(relativePath, absolutePath) {
    if (!absolutePath || !isRelativePath(relativePath))
        return relativePath;
    return new URL(relativePath, absolutePath).href;
}
/**
 * 请求资源
 * @param relativePath 相对地址
 * @param absolutePath 当前页面地址
 * @returns
 */
function fetchSource(relativePath, absolutePath) {
    return fetch(getCompletePath(relativePath, absolutePath)).then((res) => {
        return res.text();
    });
}
/**
 * 监听Dom变化
 * @param dom 需要监听的dom元素
 * @param config 需要监听的范围 e.g 属性变动/子节点变动
 * @param callback 监听变动回调函数
 */
function mutationObserver(dom, config, callback) {
    const observer = new MutationObserver((mutationsList, observer) => {
        observer.disconnect();
        callback(mutationsList, observer);
        observer.observe(dom, config);
    });
    // 以上述配置开始观察目标节点
    observer.observe(dom, config);
    return observer;
}
/**
 * 处理子应用的dom
 * 1. 加上子应用标识 appName
 * 2. 修改ownerDocument，代理到proxydocument
 * 3. 特殊dom，特殊处理 e.g 1. 远程资源src 2. 动态style处理（实时加入前缀）
 * @param dom
 * @param _appName 子应用标识
 * @returns
 */
function handleDom(dom, _appName) {
    if (!dom)
        return dom;
    const appName = _appName ?? consumption();
    if (appName && !dom?.appName) {
        const app = getAppFromInstance(appName);
        const proxyWindow = mustardAppInfos.getAppProxyWindow(appName);
        const config = {
            // 1. 子应用标识
            // 2. 判断是否处理过的元素
            appName: {
                value: appName
            },
            ownerDocument: {
                enumerable: true,
                get() {
                    return proxyWindow?.document ?? document;
                }
            }
        };
        // 远程资源地址适配
        if (isRemotezElement(dom)) {
            mutationObserver(dom, { attributes: true, attributeFilter: ['src'] }, function ([mutations] = []) {
                if (mutations.type === 'attributes') {
                    const target = mutations.target;
                    target.src = getCompletePath(target.getAttribute('src'), app.url);
                }
            });
        }
        // 动态style适配
        if (dom instanceof HTMLStyleElement) {
            mutationObserver(dom, { childList: true }, function ([mutations] = []) {
                if (mutations.type === 'childList') {
                    mutations.target.textContent = scopedCSSTextContent(mutations.target.textContent, appName);
                }
            });
        }
        return Object.defineProperties(dom, config);
    }
    return dom;
}
/**
 * 处理选择器
 * e.g.
 *  1. head -> mustard-app-head
 *  2. body -> mustard-app-body
 * @param selectors
 */
function handleSelectors(selectors) {
    if (!selectors)
        return '';
    if (selectors?.trim() === 'head')
        return 'mustard-app-head';
    if (selectors?.trim() === 'body')
        return 'mustard-app-body';
    return selectors.split(',').map(_selector => _selector.replace(/(^|,|\s)(head|body)([^a-zA-Z]|$)/g, function (test) {
        return test.replace(/(head|body)/, (_, $1) => `mustard-app-${$1}`);
    })).join(',');
}
/**
 * 获取相对地址
 * 根据子应用的appName，从loaction.search 上读取对应数据
 * @param appName
 * @returns
 */
function getPath(appName) {
    const search = location.search;
    const searchParams = new URLSearchParams(search);
    const href = searchParams.get(`${LocationPrefix}${appName}`) ?? '/';
    return decodeURIComponent(href);
}
/**
 * 获取地址的URL对象
 * @param appName
 * @param baseUrl
 * @returns
 */
function getURL(appName, baseUrl) {
    return new URL(getPath(appName), baseUrl);
}
/**
 * 异步下一微任务运行
 * @param fn 待运行的方法
 */
function nextTick(fn) {
    Promise.resolve().then(() => {
        isFunction(fn) && fn();
    });
}

function proxyDocument(appName) {
    return new Proxy(document, {
        get: (target, key) => {
            if (key === 'defaultView') {
                return getAppFromInstance(appName)?.sandbox?.proxyWindow;
            }
            // 设置要消费的子应用标识
            if (target[key] instanceof Function) {
                return function (...args) {
                    setReadDocumentName(appName);
                    return target[key].call(target, ...args);
                };
            }
            return target[key];
        }
    });
}
function changeDomPropety() {
    // 修改Document原型链
    const createElement = Document.prototype.createElement;
    const createElementNS = Document.prototype.createElementNS;
    const createTextNode = Document.prototype.createTextNode;
    const createComment = Document.prototype.createComment;
    const createDocumentFragment = Document.prototype.createDocumentFragment;
    const caretRangeFromPoint = Document.prototype.caretRangeFromPoint;
    Document.prototype.createElement = function (tagName, ...options) {
        return handleDom(createElement.call(this, tagName, ...options));
    };
    Document.prototype.createElementNS = function (...options) {
        return handleDom(createElementNS.call(this, ...options));
    };
    Document.prototype.createTextNode = function (...options) {
        return handleDom(createTextNode.call(this, ...options));
    };
    Document.prototype.createComment = function (...options) {
        return handleDom(createComment.call(this, ...options));
    };
    Document.prototype.createDocumentFragment = function (...options) {
        return handleDom(createDocumentFragment.call(this, ...options));
    };
    caretRangeFromPoint && (Document.prototype.caretRangeFromPoint = function (...options) {
        return handleDom(caretRangeFromPoint.call(this, ...options));
    });
    const getElementById = Document.prototype.getElementById;
    const querySelector = Document.prototype.querySelector;
    const querySelectorAll = Document.prototype.querySelectorAll;
    const getElementsByClassName = Document.prototype.getElementsByClassName;
    const getElementsByTagName = Document.prototype.getElementsByTagName;
    const getElementsByName = Document.prototype.getElementsByName;
    Document.prototype.getElementById = function (selectors) {
        const appName = consumption();
        if (appName) {
            const miniRootDom = getAppFromInstance(appName)?.container;
            const ele = miniRootDom?.querySelector(`#${selectors}`);
            return handleDom(ele, appName); // 已经消费过唯一标识，需要手动传递标识
        }
        return getElementById.call(this, selectors);
    };
    Document.prototype.querySelector = function (selectors) {
        const appName = consumption();
        if (appName) {
            const miniRootDom = getAppFromInstance(appName)?.container;
            const ele = miniRootDom?.querySelector(handleSelectors(selectors));
            return handleDom(ele, appName); // 已经消费过唯一标识，需要手动传递标识
        }
        return querySelector.call(this, selectors);
    };
    Document.prototype.querySelectorAll = function (selectors) {
        const appName = consumption();
        if (appName) {
            const miniRootDom = getAppFromInstance(appName)?.container;
            const eles = miniRootDom?.querySelectorAll(handleSelectors(selectors));
            Array.from(eles).forEach((ele) => {
                handleDom(ele, appName); // 已经消费过唯一标识，需要手动传递标识
            });
            return eles;
        }
        return querySelectorAll.call(this, selectors);
    };
    Document.prototype.getElementsByClassName = function (selectors) {
        const appName = consumption();
        if (appName) {
            const miniRootDom = getAppFromInstance(appName)?.container;
            const eles = miniRootDom?.getElementsByClassName(selectors);
            Array.from(eles).forEach((ele) => {
                handleDom(ele, appName); // 已经消费过唯一标识，需要手动传递标识
            });
            return eles;
        }
        return getElementsByClassName.call(this, selectors);
    };
    Document.prototype.getElementsByTagName = function (selectors) {
        const appName = consumption();
        if (appName) {
            const miniRootDom = getAppFromInstance(appName)?.container;
            const eles = miniRootDom?.getElementsByTagName(handleSelectors(selectors));
            Array.from(eles).forEach((ele) => {
                handleDom(ele, appName); // 已经消费过唯一标识，需要手动传递标识
            });
            return eles;
        }
        return getElementsByTagName.call(this, selectors);
    };
    Document.prototype.getElementsByName = function (name) {
        const appName = consumption();
        if (appName) {
            const miniRootDom = getAppFromInstance(appName)?.container;
            const eles = miniRootDom?.querySelectorAll(`[name=${name}]`);
            Array.from(eles).forEach((ele) => {
                handleDom(ele, appName); // 已经消费过唯一标识，需要手动传递标识
            });
            return eles;
        }
        return getElementsByName.call(this, name);
    };
}

/* eslint-disable no-use-before-define */
function encodeState(data, appName, options) {
    const app = getAppFromInstance(appName);
    const index = getStateIndex(appName) + 1;
    // todo origin
    const { flushed = false, origin = app?.state?.origin } = options ?? {};
    const allAppState = getAllAppState();
    return {
        ...allAppState,
        [appName]: {
            data,
            index,
            origin,
            flushed
        }
    };
}
function decodeState(appName) {
    const state = history.state;
    if (state?.[appName]) {
        return state[appName];
    }
}
function getAllAppState() {
    const state = {
        isMustard: 'MustardApp',
        [MainMustardApp]: undefined
    };
    getAllApp().forEach(name => {
        if (decodeState(name)) {
            state[name] = decodeState(name);
        }
    });
    return state;
}
function getStateIndex(appName) {
    return decodeState(appName)?.index ?? 0;
}
function initState(appName, state, unused, url) {
    let preState = history.state;
    if (!isMustardState(preState)) {
        preState = {
            isMustard: 'MustardApp',
            [MainMustardApp]: preState
        };
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    history.replaceState({
        ...preState,
        [appName]: {
            index: 0,
            origin: url
        }
    }, unused, undefined, true);
}
function navigateTo(appName, type, flushed) {
    const navigateToMehtods = function (_state, _unused, _url) {
        return history[type].call(history, _state, _unused, _url, true);
    };
    const pathKey = getLocationNameByAppName(appName);
    return function (_state, _unused, _url) {
        const app = getAppFromInstance(appName);
        const preState = decodeState(appName);
        if (!_url) {
            // 不刷新
            return navigateToMehtods(encodeState(_state, appName, {
                flushed: type === 'replaceState' ? preState?.flushed : flushed
            }), _unused);
        }
        // 处理_url：相对地址->绝对地址
        const url = new URL(isURL(_url) ? _url.href : _url, app.url);
        const state = encodeState(_state, appName, {
            flushed: type === 'replaceState' ? preState?.flushed : flushed,
            origin: !flushed ? app.state.origin : url.href // 不刷新页面 使用当前 app.state.origin，否则使用跳转的地址做文档来源
        });
        const { pathname: pathnameFromLocation, search: searchFromLocation = '', hash: hashFromLocation } = location;
        const searchFromLocationParams = new URLSearchParams(searchFromLocation);
        searchFromLocationParams.set(pathKey, encodeURIComponent(url.href)); // 设置app对应的地址
        const searchParams = searchFromLocationParams.toString();
        app.state = state[appName];
        return navigateToMehtods(state, _unused, `${pathnameFromLocation}${searchParams ? '?' + searchParams : ''}${hashFromLocation}`);
    };
}
function proxyHistory(appName) {
    return new Proxy(history, {
        get(target, key) {
            if (key === 'pushState') {
                return navigateTo(appName, 'pushState');
            }
            else if (key === 'replaceState') {
                return navigateTo(appName, 'replaceState');
            }
            else if (key === 'state') {
                return decodeState(appName)?.data;
            }
            else if (isFunction(target[key])) {
                return target[key].bind(history);
            }
            return target[key];
        }
    });
}
// 修改全局history方法
function changeHistoryPropety() {
    const pushState = History.prototype.pushState;
    const replaceState = History.prototype.replaceState;
    function changeState(type) {
        const methodState = type === 'pushState' ? pushState : replaceState;
        return function (_state, _unused, _url, _isMustard) {
            if (_isMustard) {
                return methodState.call(this, _state, _unused, _url);
            }
            else {
                const allAppState = getAllAppState();
                return methodState.call(this, { ...allAppState, [MainMustardApp]: _state }, _unused, _url);
            }
        };
    }
    History.prototype.pushState = changeState('pushState');
    History.prototype.replaceState = changeState('replaceState');
}

/**
 * 创建子应用的location
 */
function createLocation(appName) {
    const assign = navigateTo(appName, 'pushState', true);
    const replace = navigateTo(appName, 'replaceState', true);
    class Location extends URL {
        assign(url) {
            const app = getAppFromInstance(appName);
            assign('', '', url);
            app && app.reload();
        }
        reload() {
            const app = getAppFromInstance(appName);
            app && app.reload();
        }
        replace(url) {
            const app = getAppFromInstance(appName);
            replace('', '', url);
            app && app.reload();
        }
        toString() {
            return this.href;
        }
    }
    return (path, base) => {
        return (base ? new Location('' + path, base) : new Location('' + path));
    };
}
function proxyLocation(appName, url) {
    const _createLocation = createLocation(appName);
    const _location = _createLocation(getPath(appName), url);
    return new Proxy(_location, {
        get(target, key) {
            target.href = getURL(appName, url).href;
            return target[key];
        },
        set(target, key, value) {
            target.href = getURL(appName, url).href;
            const result = target[key] = value;
            target.assign(target.href);
            return result;
        }
    });
}

function proxyStorage(appName, _storage) {
    const nullObject = JSON.stringify(Object.create(null));
    const getItem = _storage.getItem.bind(_storage);
    const setItem = _storage.setItem.bind(_storage);
    const removeItem = _storage.removeItem.bind(_storage);
    const app = getAppFromInstance(appName);
    const origin = new URL(app.url)?.origin;
    function _getAllItem() {
        return JSON.parse(getItem(origin) ?? nullObject);
    }
    function _getItem(key) {
        return _getAllItem()[key];
    }
    function _setItem(value) {
        return setItem(origin, JSON.stringify(value));
    }
    class Storage {
        constructor() {
            const data = _getAllItem();
            Reflect.ownKeys(data).forEach((key) => {
                this[key] = data[key];
            });
        }
        get length() {
            const data = _getAllItem();
            return Reflect.ownKeys(data)?.length;
        }
        clear() {
            Reflect.ownKeys(this).forEach(key => {
                Reflect.deleteProperty(this, key);
            });
            removeItem(origin);
        }
        getItem(key) {
            return _getItem(key);
        }
        setItem(key, value) {
            const data = _getAllItem();
            this[key] = data[key] = value?.toString?.();
            return _setItem(data);
        }
        removeItem(key) {
            const data = _getAllItem();
            Reflect.deleteProperty(this, key);
            const result = Reflect.deleteProperty(data, key);
            _setItem(data);
            return result;
        }
        key(index) {
            const data = _getAllItem();
            return Reflect.ownKeys(data)[index];
        }
    }
    const storage = new Storage();
    return new Proxy(storage, {
        get(target, key) {
            if (key === 'length') {
                return target.length;
            }
            else if (['clear', 'getItem', 'setItem', 'removeItem', 'key'].includes(key)) {
                return target[key].bind(target);
            }
            else {
                return _getItem(key);
            }
        },
        set(target, key, value) {
            if (key === 'length')
                return value;
            return target.setItem(key, value);
        },
        ownKeys() {
            const data = _getAllItem();
            return Reflect.ownKeys(data);
        },
        deleteProperty(target, key) {
            return target.removeItem(key);
        }
    });
}
function proxyLocalStorage(appName) {
    return proxyStorage(appName, localStorage);
}
function proxySessionStorage(appName) {
    return proxyStorage(appName, sessionStorage);
}

class SandBox {
    active = false; // 沙箱是否在运行
    microWindow = {}; // 代理的对象
    injectedKeys = new Set(); // 新添加的属性，在卸载时清空
    name; // 沙箱标识同app标识一致
    proxyEventListener; // 全局事件代理
    proxyWindow; // window 代理
    proxyDocument; // document 代理
    proxyHistory; // history 代理
    proxyLocation; // location 代理
    proxyLocalStorage; // localStorage 代理
    proxySessionStorage; // sessionStorage 代理
    microApp; // 事件通讯
    // todo
    // url: MustardURL
    constructor(name, url) {
        this.name = name;
        this.proxyLocation = proxyLocation(this.name, url);
        this.proxyHistory = proxyHistory(this.name);
        this.proxyLocalStorage = proxyLocalStorage(this.name);
        this.proxySessionStorage = proxySessionStorage(this.name);
        this.proxyDocument = proxyDocument(this.name);
        this.proxyEventListener = new ProxyEventListener();
        this.microApp = new EventCenterMicroApp(this.name);
        this.proxyWindow = new Proxy(this.microWindow, {
            // 取值
            get: (target, key) => {
                // 优先从代理对象上取值
                if (Reflect.has(target, key)) {
                    return Reflect.get(target, key);
                }
                if (key === 'document') {
                    return this.proxyDocument;
                }
                if (key === 'addEventListener') {
                    return this.proxyEventListener.addEventListener.bind(this.proxyEventListener);
                }
                if (key === 'history') {
                    return this.proxyHistory;
                }
                if (key === 'location') {
                    return this.proxyLocation;
                }
                if (key === 'localStorage') {
                    return this.proxyLocalStorage;
                }
                if (key === 'sessionStorage') {
                    return this.proxySessionStorage;
                }
                if (key === 'microApp') {
                    return this.microApp;
                }
                // 否则兜底到window对象上取值
                const rawValue = Reflect.get(window, key);
                // 如果兜底的值为函数，则需要绑定window对象，如：console、alert等
                if (typeof rawValue === 'function') {
                    const valueStr = rawValue.toString();
                    // 排除构造函数
                    if (!/^function\s+[A-Z]/.test(valueStr) && !/^class\s+/.test(valueStr)) {
                        return rawValue.bind(window);
                    }
                }
                // 其它情况直接返回
                return rawValue;
            },
            // 设置变量
            set: (target, key, value) => {
                // 沙箱只有在运行时可以设置变量
                if (this.active) {
                    Reflect.set(target, key, value);
                    // 记录添加的变量，用于后续清空操作
                    this.injectedKeys.add(key);
                }
                return true;
            },
            deleteProperty: (target, key) => {
                // 当前key存在于代理对象上时才满足删除条件
                if (Object.prototype.hasOwnProperty.call(target, key)) {
                    return Reflect.deleteProperty(target, key);
                }
                return true;
            },
            has(target, key) {
                return key in target || key in window;
            }
        });
    }
    start() {
        if (!this.active) {
            this.active = true;
        }
    }
    stop() {
        if (this.active) {
            this.microApp.clearDateListener();
            this.active = false;
            Array.from(this.injectedKeys.keys()).forEach(key => Reflect.deleteProperty(this.microWindow, key));
            this.injectedKeys.clear();
            this.proxyEventListener.clear();
        }
    }
    // 修改js作用域
    bindScope(code) {
        return `
            ;(function(window, self){
                const microApp = window.microApp;
                const history = window.history;
                const location = window.location;
                const document = window.document;
                const localStorage = window.localStorage;
                const sessionStorage = window.sessionStorage;
                const addEventListener = window.addEventListener;
                ${code}\n;
            }).call(
                mustardAppInfos.getAppProxyWindow('${this.name}'),
                mustardAppInfos.getAppProxyWindow('${this.name}'),
                mustardAppInfos.getAppProxyWindow('${this.name}'),
            )
        `;
    }
}

// Unique ID creation requires a high quality random # generator. In the browser we therefore
// require the crypto API and do not support built-in fallback to lower quality random number
// generators (like Math.random()).
let getRandomValues;
const rnds8 = new Uint8Array(16);
function rng() {
  // lazy load so that environments that need to polyfill have a chance to do so
  if (!getRandomValues) {
    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);

    if (!getRandomValues) {
      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
    }
  }

  return getRandomValues(rnds8);
}

/**
 * Convert array of 16 byte values to UUID string format of the form:
 * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
 */

const byteToHex = [];

for (let i = 0; i < 256; ++i) {
  byteToHex.push((i + 0x100).toString(16).slice(1));
}

function unsafeStringify(arr, offset = 0) {
  // Note: Be careful editing this code!  It's been tuned for performance
  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
}

const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
var native = {
  randomUUID
};

function v4(options, buf, offset) {
  if (native.randomUUID && !buf && !options) {
    return native.randomUUID();
  }

  options = options || {};
  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`

  rnds[6] = rnds[6] & 0x0f | 0x40;
  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided

  if (buf) {
    offset = offset || 0;

    for (let i = 0; i < 16; ++i) {
      buf[offset + i] = rnds[i];
    }

    return buf;
  }

  return unsafeStringify(rnds);
}

// 请求link
function fetchLinkFormHtml(app, htmlDom) {
    const head = htmlDom.querySelector('mustard-app-head');
    const linkEntries = Array.from(app.source.links.entries());
    // 通过fetch请求所有css资源
    const fetchLinkPromise = [];
    for (const [url, info] of linkEntries) {
        fetchLinkPromise.push(info.isExternal ?
            fetchSource(url, app.url) :
            Promise.resolve(info.code));
    }
    Promise.all(fetchLinkPromise).then(res => {
        res.forEach(code => {
            const styleEle = document.createElement('style');
            styleEle.textContent = code;
            // 处理css，加上前缀 mustard-app[name='${appName}']
            scopedCSS(styleEle, app.name);
            head && head.appendChild(styleEle);
        });
        app.onLoad(htmlDom);
    }).catch(error => app.error(error));
}
function fetchScriptFormHtml(app, htmlDom) {
    const scriptEntries = Array.from(app.source.scripts.entries());
    // 通过fetch请求所有css资源
    const fetchPromise = [];
    for (const [url, info] of scriptEntries) {
        fetchPromise.push(info.isExternal ?
            fetchSource(url, app.url) :
            Promise.resolve(info.code));
    }
    Promise.all(fetchPromise).then(res => {
        res.forEach((code, i) => {
            // 将代码放入缓存，再次渲染时可以从缓存中获取
            scriptEntries[i][1].code = code;
        });
        app.onLoad(htmlDom);
    }).catch(error => app.error(error));
}
/**
 * 递归并处理dom
 * 收集静态的样式和js
 * 处理远程资源 e.g img,video,audio
 * @param parent
 * @param app
 */
function extractSourceDom(parent, app) {
    const children = Array.from(parent.children);
    children?.length && children.forEach(child => extractSourceDom(child, app));
    for (const dom of children) {
        // const attrs = dom.getAttributeNames();
        // attrs.forEach(attr => {
        //     // 处理dom上直接绑定的事件
        //     if(/^on[a-zA_Z]+/.test(attr)){
        //         const time = attr +  v4();
        //         app.source.domClick +=  `
        //             this.${time} = function(){
        //                 ${dom.getAttribute(attr)}}\n;
        //             `;               
        //         dom.setAttribute(attr,`proxyWindow.${time}()`);
        //     }
        // });
        // link 记录并收集，并提取src
        if (dom instanceof HTMLLinkElement) {
            const href = dom.getAttribute('href');
            if (dom.getAttribute('rel') === 'stylesheet' && href) {
                app.source.links.set(href, {
                    code: '',
                    isExternal: true
                });
            }
            parent.removeChild(dom);
        }
        else if (dom instanceof HTMLStyleElement) {
            // style 记录并收集，并提取code
            app.source.links.set(v4(), {
                code: dom.textContent ?? ''
            });
            parent.removeChild(dom);
        }
        else if (dom instanceof HTMLScriptElement) {
            // script 记录并收集，并提取code
            const src = dom.getAttribute('src');
            // 远程js
            if (src) {
                app.source.scripts.set(src, {
                    code: '',
                    isExternal: true // 是否远程js
                });
            }
            else {
                app.source.scripts.set(v4(), {
                    code: dom.textContent ?? ''
                });
            }
            parent.removeChild(dom);
        }
        else if (isRemotezElement(dom)) {
            // 远程资源相对地址处理
            const src = dom.getAttribute('src');
            if (isRelativePath(src)) {
                dom.setAttribute('src', getCompletePath(src, app.url));
            }
        }
    }
}
function loadHtml(app) {
    fetchSource(app.url).then(html => {
        html = html
            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, match => match.replace(/<head/i, '<mustard-app-head').replace(/<\/head>/i, '</mustard-app-head>')).replace(/<body[^>]*>[\s\S]*?<\/body>/i, match => match.replace(/<body/i, '<mustard-app-body').replace(/<\/body>/i, '</mustard-app-body>'));
        // htmlText -> Dom
        const Box = document.createElement('div');
        Box.innerHTML = html;
        // 提取静态js和link，处理style
        extractSourceDom(Box, app);
        if (app.source.links.size) {
            fetchLinkFormHtml(app, Box);
        }
        else {
            app.onLoad(Box);
        }
        if (app.source.scripts.size) {
            fetchScriptFormHtml(app, Box);
        }
        else {
            app.onLoad(Box);
        }
    }).catch(error => app.error(error));
}

function errorLog(e) {
    const message = e instanceof Error ? e.message : e;
    console.error(message);
}
function log(...args) {
    // eslint-disable-next-line no-console
    console.log(...args);
}

class App {
    baseUrl;
    url;
    name;
    container;
    sandbox;
    loadCount = 0;
    status = IAppStatus.create;
    state; // document 来源
    microLifeCenter; // 生命周期通讯
    // 存放动态资源
    source = {
        links: new Map(), // 存放links
        scripts: new Map(), // 存放scripts
        domClick: '\n;' // 存放 dom attrs 上的事件
    };
    constructor({ name, url: baseUrl, container }) {
        this.name = name;
        this.baseUrl = baseUrl;
        this.container = container;
        this.microLifeCenter = new EventCenterMicorLife(this.name);
        this.init();
    }
    // 刷新 卸载->初始化
    reload() {
        this.unmount(true);
        this.init();
    }
    // 初始化
    init() {
        this.status = IAppStatus.create;
        this.microLifeCenter.dispatchLife(this.status);
        // 初始化立刻存入 mustardAppInfos.appInstanceMap
        addInstance(this.name, this);
        this.loadCount = 0;
        // 设置资源的真正地址
        this.url = getURL(this.name, this.baseUrl).href;
        this.source = {
            links: new Map(), // 存放links
            scripts: new Map(), // 存放scripts
            domClick: '\n;' // 存放 dom attrs 上的事件
        };
        // 刷新页面时，为了保证 document.origin 正确，默认取history
        this.state = decodeState(this.name);
        if (!this.state) {
            initState(this.name, '', '', this.url);
            this.state = decodeState(this.name);
        }
        this.status = IAppStatus.loading;
        this.microLifeCenter.dispatchLife(this.status);
        // 加载对应的资源
        loadHtml(this);
        // 初始化砂箱
        this.sandbox = new SandBox(this.name, this.url);
    }
    // 资源加载完时执行
    onLoad(htmlDom) {
        this.loadCount += 1;
        // 第二次执行且组件未卸载时执行渲染
        if (this.loadCount === 2 && this.status !== IAppStatus.unmount) {
            // 执行mount方法
            this.mount(htmlDom);
        }
    }
    /**
     * 资源加载完成后进行渲染
     */
    mount(html) {
        this.sandbox.start();
        // 克隆DOM节点
        const cloneHtml = html.cloneNode(true);
        // 创建一个fragment节点作为模版，这样不会产生冗余的元素
        const fragment = document.createDocumentFragment();
        Array.from(cloneHtml.childNodes).forEach((node) => {
            fragment.appendChild(node);
        });
        // 将格式化后的DOM结构插入到容器中
        this.container.appendChild(fragment);
        // 执行js
        let scripts = '';
        this.source.scripts.forEach((info) => {
            scripts += info.code + '\n;';
        });
        {
            (0, eval)(this.sandbox.bindScope(scripts + '\n;' + this.source.domClick));
        }
        // 标记应用为已渲染
        this.status = IAppStatus.mount;
        this.microLifeCenter.dispatchLife(this.status);
    }
    /**
     * 卸载应用
     * 执行关闭沙箱，清空缓存等操作
     * @param destory 是否销毁应用
     */
    unmount(destory) {
        this.sandbox.stop(); // 暂停沙箱
        this.status = IAppStatus.unmount;
        this.microLifeCenter.dispatchLife(this.status);
        if (destory) {
            this.destory();
        }
    }
    /**
     * 销毁应用
     */
    destory() {
        this.sandbox = null;
        this.container.innerHTML = '';
        this.status = IAppStatus.destory;
        this.microLifeCenter.dispatchLife(this.status);
        removeInstance(this.name);
    }
    /**
     * 子应用加载失败
     * @param error 失败原因
     */
    error(error) {
        errorLog(error);
        this.status = IAppStatus.error;
        this.microLifeCenter.dispatchLife(this.status);
        this.microLifeCenter = null;
    }
}

// 监听实时地址与对应的子应用url不匹配问题
function addEventListenerUrl(callback) {
    window.addEventListener('popstate', callback);
    return function () {
        window.removeEventListener('popstate', callback);
    };
}
function checkUrl(name) {
    const app = getAppFromInstance(name); // 路由history改变前的实例
    const previousState = app.state; // history 切换前的 state
    const currentState = decodeState(name); // history 切换后的 state
    if (currentState && previousState) {
        if (currentState.origin !== previousState.origin) {
            log(`${name}: 域名不一致: ${previousState.origin}->${currentState.origin}`);
            return app.reload();
        }
        else if (currentState.index < previousState.index && previousState.flushed) {
            log(`${name}: history后退: ${previousState.origin}->${currentState.origin}`);
            return app.reload();
        }
        else if (currentState.index > previousState.index && currentState.flushed) {
            log(`${name}: history前进: ${previousState.origin}->${currentState.origin}`);
            return app.reload();
        }
    }
    // else{
    //     const origin = currentState?.origin || previousState?.origin;
    //     if(getURL(name, app.baseUrl)?.href !== origin) {
    //         log('checkUrl-one', name, getURL(name, app.baseUrl)?.href, origin);
    //         return app.reload();
    //     }
    // }
    app.state = decodeState(name); // 更新后自动刷新state
}

const eventCenter = new EventCenterBaseApp();
const rawSetAttribute = HTMLElement.prototype.setAttribute;
const rawAddEventListener = HTMLElement.prototype.addEventListener;
const rawRemoveEventListener = HTMLElement.prototype.removeEventListener;
class MustardApp extends HTMLElement {
    url = ''; // 子应用资源地址
    name = ''; // 子应用标识
    // keepAlive:boolean = true; // dom移除是否保活
    checkUrlStop; // URL 校验关闭
    static get observedAttributes() {
        return ['name', 'url'];
    }
    constructor() {
        super();
    }
    // 组件刷新
    reload() {
        const app = getAppFromInstance(this.name);
        if (app) {
            app.reload();
        }
    }
    // 子应用添加至页面
    connectedCallback() {
        if (!appIsExist(this.name) && this.url) {
            nextTick(() => {
                new App({
                    url: this.url,
                    name: this.name,
                    container: this
                });
            });
        }
        // 开启URL校验
        this.checkUrlStop = addEventListenerUrl(() => {
            checkUrl(this.name);
        });
    }
    // 子应用从页面中移除
    disconnectedCallback() {
        // 关闭URL校验
        this.checkUrlStop?.();
        // getAppFromInstance(this.name)?.unmount(true);
    }
    // 子应用移动至新页面。
    adoptedCallback() { }
    /**
     * 属性变化
     * @param name 属性名
     * @param oldValue 属性旧值
     * @param newValue 属性新值
     */
    attributeChangedCallback(name, oldValue, newValue) {
        if (!this.name && name === 'name') {
            if (newValue === MainMustardApp) {
                throw new Error('子应用标识非法');
            }
            if (appIsExist(name)) {
                throw new Error(`子应用标识已存在: ${name}`);
            }
            else {
                this.name = newValue;
            }
        }
        else if (!this.url && name === 'url') {
            this.url = newValue;
        }
    }
    setAttribute(key, value) {
        if (/^mustard-app/i.test(this.tagName) && key === 'data') {
            // 发送数据
            eventCenter.dispatch(this.name, value);
        }
        else {
            rawSetAttribute.call(this, key, value);
        }
    }
    addEventListener(type, listener, options) {
        if (isFunction(listener)) {
            if (type === 'dataChange') {
                eventCenter.onData(this.name, listener);
            }
            else if (isIAppStatusKey(type)) {
                eventCenter.onLife(this.name, type, listener);
            }
            else {
                rawAddEventListener.call(this, type, listener, options);
            }
        }
    }