@module-federation/bridge-vue3 0.0.0-next-20240822090000 → 0.0.0-next-20240822101913

package/CHANGELOG.md

@@ -1,11 +1,25 @@
 # @module-federation/bridge-vue3
 
-## 0.0.0-next-20240822090000
+## 0.0.0-next-20240822101913
 
 ### Patch Changes
 
 - 3082116: feat: support module isolated reported
-  - @module-federation/bridge-shared@0.0.0-next-20240822090000
+  - @module-federation/bridge-shared@0.0.0-next-20240822101913
+
+## 0.5.1
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.5.1
+
+## 0.5.0
+
+### Patch Changes
+
+- 49d6135: feat(@module-federation/bridge): enhance Bridge capabilities and fix some issues
+- Updated dependencies [49d6135]
+  - @module-federation/bridge-shared@0.5.0
 
 ## 0.4.0
 

package/dist/index.cjs.js

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),p=require("vue-router");function b(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const e=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(o,n,e.get?e:{enumerable:!0,get:()=>t[n]})}}return o.default=t,Object.freeze(o)}const h=b(u),d=b(p);var y=Object.defineProperty,v=(t,o,n)=>o in t?y(t,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[o]=n,i=(t,o,n)=>(v(t,typeof o!="symbol"?o+"":o,n),n);class f{constructor(o){i(this,"name"),i(this,"isDebugEnabled"),i(this,"color"),this.name=o,this.isDebugEnabled=!1,this.color=this.stringToColor(o),typeof window<"u"&&typeof localStorage<"u"&&(this.isDebugEnabled=localStorage.getItem("debug")==="true"),typeof process<"u"&&process.env&&(this.isDebugEnabled=process.env.DEBUG==="true")}log(...o){var n,e;if(this.isDebugEnabled){const r=`color: ${this.color}; font-weight: bold`,m=`%c[${this.name}]`,s=((e=(n=new Error().stack)==null?void 0:n.split(`
+`)[2])==null?void 0:e.trim())||"Stack information not available";typeof console<"u"&&console.debug&&console.debug(m,r,...o,`
+ (${s})`)}}stringToColor(o){let n=0;for(let r=0;r<o.length;r++)n=o.charCodeAt(r)+((n<<5)-n);let e="#";for(let r=0;r<3;r++){const m=n>>r*8&255;e+=("00"+m.toString(16)).substr(-2)}return e}}function R(){const t=new PopStateEvent("popstate",{state:window.history.state});window.dispatchEvent(t)}const c=new f("vue3-bridge");function C(t){let o;const n=new Map;return()=>(o||(o={__APP_VERSION__:"0.5.1",render(e){c.log("createBridgeComponent render Info",e);const r=h.createApp(t.rootComponent);n.set(e.dom,r);const m=t.appOptions({basename:e.basename,memoryRoute:e.memoryRoute}),s=e.memoryRoute?d.createMemoryHistory(e.basename):d.createWebHistory(e.basename),a=d.createRouter({...m.router.options,history:s,routes:m.router.getRoutes()});c.log("createBridgeComponent render router info>>>",{name:e.moduleName,router:a}),e.memoryRoute?a.push(e.memoryRoute.entryPath).then(()=>{r.use(a),r.mount(e.dom)}):(r.use(a),r.mount(e.dom))},destroy(e){c.log("createBridgeComponent destroy Info",e);const r=n.get(e==null?void 0:e.dom);r==null||r.unmount()}}),o)}const _=u.defineComponent({name:"RemoteApp",props:{moduleName:String,basename:String,memoryRoute:Object,providerInfo:Function},setup(t){const o=u.ref(null),n=u.ref(null),e=u.ref(""),r=p.useRoute(),m=()=>{var g;const a=(g=t.providerInfo)==null?void 0:g.call(t);n.value=a;const l={name:t.moduleName,dom:o.value,basename:t.basename,memoryRoute:t.memoryRoute};c.log("createRemoteComponent LazyComponent render >>>",l),a.render(l)},s=u.watch(()=>r.path,a=>{a!==r.path&&m(),e.value!==""&&e.value!==a&&(c.log("createRemoteComponent dispatchPopstateEnv >>>",{...t,pathname:r.path}),R()),e.value=a});return u.onMounted(()=>{m()}),u.onBeforeUnmount(()=>{var a;c.log("createRemoteComponent LazyComponent destroy >>>",{...t}),s(),(a=n.value)==null||a.destroy({dom:o.value})}),()=>u.createVNode("div",{ref:o},null)}});function w(t){return u.defineAsyncComponent({__APP_VERSION__:"0.5.1",loader:async()=>{var l;const o=p.useRoute();let n="/";const e=(l=o.matched[0])==null?void 0:l.path;e&&(e.endsWith("/:pathMatch(.*)*")?n=e.replace("/:pathMatch(.*)*",""):n=o.matched[0].path);const r=(t==null?void 0:t.export)||"default";c.log("createRemoteComponent LazyComponent create >>>",{basename:n,info:t});const m=await t.loader(),s=m&&m[Symbol.for("mf_module_id")],a=m[r];if(c.log("createRemoteComponent LazyComponent loadRemote info >>>",{name:s,module:m,exportName:r,basename:n,route:o}),r in m&&typeof a=="function")return{render(){return u.h(_,{moduleName:s,...t,providerInfo:a,basename:n})}};throw new Error("module not found")},loadingComponent:{template:"<div>Loading...</div>"},errorComponent:{template:"<div>Error loading component</div>"},delay:200,timeout:3e3})}exports.createBridgeComponent=C;exports.createRemoteComponent=w;

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPublicInstance } from 'vue';
+
+export declare function createBridgeComponent(bridgeInfo: any): () => Provider;
+
+export declare function createRemoteComponent(info: {
+    loader: () => Promise<any>;
+    export?: string;
+}): new () => ComponentPublicInstance;
+
+declare type Provider = {
+    __APP_VERSION__: string;
+    render(info: RenderFnParams): void;
+    destroy(info: {
+        dom: HTMLElement;
+    }): void;
+};
+
+declare interface ProviderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+    };
+    style?: React.CSSProperties;
+    className?: string;
+}
+
+export declare interface RenderFnParams extends ProviderParams {
+    dom: HTMLElement;
+}
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,152 @@
+import * as h from "vue";
+import { defineComponent as y, ref as c, watch as b, onMounted as v, onBeforeUnmount as R, createVNode as f, defineAsyncComponent as C, h as w } from "vue";
+import * as d from "vue-router";
+import { useRoute as g } from "vue-router";
+var E = Object.defineProperty, _ = (t, o, r) => o in t ? E(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r, p = (t, o, r) => (_(t, typeof o != "symbol" ? o + "" : o, r), r);
+class S {
+  constructor(o) {
+    p(this, "name"), p(this, "isDebugEnabled"), p(this, "color"), this.name = o, this.isDebugEnabled = !1, this.color = this.stringToColor(o), typeof window < "u" && typeof localStorage < "u" && (this.isDebugEnabled = localStorage.getItem("debug") === "true"), typeof process < "u" && process.env && (this.isDebugEnabled = process.env.DEBUG === "true");
+  }
+  log(...o) {
+    var r, e;
+    if (this.isDebugEnabled) {
+      const n = `color: ${this.color}; font-weight: bold`, m = `%c[${this.name}]`, s = ((e = (r = new Error().stack) == null ? void 0 : r.split(`
+`)[2]) == null ? void 0 : e.trim()) || "Stack information not available";
+      typeof console < "u" && console.debug && console.debug(m, n, ...o, `
+ (${s})`);
+    }
+  }
+  stringToColor(o) {
+    let r = 0;
+    for (let n = 0; n < o.length; n++)
+      r = o.charCodeAt(n) + ((r << 5) - r);
+    let e = "#";
+    for (let n = 0; n < 3; n++) {
+      const m = r >> n * 8 & 255;
+      e += ("00" + m.toString(16)).substr(-2);
+    }
+    return e;
+  }
+}
+function I() {
+  const t = new PopStateEvent("popstate", { state: window.history.state });
+  window.dispatchEvent(t);
+}
+const u = new S("vue3-bridge");
+function B(t) {
+  let o;
+  const r = /* @__PURE__ */ new Map();
+  return () => (o || (o = {
+    __APP_VERSION__: "0.5.1",
+    render(e) {
+      u.log("createBridgeComponent render Info", e);
+      const n = h.createApp(t.rootComponent);
+      r.set(e.dom, n);
+      const m = t.appOptions({
+        basename: e.basename,
+        memoryRoute: e.memoryRoute
+      }), s = e.memoryRoute ? d.createMemoryHistory(e.basename) : d.createWebHistory(e.basename), a = d.createRouter({
+        ...m.router.options,
+        history: s,
+        routes: m.router.getRoutes()
+      });
+      u.log("createBridgeComponent render router info>>>", {
+        name: e.moduleName,
+        router: a
+      }), e.memoryRoute ? a.push(e.memoryRoute.entryPath).then(() => {
+        n.use(a), n.mount(e.dom);
+      }) : (n.use(a), n.mount(e.dom));
+    },
+    destroy(e) {
+      u.log("createBridgeComponent destroy Info", e);
+      const n = r.get(e == null ? void 0 : e.dom);
+      n == null || n.unmount();
+    }
+  }), o);
+}
+const N = /* @__PURE__ */ y({
+  name: "RemoteApp",
+  props: {
+    moduleName: String,
+    basename: String,
+    memoryRoute: Object,
+    providerInfo: Function
+  },
+  setup(t) {
+    const o = c(null), r = c(null), e = c(""), n = g(), m = () => {
+      var i;
+      const a = (i = t.providerInfo) == null ? void 0 : i.call(t);
+      r.value = a;
+      const l = {
+        name: t.moduleName,
+        dom: o.value,
+        basename: t.basename,
+        memoryRoute: t.memoryRoute
+      };
+      u.log("createRemoteComponent LazyComponent render >>>", l), a.render(l);
+    }, s = b(() => n.path, (a) => {
+      a !== n.path && m(), e.value !== "" && e.value !== a && (u.log("createRemoteComponent dispatchPopstateEnv >>>", {
+        ...t,
+        pathname: n.path
+      }), I()), e.value = a;
+    });
+    return v(() => {
+      m();
+    }), R(() => {
+      var a;
+      u.log("createRemoteComponent LazyComponent destroy >>>", {
+        ...t
+      }), s(), (a = r.value) == null || a.destroy({
+        dom: o.value
+      });
+    }), () => f("div", {
+      ref: o
+    }, null);
+  }
+});
+function D(t) {
+  return C({
+    __APP_VERSION__: "0.5.1",
+    //@ts-ignore
+    loader: async () => {
+      var l;
+      const o = g();
+      let r = "/";
+      const e = (l = o.matched[0]) == null ? void 0 : l.path;
+      e && (e.endsWith("/:pathMatch(.*)*") ? r = e.replace("/:pathMatch(.*)*", "") : r = o.matched[0].path);
+      const n = (t == null ? void 0 : t.export) || "default";
+      u.log("createRemoteComponent LazyComponent create >>>", {
+        basename: r,
+        info: t
+      });
+      const m = await t.loader(), s = m && m[Symbol.for("mf_module_id")], a = m[n];
+      if (u.log(
+        "createRemoteComponent LazyComponent loadRemote info >>>",
+        { name: s, module: m, exportName: n, basename: r, route: o }
+      ), n in m && typeof a == "function")
+        return {
+          render() {
+            return w(N, {
+              moduleName: s,
+              ...t,
+              providerInfo: a,
+              basename: r
+            });
+          }
+        };
+      throw new Error("module not found");
+    },
+    loadingComponent: {
+      template: "<div>Loading...</div>"
+    },
+    errorComponent: {
+      template: "<div>Error loading component</div>"
+    },
+    delay: 200,
+    timeout: 3e3
+  });
+}
+export {
+  B as createBridgeComponent,
+  D as createRemoteComponent
+};

package/package.json

@@ -1,20 +1,32 @@
 {
   "name": "@module-federation/bridge-vue3",
   "author": "zhouxiao <codingzx@gmail.com>",
-  "version": "0.0.0-next-20240822090000",
+  "version": "0.0.0-next-20240822101913",
   "publishConfig": {
     "access": "public"
   },
   "type": "module",
-  "main": "./dist/index.umd.js",
+  "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/",
+    "CHANGELOG.md",
+    "LICENSE",
+    "package.json",
+    "project.json",
+    "README.md",
+    "tsconfig.json",
+    "tsconfig.node.json",
+    "vite.config.ts"
+  ],
   "peerDependencies": {
     "vue": "=3",
     "vue-router": "=3"
   },
   "dependencies": {
-    "@module-federation/bridge-shared": "0.0.0-next-20240822090000"
+    "@module-federation/bridge-shared": "0.0.0-next-20240822101913"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/provider.ts

@@ -4,11 +4,11 @@ import { RenderFnParams } from '@module-federation/bridge-shared';
 import { LoggerInstance } from './utils';
 
 declare const __APP_VERSION__: string;
-interface Provider {
+type Provider = {
   __APP_VERSION__: string;
   render(info: RenderFnParams): void;
   destroy(info: { dom: HTMLElement }): void;
-}
+};
 
 export function createBridgeComponent(bridgeInfo: any) {
   let provider: Provider;
@@ -36,7 +36,7 @@ export function createBridgeComponent(bridgeInfo: any) {
           });
 
           LoggerInstance.log(`createBridgeComponent render router info>>>`, {
-            name: info.name,
+            name: info.moduleName,
             router,
           });
           // memory route Initializes the route