@fulgurjs/federation 6.8.7 → 6.9.1

package/examples/templates/showcase/pnpm-workspace.yaml

@@ -4,7 +4,7 @@ packages:
   - react-host
   - react-remote
 minimumReleaseAgeExclude:
-  - '@fulgurjs/federation@6.8.5'
+  - '@fulgurjs/federation@6.9.0'
 # pnpm >=12 构建脚本批准（12 起弃用 onlyBuiltDependencies；pnpm 9-11 忽略本键：
 # esbuild >=0.16 二进制经 optionalDependencies 平台包分发，postinstall 仅校验，不阻塞安装）
 allowBuilds:

package/examples/templates/showcase/react-host/package.json

@@ -11,7 +11,7 @@
     "types": "fulgurjs types"
   },
   "dependencies": {
-    "@fulgurjs/federation": "6.8.5",
+    "@fulgurjs/federation": "6.9.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.1.0",

package/examples/templates/showcase/react-host/src/application.tsx

@@ -0,0 +1,28 @@
+import { defineApplication } from '@fulgurjs/federation/react'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import Layout from './Layout'
+import HomePage from './pages/HomePage'
+import AboutPage from './pages/AboutPage'
+import BridgeVuePage from './pages/BridgeVuePage'
+import { initBridgeRouting } from './routing'
+import { installPopStateLogger } from './demo-log'
+
+export default defineApplication((_props, { signal }) => {
+  const router = createBrowserRouter([
+    {
+      path: '/',
+      element: <Layout />,
+      children: [
+        { index: true, element: <HomePage /> },
+        { path: 'about', element: <AboutPage /> },
+        // catch-all：子应用挂载在 /br-vue 前缀下，内部导航全部命中同一条路由记录
+        { path: 'br-vue/*', element: <BridgeVuePage /> },
+      ],
+    },
+  ], { basename: import.meta.env.BASE_URL })
+
+  initBridgeRouting(router)
+  installPopStateLogger(signal)
+
+  return { element: <RouterProvider router={router} />, dispose: () => router.dispose() }
+})

package/examples/templates/showcase/react-host/src/demo-log.ts

@@ -62,13 +62,10 @@ export function handleChildEvent(event: DemoChildEvent): void {
   log(event.source, `${event.action} ${event.detail}`)
 }
 
-let popInstalled = false
-
-/** 浏览器前进后退（POP）在 main.tsx 安装一次；push/replace 由各自来源显式标注 */
-export function installPopStateLogger(): void {
-  if (popInstalled) return
-  popInstalled = true
+/** POP 观测属于本应用实例；卸载后由 signal 移除，不遗留窗口监听。 */
+export function installPopStateLogger(signal: AbortSignal): void {
+  if (signal.aborted) return
   window.addEventListener('popstate', () => {
-    log('浏览器前进后退', window.location.pathname + window.location.search)
-  })
+    logNav('浏览器前进后退', window.location.pathname + window.location.search)
+  }, { signal })
 }

package/examples/templates/showcase/react-host/src/main.tsx

@@ -1,33 +1,2 @@
-/**
- * examples/templates/showcase/react-host/src/main.tsx — 宿主入口。
- * data router（createBrowserRouter + RouterProvider）是 URL 同步的前提（declarative 模式无取消语义）；
- * catch-all 路由（/br-vue/* 单条记录渲染同一组件）保证子应用内部导航不重挂宿主组件。
- * 注意：刻意不包 StrictMode——桥接契约工厂在每次 mount 时执行，StrictMode 的双 effect
- * 会让子应用挂载计数翻倍，干扰「mount 次数恒为 1」演示（生产语义不受影响）。
- */
-import { createRoot } from 'react-dom/client'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import Layout from './Layout'
-import HomePage from './pages/HomePage'
-import AboutPage from './pages/AboutPage'
-import BridgeVuePage from './pages/BridgeVuePage'
-import { initBridgeRouting } from './routing'
-import { installPopStateLogger } from './demo-log'
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <Layout />,
-    children: [
-      { index: true, element: <HomePage /> },
-      { path: 'about', element: <AboutPage /> },
-      // catch-all：子应用挂载在 /br-vue 前缀下，内部导航全部命中同一条路由记录
-      { path: 'br-vue/*', element: <BridgeVuePage /> },
-    ],
-  },
-])
-
-initBridgeRouting(router)
-installPopStateLogger()
-
-createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />)
+import application from './application'
+void application.start('#root').catch(console.error)

