@module-federation/bridge-vue3 - npm Package Compare versions

Comparing version 0.0.0-next-20240822101913 to 0.0.0-next-20240823062237

CHANGELOG.md

 # @module-federation/bridge-vue3
 
-## 0.0.0-next-20240822101913
+## 0.0.0-next-20240823062237
 
 ### Patch Changes
 
-- 3082116: feat: support module isolated reported
-  - @module-federation/bridge-shared@0.0.0-next-20240822101913
+- @module-federation/bridge-shared@0.0.0-next-20240823062237
 
@@ -10,0 +9,0 @@ ## 0.5.1

dist/index.cjs.js

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

dist/index.d.ts

 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 = {
+export declare function createBridgeComponent(bridgeInfo: any): () => {
     __APP_VERSION__: string;
@@ -18,2 +11,7 @@ render(info: RenderFnParams): void;
 
+export declare function createRemoteComponent(info: {
+    loader: () => Promise<any>;
+    export?: string;
+}): new () => ComponentPublicInstance;
+
 declare interface ProviderParams {
@@ -20,0 +18,0 @@ moduleName?: string;

dist/index.es.js

 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 { defineComponent as y, ref as l, 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);
+var E = Object.defineProperty, _ = (t, o, e) => o in t ? E(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e, p = (t, o, e) => (_(t, typeof o != "symbol" ? o + "" : o, e), e);
 class S {
@@ -11,7 +11,7 @@ constructor(o) {
   log(...o) {
-    var r, e;
+    var e, n;
     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, `
+      const r = `color: ${this.color}; font-weight: bold`, a = `%c[${this.name}]`, s = ((n = (e = new Error().stack) == null ? void 0 : e.split(`
+`)[2]) == null ? void 0 : n.trim()) || "Stack information not available";
+      typeof console < "u" && console.debug && console.debug(a, r, ...o, `
  (${s})`);
@@ -21,11 +21,11 @@ }
   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);
+    let e = 0;
+    for (let r = 0; r < o.length; r++)
+      e = o.charCodeAt(r) + ((e << 5) - e);
+    let n = "#";
+    for (let r = 0; r < 3; r++) {
+      const a = e >> r * 8 & 255;
+      n += ("00" + a.toString(16)).substr(-2);
     }
-    return e;
+    return n;
   }
@@ -39,5 +39,4 @@ }
 function B(t) {
-  let o;
-  const r = /* @__PURE__ */ new Map();
-  return () => (o || (o = {
+  const o = /* @__PURE__ */ new Map();
+  return () => ({
     __APP_VERSION__: "0.5.1",
@@ -47,24 +46,24 @@ render(e) {
       const n = h.createApp(t.rootComponent);
-      r.set(e.dom, n);
-      const m = t.appOptions({
+      o.set(e.dom, n);
+      const r = 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()
+      }), a = e.memoryRoute ? d.createMemoryHistory(e.basename) : d.createWebHistory(e.basename), s = d.createRouter({
+        ...r.router.options,
+        history: a,
+        routes: r.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));
+        router: s
+      }), e.memoryRoute ? s.push(e.memoryRoute.entryPath).then(() => {
+        n.use(s), n.mount(e.dom);
+      }) : (n.use(s), n.mount(e.dom));
     },
     destroy(e) {
       u.log("createBridgeComponent destroy Info", e);
-      const n = r.get(e == null ? void 0 : e.dom);
+      const n = o.get(e == null ? void 0 : e.dom);
       n == null || n.unmount();
     }
-  }), o);
+  });
 }
@@ -80,7 +79,7 @@ const N = /* @__PURE__ */ y({
   setup(t) {
-    const o = c(null), r = c(null), e = c(""), n = g(), m = () => {
+    const o = l(null), e = l(null), n = l(""), r = g(), a = () => {
       var i;
-      const a = (i = t.providerInfo) == null ? void 0 : i.call(t);
-      r.value = a;
-      const l = {
+      const m = (i = t.providerInfo) == null ? void 0 : i.call(t);
+      e.value = m;
+      const c = {
         name: t.moduleName,
@@ -91,16 +90,16 @@ dom: o.value,
       };
-      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 >>>", {
+      u.log("createRemoteComponent LazyComponent render >>>", c), m.render(c);
+    }, s = b(() => r.path, (m) => {
+      m !== r.path && a(), n.value !== "" && n.value !== m && (u.log("createRemoteComponent dispatchPopstateEnv >>>", {
         ...t,
-        pathname: n.path
-      }), I()), e.value = a;
+        pathname: r.path
+      }), I()), n.value = m;
     });
     return v(() => {
-      m();
+      a();
     }), R(() => {
-      var a;
+      var m;
       u.log("createRemoteComponent LazyComponent destroy >>>", {
         ...t
-      }), s(), (a = r.value) == null || a.destroy({
+      }), s(), (m = e.value) == null || m.destroy({
         dom: o.value
@@ -118,17 +117,17 @@ });
     loader: async () => {
-      var l;
+      var c;
       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";
+      let e = "/";
+      const n = (c = o.matched[0]) == null ? void 0 : c.path;
+      n && (n.endsWith("/:pathMatch(.*)*") ? e = n.replace("/:pathMatch(.*)*", "") : e = o.matched[0].path);
+      const r = (t == null ? void 0 : t.export) || "default";
       u.log("createRemoteComponent LazyComponent create >>>", {
-        basename: r,
+        basename: e,
         info: t
       });
-      const m = await t.loader(), s = m && m[Symbol.for("mf_module_id")], a = m[n];
+      const a = await t.loader(), s = a && a[Symbol.for("mf_module_id")], m = a[r];
       if (u.log(
         "createRemoteComponent LazyComponent loadRemote info >>>",
-        { name: s, module: m, exportName: n, basename: r, route: o }
-      ), n in m && typeof a == "function")
+        { name: s, module: a, exportName: r, basename: e, route: o }
+      ), r in a && typeof m == "function")
         return {
@@ -139,4 +138,4 @@ render() {
               ...t,
-              providerInfo: a,
-              basename: r
+              providerInfo: m,
+              basename: e
             });
@@ -143,0 +142,0 @@ }

package.json

 {
   "name": "@module-federation/bridge-vue3",
   "author": "zhouxiao <[e-mail]>",
-  "version": "0.0.0-next-20240822101913",
+  "version": "0.0.0-next-20240823062237",
   "publishConfig": {
@@ -29,3 +29,3 @@ "access": "public"
   "dependencies": {
-    "@module-federation/bridge-shared": "0.0.0-next-20240822101913"
+    "@module-federation/bridge-shared": "0.0.0-next-20240823062237"
   },
@@ -32,0 +32,0 @@ "devDependencies": {

src/provider.ts

@@ -7,57 +7,48 @@ import * as Vue from 'vue';
 declare const __APP_VERSION__: string;
-type Provider = {
-  __APP_VERSION__: string;
-  render(info: RenderFnParams): void;
-  destroy(info: { dom: HTMLElement }): void;
-};
 
 export function createBridgeComponent(bridgeInfo: any) {
-  let provider: Provider;
   const rootMap = new Map();
   return () => {
-    if (!provider) {
-      provider = {
-        __APP_VERSION__,
-        render(info: RenderFnParams) {
-          LoggerInstance.log(`createBridgeComponent render Info`, info);
-          const app = Vue.createApp(bridgeInfo.rootComponent);
-          rootMap.set(info.dom, app);
-          const appOptions = bridgeInfo.appOptions({
-            basename: info.basename,
-            memoryRoute: info.memoryRoute,
-          });
+    return {
+      __APP_VERSION__,
+      render(info: RenderFnParams) {
+        LoggerInstance.log(`createBridgeComponent render Info`, info);
+        const app = Vue.createApp(bridgeInfo.rootComponent);
+        rootMap.set(info.dom, app);
+        const appOptions = bridgeInfo.appOptions({
+          basename: info.basename,
+          memoryRoute: info.memoryRoute,
+        });
 
-          const history = info.memoryRoute
-            ? VueRouter.createMemoryHistory(info.basename)
-            : VueRouter.createWebHistory(info.basename);
-          const router = VueRouter.createRouter({
-            ...appOptions.router.options,
-            history,
-            routes: appOptions.router.getRoutes(),
-          });
+        const history = info.memoryRoute
+          ? VueRouter.createMemoryHistory(info.basename)
+          : VueRouter.createWebHistory(info.basename);
+        const router = VueRouter.createRouter({
+          ...appOptions.router.options,
+          history,
+          routes: appOptions.router.getRoutes(),
+        });
 
-          LoggerInstance.log(`createBridgeComponent render router info>>>`, {
-            name: info.moduleName,
-            router,
-          });
-          // memory route Initializes the route
-          if (info.memoryRoute) {
-            router.push(info.memoryRoute.entryPath).then(() => {
-              app.use(router);
-              app.mount(info.dom);
-            });
-          } else {
+        LoggerInstance.log(`createBridgeComponent render router info>>>`, {
+          name: info.moduleName,
+          router,
+        });
+        // memory route Initializes the route
+        if (info.memoryRoute) {
+          router.push(info.memoryRoute.entryPath).then(() => {
             app.use(router);
             app.mount(info.dom);
-          }
-        },
-        destroy(info: { dom: HTMLElement }) {
-          LoggerInstance.log(`createBridgeComponent destroy Info`, info);
-          const root = rootMap.get(info?.dom);
-          root?.unmount();
-        },
-      };
-    }
-    return provider;
+          });
+        } else {
+          app.use(router);
+          app.mount(info.dom);
+        }
+      },
+      destroy(info: { dom: HTMLElement }) {
+        LoggerInstance.log(`createBridgeComponent destroy Info`, info);
+        const root = rootMap.get(info?.dom);
+        root?.unmount();
+      },
+    };
   };
 }

No alert changes

Worsened metrics

Total package byte prevSize

26203

decreased by-1.56%

Lines of code

534

decreased by-2.02%

Dependency changes

• + Added@module-federation/bridge-shared@0.0.0-next-20240823062237(transitive)

• - Removed@module-federation/bridge-shared@0.0.0-next-20240822101913(transitive)

• Updated@module-federation/bridge-shared@0.0.0-next-20240823062237