@songcf/micro-web-project-npm 1.0.0

package/const/mainLifeCycle.js

@@ -0,0 +1,5 @@
+let lifeCycle = {}
+
+export const getMainLifeCycle = () => lifeCycle
+
+export const setMainLifeCycle = (data) => lifeCycle = data

package/const/subApps.js

@@ -0,0 +1,5 @@
+let list = []
+
+export const getList = () => list
+
+export const setList = (appList) => list = appList

package/event/index.js

@@ -0,0 +1,17 @@
+
+export class Custom {
+  constructor() { }
+
+  on(eventName, cb) {
+    window.addEventListener(eventName, function (e) {
+      cb(e.detail)
+    })
+  }
+
+  emit(eventName, data) {
+    const event = new CustomEvent(eventName, {
+      detail: data
+    })
+    window.dispatchEvent(event);
+  }
+}

package/index.js

@@ -0,0 +1,2 @@
+export { registerMicroApps, start } from './start';
+export { createStore } from './store'

package/lifeCycle/index.js

@@ -0,0 +1,54 @@
+import { findAppByRoute } from '../utils/index'
+import { getMainLifeCycle } from '../const/mainLifeCycle'
+import { loadHtml } from '../loader/htmlLoader'
+
+// 执行主应用生命周期
+export const runMainLifeCycle = async (type, app) => {
+  const mainLief = getMainLifeCycle()
+  await Promise.all(mainLief[type].map(async fn => await fn(app)))
+}
+
+// 装载应用
+export const bootstrap = async (app) => {
+  await runMainLifeCycle('beforeLoad', app);
+  // console.log(app)
+  await loadHtml(app)
+
+  app && await app.bootstrap()
+
+  // return subApp
+}
+
+// 渲染应用
+export const mount = async (app) => {
+  app && app.mount && await app.mount(app)
+  await runMainLifeCycle('mounted', app);
+}
+
+// 卸载
+export const unmount = async (app) => {
+  app && app.unmount && await app.unmount(app);
+  await runMainLifeCycle('destroyed', app);
+}
+
+export const lifeCycle = async () => {
+  // 获取上一个子应用
+  const prevApp = findAppByRoute(window.window.__ORIGIN_APP__)
+
+  // 获取下一个要跳转到的子应用
+  const nextApp = findAppByRoute(window.__CURRENT_SUB_APP__)
+
+  // console.log(prevApp, nextApp)
+
+  if (!nextApp) {
+    return
+  }
+
+  if (prevApp) {
+    await unmount(prevApp)
+  }
+
+  await bootstrap(nextApp)
+
+  await mount(nextApp)
+}

package/loader/htmlLoader.js

@@ -0,0 +1,94 @@
+import { fetchResource } from '../utils/fetchResource'
+import { sandbox } from '../sandbox/sandbox'
+// import { performScriptForEval } from '../sandbox/performScript'
+
+const cache = {};
+
+export const loadHtml = async (app) => {
+  let { container: containerName, entry, name } = app;
+  const [dom, scriptsArray] = await parseHtml(entry, name)
+
+  const container = document.querySelector(containerName);
+  if (!container) {
+    console.log(app)
+    throw Error(`${ name } 的容器不存在，请查看是否正确指定`)
+  }
+  container.innerHTML = dom;
+  scriptsArray.map((item) => {
+    sandbox(item, name)
+    // performScriptForEval(item)
+  })
+
+  // return app
+}
+
+export const parseHtml = async (entry, appName) => {
+  if (cache[appName]) {
+    return cache[appName];
+  }
+  const html = await fetchResource(entry);
+
+  let scriptsArray = []
+  const div = document.createElement('div')
+  div.innerHTML = html;
+
+  const [elements, scriptUrl, script] = await getResources(div, entry)
+
+  // console.log(elements, scriptUrl, script)
+  const fetchedScripts = await Promise.all(scriptUrl.map(async url => await fetchResource(url)))
+
+  scriptsArray = script.concat(fetchedScripts)
+  // console.log(fetchedScripts, elements, script)
+  cache[appName] = [elements, scriptsArray];
+
+  return [elements, scriptsArray]
+}
+
+export const getResources = async (root, entry) => {
+  const scriptUrl = [];
+  const script = [];
+  const div = root.outerHTML
+
+  // 深度解析
+  function deepParse(element) {
+    const children = element.children
+    const parent = element.parent;
+
+    // 处理位于 script 中的资源
+    if (element.nodeName.toLowerCase() === 'script') {
+      const src = element.getAttribute('src')
+      if (!src) {
+        script.push(element.outerHTML)
+      } else {
+        if (src.startsWith('http')) {
+          scriptUrl.push(src)
+        } else {
+          scriptUrl.push(`http:${ entry }/${ src }`)
+        }
+      }
+
+      if (parent) {
+        parent.replaceChild(document.createComment('此 js 文件已经被微前端替换'), element)
+      }
+    }
+
+    if (element.nodeName.toLowerCase() === 'link') {
+      const href = element.getAttribute('href')
+
+      if (href.endsWith('.js')) {
+        if (href.startsWith('http')) {
+          scriptUrl.push(href)
+        } else {
+          scriptUrl.push(`http:${ entry }/${ href }`)
+        }
+      }
+    }
+
+    for (let i = 0; i < children.length; i++) {
+      deepParse(children[i])
+    }
+  }
+
+  deepParse(root)
+  return [div, scriptUrl, script]
+}

