@module-federation/bridge-vue3 0.6.12 → 0.6.14

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @module-federation/bridge-vue3
 
+## 0.6.14
+
+### Patch Changes
+
+- ad605d2: chore: unified logger
+- Updated dependencies [ad605d2]
+  - @module-federation/bridge-shared@0.6.14
+  - @module-federation/sdk@0.6.14
+
+## 0.6.13
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.6.13
+
 ## 0.6.12
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -1,3 +1,6 @@
-"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.6.12",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.6.12",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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),O=require("vue-router");function j(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const G=j(d),E=j(O);var $=Object.defineProperty,W=Object.getOwnPropertyDescriptor,U=Object.getOwnPropertyNames,T=Object.prototype.hasOwnProperty,k=(e,o)=>{for(var r in o)$(e,r,{get:o[r],enumerable:!0})},x=(e,o,r,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of U(o))!T.call(e,n)&&n!==r&&$(e,n,{get:()=>o[n],enumerable:!(t=W(o,n))||t.enumerable});return e},z=e=>x($({},"__esModule",{value:!0}),e),A={};k(A,{createLogger:()=>M,logger:()=>ne});var H=z(A),R=void 0,I=()=>{if(typeof R<"u")return R;try{console.log("%c","color:"),R=!0}catch{R=!1}return R},h={bold:"font-weight: bold;",red:"color: red;",green:"color: green;",yellow:"color: yellow;",magenta:"color: magenta;",cyan:"color: cyan;",gray:"color: gray;"},v=e=>I()?o=>{if(Array.isArray(o)){const[r,t]=o;return[`%c${r.replace("%c","")}`,t?`${h[e]}${t}`:`${h[e]||""}`]}return[`%c${String(o).replace("%c","")}`,h[e]||""]}:o=>[String(o)],q=v("bold"),J=v("red"),S=v("green"),K=v("yellow"),X=v("magenta"),L=v("cyan");v("gray");function Y(e,o,r){let t=[""];return"label"in o&&(t=[r[e]||o.label||""],t=q(o.color?o.color(t):t[0])),t=t.filter(Boolean),t}function Q(e,o,r,t){e.length?Array.isArray(t)?console.log(...e,...t):console.log(...e,o):Array.isArray(t)?console.log(...t):console.log(o,...r)}var P={error:0,warn:1,info:2,log:3,verbose:4},Z=/at\s.*:\d+:\d+[\s\)]*$/,ee=/at\s.*\(<anonymous>\)$/,oe=e=>Z.test(e)||ee.test(e),re=(e={},{getLabel:o,handleError:r,finalLog:t,greet:n,LOG_TYPES:c})=>{let l=e.level||"log",a=e.labels||{},m=(s,u,...F)=>{if(P[c[s].level]>P[l])return;if(u==null)return console.log();let C=c[s],b="";const V=o(s,C,a);if(u instanceof Error)if(u.stack){let[y,..._]=u.stack.split(`
+`);y.startsWith("Error: ")&&(y=y.slice(7)),b=`${y}
+${r(_.join(`
+`))}`}else b=u.message;else C.level==="error"&&typeof u=="string"?b=u.split(`
+`).map(_=>oe(_)?r(_):_).join(`
+`):b=`${u}`;t(V,b,F,u)},i={greet:s=>m("log",n(s))};return Object.keys(c).forEach(s=>{i[s]=(...u)=>m(s,...u)}),Object.defineProperty(i,"level",{get:()=>l,set(s){l=s}}),Object.defineProperty(i,"labels",{get:()=>a,set(s){a=s}}),i.override=s=>{Object.assign(i,s)},i},p=[189,255,243],w=[74,194,154],B=e=>!/[\s\n]/.test(e);function D(e){if(!I())return[e];const o=[...e],r=o.filter(B),t=r.length-1;if(t===0)return console.log(`%c${e}`,`color: rgb(${p.join(",")}); font-weight: bold;`),[e];let n="",c=[];return o.forEach(l=>{if(B(l)){const a=r.indexOf(l)/t,m=Math.round(p[0]+(w[0]-p[0])*a),i=Math.round(p[1]+(w[1]-p[1])*a),s=Math.round(p[2]+(w[2]-p[2])*a);n+=`%c${l}`,c.push(`color: rgb(${m},${i},${s}); font-weight: bold;`)}else n+=l}),[n,...c]}var te={error:{label:"error",level:"error",color:J},warn:{label:"warn",level:"warn",color:K},info:{label:"info",level:"info",color:L},start:{label:"start",level:"info",color:L},ready:{label:"ready",level:"info",color:S},success:{label:"success",level:"info",color:S},log:{level:"log"},debug:{label:"debug",level:"verbose",color:X}};function M(e={}){return re(e,{handleError:o=>o,getLabel:Y,gradient:D,finalLog:Q,LOG_TYPES:te,greet:o=>D(o)})}var ne=M();const ae="FEDERATION_DEBUG",le="1";function ce(){return typeof window<"u"}function se(){try{if(ce()&&window.localStorage)return localStorage.getItem(ae)===le}catch{return!1}return!1}function ue(){return typeof process<"u"&&process.env&&process.env.FEDERATION_DEBUG?!!process.env.FEDERATION_DEBUG:typeof FEDERATION_DEBUG<"u"&&FEDERATION_DEBUG?!0:se()}const f="[ Module Federation ]";function ie(e){ue()&&(e.level="verbose")}function de(e,o){e.labels={warn:`${o} Warn`,error:`${o} Error`,success:`${o} Success`,info:`${o} Info`,ready:`${o} Ready`,debug:`${o} Debug`}}function N(e){const o=H.createLogger({labels:{warn:`${f} Warn`,error:`${f} Error`,success:`${f} Success`,info:`${f} Info`,ready:`${f} Ready`,debug:`${f} Debug`}});return ie(o),de(o,e),o}N(f);const g=N("[ Module Federation Bridge Vue3 ]");function me(e){const o=new Map;return()=>({__APP_VERSION__:"0.6.14",render(r){g.log("createBridgeComponent render Info",r);const t=G.createApp(e.rootComponent);o.set(r.dom,t);const n=e.appOptions({basename:r.basename,memoryRoute:r.memoryRoute}),c=r.memoryRoute?E.createMemoryHistory(r.basename):E.createWebHistory(r.basename),l=E.createRouter({...n.router.options,history:c,routes:n.router.getRoutes()});g.log("createBridgeComponent render router info>>>",{name:r.moduleName,router:l}),r.memoryRoute?l.push(r.memoryRoute.entryPath).then(()=>{t.use(l),t.mount(r.dom)}):(t.use(l),t.mount(r.dom))},destroy(r){g.log("createBridgeComponent destroy Info",r);const t=o.get(r==null?void 0:r.dom);t==null||t.unmount()}})}function ge(){const e=new PopStateEvent("popstate",{state:window.history.state});window.dispatchEvent(e)}const pe=d.defineComponent({name:"RemoteApp",props:{moduleName:String,basename:String,memoryRoute:Object,providerInfo:Function},setup(e){const o=d.ref(null),r=d.ref(null),t=d.ref(""),n=O.useRoute(),c=()=>{var i;const a=(i=e.providerInfo)==null?void 0:i.call(e);r.value=a;const m={name:e.moduleName,dom:o.value,basename:e.basename,memoryRoute:e.memoryRoute};g.log("createRemoteComponent LazyComponent render >>>",m),a.render(m)},l=d.watch(()=>n.path,a=>{a!==n.path&&c(),t.value!==""&&t.value!==a&&(g.log("createRemoteComponent dispatchPopstateEnv >>>",{...e,pathname:n.path}),ge()),t.value=a});return d.onMounted(()=>{c()}),d.onBeforeUnmount(()=>{var a;g.log("createRemoteComponent LazyComponent destroy >>>",{...e}),l(),(a=r.value)==null||a.destroy({dom:o.value})}),()=>d.createVNode("div",{ref:o},null)}});function fe(e){return d.defineAsyncComponent({__APP_VERSION__:"0.6.14",loader:async()=>{var m;const o=O.useRoute();let r="/";const t=(m=o.matched[0])==null?void 0:m.path;t&&(t.endsWith("/:pathMatch(.*)*")?r=t.replace("/:pathMatch(.*)*",""):r=o.matched[0].path);const n=(e==null?void 0:e.export)||"default";g.log("createRemoteComponent LazyComponent create >>>",{basename:r,info:e});const c=await e.loader(),l=c&&c[Symbol.for("mf_module_id")],a=c[n];if(g.log("createRemoteComponent LazyComponent loadRemote info >>>",{name:l,module:c,exportName:n,basename:r,route:o}),n in c&&typeof a=="function")return{render(){return d.h(pe,{moduleName:l,...e,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})}exports.createBridgeComponent=me;exports.createRemoteComponent=fe;

package/dist/index.es.js

@@ -1,69 +1,251 @@
-import * as h 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, 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 {
-  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");
+import * as G from "vue";
+import { defineComponent as V, ref as R, watch as W, onMounted as U, onBeforeUnmount as x, createVNode as k, defineAsyncComponent as z, h as T } from "vue";
+import * as h from "vue-router";
+import { useRoute as B } from "vue-router";
+var O = Object.defineProperty, H = Object.getOwnPropertyDescriptor, J = Object.getOwnPropertyNames, K = Object.prototype.hasOwnProperty, X = (e, o) => {
+  for (var r in o)
+    O(e, r, { get: o[r], enumerable: !0 });
+}, Y = (e, o, r, t) => {
+  if (o && typeof o == "object" || typeof o == "function")
+    for (let n of J(o))
+      !K.call(e, n) && n !== r && O(e, n, { get: () => o[n], enumerable: !(t = H(o, n)) || t.enumerable });
+  return e;
+}, q = (e) => Y(O({}, "__esModule", { value: !0 }), e), I = {};
+X(I, {
+  createLogger: () => N,
+  logger: () => de
+});
+var Q = q(I), E = void 0, D = () => {
+  if (typeof E < "u")
+    return E;
+  try {
+    console.log("%c", "color:"), E = !0;
+  } catch {
+    E = !1;
   }
-  log(...o) {
-    var e, n;
-    if (this.isDebugEnabled) {
-      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})`);
-    }
+  return E;
+}, _ = {
+  bold: "font-weight: bold;",
+  red: "color: red;",
+  green: "color: green;",
+  yellow: "color: yellow;",
+  magenta: "color: magenta;",
+  cyan: "color: cyan;",
+  gray: "color: gray;"
+}, f = (e) => D() ? (o) => {
+  if (Array.isArray(o)) {
+    const [r, t] = o;
+    return [`%c${r.replace("%c", "")}`, t ? `${_[e]}${t}` : `${_[e] || ""}`];
   }
-  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 [`%c${String(o).replace("%c", "")}`, _[e] || ""];
+} : (o) => [String(o)], Z = f("bold"), ee = f("red"), C = f("green"), oe = f("yellow"), re = f("magenta"), L = f("cyan");
+f("gray");
+function te(e, o, r) {
+  let t = [""];
+  return "label" in o && (t = [r[e] || o.label || ""], t = Z(o.color ? o.color(t) : t[0])), t = t.filter(Boolean), t;
+}
+function ne(e, o, r, t) {
+  e.length ? Array.isArray(t) ? console.log(...e, ...t) : console.log(...e, o) : Array.isArray(t) ? console.log(...t) : console.log(o, ...r);
+}
+var P = {
+  error: 0,
+  warn: 1,
+  info: 2,
+  log: 3,
+  verbose: 4
+}, ae = /at\s.*:\d+:\d+[\s\)]*$/, le = /at\s.*\(<anonymous>\)$/, ce = (e) => ae.test(e) || le.test(e), se = (e = {}, { getLabel: o, handleError: r, finalLog: t, greet: n, LOG_TYPES: c }) => {
+  let l = e.level || "log", a = e.labels || {}, i = (s, u, ...j) => {
+    if (P[c[s].level] > P[l])
+      return;
+    if (u == null)
+      return console.log();
+    let $ = c[s], v = "";
+    const F = o(s, $, a);
+    if (u instanceof Error)
+      if (u.stack) {
+        let [y, ...b] = u.stack.split(`
+`);
+        y.startsWith("Error: ") && (y = y.slice(7)), v = `${y}
+${r(b.join(`
+`))}`;
+      } else
+        v = u.message;
+    else
+      $.level === "error" && typeof u == "string" ? v = u.split(`
+`).map((b) => ce(b) ? r(b) : b).join(`
+`) : v = `${u}`;
+    t(F, v, j, u);
+  }, d = {
+    // greet
+    greet: (s) => i("log", n(s))
+  };
+  return Object.keys(c).forEach((s) => {
+    d[s] = (...u) => i(s, ...u);
+  }), Object.defineProperty(d, "level", {
+    get: () => l,
+    set(s) {
+      l = s;
     }
-    return n;
+  }), Object.defineProperty(d, "labels", {
+    get: () => a,
+    set(s) {
+      a = s;
+    }
+  }), d.override = (s) => {
+    Object.assign(d, s);
+  }, d;
+}, g = [189, 255, 243], w = [74, 194, 154], S = (e) => !/[\s\n]/.test(e);
+function A(e) {
+  if (!D())
+    return [e];
+  const o = [...e], r = o.filter(S), t = r.length - 1;
+  if (t === 0)
+    return console.log(`%c${e}`, `color: rgb(${g.join(",")}); font-weight: bold;`), [e];
+  let n = "", c = [];
+  return o.forEach((l) => {
+    if (S(l)) {
+      const a = r.indexOf(l) / t, i = Math.round(g[0] + (w[0] - g[0]) * a), d = Math.round(g[1] + (w[1] - g[1]) * a), s = Math.round(g[2] + (w[2] - g[2]) * a);
+      n += `%c${l}`, c.push(`color: rgb(${i},${d},${s}); font-weight: bold;`);
+    } else
+      n += l;
+  }), [n, ...c];
+}
+var ue = {
+  // Level error
+  error: {
+    label: "error",
+    level: "error",
+    color: ee
+  },
+  // Level warn
+  warn: {
+    label: "warn",
+    level: "warn",
+    color: oe
+  },
+  // Level info
+  info: {
+    label: "info",
+    level: "info",
+    color: L
+  },
+  start: {
+    label: "start",
+    level: "info",
+    color: L
+  },
+  ready: {
+    label: "ready",
+    level: "info",
+    color: C
+  },
+  success: {
+    label: "success",
+    level: "info",
+    color: C
+  },
+  // Level log
+  log: {
+    level: "log"
+  },
+  // Level debug
+  debug: {
+    label: "debug",
+    level: "verbose",
+    color: re
+  }
+};
+function N(e = {}) {
+  return se(e, {
+    handleError: (o) => o,
+    getLabel: te,
+    gradient: A,
+    finalLog: ne,
+    LOG_TYPES: ue,
+    greet: (o) => A(o)
+  });
+}
+var de = N();
+const ie = "FEDERATION_DEBUG", me = "1";
+function ge() {
+  return typeof window < "u";
+}
+function pe() {
+  try {
+    if (ge() && window.localStorage)
+      return localStorage.getItem(ie) === me;
+  } catch {
+    return !1;
   }
+  return !1;
+}
+function fe() {
+  return typeof process < "u" && process.env && process.env.FEDERATION_DEBUG ? !!process.env.FEDERATION_DEBUG : typeof FEDERATION_DEBUG < "u" && FEDERATION_DEBUG ? !0 : pe();
+}
+const p = "[ Module Federation ]";
+function ve(e) {
+  fe() && (e.level = "verbose");
 }
