@fulgurjs/federation 6.8.7 → 6.9.1

package/examples/templates/showcase/vue-remote/src/{bridge.ts → application.ts}

@@ -1,17 +1,13 @@
-/**
- * examples/templates/showcase/vue-remote/src/bridge.ts — Vue 子应用桥接契约（exposes './bridge'）。
- * defineBridgeApp(factory, { routing: true }) 声明路由协议（缺失时宿主启用同步即 MFU-031 占位）。
- * 返回 { app, router }，插件等待初始位置、安装路由、挂载并在卸载时释放连接。
- */
+// 独立与桥接装配唯一入口；返回未安装的 app/router，交给插件等待与挂载。
 import { createApp } from 'vue'
-import { createMemoryHistory, createRouter, type RouteRecordRaw } from 'vue-router'
-import { defineBridgeApp } from '@fulgurjs/federation/vue'
+import { createMemoryHistory, createWebHistory, createRouter, type RouteRecordRaw } from 'vue-router'
+import { defineApplication } from '@fulgurjs/federation/vue'
 import ChildLayout from './ChildLayout.vue'
 import OrderList from './pages/OrderList.vue'
 import OrderDetail from './pages/OrderDetail.vue'
 import Settings from './pages/Settings.vue'
 import Locked from './pages/Locked.vue'
