@module-federation/bridge-vue3 0.0.0-fix-lazy-comile-20250925082726

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@module-federation/bridge-vue3",
+  "author": "zhouxiao <codingzx@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/module-federation/core.git",
+    "directory": "packages/bridge/vue3-bridge"
+  },
+  "version": "0.0.0-fix-lazy-comile-20250925082726",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.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": "=4"
+  },
+  "dependencies": {
+    "@module-federation/bridge-shared": "0.0.0-fix-lazy-comile-20250925082726",
+    "@module-federation/runtime": "0.0.0-fix-lazy-comile-20250925082726",
+    "@module-federation/sdk": "0.0.0-fix-lazy-comile-20250925082726"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.4.18",
+    "vite-plugin-dts": "^4.3.0",
+    "vue": "^3.4.21",
+    "vue-router": "4.4.5",
+    "vue-tsc": "^2.0.6"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}

package/project.json

@@ -0,0 +1,15 @@
+{
+  "name": "vue3-bridge",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/bridge/vue3-bridge/src",
+  "projectType": "library",
+  "tags": ["type:pkg"],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npm run build --prefix packages/bridge/vue3-bridge"]
+      }
+    }
+  }
+}

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps<{ msg: string }>();
+
+const count = ref(0);
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/src/create.ts