package/loader/prefetch.js

@@ -0,0 +1,10 @@
+import { parseHtml } from './htmlLoader';
+import { getList } from '../const/subApps';
+
+export const prefetch = async () => {
+  // 获取其余子应用
+  const appPieces = getList().filter(item => !window.location.pathname.startsWith(item.activeRule));
+
+  // 加载所有子应用
+  await Promise.all(appPieces.map(async app => await parseHtml(app.entry, app.name)))
+};

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@songcf/micro-web-project-npm",
+  "version": "1.0.0",
+  "description": "这是实验的微前端框架，请勿要投入生产环境使用，请谨慎使用",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "micro-web-fe"
+  ],
+  "author": "songcf",
+  "license": "ISC"
+}

package/router/rewriteRouter.js

@@ -0,0 +1,15 @@
+import { patchRouter } from '../utils/index'
+import { turnApp } from './routerHandle'
+
+// 重写window的路由跳转
+export const rewriteRouter = () => {
+  window.history.pushState = patchRouter(window.history.pushState, 'micro_push')
+  window.history.replaceState = patchRouter(window.history.replaceState, 'micro_replace')
+
+  window.addEventListener('micro_push', turnApp)
+  window.addEventListener('micro_replace', turnApp)
+
+  window.onpopstate = function () {
+    turnApp()
+  }
+}

package/router/routerHandle.js

@@ -0,0 +1,9 @@
+import { isTurnChild } from '../utils/index'
+import { lifeCycle } from '../lifeCycle/index'
+
+export const turnApp = async () => {
+  if (isTurnChild()) {
+    console.log('路由改变了')
+    await lifeCycle()
+  }
+}

package/sandbox/performScript.js

@@ -0,0 +1,37 @@
+
+
+// 执行应用中的 js 内容 new Function 篇
+export const performScript = (script, appName, global) => {
+  window.proxy = global
+  const scriptText = `
+    return ((window) => {
+      try{
+        ${ script }
+      } catch (e) {
+        console.error('run script error: ' + e)
+      }
+      return window['${ appName }']
+    })(window.proxy)
+  `
+
+  return new Function(scriptText)()
+}
+
+// 执行应用中的 js 内容 eval篇
+export const performScriptForEval = (script, appName, global) => {
+  const globalWindow = (0, eval)(window)
+  globalWindow.proxy = global;
+  // console.log('===---', eval(script), window[appName])
+  const scriptText = `
+    ((window) => {
+      try{
+        ${ script }
+      } catch (e) {
+        console.error('run script error: ' + e)
+      }
+      return window['${ appName }']
+    }).bind(window.proxy)(window.proxy)
+  `
+  return eval(scriptText)// app module mount
+
+}

package/sandbox/proxySandBox.js

@@ -0,0 +1,30 @@
+let defaultValue = {}
+
+// 代理沙箱
+export class ProxySandBox {
+  constructor() {
+    this.active()
+  }
+
+  active() {
+    this.proxy = new Proxy(window, {
+      set(target, name, value) {
+        defaultValue[name] = value;
+        return true;
+      },
+
+      get(target, name) {
+        if (typeof target[name] === 'function' && /^[a-z]/.test(name)) {
+          return target[name].bind && target[name].bind(target);
+        } else {
+          return defaultValue[name] || target[name];
+        }
+      }
+    });
+  }
+
+  inactive() {
+    defaultValue = {}
+    console.log('关闭沙箱');
+  }
+}

package/sandbox/sandbox.js

@@ -0,0 +1,45 @@
+import { findAppByName } from '../utils/index'
+import { ProxySandBox } from './proxySandBox';
+import { performScriptForEval } from './performScript'
+import { SnapShotSandBox } from './snapshotSandBox'
+
+// 检测是否漏掉了生命周期方法
+export const lackOfLifecycle = (lifecycles) => !lifecycles ||
+  !lifecycles.bootstrap ||
+  !lifecycles.mount ||
+  !lifecycles.unmount;
+
+// 创建沙箱环境
+export const sandbox = (script, appName) => {
+
+
+  // 获取当前子应用
+  const app = findAppByName(appName);
+
+  // 创建沙箱环境
+  const global = new ProxySandBox();
+  // 快照沙箱
+  // const proxy = new SnapShotSandBox()
+  // if (!app.proxy) {
+  //   app.proxy = proxy;
+  // }
+
+  // 设置微前端环境
+  window.__MICRO_WEB__ = true;
+
+  // 获取子应用生命周期
+  const lifeCycles = performScriptForEval(script, appName, global.proxy);
+
+  app.sandBox = global;
+
+  // 检查子应用是否包含必须的方法
+  const isLack = lackOfLifecycle(lifeCycles)
+  if (isLack) {
+    return;
+  }
+
+  app.bootstrap = lifeCycles.bootstrap;
+  app.mount = lifeCycles.mount;
+  app.unmount = lifeCycles.unmount;
+
+}