-function I() {
-  const t = new PopStateEvent("popstate", { state: window.history.state });
-  window.dispatchEvent(t);
+function ye(e, o) {
+  e.labels = {
+    warn: `${o} Warn`,
+    error: `${o} Error`,
+    success: `${o} Success`,
+    info: `${o} Info`,
+    ready: `${o} Ready`,
+    debug: `${o} Debug`
+  };
 }
-const u = new S("vue3-bridge");
-function B(t) {
+function M(e) {
+  const o = Q.createLogger({
+    labels: {
+      warn: `${p} Warn`,
+      error: `${p} Error`,
+      success: `${p} Success`,
+      info: `${p} Info`,
+      ready: `${p} Ready`,
+      debug: `${p} Debug`
+    }
+  });
+  return ve(o), ye(o, e), o;
+}
+M(p);
+const m = M("[ Module Federation Bridge Vue3 ]");
+function _e(e) {
   const o = /* @__PURE__ */ new Map();
   return () => ({
-    __APP_VERSION__: "0.6.12",
-    render(e) {
-      u.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), s = d.createRouter({
-        ...r.router.options,
-        history: a,
-        routes: r.router.getRoutes()
+    __APP_VERSION__: "0.6.14",
+    render(r) {
+      m.log("createBridgeComponent render Info", r);
+      const t = G.createApp(e.rootComponent);
+      o.set(r.dom, t);
+      const n = e.appOptions({
+        basename: r.basename,
+        memoryRoute: r.memoryRoute
+      }), c = r.memoryRoute ? h.createMemoryHistory(r.basename) : h.createWebHistory(r.basename), l = h.createRouter({
+        ...n.router.options,
+        history: c,
+        routes: n.router.getRoutes()
       });
-      u.log("createBridgeComponent render router info>>>", {
-        name: e.moduleName,
-        router: s
-      }), e.memoryRoute ? s.push(e.memoryRoute.entryPath).then(() => {
-        n.use(s), n.mount(e.dom);
-      }) : (n.use(s), n.mount(e.dom));
+      m.log("createBridgeComponent render router info>>>", {
+        name: r.moduleName,
+        router: l
+      }), r.memoryRoute ? l.push(r.memoryRoute.entryPath).then(() => {
+        t.use(l), t.mount(r.dom);
+      }) : (t.use(l), t.mount(r.dom));
     },
-    destroy(e) {
-      u.log("createBridgeComponent destroy Info", e);
-      const n = o.get(e == null ? void 0 : e.dom);
-      n == null || n.unmount();
+    destroy(r) {
+      m.log("createBridgeComponent destroy Info", r);
+      const t = o.get(r == null ? void 0 : r.dom);
+      t == null || t.unmount();
     }
   });
 }
-const N = /* @__PURE__ */ y({
+function be() {
+  const e = new PopStateEvent("popstate", { state: window.history.state });
+  window.dispatchEvent(e);
+}
+const Ee = /* @__PURE__ */ V({
   name: "RemoteApp",
   props: {
     moduleName: String,
@@ -71,65 +253,65 @@ const N = /* @__PURE__ */ y({
     memoryRoute: Object,
     providerInfo: Function
   },
-  setup(t) {
-    const o = l(null), e = l(null), n = l(""), r = g(), a = () => {
-      var i;
-      const m = (i = t.providerInfo) == null ? void 0 : i.call(t);
-      e.value = m;
-      const c = {
-        name: t.moduleName,
+  setup(e) {
+    const o = R(null), r = R(null), t = R(""), n = B(), c = () => {
+      var d;
+      const a = (d = e.providerInfo) == null ? void 0 : d.call(e);
+      r.value = a;
+      const i = {
+        name: e.moduleName,
         dom: o.value,
-        basename: t.basename,
-        memoryRoute: t.memoryRoute
+        basename: e.basename,
+        memoryRoute: e.memoryRoute
       };
-      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: r.path
-      }), I()), n.value = m;
+      m.log("createRemoteComponent LazyComponent render >>>", i), a.render(i);
+    }, l = W(() => n.path, (a) => {
+      a !== n.path && c(), t.value !== "" && t.value !== a && (m.log("createRemoteComponent dispatchPopstateEnv >>>", {
+        ...e,
+        pathname: n.path
+      }), be()), t.value = a;
     });
-    return v(() => {
-      a();
-    }), R(() => {
-      var m;
-      u.log("createRemoteComponent LazyComponent destroy >>>", {
-        ...t
-      }), s(), (m = e.value) == null || m.destroy({
+    return U(() => {
+      c();
+    }), x(() => {
+      var a;
+      m.log("createRemoteComponent LazyComponent destroy >>>", {
+        ...e
+      }), l(), (a = r.value) == null || a.destroy({
         dom: o.value
       });
-    }), () => f("div", {
+    }), () => k("div", {
       ref: o
     }, null);
   }
 });
-function D(t) {
-  return C({
-    __APP_VERSION__: "0.6.12",
+function we(e) {
+  return z({
+    __APP_VERSION__: "0.6.14",
     //@ts-ignore
     loader: async () => {
-      var c;
-      const o = g();
-      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: e,
-        info: t
+      var i;
+      const o = B();
+      let r = "/";
+      const t = (i = o.matched[0]) == null ? void 0 : i.path;
+      t && (t.endsWith("/:pathMatch(.*)*") ? r = t.replace("/:pathMatch(.*)*", "") : r = o.matched[0].path);
+      const n = (e == null ? void 0 : e.export) || "default";
+      m.log("createRemoteComponent LazyComponent create >>>", {
+        basename: r,
+        info: e
       });
-      const a = await t.loader(), s = a && a[Symbol.for("mf_module_id")], m = a[r];
-      if (u.log(
+      const c = await e.loader(), l = c && c[Symbol.for("mf_module_id")], a = c[n];
+      if (m.log(
         "createRemoteComponent LazyComponent loadRemote info >>>",
-        { name: s, module: a, exportName: r, basename: e, route: o }
-      ), r in a && typeof m == "function")
+        { name: l, module: c, exportName: n, basename: r, route: o }
+      ), n in c && typeof a == "function")
         return {
           render() {
-            return w(N, {
-              moduleName: s,
-              ...t,
-              providerInfo: m,
-              basename: e
+            return T(Ee, {
+              moduleName: l,
+              ...e,
+              providerInfo: a,
+              basename: r
             });
           }
         };
@@ -146,6 +328,6 @@ function D(t) {
   });
 }
 export {
-  B as createBridgeComponent,
-  D as createRemoteComponent
+  _e as createBridgeComponent,
+  we as createRemoteComponent
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@module-federation/bridge-vue3",
   "author": "zhouxiao <codingzx@gmail.com>",
-  "version": "0.6.12",
+  "version": "0.6.14",
   "publishConfig": {
     "access": "public"
   },
@@ -26,7 +26,8 @@
     "vue-router": "=3"
   },
   "dependencies": {
-    "@module-federation/bridge-shared": "0.6.12"
+    "@module-federation/bridge-shared": "0.6.14",
+    "@module-federation/sdk": "0.6.14"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/utils.ts

@@ -1,3 +1,3 @@
-import { Logger } from '@module-federation/bridge-shared';
+import { createLogger } from '@module-federation/sdk';
 
-export const LoggerInstance = new Logger('vue3-bridge');
+export const LoggerInstance = createLogger('[ Module Federation Bridge Vue3 ]');