-import { bindReporter, reportNav } from './child-bus'
+import { createChildReporter, childReporterKey, type ChildProps } from './child-bus'
 
 const routes: RouteRecordRaw[] = [
   // 根路径以 replace 规范化到 /orders（不产生额外历史条目）
@@ -22,19 +18,20 @@ const routes: RouteRecordRaw[] = [
   { path: '/locked', component: Locked },
 ]
 
-export default defineBridgeApp((props, ctx) => {
-  bindReporter(props)
+export default defineApplication<ChildProps>((props, ctx) => {
+  const reporter = createChildReporter(props, ctx.signal)
   // 初始位置先读快照（规范化 replace 后对比上报）
   const init = ctx?.routing?.getLocation()
   const initPath = init ? init.pathname + init.search + init.hash : ''
-  const router = createRouter({ history: createMemoryHistory(), routes })
-  const app = createApp(ChildLayout, props)
+  const router = createRouter({ history: ctx.mode === 'bridge' ? createMemoryHistory() : createWebHistory(import.meta.env.BASE_URL), routes })
+  const app = createApp(ChildLayout)
+  app.provide(childReporterKey, reporter)
   // afterEach 记录初始导航结果；路由安装与连接清理由插件负责。
   let reported = false
   router.afterEach((to, _from, failure) => {
     if (reported || failure) return
     reported = true
-    reportNav(
+    reporter.reportNav(
       '子应用初始化',
       'init',
       to.fullPath !== initPath

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

@@ -1,32 +1,32 @@
-/**
- * examples/templates/showcase/vue-remote/src/child-bus.ts — 子应用 → 宿主观测台上报总线。
- * 宿主经 appProps 传入稳定回调 onChildEvent；本模块持有该引用并维护挂载计数。
- * 单页单实例假设：同一宿主页同时只挂一个本子应用实例（路由同步前缀互斥的常规形态）。
- */
-export type DemoChildNavAction = 'push' | 'replace' | 'go' | 'init'
+/** 应用实例自己的观测回调，通过原生 provide/Context 传给实际消费树。 */
+import { inject, type InjectionKey } from 'vue'
 
+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 childReporterKey: InjectionKey<ChildReporter> = Symbol('child-reporter')
+export function useChildReporter(): ChildReporter {
+  const reporter = inject(childReporterKey)
+  if (!reporter) throw new Error('子应用观测台未装配；从 application 工厂启动本应用。')
+  return reporter
 }

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

@@ -1,16 +1,2 @@
-/**
- * examples/templates/showcase/vue-remote/src/main.ts — 独立运行入口（仅 dev 占位）。
- * 子应用真实能力经 exposes './bridge' 被宿主加载；直开本页仅作 dev server 健康检查。
- */
-import { createApp, h } from 'vue'
-
-createApp({
-  render: () =>
-    h('div', { style: "font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; padding: 24px" }, [
-      h('h1', null, 'vue-remote（联邦子应用，默认端口 5335，改端口见 README「改端口」清单）'),
-      h('p', null, '本应用通过 expose ./bridge（defineBridgeApp + routing 协议）被宿主加载。'),
-      h('p', null, [
-        h('a', { href: 'http://localhost:5336/br-vue/orders' }, '打开 React 宿主桥接页（默认 5336）'),
-      ]),
-    ]),
-}).mount('#app')
+import application from './application'
+void application.start('#app').catch(console.error)

package/examples/templates/showcase/vue-remote/src/pages/Locked.vue

@@ -4,7 +4,8 @@
  * 前往本页的导航会被宿主守卫（Vue：异步 beforeEach；React：useBlocker）拦截，等待「继续/取消」。
  */
 import { useRouter } from 'vue-router'
-import { reportNav } from '../child-bus'
+import { useChildReporter } from '../child-bus'
+const { reportNav } = useChildReporter()
 
 const router = useRouter()
 

package/examples/templates/showcase/vue-remote/src/pages/OrderDetail.vue

@@ -5,7 +5,8 @@
  */
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { reportNav } from '../child-bus'
+import { useChildReporter } from '../child-bus'
+const { reportNav } = useChildReporter()
 
 const route = useRoute()
 const router = useRouter()

package/examples/templates/showcase/vue-remote/src/pages/OrderList.vue

@@ -6,7 +6,8 @@
  */
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { reportNav } from '../child-bus'
+import { useChildReporter } from '../child-bus'
+const { reportNav } = useChildReporter()
 
 interface OrderItem {
   id: number

package/examples/templates/vue-host-react-remote/README.md

@@ -1,5 +1,8 @@
 # vue-host-react-remote：完整子应用桥接模板
 
+> 本目录是 6.9.0 源码候选：已改用 defineApplication，尚未测试和发布。源码依赖已锁定 6.9.0；正式发布前不要拿旧 registry 包运行这份代码。验收先使用本次候选 tarball，发布后再按下列冻结安装命令验证正式包。
+
+
 `vue-host/` 是宿主，`react-remote/` 是子应用。复制整个模板目录，在根目录运行：
 
 ```bash
@@ -22,3 +25,24 @@ pnpm dev
 - 改react-remote（默认 5303）：① `react-remote/package.json` 的 `dev` 与 `preview` 两个脚本的 `--port 5303`；② `vue-host/fulgurjs.config.ts` 里 `remotes['bridge-react-remote'].dev` 的 `http://localhost:5303`；③ 根 `scripts/dev.config.json` 里 react-remote 的 `port`（**必改**：启动器预检/探活都读它）；④ 本 README 顶部端口表。
 - 改vue-host（默认 5314）：① `vue-host/package.json` 的 `dev`/`preview` `--port 5314`；② `scripts/dev.config.json`；③ 本 README 端口表。
 - 生产部署地址（`prod`，如 `/react-remote`）是站点路径，与 dev 端口无关，改端口不要动它。改名（容器名）不建议：还需同步 spec 前缀与页面表。
+
+## 一键运行生产产物
+
+```bash
+pnpm build
+pnpm prod
+```
+
+`prod` 只服务本次 dist，不启动远程开发服务器。它复用 scripts/dev.config.json 的宿主端口，从实际构建入口推导 base，并把远程静态产物挂在同源子路径。无需为本地复现手写 Nginx；部署真实服务器时仍按部署指南配置。多宿主模板分别启动各宿主地址，不把两个宿主的根资源混在一起。先停止 dev，端口占用会失败并停止本次已起服务；不会关闭已有占用进程。Ctrl+C 关闭本次生产服务。
+
+## 插件代码阅读地图
+
+| 文件 | 职责 |
+|---|---|
+| `react-remote/src/application.tsx` | 本应用唯一装配；main 只负责调用 start |
+| `vue-host/src/application.ts` | 本应用唯一装配；main 只负责调用 start |
+| `react-remote/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
+| `vue-host/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
+| `scripts/dev.mjs` / `scripts/prod.mjs` | 统一开发/生产启动器；业务接入不复制它们到应用源码 |
+
+`application` 是新增的插件装配文件，`main` 是已有入口接线；页面组件、业务路由、权限和数据不是每个项目都必写的联邦配置。跨框架基础组合不逐页登记子应用菜单；逐页远程页面模板的页面表仅服务它所展示的逐页场景。`src/fulgurjs/types/` 是插件生成目录，按远程实际版本同步，不维护人工伪造的声明或旧缓存。

package/examples/templates/vue-host-react-remote/package.json

@@ -6,6 +6,7 @@
     "dev:remote": "pnpm --dir react-remote dev",
     "dev:host": "pnpm --dir vue-host dev",
     "dev": "node scripts/dev.mjs",
-    "build": "pnpm --dir react-remote build && pnpm --dir vue-host build"
+    "build": "pnpm --dir react-remote build && pnpm --dir vue-host build",
+    "prod": "node scripts/prod.mjs"
   }
 }