package/sandbox/snapshotSandBox.js

@@ -0,0 +1,22 @@
+// 快照沙箱
+
+export class SnapShotSandBox {
+  constructor() {
+    this.proxy = window;
+    this.active()
+  }
+  active() {
+    this.snapshot = new Map()
+    for (const key in window) {
+      this.snapshot[key] = window[key]
+    }
+  }
+  inactive() {
+    console.log('VV3')
+    for (const key in window) {
+      if (window[key] !== this.snapshot[key]) {
+        window[key] = this.snapshot[key]
+      }
+    }
+  }
+}

package/start.js

@@ -0,0 +1,46 @@
+import { prefetch } from './loader/prefetch';
+import { getList, setList } from './const/subApps'
+import { setMainLifeCycle } from './const/mainLifeCycle'
+import { rewriteRouter } from './router/rewriteRouter'
+import { currentApp } from './utils/index'
+import { Custom } from './event/index'
+
+const custom = new Custom()
+
+custom.on('test', (data) => { console.log('test event', data) })
+
+window.custom = custom
+// 实现路由拦截
+rewriteRouter()
+
+export const registerMicroApps = (appList, lifeCycle) => {
+  // window.appList = appList
+  setList(appList)
+  setMainLifeCycle(lifeCycle)
+}
+
+// 启动微前端框架
+export const start = async () => {
+  // 首先验证子应用列表是否为空
+  const apps = getList()
+  if (!apps.length) {
+    throw new Error('子应用列表为空，请使用registerMicroApps注册子应用')
+  }
+
+  // 查找到符合当前路由的子应用
+  const app = currentApp()
+
+  if (app) {
+    const { pathname, hash } = window.location
+
+    const url = pathname + hash
+
+    window.history.pushState('', '', url)
+
+    // 将当前子应用做标记
+    window.__CURRENT_SUB_APP__ = app.activeRule
+  }
+
+  // 预加载
+  await prefetch();
+}

package/store/index.js

@@ -0,0 +1,25 @@
+
+export const createStore = (initData = {}) => (() => {
+  let store = initData
+  const observers = []
+
+  const getStore = () => store
+  const update = (newValue) => {
+    if (newValue !== store) {
+      let oldValue = store;
+      store = newValue;
+      // res(store);
+
+      observers.forEach(async fn => await fn(newValue, oldValue));
+    }
+  }
+  const subscribeStore = (observer) => {
+    observers.push(observer)
+  }
+
+  return {
+    getStore,
+    update,
+    subscribeStore
+  }
+})()

package/utils/fetchResource.js

@@ -0,0 +1 @@
+export const fetchResource = (url) => fetch(url).then(async res => await res.text())

package/utils/index.js

@@ -0,0 +1,67 @@
+import { getList } from "../const/subApps"
+
+// 为当前的路由跳转打补丁
+export const patchRouter = (globalEvent, eventName) => {
+  return function () {
+    const e = new Event(eventName)
+    globalEvent.apply(this, arguments)
+    window.dispatchEvent(e)
+  }
+}
+
+// 获取当前应用
+export const currentApp = () => {
+  const currentUrl = window.location.pathname;
+  return filterApp('activeRule', currentUrl)
+}
+
+// 根据 路由 查找子应用
+export const findAppByRoute = (router) => {
+  return filterApp('activeRule', router)
+}
+
+// 根据 name 查找子应用
+export const findAppByName = (name) => {
+  return filterApp('name', name);
+};
+
+function filterApp(key, value) {
+  const currentApp = getList().filter(app => app[key] === value)
+  // console.log(currentApp, '---')
+  return currentApp.length ? currentApp[0] : false
+}
+
+// 查看当前路由是否有变化
+export const isTurnChild = () => {
+  const { pathname, hash } = window.location
+  const url = pathname + hash
+  // console.log(url)
+
+  // 当前路由无改变。
+  const currentPrefix = url.match(/(\/\w+)/g)
+  // console.log('currentPrefix: ', currentPrefix)
+
+  if (
+    currentPrefix &&
+    (currentPrefix[0] === window.__CURRENT_SUB_APP__) &&
+    hash === window.__CURRENT_HASH__
+    // window.__CURRENT_SUB_APP__ === window.location.pathname
+  ) {
+    return false
+  }
+
+  window.__ORIGIN_APP__ = window.__CURRENT_SUB_APP__
+  const currentApp = window.location.pathname.match(/(\/\w+)/)
+  if (!currentApp) {
+    return
+  }
+
+  // 当前路由以改变，修改当前路由
+  window.__CURRENT_SUB_APP__ = currentApp[0]
+  // console.log(111, window.__ORIGIN_APP__, window.__CURRENT_SUB_APP__)
+
+  // 判断当前hash值是否改变
+  window.__CURRENT_HASH__ = hash
+
+  return true
+}