@module-federation/bridge-vue3 2.3.3 → 2.4.0

package/src/assets/vue.svg

@@ -1 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-<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

@@ -1,83 +0,0 @@
-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>;
-  memoryRoute?: { entryPath: string };
-  hashRoute?: boolean;
-}) {
-  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,
-              memoryRoute: info.memoryRoute,
-              hashRoute: info.hashRoute,
-            });
-          },
-        };
-      }
-      throw new Error('module not found');
-    },
-  });
-}
-
-/**
- * @deprecated createRemoteComponent 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(
-    'createRemoteComponent is deprecated, please use createRemoteAppComponent instead!',
-  );
-  return createRemoteAppComponent(info);
-}

package/src/index.ts

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

package/src/provider.ts

@@ -1,112 +0,0 @@
-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';
-import { processRoutes } from './routeUtils';
-
-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;
-    /** Called with the bridge's internal router after creation but before navigation.
-     *  Use this to register global guards (beforeEach, afterEach, etc.) that would
-     *  otherwise be lost when the bridge recreates the router. */
-    afterRouterCreate?: (router: VueRouter.Router) => void;
-  } | 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) {
-          const { history, routes, patchRouter } = processRoutes({
-            router: bridgeOptions.router,
-            basename: info.basename,
-            memoryRoute: info.memoryRoute,
-            hashRoute: info.hashRoute,
-          });
-
-          const router = VueRouter.createRouter({
-            ...bridgeOptions.router.options,
-            history,
-            routes,
-          });
-
-          if (patchRouter) {
-            patchRouter(router);
-          }
-
-          if (bridgeOptions.afterRouterCreate) {
-            bridgeOptions.afterRouterCreate(router);
-          }
-
-          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

@@ -1,115 +0,0 @@
-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/routeUtils.ts

@@ -1,238 +0,0 @@
-import * as VueRouter from 'vue-router';
-
-export interface RouteProcessingOptions {
-  router: VueRouter.Router;
-  basename?: string;
-  memoryRoute?: boolean | { entryPath: string };
-  hashRoute?: boolean;
-}
-
-export interface RouteProcessingResult {
-  history: VueRouter.RouterHistory;
-  routes: VueRouter.RouteRecordNormalized[];
-  patchRouter?: (router: VueRouter.Router) => void;
-}
-
-/**
- * Add basename prefix to all nested routes recursively
- *
- * @param routes - route configuration array
- * @param basename - base path prefix
- * @returns processed route configuration
- */
-function addBasenameToNestedRoutes(
-  routes: VueRouter.RouteRecordNormalized[],
-  basename: string,
-): VueRouter.RouteRecordNormalized[] {
-  /**
-   * Join two path segments, collapse multiple slashes, and optionally
-   * preserve a trailing slash that was present in the original value.
-   * A bare '/' root is never considered an intentional trailing slash.
-   *
-   * Relative paths (not starting with '/') are left untouched — Vue Router
-   * resolves them against the parent route, which already carries the basename.
-   */
-  const prefixPath = (original: string): string => {
-    if (!original.startsWith('/')) return original;
-
-    const hasTrailingSlash = original.length > 1 && original.endsWith('/');
-    const normalized =
-      `${basename}/${original}`.replace(/\/+/g, '/').replace(/\/$/, '') || '/';
-    return hasTrailingSlash ? `${normalized}/` : normalized;
-  };
-
-  return routes.map((route) => {
-    const updatedRoute: VueRouter.RouteRecordNormalized = {
-      ...route,
-      path: prefixPath(route.path),
-    };
-
-    // Prefix string redirects with basename
-    if (typeof route.redirect === 'string') {
-      updatedRoute.redirect = prefixPath(route.redirect);
-    } else if (
-      route.redirect &&
-      typeof route.redirect === 'object' &&
-      'path' in route.redirect &&
-      typeof route.redirect.path === 'string'
-    ) {
-      updatedRoute.redirect = {
-        ...route.redirect,
-        path: prefixPath(route.redirect.path),
-      };
-    }
-
-    // Recursively process child routes
-    if (route.children && route.children.length > 0) {
-      updatedRoute.children = addBasenameToNestedRoutes(
-        route.children as VueRouter.RouteRecordNormalized[],
-        basename,
-      );
-    }
-
-    return updatedRoute;
-  });
-}
-
-/**
- * Create a patch function that rewrites path-based navigations to include
- * the basename prefix.  This is needed because createWebHashHistory() does
- * not accept a basename argument, so router.push('/foo') would bypass the
- * prefixed route definitions.
- *
- * By patching push/replace/resolve *before* Vue Router resolves the
- * location we also avoid the "No match found" console warning.
- */
-function createHashBasenamePatch(
-  basename: string,
-): (router: VueRouter.Router) => void {
-  const normalized = basename.replace(/\/+$/, '');
-
-  /**
-   * Only absolute paths (starting with '/') that don't already carry the
-   * basename prefix need rewriting.  Relative segments ('settings'),
-   * query-only ('?tab=1'), and hash-only ('#anchor') strings are resolved
-   * by Vue Router against the current route and must pass through untouched.
-   */
-  const needsPrefix = (path: string): boolean =>
-    path.startsWith('/') &&
-    path !== normalized &&
-    !path.startsWith(normalized + '/');
-
-  const prefix = (path: string): string =>
-    `${normalized}${path}`.replace(/\/+/g, '/');
-
-  const rewrite = (
-    to: VueRouter.RouteLocationRaw,
-  ): VueRouter.RouteLocationRaw => {
-    if (typeof to === 'string') {
-      return needsPrefix(to) ? prefix(to) : to;
-    }
-    if ('path' in to && typeof to.path === 'string' && needsPrefix(to.path)) {
-      return { ...to, path: prefix(to.path) };
-    }
-    return to;
-  };
-
-  return (router) => {
-    const originalPush = router.push.bind(router);
-    const originalReplace = router.replace.bind(router);
-    const originalResolve = router.resolve.bind(router);
-
-    router.push = (to: VueRouter.RouteLocationRaw) => originalPush(rewrite(to));
-    router.replace = (to: VueRouter.RouteLocationRaw) =>
-      originalReplace(rewrite(to));
-    router.resolve = ((to: VueRouter.RouteLocationRaw, ...rest: any[]) =>
-      originalResolve(rewrite(to), ...rest)) as typeof router.resolve;
-  };
-}
-
-/**
- * Route processing solution based on path analysis
- *
- * @param options - route processing options
- * @returns processed history and routes
- */
-export function processRoutes(
-  options: RouteProcessingOptions,
-): RouteProcessingResult {
-  const { router, basename, memoryRoute, hashRoute } = options;
-
-  // Sort routes, try to process parent route first
-  const flatRoutes = router
-    .getRoutes()
-    .sort(
-      (a, b) =>
-        a.path.split('/').filter((p) => p).length -
-        b.path.split('/').filter((p) => p).length,
-    );
-
-  // Use Map/Set for O(1) lookup performance
-  // Store arrays because multiple routes can resolve to the same path
-  // (e.g. a parent and a default child with path: '')
-  const flatRoutesMap = new Map<string, VueRouter.RouteRecordNormalized[]>();
-  const processedRoutes = new Set<VueRouter.RouteRecordNormalized>();
-
-  flatRoutes.forEach((route) => {
-    const existing = flatRoutesMap.get(route.path) || [];
-    existing.push(route);
-    flatRoutesMap.set(route.path, existing);
-  });
-
-  /**
-   * Normalize path by removing double slashes and trailing slashes
-   */
-  const normalizePath = (prefix: string, childPath: string): string => {
-    const fullPath = `${prefix}/${childPath}`;
-    return fullPath.replace(/\/+/g, '/').replace(/\/$/, '') || '/';
-  };
-
-  const processChildren = (
-    route: VueRouter.RouteRecordNormalized,
-    prefix = '',
-  ): VueRouter.RouteRecordNormalized => {
-    if (!route.children || route.children.length === 0) {
-      return route;
-    }
-
-    for (let j = 0; j < route.children.length; j++) {
-      const child = route.children[j];
-      const fullPath = normalizePath(prefix, child.path);
-      const candidates = flatRoutesMap.get(fullPath) || [];
-      // Find a matching route that:
-      // 1. Hasn't been processed yet
-      // 2. Isn't the current parent route (avoids circular references when
-      //    a child with path: '' resolves to the same absolute path)
-      // 3. Matches by name when the child definition specifies one
-      const childRoute = candidates.find(
-        (r) =>
-          !processedRoutes.has(r) &&
-          r !== route &&
-          (child.name == null || r.name === child.name),
-      );
-
-      if (childRoute) {
-        // Create a new optimized route object with relative path for nested routes
-        const relativeChildRoute: VueRouter.RouteRecordNormalized = {
-          ...childRoute,
-          path: child.path, // Keep the original relative path from static route
-        };
-
-        route.children[j] = relativeChildRoute;
-        processedRoutes.add(childRoute);
-
-        processChildren(relativeChildRoute, fullPath);
-      }
-    }
-
-    return route;
-  };
-
-  // Reconstruct nested structure
-  let routes: VueRouter.RouteRecordNormalized[] = [];
-
-  for (const route of flatRoutes) {
-    if (!processedRoutes.has(route)) {
-      const processedRoute = processChildren(route, route.path);
-      processedRoutes.add(route);
-      routes.push(processedRoute);
-    }
-  }
-
-  let history: VueRouter.RouterHistory;
-  let patchRouter: ((router: VueRouter.Router) => void) | undefined;
-
-  if (memoryRoute) {
-    history = VueRouter.createMemoryHistory(basename);
-  } else if (hashRoute) {
-    history = VueRouter.createWebHashHistory();
-    if (basename) {
-      routes = addBasenameToNestedRoutes(routes, basename);
-      patchRouter = createHashBasenamePatch(basename);
-    }
-  } else {
-    history = VueRouter.createWebHistory(basename);
-  }
-
-  return { history, routes, patchRouter };
-}

package/src/style.css

@@ -1,79 +0,0 @@
-: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

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

package/src/vite-env.d.ts

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