yataozhang / my-single-spa Goto Github PK

module.export = function (api) {
    // 缓存babel的配置
    api.cache(true); // 等同于api.cache.forever()
    return {
        presets: [
            ['@babel/preset-env', {module: false}]
        ],
        plugins: ['@babel/plugin-syntax-dynamic-import']
    };
};

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import serve from 'rollup-plugin-serve';

export default {
    input: './src/my-single-spa.js',
    output: {
        file: './lib/umd/my-single-spa.js',
        format: 'umd',
        name: 'mySingleSpa',
        sourcemap: true
    },
    plugins: [
        resolve(),
        commonjs(),
        babel({exclude: 'node_modules/**'}),
        // 见下方的package.json文件script字段中的serve命令
        // 目的是只有执行serve命令时才启动这个插件
        process.env.SERVE ? serve({
            open: true,
            contentBase: '',
            openPage: '/toutrial/index.html',
            host: 'localhost',
            port: '10001'
        }) : null
    ]
}

// app1
export default {
    // app启动
    bootstrap: [() => Promise.resolve()],
    // app挂载
    mount: [() => Promise.resolve()],
    // app卸载
    unmount: [() => Promise.resolve()],
    // service更新，只有service才可用
    update: [() => Promise.resolve()]
}

export function smellLikeAPromise(promise) {
    if (promise instanceof Promise) {
        return true;
    }
    return typeof promise === 'object' && promise.then === 'function' && promise.catch === 'function';
}

export function flattenLifecyclesArray(lifecycles, description) {
    if (Array.isArray(lifecycles)) {
        lifecycles = [lifecycles]
    }
    if (lifecycles.length === 0) {
        lifecycles = [() => Promise.resolve()];
    }
    // 处理lifecycles
    return props => new Promise((resolve, reject) => {
        waitForPromise(0);

        function waitForPromise(index) {
            let fn = lifecycles[index](props);
            if (!smellLikeAPromise(fn)) {
                reject(`${description} at index ${index} did not return a promise`);
                return;
            }
            fn.then(() => {
                if (index >= lifecycles.length - 1) {
                    resolve();
                } else {
                    waitForPromise(++index);
                }
            }).catch(reject);
        }
    });
}

// 示例
app.bootstrap = [
    () => Promise.resolve(),
    () => Promise.resolve(),
    () => Promise.resolve()
];
app.bootstrap = flattenLifecyclesArray(app.bootstrap);

// flattenedLifecyclesPromise为经过上一步flatten处理过的生命周期函数
export function reasonableTime(flattenedLifecyclesPromise, description, timeout) {
    return new Promise((resolve, reject) => {
        let finished = false;
        flattenedLifecyclesPromise.then((data) => {
            finished = true;
            resolve(data)
        }).catch(e => {
            finished = true;
            reject(e);
        });

        setTimeout(() => {
            if (finished) {
                return;
            }
            let error = `${description} did not resolve or reject for ${timeout.milliseconds} milliseconds`;
            if (timeout.rejectWhenTimeout) {
                reject(new Error(error));
            } else {
                console.log(`${error} but still waiting for fulfilled or unfulfilled`);
            }
        }, timeout.milliseconds);
    });
}

// 示例
reasonableTime(app.bootstrap(props), 'app bootstraping', {rejectWhenTimeout: false, milliseconds: 3000})
    .then(() => {
        console.log('app 启动成功了');
        console.log(app.status === 'NOT_MOUNTED'); // => true
    })
    .catch(e => {
        console.error(e);
        console.log('app启动失败');
        console.log(app.status === 'SKIP_BECAUSE_BROKEN'); // => true
    });

const HIJACK_EVENTS_NAME = /^(hashchange|popstate)$/i;
const EVENTS_POOL = {
    hashchange: [],
    popstate: []
};

function reroute() {
    // invoke主要用来load、mount、unmout满足条件的app
    // 具体条件请看文章上方app状态小节中的"load、mount、unmount条件"
    invoke([], arguments)
}

window.addEventListener('hashchange', reroute);
window.addEventListener('popstate', reroute);

const originalAddEventListener = window.addEventListener;
const originalRemoveEventListener = window.removeEventListener;
window.addEventListener = function (eventName, handler) {
    if (eventName && HIJACK_EVENTS_NAME.test(eventName) && typeof handler === 'function') {
        EVENTS_POOL[eventName].indexOf(handler) === -1 && EVENTS_POOL[eventName].push(handler);
    }
    return originalAddEventListener.apply(this, arguments);
};
window.removeEventListener = function (eventName, handler) {
    if (eventName && HIJACK_EVENTS_NAME.test(eventName)) {
        let eventsList = EVENTS_POOL[eventName];
        eventsList.indexOf(handler) > -1 && (EVENTS_POOL[eventName] = eventsList.filter(fn => fn !== handler));
    }
    return originalRemoveEventListener.apply(this, arguments);
};

function mockPopStateEvent(state) {
    return new PopStateEvent('popstate', {state});
}

// 拦截history的方法，因为pushState和replaceState方法并不会触发onpopstate事件，所以我们即便在onpopstate时执行了reroute方法，也要在这里执行下reroute方法。
const originalPushState = window.history.pushState;
const originalReplaceState = window.history.replaceState;
window.history.pushState = function (state, title, url) {
    let result = originalPushState.apply(this, arguments);
    reroute(mockPopStateEvent(state));
    return result;
};
window.history.replaceState = function (state, title, url) {
    let result = originalReplaceState.apply(this, arguments);
    reroute(mockPopStateEvent(state));
    return result;
};

// 再执行完load、mount、unmout操作后，执行此函数，就可以保证微前端的逻辑总是第一个执行。然后App中的Vue或React相关Router就可以收到Location的事件了。
export function callCapturedEvents(eventArgs) {
    if (!eventArgs) {
        return;
    }
    if (!Array.isArray(eventArgs)) {
        eventArgs = [eventArgs];
    }
    let name = eventArgs[0].type;
    if (!HIJACK_EVENTS_NAME.test(name)) {
        return;
    }
    EVENTS_POOL[name].forEach(handler => handler.apply(window, eventArgs));
}

function finish() {
    // 获取成功mount的app
    let resolveValue = getMountedApps();
    
    // pendings是上一次循环进行时存储的一批changesQueue的别名
    // 其实就是下方调用invoke方法的backup变量
    if (pendings) {
        pendings.forEach(item => item.success(resolveValue));
    }
    // 标记循环已结束
    loadAppsUnderway = false;
    // 发现changesQueue的长度不为0
    if (pendingPromises.length) {
        const backup = pendingPromises;
        pendingPromises = [];
        // 将『修改队列』传入invoke方法，并开启下一次循环
        return invoke(backup);
    }
    
    // changesQueue为空，终止循环，返回已mount的app
    return resolveValue;
}