3.5.3

Author: mqhe2007

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-module-loader",
-  "version": "3.5.1",
+  "version": "3.5.3",
   "description": "Let you use the micro front-end architecture to build Vue applications.",
   "author": "mqhe2007 <[email protected]>",
   "homepage": "https://mengqinghe.com",

src/boot-module.ts

@@ -20,14 +20,13 @@ export default async function(
   moduleData: ModuleOptions,
   moduleHostUrl?: string
 ): Promise<void> {
-  const context: Context = window[Symbol.for("___VML_CONTEXT___")];
   let installReturn;
   try {
     console.log(`[vue-module-loader]: 模块「${moduleData.name}」开始加载...`);
     if (moduleHostUrl) {
       await loadStyle(moduleData, moduleHostUrl);
     }
-    installReturn = await moduleData.install(context);
+    installReturn = await moduleData.install(window[Symbol.for("___VML_CONTEXT___")]);
     console.log(`[vue-module-loader]: 模块「${moduleData.name}」加载完成。`);
     // 缓存模块卸载方法，记录已加载模块清单
     uninstallCache(moduleData.name, moduleData.uninstall);

src/create-context.ts

@@ -1,6 +1,14 @@
 import { Context } from "./interfaces";
 export function createContext(ctx: Context = {}): Context {
-  // 创建全局VML上下文对象
-  window[Symbol.for("___VML_CONTEXT___")] = ctx;
-  return window[Symbol.for("___VML_CONTEXT___")]
+  if (!window[Symbol.for("___VML_CONTEXT___")]) {
+    // 创建上下文对象
+    window[Symbol.for("___VML_CONTEXT___")] = ctx;
+  } else {
+    // 合并上下文对象
+    window[Symbol.for("___VML_CONTEXT___")] = Object.assign(
+      window[Symbol.for("___VML_CONTEXT___")],
+      ctx
+    );
+  }
+  return window[Symbol.for("___VML_CONTEXT___")];
 }

src/interfaces.ts

@@ -1,4 +1,12 @@
+import { App, CreateAppFunction } from "vue";
+
 export interface Context {
+  app?: App;
+  createApp?: CreateAppFunction<Element>;
+  http?: any;
+  moduleExpose?: {
+    [propName: string]: any;
+  };
   [propName: string]: any;
 }
 export interface ModuleUninstallerMap {

src/use-context.ts

@@ -6,22 +6,20 @@ import { createContext } from "./create-context";
  * @returns 根据key获取的上下文对象中的值
  */
 function useContext(key: string, instance: any): any {
-  if (!window[Symbol.for("___VML_CONTEXT___")]) {
-    createContext();
-  }
+  const context = createContext();
   if (instance) {
-    window[Symbol.for("___VML_CONTEXT___")][key] = instance;
+    context[key] = instance;
   }
   if (!key) {
-    return window[Symbol.for("___VML_CONTEXT___")];
+    return context;
   } else {
-    if (window[Symbol.for("___VML_CONTEXT___")][key] === undefined) {
-      window[Symbol.for("___VML_CONTEXT___")][key] = null;
+    if (context[key] === undefined) {
+      context[key] = null;
       console.warn(
         `[vue-module-loader]：上下文中不存在“${key}”，既然你要用，我先帮你占个坑（初始化为null）。`
       );
     }
-    return window[Symbol.for("___VML_CONTEXT___")][key];
+    return context[key];
   }
 }
 export { useContext };

src/use-module.ts

@@ -12,13 +12,13 @@ async function useModule(
 ): Promise<void>;
 async function useModule(moduleData: string, ctx?: Context): Promise<void>;
 async function useModule(moduleData: any, ctx?: Context): Promise<void> {
-  const existingContext =
-    window[Symbol.for("___VML_CONTEXT___")] || createContext(ctx);
+  const context = createContext(ctx);
+  // console.log('vml-debug2：', context);
   let bootResult;
   if (typeof moduleData === "object") {
     bootResult = await bootModule(moduleData);
   } else if (typeof moduleData === "string") {
-    if (!existingContext.Vue)
+    if (!context.Vue)
       throw new Error("[vue-module-loader]: 上下文对象缺少Vue对象");
     const res = await fetch(moduleData);
     const moduleString = await res.text();
@@ -27,13 +27,13 @@ async function useModule(moduleData: any, ctx?: Context): Promise<void> {
       "return function"
     );
     const moduleStringFun = Function(`return function(vue){${moduleCode}}`)();
-    const moduleDataFromUrl = moduleStringFun(existingContext.Vue);
+    const moduleDataFromUrl = moduleStringFun(context.Vue);
     bootResult = await bootModule(
       moduleDataFromUrl,
       moduleData.match(/\S*\//)[0]
     );
   }
-  return bootResult
+  return bootResult;
 }
 
 export { useModule };