@@ -0,0 +1,79 @@
+import { type AsyncComponentOptions, defineAsyncComponent, h } from 'vue';
+import { useRoute } from 'vue-router';
+import RemoteApp from './remoteApp.jsx';
+import { LoggerInstance } from './utils.js';
+
+declare const __APP_VERSION__: string;
+
+export function createRemoteAppComponent(info: {
+  loader: () => Promise<any>;
+  export?: string;
+  asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
+  rootAttrs?: Record<string, unknown>;
+}) {
+  return defineAsyncComponent({
+    __APP_VERSION__,
+    ...info.asyncComponentOptions,
+    //@ts-ignore
+    loader: async () => {
+      const route = useRoute();
+
+      let basename = '/';
+      const matchPath = route?.matched?.[0]?.path;
+      if (matchPath) {
+        if (matchPath.endsWith('/:pathMatch(.*)*')) {
+          basename = matchPath.replace('/:pathMatch(.*)*', '');
+        } else {
+          basename = route.matched[0].path;
+        }
+      }
+
+      const exportName = info?.export || 'default';
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent create >>>`,
+        {
+          basename,
+          info,
+        },
+      );
+
+      const module: any = await info.loader();
+      const moduleName = module && module[Symbol.for('mf_module_id')];
+      const exportFn = module[exportName];
+
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
+        { moduleName, module, exportName, basename, route },
+      );
+
+      if (exportName in module && typeof exportFn === 'function') {
+        return {
+          render() {
+            return h(RemoteApp, {
+              moduleName,
+              providerInfo: exportFn,
+              basename,
+              rootAttrs: info.rootAttrs,
+            });
+          },
+        };
+      }
+      throw new Error('module not found');
+    },
+  });
+}
+
+/**
+ * @deprecated createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export function createRemoteComponent(info: {
+  loader: () => Promise<any>;
+  export?: string;
+  asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
+  rootAttrs?: Record<string, unknown>;
+}) {
+  LoggerInstance.warn(
+    'createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!',
+  );
+  return createRemoteAppComponent(info);
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { createBridgeComponent } from './provider';
+export { createRemoteComponent, createRemoteAppComponent } from './create';
+export type { RenderFnParams } from '@module-federation/bridge-shared';

package/src/provider.ts

@@ -0,0 +1,109 @@
+import * as Vue from 'vue';
+import * as VueRouter from 'vue-router';
+import { RenderFnParams } from '@module-federation/bridge-shared';
+import { LoggerInstance } from './utils';
+import { getInstance } from '@module-federation/runtime';
+
+declare const __APP_VERSION__: string;
+
+type AddOptionsFnParams = {
+  app: Vue.App<Vue.Component>;
+  basename: RenderFnParams['basename'];
+  memoryRoute: RenderFnParams['memoryRoute'];
+  [key: string]: any;
+};
+
+export type ProviderFnParams = {
+  rootComponent: Vue.Component;
+  appOptions: (
+    params: AddOptionsFnParams,
+  ) => { router?: VueRouter.Router } | void;
+};
+
+export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
+  const rootMap = new Map();
+  const instance = getInstance();
+  return () => {
+    return {
+      __APP_VERSION__,
+      async render(info: RenderFnParams) {
+        LoggerInstance.debug(`createBridgeComponent render Info`, info);
+        const {
+          moduleName,
+          dom,
+          basename,
+          memoryRoute,
+          hashRoute,
+          ...propsInfo
+        } = info;
+        const app = Vue.createApp(bridgeInfo.rootComponent, propsInfo);
+        rootMap.set(dom, app);
+
+        const beforeBridgeRenderRes =
+          await instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info);
+
+        const extraProps =
+          beforeBridgeRenderRes &&
+          typeof beforeBridgeRenderRes === 'object' &&
+          beforeBridgeRenderRes?.extraProps
+            ? beforeBridgeRenderRes?.extraProps
+            : {};
+
+        const bridgeOptions = bridgeInfo.appOptions({
+          app,
+          basename,
+          memoryRoute,
+          hashRoute,
+          ...propsInfo,
+          ...extraProps,
+        });
+        if (bridgeOptions?.router) {
+          let history;
+          let routes = bridgeOptions.router.getRoutes();
+
+          if (info.memoryRoute) {
+            history = VueRouter.createMemoryHistory(info.basename);
+          } else if (info.hashRoute) {
+            history = VueRouter.createWebHashHistory();
+            routes = routes.map((route) => {
+              return {
+                ...route,
+                path: info.basename + route.path,
+              };
+            });
+          } else {
+            history = VueRouter.createWebHistory(info.basename);
+          }
+
+          const router = VueRouter.createRouter({
+            ...bridgeOptions.router.options,
+            history,
+            routes,
+          });
+
+          LoggerInstance.debug(`createBridgeComponent render router info>>>`, {
+            moduleName,
+            router,
+          });
+          // memory route Initializes the route
+          if (memoryRoute) {
+            await router.push(memoryRoute.entryPath);
+          }
+
+          app.use(router);
+        }
+
+        app.mount(dom);
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info);
+      },
+      destroy(info: { dom: HTMLElement }) {
+        LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
+        const root = rootMap.get(info?.dom);
+
+        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
+        root?.unmount();
+        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
+      },
+    };
+  };
+}

package/src/remoteApp.tsx

@@ -0,0 +1,115 @@
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  defineComponent,
+  useAttrs,
+} from 'vue';
+import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
+import { useRoute } from 'vue-router';
+import { LoggerInstance } from './utils';
+import { getInstance } from '@module-federation/runtime';
+
+export default defineComponent({
+  name: 'RemoteApp',
+  props: {
+    moduleName: String,
+    basename: String,
+    memoryRoute: Object,
+    hashRoute: Boolean,
+    providerInfo: Function,
+    rootAttrs: Object,
+  },
+  inheritAttrs: false,
+  setup(props) {
+    const rootRef = ref(null);
+    const providerInfoRef = ref(null);
+    const pathname = ref('');
+    const route = useRoute();
+    const hostInstance = getInstance();
+    const componentAttrs = useAttrs();
+
+    const renderComponent = async () => {
+      const providerReturn = props.providerInfo?.();
+      providerInfoRef.value = providerReturn;
+
+      let renderProps = {
+        ...componentAttrs,
+        moduleName: props.moduleName,
+        dom: rootRef.value,
+        basename: props.basename,
+        memoryRoute: props.memoryRoute,
+        hashRoute: props.hashRoute,
+      };
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent render >>>`,
+        renderProps,
+      );
+
+      const beforeBridgeRenderRes =
+        (await hostInstance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+          renderProps,
+        )) || {};
+
+      renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+      providerReturn.render(renderProps);
+      hostInstance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
+    };
+
+    const watchStopHandle = watch(
+      () => route?.path,
+      (newPath) => {
+        if (newPath !== route.path) {
+          renderComponent();
+        }
+
+        // dispatchPopstateEnv
+        if (pathname.value !== '' && pathname.value !== newPath) {
+          LoggerInstance.debug(
+            `createRemoteAppComponent dispatchPopstateEnv >>>`,
+            {
+              ...props,
+              pathname: route.path,
+            },
+          );
+          dispatchPopstateEnv();
+        }
+        pathname.value = newPath;
+      },
+    );
+
+    onMounted(() => {
+      renderComponent();
+    });
+
+    onBeforeUnmount(() => {
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent destroy >>>`,
+        {
+          ...props,
+        },
+      );
+      watchStopHandle();
+
+      hostInstance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+        name: props.moduleName,
+        dom: rootRef.value,
+        basename: props.basename,
+        memoryRoute: props.memoryRoute,
+        hashRoute: props.hashRoute,
+      });
+
+      (providerInfoRef.value as any)?.destroy({ dom: rootRef.value });
+      hostInstance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+        name: props.moduleName,
+        dom: rootRef.value,
+        basename: props.basename,
+        memoryRoute: props.memoryRoute,
+        hashRoute: props.hashRoute,
+      });
+    });
+
+    return () => <div {...(props.rootAttrs || {})} ref={rootRef}></div>;
+  },
+});

package/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/utils.ts

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

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+
+    /* Bundler mode */
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsxImportSource": "vue",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["esnext", "dom"],
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/remoteApp.tsx",
+    "src/create.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import dts from 'vite-plugin-dts';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import packageJson from './package.json';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      rollupTypes: true,
+      bundledPackages: ['@module-federation/bridge-shared'],
+    }),
+    vueJsx(),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      formats: ['cjs', 'es'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['vue', 'vue-router'],
+    },
+  },
+  define: {
+    __APP_VERSION__: JSON.stringify(packageJson.version),
+  },
+});