package/examples/templates/showcase/react-host/src/routing.ts

@@ -11,10 +11,10 @@ export const BRIDGE_BASE_PATH = '/br-vue'
 let routing: BridgeHostRouting | undefined
 
 export function initBridgeRouting(router: Parameters<typeof createReactBridgeNavigation>[0]): void {
-  routing = { basePath: BRIDGE_BASE_PATH, navigation: createReactBridgeNavigation(router) }
+  routing = { basePath: BRIDGE_BASE_PATH, navigation: createReactBridgeNavigation(router, { basename: import.meta.env.BASE_URL }) }
 }
 
 export function getBridgeRouting(): BridgeHostRouting {
-  if (!routing) throw new Error('桥接路由端口未初始化：请先在 main.tsx 调用 initBridgeRouting(router)')
+  if (!routing) throw new Error('桥接路由端口未初始化：请先在 application.tsx 调用 initBridgeRouting(router)')
   return routing
 }

package/examples/templates/showcase/react-remote/fulgurjs.config.ts

@@ -9,7 +9,7 @@ export default {
   name: 'react-remote',
   filename: 'fulgurjs-remoteEntry.js',
   exposes: {
-    './bridge': './src/bridge.tsx',
+    './bridge': './src/application.tsx',
   },
   shared: {
     react: { singleton: true },

package/examples/templates/showcase/react-remote/package.json

@@ -11,7 +11,7 @@
     "types": "fulgurjs types"
   },
   "dependencies": {
-    "@fulgurjs/federation": "6.8.5",
+    "@fulgurjs/federation": "6.9.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.1.0"

package/examples/templates/showcase/react-remote/src/ChildLayout.tsx

@@ -5,9 +5,10 @@
  */
 import { Outlet, useNavigate } from 'react-router-dom'
 import type { ReactElement } from 'react'
-import { getMountCount, reportNav } from './child-bus'
+import { useChildReporter } from './child-bus'
 
 export default function ChildLayout({ bridged = false }: { bridged?: boolean }): ReactElement {
+  const { getMountCount, reportNav } = useChildReporter()
   const navigate = useNavigate()
 
   const handlePushDemo = (): void => {
@@ -35,7 +36,7 @@ export default function ChildLayout({ bridged = false }: { bridged?: boolean }):
     <div style={{ borderTop: '1px dashed #ccc', marginTop: 8, paddingTop: 8 }}>
       <p data-demo-bridge-mode>当前应用被桥接：{String(bridged)}</p>
       <p style={{ margin: '4px 0' }}>
-        <strong>React 子应用</strong>（受控 memory 路由）· 本会话挂载次数：{getMountCount()}
+        <strong>React 子应用</strong>（{bridged ? '受控 memory' : '独立 web'} 路由）· 本会话挂载次数：{getMountCount()}
       </p>
       <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '8px 0' }}>
         <button onClick={handlePushDemo}>子应用 push /orders?q=演示&amp;page=2</button>

package/examples/templates/showcase/react-remote/src/{bridge.tsx → application.tsx}

@@ -1,18 +1,12 @@
-/**
- * examples/templates/showcase/react-remote/src/bridge.tsx — React 子应用桥接契约（exposes './bridge'）。
- * defineBridgeApp(factory, { routing: true }) 声明路由协议（缺失时宿主启用同步即 MFU-031 占位）。
- * 受控路由 = createReactBridgeRouter（memory data router）：工厂返回 RouterProvider 元素；
- * 宿主未提供路由通道时由插件统一抛 MFU-034（工厂无需手写守卫）；根路径 / 经 loader
- * redirect 规范化到 /orders，由插件以 replace 同步宿主（无新增历史条目）。
- */
-import { redirect } from 'react-router-dom'
-import { defineBridgeApp, createReactBridgeRouter, hasBridgeMount } from '@fulgurjs/federation/react'
+// 独立与桥接使用同一套真实业务路由；每次工厂创建自己的 router。
+import { createBrowserRouter, RouterProvider, redirect } from 'react-router-dom'
+import { defineApplication, createReactBridgeRouter, hasBridgeMount } from '@fulgurjs/federation/react'
 import ChildLayout from './ChildLayout'
 import OrderList from './pages/OrderList'
 import OrderDetail from './pages/OrderDetail'
 import Settings from './pages/Settings'
 import Locked from './pages/Locked'
-import { bindReporter, reportNav } from './child-bus'
+import { createChildReporter, ChildReporterContext, type ChildProps, type ChildReporter } from './child-bus'
 
 /** 初始位置读取用的最小 data router 结构面（避免耦合 react-router 内部类型路径） */
 interface MemoryRouterProbe {
@@ -32,27 +26,33 @@ const routes = [
   },
 ]
 
-export default defineBridgeApp((props, ctx) => {
-  bindReporter(props)
-  const init = ctx!.routing!.getLocation()
+export default defineApplication<ChildProps>((props, ctx) => {
+  const reporter = createChildReporter(props, ctx.signal)
+  const init = ctx.routing?.getLocation()
   // 工厂上下文只属于当前实例；通过 props 传给布局，不写页面全局模式。
   const instanceRoutes = routes.map(route => route.element
     ? { ...route, element: <ChildLayout bridged={hasBridgeMount(ctx)} /> }
     : route)
-  const conn = createReactBridgeRouter(ctx!.routing!, instanceRoutes, { signal: ctx!.signal })
-  // 冷加载（模块级预热未落定的慢路径）时 element 是 LazyRouterProviderHost 包装、无 router
-  // prop——同步读 props.router 会静默跳过初始位置上报。routerReady 是就绪合同：fast 路径
-  // 同步已 resolve、slow 路径在惰性接线完成时 resolve，两条路径行为一致。
-  void conn.routerReady.then((router) => reportInitRedirect(router, init.pathname + init.search + init.hash))
-  return conn.element
+  if (ctx.mode === 'standalone') {
+    const router = createBrowserRouter(instanceRoutes, { basename: import.meta.env.BASE_URL })
+    return { element: <ChildReporterContext.Provider value={reporter}><RouterProvider router={router} /></ChildReporterContext.Provider>, dispose: () => router.dispose() }
+  }
+  const conn = createReactBridgeRouter(ctx.routing!, instanceRoutes, { signal: ctx.signal })
+  // 迟到的就绪回调不得向已卸载实例上报；拒绝由实际挂载链处理。
+  void conn.routerReady.then(router => {
+    if (!ctx.signal.aborted && init) reportInitRedirect(router, init.pathname + init.search + init.hash, ctx.signal, reporter)
+  }, () => {})
+  return { element: <ChildReporterContext.Provider value={reporter}>{conn.element}</ChildReporterContext.Provider>, dispose: conn.dispose }
+
 }, { routing: true })
 
 /** 初始位置上报：createMemoryRouter 同步初始化，'/' 的 loader 重定向在微任务内落定，
  * 下一个宏任务读取即为最终初始位置（订阅式一次性上报会在首个用户导航时才误触发）。 */
-function reportInitRedirect(router: MemoryRouterProbe, initPath: string): void {
+function reportInitRedirect(router: MemoryRouterProbe, initPath: string, signal: AbortSignal, reporter: ChildReporter): void {
   setTimeout(() => {
+    if (signal.aborted) return
     const current = router.state.location.pathname + router.state.location.search + router.state.location.hash
-    reportNav(
+    reporter.reportNav(
       '子应用初始化',
       'init',
       current !== initPath

package/examples/templates/showcase/react-remote/src/child-bus.ts

@@ -1,32 +1,32 @@
-/**
- * examples/templates/showcase/react-remote/src/child-bus.ts — 子应用 → 宿主观测台上报总线。
- * 宿主经 appProps 传入稳定回调 onChildEvent；本模块持有该引用并维护挂载计数。
- * 单页单实例假设：同一宿主页同时只挂一个本子应用实例（路由同步前缀互斥的常规形态）。
- */
-export type DemoChildNavAction = 'push' | 'replace' | 'go' | 'init'
+/** 应用实例自己的观测回调，通过原生 provide/Context 传给实际消费树。 */
+import { createContext, useContext } from 'react'
 
+export type DemoChildNavAction = 'push' | 'replace' | 'go' | 'init'
 export type DemoChildEvent =
   | { type: 'mounted'; mountCount: number }
   | { type: 'nav'; source: string; action: DemoChildNavAction; detail: string }
-
 export type DemoChildReporter = (event: DemoChildEvent) => void
-
-const bus: { report: DemoChildReporter | undefined } = { report: undefined }
-let mountCount = 0
-
-/** 桥接工厂内调用：从 props 快照中取出宿主回调，并上报本次挂载计数 */
-export function bindReporter(props: Record<string, unknown> | undefined): void {
-  const candidate = (props as { onChildEvent?: DemoChildReporter } | undefined)?.onChildEvent
-  bus.report = typeof candidate === 'function' ? candidate : undefined
-  mountCount += 1
-  bus.report?.({ type: 'mounted', mountCount })
+export interface ChildReporter {
+  reportNav(source: string, action: DemoChildNavAction, detail: string): void
+  getMountCount(): number
 }
-
-/** 导航来源上报（子应用 Link / 子应用 push·replace / 子应用 go / 子应用初始化） */
-export function reportNav(source: string, action: DemoChildNavAction, detail: string): void {
-  bus.report?.({ type: 'nav', source, action, detail })
+export interface ChildProps { onChildEvent?: DemoChildReporter }
+// 仅观测编号跨挂载累加；回调和所属实例不放在模块全局。
+let nextMount = 0
+export function createChildReporter(props: ChildProps, signal: AbortSignal): ChildReporter {
+  const mountCount = ++nextMount
+  if (!signal.aborted) props.onChildEvent?.({ type: 'mounted', mountCount })
+  return {
+    getMountCount: () => mountCount,
+    reportNav(source, action, detail) {
+      if (!signal.aborted) props.onChildEvent?.({ type: 'nav', source, action, detail })
+    },
+  }
 }
 
-export function getMountCount(): number {
-  return mountCount
+export const ChildReporterContext = createContext<ChildReporter | null>(null)
+export function useChildReporter(): ChildReporter {
+  const reporter = useContext(ChildReporterContext)
+  if (!reporter) throw new Error('子应用观测台未装配；从 application 工厂启动本应用。')
+  return reporter
 }

package/examples/templates/showcase/react-remote/src/main.tsx

@@ -1,18 +1,2 @@
-/**
- * examples/templates/showcase/react-remote/src/main.tsx — 独立运行入口（仅 dev 占位）。
- * 子应用真实能力经 exposes './bridge' 被宿主加载；直开本页仅作 dev server 健康检查。
- */
-import { createRoot } from 'react-dom/client'
-import type { ReactElement } from 'react'
-
-function Standalone(): ReactElement {
-  return (
-    <div style={{ fontFamily: "'PingFang SC', 'Microsoft YaHei', sans-serif", padding: 24 }}>
-      <h1>react-remote（联邦子应用，5333）</h1>
-      <p>本应用通过 expose ./bridge（defineBridgeApp + routing 协议）被宿主加载。</p>
-      <p>请打开 Vue 宿主桥接页：<a href="http://localhost:5334/br-react/orders">http://localhost:5334/br-react/orders</a></p>
-    </div>
-  )
-}
-
-createRoot(document.getElementById('root')!).render(<Standalone />)
+import application from './application'
+void application.start('#root').catch(console.error)

package/examples/templates/showcase/react-remote/src/pages/Locked.tsx

@@ -4,9 +4,10 @@
  */
 import type { ReactElement } from 'react'
 import { Link } from 'react-router-dom'
-import { reportNav } from '../child-bus'
+import { useChildReporter } from '../child-bus'
 
 export default function Locked(): ReactElement {
+  const { reportNav } = useChildReporter()
   const handleBack = (): void => {
     reportNav('子应用 Link', 'push', '/orders')
   }

package/examples/templates/showcase/react-remote/src/pages/OrderDetail.tsx

@@ -4,9 +4,10 @@
  */
 import type { ReactElement } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
-import { reportNav } from '../child-bus'
+import { useChildReporter } from '../child-bus'
 
 export default function OrderDetail(): ReactElement {
+  const { reportNav } = useChildReporter()
   const params = useParams()
   const location = useLocation()
   const navigate = useNavigate()

package/examples/templates/showcase/react-remote/src/pages/OrderList.tsx

@@ -6,7 +6,7 @@
 import { useMemo, useState } from 'react'
 import type { ChangeEvent, ReactElement } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { reportNav } from '../child-bus'
+import { useChildReporter } from '../child-bus'
 
 interface OrderItem {
   id: number
@@ -26,6 +26,7 @@ const ORDERS: OrderItem[] = [
 const PAGE_SIZE = 3
 
 export default function OrderList(): ReactElement {
+  const { reportNav } = useChildReporter()
   const location = useLocation()
   const navigate = useNavigate()
   const search = new URLSearchParams(location.search)

package/examples/templates/showcase/scripts/prod.mjs

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+/** Standalone template production launcher. Uses only Node and the existing dev.config.json. */
+import fs from 'node:fs'
+import path from 'node:path'
+import http from 'node:http'
+import { fileURLToPath } from 'node:url'
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const { apps } = JSON.parse(fs.readFileSync(path.join(root, 'scripts/dev.config.json'), 'utf8'))
+if (!Array.isArray(apps) || !apps.length) throw new Error('dev.config.json 未登记应用。')
+
+const mime = { '.html': 'text/html; charset=utf-8', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.png': 'image/png', '.jpg': 'image/jpeg', '.woff': 'font/woff', '.woff2': 'font/woff2', '.map': 'application/json' }
+const inside = (file, directory) => file === directory || file.startsWith(directory + path.sep)
+const mounts = apps.map(app => {
+  const dir = path.resolve(root, app.dir, 'dist')
+  if (!inside(dir, root)) throw new Error(`${app.name}: 构建目录超出模板。`)
+  const index = path.join(dir, 'index.html')
+  if (!fs.existsSync(index)) throw new Error(`${app.name}: 缺少 dist/index.html，请先 pnpm build。`)
+  const html = fs.readFileSync(index, 'utf8')
+  const tags = [...html.matchAll(/<script\b[^>]*>/gi)]
+  const tag = tags.find(item => /\btype=["']module["']/i.test(item[0]))?.[0]
+  const src = tag?.match(/\bsrc=["']([^"']+)["']/i)?.[1]
+  if (!src || /^(?:https?:)?\/\//.test(src)) throw new Error(`${app.name}: 无可本地挂载的模块入口。`)
+  // Resolve the actual emitted file suffix, rather than guessing base from an app name.
+  const pathname = decodeURIComponent(new URL(src, 'http://template.local/').pathname)
+  const parts = pathname.split('/').filter(Boolean)
+  const bases = []
+  for (let i = 0; i < parts.length; i++) {
+    const file = path.resolve(dir, ...parts.slice(i))
+    if (inside(file, dir) && fs.existsSync(file) && fs.statSync(file).isFile()) bases.push('/' + parts.slice(0, i).join('/') + (i ? '/' : ''))
+  }
+  if (bases.length !== 1) throw new Error(`${app.name}: 无法唯一对应构建入口 ${src}；检查 Vite base 和干净构建输出。`)
+  return { ...app, dir, prefix: bases[0] }
+})
+const hosts = mounts.filter(app => app.host)
+if (!hosts.length) throw new Error('dev.config.json 未登记 host:true 的宿主。')
+const ports = new Set()
+const servers = []
+let stopping = false
+function stop(code = 0) {
+  if (stopping) return
+  stopping = true
+  for (const server of servers) server.close()
+  const timer = setTimeout(() => {
+    for (const server of servers) server.closeAllConnections?.()
+    process.exit(code)
+  }, 1000)
+  timer.unref()
+  process.exitCode = code
+}
+process.once('SIGINT', () => stop(0))
+process.once('SIGTERM', () => stop(0))
+process.once('uncaughtException', error => { console.error(error); stop(1) })
+
+for (const host of hosts) {
+  if (!Number.isInteger(host.port) || host.port < 1 || host.port > 65535 || ports.has(host.port)) throw new Error(`无效或重复宿主端口：${host.port}`)
+  ports.add(host.port)
+  const site = [host, ...mounts.filter(app => !app.host)].sort((a, b) => b.prefix.length - a.prefix.length)
+  const prefixes = new Set()
+  for (const app of site) {
+    if (prefixes.has(app.prefix)) throw new Error(`${host.name}: 构建 base ${app.prefix} 冲突；宿主和远程不能部署在同一路径。`)
+    prefixes.add(app.prefix)
+  }
+  const server = http.createServer((req, res) => {
+    try {
+      const url = new URL(req.url, `http://localhost:${host.port}`)
+      if (url.pathname === '/' && host.prefix !== '/') {
+        res.writeHead(302, { location: host.prefix, 'cache-control': 'no-cache' })
+        return res.end()
+      }
+      const app = site.find(item => url.pathname === item.prefix.slice(0, -1) || url.pathname.startsWith(item.prefix))
+      if (!app) { res.writeHead(404); return res.end('未登记此部署路径') }
+      const relative = decodeURIComponent(url.pathname.slice(app.prefix.length)) || 'index.html'
+      let file = path.resolve(app.dir, relative)
+      if (!inside(file, app.dir)) { res.writeHead(403); return res.end() }
+      if (!fs.existsSync(file) || fs.statSync(file).isDirectory()) {
+        if (path.extname(relative)) { res.writeHead(404); return res.end('资源不存在；不会回退成HTML') }
+        file = path.join(app.dir, 'index.html')
+      }
+      const stable = /(?:^|\/)(?:index\.html|fulgurjs-(?:remoteEntry\.js|manifest\.json)|_app\.config\.js)$/.test(file)
+      res.writeHead(200, {
+        'content-type': mime[path.extname(file)] ?? 'application/octet-stream',
+        'cache-control': stable ? 'no-cache' : 'public, max-age=31536000, immutable',
+        'access-control-allow-origin': '*',
+      })
+      res.end(fs.readFileSync(file))
+    } catch (error) {
+      console.error(`生产请求失败：${error.message}`)
+      if (!res.headersSent) res.writeHead(400)
+      res.end('无效请求或资源不可读')
+    }
+  })
+  servers.push(server)
+  server.on('error', error => {
+    console.error(`${host.name}:${host.port} 启动失败：${error.message}；停止本次全部生产服务器，不会按端口杀已有进程。`)
+    stop(1)
+  })
+  server.listen(host.port, '127.0.0.1', () => {
+    if (!stopping) console.log(`生产宿主 ${host.name}: http://localhost:${host.port}${host.prefix}（仅dist，无开发服务器）`)
+  })
+}

package/examples/templates/showcase/vue-host/package.json

@@ -11,7 +11,7 @@
     "types": "fulgurjs types"
   },
   "dependencies": {
-    "@fulgurjs/federation": "6.8.5",
+    "@fulgurjs/federation": "6.9.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "vue": "^3.5.13",

package/examples/templates/showcase/vue-host/src/application.ts

@@ -0,0 +1,28 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import { defineApplication } from '@fulgurjs/federation/vue'
+import App from './App.vue'
+import HomePage from './pages/HomePage.vue'
+import AboutPage from './pages/AboutPage.vue'
+import BridgeReactPage from './pages/BridgeReactPage.vue'
+import { initBridgeRouting } from './routing'
+import { installGuard } from './guard'
+import { installPopStateLogger } from './demo-log'
+
+export default defineApplication((_props, { signal }) => {
+  const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+      { path: '/', component: HomePage },
+      { path: '/about', component: AboutPage },
+      // catch-all：子应用挂载在 /br-react 前缀下，内部导航全部命中同一条路由记录
+      { path: '/br-react/:pathMatch(.*)*', component: BridgeReactPage },
+    ],
+  })
+
+  initBridgeRouting(router)
+  installGuard(router)
+  installPopStateLogger(signal)
+
+  return { app: createApp(App), router }
+})

package/examples/templates/showcase/vue-host/src/demo-log.ts

@@ -37,13 +37,10 @@ export function handleChildEvent(event: DemoChildEvent): void {
   logNav(event.source, `${event.action} ${event.detail}`)
 }
 
-let popInstalled = false
-
-/** 浏览器前进后退（POP）在 main.ts 安装一次；push/replace 由各自来源显式标注 */
-export function installPopStateLogger(): void {
-  if (popInstalled) return
-  popInstalled = true
+/** POP 观测属于本应用实例；卸载后由 signal 移除，不遗留窗口监听。 */
+export function installPopStateLogger(signal: AbortSignal): void {
+  if (signal.aborted) return
   window.addEventListener('popstate', () => {
     logNav('浏览器前进后退', window.location.pathname + window.location.search)
-  })
+  }, { signal })
 }

package/examples/templates/showcase/vue-host/src/main.ts

@@ -1,30 +1,2 @@
-/**
- * examples/templates/showcase/vue-host/src/main.ts — 宿主入口。
- * 宿主 Router 是浏览器历史唯一写入方；catch-all 路由（/br-react/* 单条记录渲染同一组件）
- * 保证子应用内部导航不重挂宿主组件。守卫与 POP 日志在此一次性安装。
- */
-import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import App from './App.vue'
-import HomePage from './pages/HomePage.vue'
-import AboutPage from './pages/AboutPage.vue'
-import BridgeReactPage from './pages/BridgeReactPage.vue'
-import { initBridgeRouting } from './routing'
-import { installGuard } from './guard'
-import { installPopStateLogger } from './demo-log'
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    { path: '/', component: HomePage },
-    { path: '/about', component: AboutPage },
-    // catch-all：子应用挂载在 /br-react 前缀下，内部导航全部命中同一条路由记录
-    { path: '/br-react/:pathMatch(.*)*', component: BridgeReactPage },
-  ],
-})
-
-initBridgeRouting(router)
-installGuard(router)
-installPopStateLogger()
-
-createApp(App).use(router).mount('#app')
+import application from './application'
+void application.start('#app').catch(console.error)

package/examples/templates/showcase/vue-host/src/routing.ts

@@ -1,6 +1,6 @@
 /**
  * examples/templates/showcase/vue-host/src/routing.ts — 桥接宿主导航端口（模块级单例）。
- * main.ts 组装宿主 router 后初始化一次：createVueBridgeNavigation(router)——
+ * application.ts 组装宿主 router 后初始化一次：createVueBridgeNavigation(router)——
  * Vue Router fullPath 已剥离 history base，逻辑路径无需再处理部署前缀；
  * 端口引用保持稳定 → routing 键不变，宿主不重挂、不重复订阅。
  */
@@ -16,6 +16,6 @@ export function initBridgeRouting(router: Router): void {
 }
 
 export function getBridgeRouting(): BridgeHostRouting {
-  if (!routing) throw new Error('桥接路由端口未初始化：请先在 main.ts 调用 initBridgeRouting(router)')
+  if (!routing) throw new Error('桥接路由端口未初始化：请先在 application.ts 调用 initBridgeRouting(router)')
   return routing
 }

package/examples/templates/showcase/vue-remote/fulgurjs.config.ts

@@ -9,7 +9,7 @@ export default {
   name: 'vue-remote',
   filename: 'fulgurjs-remoteEntry.js',
   exposes: {
-    './bridge': './src/bridge.ts',
+    './bridge': './src/application.ts',
   },
   shared: {
     vue: { singleton: true },

package/examples/templates/showcase/vue-remote/package.json

@@ -11,7 +11,7 @@
     "types": "fulgurjs types"
   },
   "dependencies": {
-    "@fulgurjs/federation": "6.8.5",
+    "@fulgurjs/federation": "6.9.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

package/examples/templates/showcase/vue-remote/src/ChildLayout.vue

@@ -7,7 +7,8 @@
 import { getCurrentInstance } from 'vue'
 import { hasBridgeMount } from '@fulgurjs/federation/vue'
 import { RouterView, useRouter } from 'vue-router'
-import { getMountCount, reportNav } from './child-bus'
+import { useChildReporter } from './child-bus'
+const { getMountCount, reportNav } = useChildReporter()
 
 // 查询当前 app，而不是页面是否存在其他桥接实例。
 const bridged = hasBridgeMount(getCurrentInstance()?.appContext.app)
@@ -39,7 +40,7 @@ const handleGoForward = (): void => {
   <section class="demo-child">
     <p data-demo-bridge-mode>当前应用被桥接：{{ String(bridged) }}</p>
     <p class="demo-child-title">
-      <strong>Vue 子应用</strong>（受控 memory 路由）· 本会话挂载次数：{{ getMountCount() }}
+      <strong>Vue 子应用</strong>（{{ bridged ? '受控 memory' : '独立 web' }} 路由）· 本会话挂载次数：{{ getMountCount() }}
     </p>
     <div class="demo-row">
       <button @click="handlePushDemo">子应用 push /orders?q=演示&amp;page=2</button>