@fulgurjs/federation 5.8.0 → 5.9.1

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

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

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

@@ -0,0 +1,21 @@
+import type { FederationOptions } from '@fulgurjs/federation'
+
+/**
+ * React 宿主联邦配置（examples/templates/showcase/react-host，端口 5336）。
+ * 桥接宿主双框架安装合同：react + react-dom + vue 三键全部 singleton——
+ * Vue 子应用的 shared vue 实例经此协商单例，缺失会表现为双实例（MFU-010）。
+ */
+export default {
+  name: 'react-host',
+  remotes: {
+    'vue-remote': {
+      dev: 'http://localhost:5335',
+      prod: '/vue-remote',
+    },
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+    vue: { singleton: true },
+  },
+} satisfies FederationOptions

package/examples/templates/showcase/react-host/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>react-host（桥接 URL 同步宿主 × Vue 子应用，5336）</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,26 @@
+{
+  "name": "fulgurjs-demo-bridge-react-host",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5336 --strictPort",
+    "build": "vite build",
+    "preview": "vite preview --port 5336 --strictPort",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fulgurjs/federation": "5.9.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.1.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.8.0",
+    "vite": "^6.3.5"
+  }
+}

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

@@ -0,0 +1,33 @@
+/**
+ * examples/templates/showcase/react-host/src/GuardBanner.tsx — 宿主守卫横幅（useBlocker 原生守卫）。
+ * /br-vue/locked 需人工确认：blocked 时渲染「继续/取消」；proceed() 放行提交，
+ * reset() 取消 → 桥接端口观察到真实 blocker 状态，返回 cancelled，URL/子应用位置保持不变。
+ */
+import type { ReactElement } from 'react'
+import { useBlocker } from 'react-router-dom'
+import { logNav } from './demo-log'
+import { BRIDGE_BASE_PATH } from './routing'
+
+export default function GuardBanner(): ReactElement | null {
+  const blocker = useBlocker(({ nextLocation }) => nextLocation.pathname.startsWith(`${BRIDGE_BASE_PATH}/locked`))
+  if (blocker.state !== 'blocked') return null
+  const target = blocker.location?.pathname ?? ''
+
+  const handleProceed = (): void => {
+    logNav('宿主守卫', `继续 → ${target}`)
+    blocker.proceed?.()
+  }
+
+  const handleReset = (): void => {
+    logNav('宿主守卫', `取消 → ${target}（URL/历史/子应用位置保持不变）`)
+    blocker.reset?.()
+  }
+
+  return (
+    <div role="alertdialog" aria-label="宿主守卫确认" style={{ display: 'flex', gap: 12, alignItems: 'center', background: '#fff7e6', border: '1px solid #f0c36d', padding: '8px 12px', marginBottom: 12, borderRadius: 4 }}>
+      <span>宿主守卫（useBlocker）：是否允许前往 <code>{target}</code>？</span>
+      <button onClick={handleProceed}>继续</button>
+      <button onClick={handleReset}>取消</button>
+    </div>
+  )
+}

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

@@ -0,0 +1,42 @@
+/**
+ * examples/templates/showcase/react-host/src/Layout.tsx — 宿主根布局：顶部导航 + 守卫横幅 + Outlet。
+ * 「工单列表 / 设置」是直接跳子应用深链的菜单项：宿主 navigate 到 basePath 下的路径。
+ */
+import { Outlet, useNavigate } from 'react-router-dom'
+import type { ReactElement } from 'react'
+import GuardBanner from './GuardBanner'
+import { logNav } from './demo-log'
+
+interface MenuItem {
+  label: string
+  path: string
+}
+
+const MENUS: MenuItem[] = [
+  { label: '首页', path: '/' },
+  { label: '关于', path: '/about' },
+  { label: '桥接演示页', path: '/br-vue' },
+  { label: '工单列表', path: '/br-vue/orders' },
+  { label: '设置', path: '/br-vue/settings' },
+]
+
+export default function Layout(): ReactElement {
+  const navigate = useNavigate()
+
+  const handleMenu = (item: MenuItem): void => {
+    logNav('宿主菜单', `push ${item.path}`)
+    void navigate(item.path)
+  }
+
+  return (
+    <div style={{ padding: 12, maxWidth: 960, margin: '0 auto', fontFamily: "'PingFang SC', 'Microsoft YaHei', sans-serif" }}>
+      <GuardBanner />
+      <nav aria-label="宿主导航" style={{ display: 'flex', gap: 8, padding: '8px 0', borderBottom: '1px solid #ddd', marginBottom: 12, flexWrap: 'wrap' }}>
+        {MENUS.map((item) => (
+          <button key={item.path} onClick={() => handleMenu(item)}>{item.label}</button>
+        ))}
+      </nav>
+      <Outlet />
+    </div>
+  )
+}

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

@@ -0,0 +1,44 @@
+/**
+ * examples/templates/showcase/react-host/src/ObsPanel.tsx — URL 同步观测台（实时更新）。
+ * 展示：宿主当前 URL（location.href）、子应用逻辑位置、history.length、
+ * 子应用挂载计数、最近 10 条导航事件（带来源标注）。
+ */
+import { useEffect, useState, useSyncExternalStore } from 'react'
+import type { ReactElement } from 'react'
+import { useLocation } from 'react-router-dom'
+import { demoLog } from './demo-log'
+import { BRIDGE_BASE_PATH } from './routing'
+
+export default function ObsPanel(): ReactElement {
+  const snapshot = useSyncExternalStore(demoLog.subscribe, demoLog.getSnapshot)
+  const location = useLocation()
+  const [historyLength, setHistoryLength] = useState(window.history.length)
+
+  useEffect(() => {
+    setHistoryLength(window.history.length)
+  }, [location.key, snapshot])
+
+  const inPrefix = location.pathname === BRIDGE_BASE_PATH || location.pathname.startsWith(`${BRIDGE_BASE_PATH}/`)
+  const childLocation = inPrefix
+    ? (location.pathname.slice(BRIDGE_BASE_PATH.length) || '/') + location.search + location.hash
+    : location.pathname + location.search
+
+  return (
+    <section style={{ border: '1px solid #d0e7ff', background: '#f5faff', padding: '8px 12px', margin: '12px 0', borderRadius: 4 }}>
+      <h3 style={{ margin: '6px 0' }}>URL 同步观测台</h3>
+      <p style={{ margin: '4px 0' }}>宿主当前 URL：<code data-demo-host-url>{window.location.href}</code></p>
+      <p style={{ margin: '4px 0' }}>子应用逻辑位置：<code data-demo-child-location>{childLocation}</code></p>
+      <p style={{ margin: '4px 0' }}>
+        history.length：<code data-demo-history-length>{historyLength}</code>
+        ｜子应用 mount 次数：<code data-demo-mount-count>{snapshot.mountCount}</code>（路由切换应恒为 1）
+      </p>
+      <h4 style={{ margin: '6px 0 2px' }}>最近导航事件（≤10 条，新在下）</h4>
+      <ol style={{ margin: '4px 0', paddingLeft: 20, fontSize: 13 }}>
+        {snapshot.entries.map((entry) => (
+          <li key={entry.id}>[{entry.time}] {entry.source} — {entry.detail}</li>
+        ))}
+        {snapshot.entries.length === 0 && <li style={{ color: '#666' }}>（暂无事件）</li>}
+      </ol>
+    </section>
+  )
+}

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

@@ -0,0 +1,74 @@
+/**
+ * examples/templates/showcase/react-host/src/demo-log.ts — URL 同步观测台数据源（模块级单例，跨宿主页面存活）。
+ * 事件来源标注：宿主菜单 / 深链粘贴 / 子应用 Link / 子应用 push·replace / 子应用 go /
+ * 子应用初始化 / 浏览器前进后退 / 宿主守卫。最多保留 10 条。
+ * 外部经 useSyncExternalStore(demoLog.subscribe, demoLog.getSnapshot) 订阅。
+ */
+export interface NavLogEntry {
+  id: number
+  time: string
+  source: string
+  detail: string
+}
+
+export type DemoChildEvent =
+  | { type: 'mounted'; mountCount: number }
+  | { type: 'nav'; source: string; action: string; detail: string }
+
+export interface DemoLogSnapshot {
+  entries: NavLogEntry[]
+  mountCount: number
+}
+
+let state: DemoLogSnapshot = { entries: [], mountCount: 0 }
+let nextId = 1
+const listeners = new Set<() => void>()
+
+function emitChange(): void {
+  for (const listener of [...listeners]) listener()
+}
+
+function log(source: string, detail: string): void {
+  const entry: NavLogEntry = { id: nextId, time: new Date().toLocaleTimeString('zh-CN', { hour12: false }), source, detail }
+  nextId += 1
+  state = { ...state, entries: [...state.entries, entry].slice(-10) }
+  emitChange()
+}
+
+export const demoLog = {
+  subscribe(listener: () => void): () => void {
+    listeners.add(listener)
+    return () => { listeners.delete(listener) }
+  },
+  getSnapshot(): DemoLogSnapshot {
+    return state
+  },
+  log,
+}
+
+/** 宿主侧显式标注的导航事件（宿主菜单 / 深链粘贴 / 宿主守卫 / 浏览器前进后退） */
+export function logNav(source: string, detail: string): void {
+  log(source, detail)
+}
+
+/** appProps 稳定回调：子应用经它上报挂载计数与导航事件 */
+export function handleChildEvent(event: DemoChildEvent): void {
+  if (event.type === 'mounted') {
+    state = { ...state, mountCount: event.mountCount }
+    emitChange()
+    log('子应用', `mount #${event.mountCount}`)
+    return
+  }
+  log(event.source, `${event.action} ${event.detail}`)
+}
+
+let popInstalled = false
+
+/** 浏览器前进后退（POP）在 main.tsx 安装一次；push/replace 由各自来源显式标注 */
+export function installPopStateLogger(): void {
+  if (popInstalled) return
+  popInstalled = true
+  window.addEventListener('popstate', () => {
+    log('浏览器前进后退', window.location.pathname + window.location.search)
+  })
+}

package/examples/templates/showcase/react-host/src/fulgurjs/types/vue-remote.d/_paths.d.ts

@@ -0,0 +1,4 @@
+// 精确轨启用方法（把下面片段合入宿主 tsconfig 的 compilerOptions；baseUrl 指向本 tsconfig 所在目录）：
+//   "paths": { "vue-remote/*": ["src/fulgurjs/types/vue-remote.d/*"] }
+// 说明：零配置轨（vue-remote.d.ts 的 ambient 声明）可解析但导出为宽松类型；
+// 配置 paths 后同形态导入解析到本目录的转发模块，获得远程源码级类型精度。

package/examples/templates/showcase/react-host/src/fulgurjs/types/vue-remote.d/bridge.ts

@@ -0,0 +1,3 @@
+// 自动生成（精确轨）：经 tsconfig paths 解析到本文件后获得源码级类型
+export * from "../../../../../vue-remote/src/bridge"
+export { default } from "../../../../../vue-remote/src/bridge"

package/examples/templates/showcase/react-host/src/fulgurjs/types/vue-remote.d.ts

@@ -0,0 +1,7 @@
+// 自动生成：fulgurjs-federation dev 类型直连（remote: vue-remote，mode: source）
+// 重新生成：重启 host dev server
+
+declare module "vue-remote/bridge" {
+  const __fg_default: any
+  export default __fg_default
+}

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

@@ -0,0 +1,33 @@
+/**
+ * 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} />)

package/examples/templates/showcase/react-host/src/pages/AboutPage.tsx

@@ -0,0 +1,18 @@
+/**
+ * examples/templates/showcase/react-host/src/pages/AboutPage.tsx — 关于页：场景与工程说明。
+ */
+import type { ReactElement } from 'react'
+
+export default function AboutPage(): ReactElement {
+  return (
+    <section>
+      <h2>关于</h2>
+      <p>examples/templates/showcase：一个 pnpm 模板中的 4 个应用 —— react-remote(5333)、vue-host(5334)、vue-remote(5335)、react-host(5336)。</p>
+      <ul>
+        <li>vue-host（:5334）套 react-remote（:5333），桥接前缀 basePath=/br-react</li>
+        <li>react-host（:5336）套 vue-remote（:5335），桥接前缀 basePath=/br-vue</li>
+      </ul>
+      <p>API 与源码对照、演示操作清单见 examples/templates/showcase/README.md。</p>
+    </section>
+  )
+}

package/examples/templates/showcase/react-host/src/pages/BridgeVuePage.tsx

@@ -0,0 +1,77 @@
+/**
+ * examples/templates/showcase/react-host/src/pages/BridgeVuePage.tsx — 桥接演示页（React 宿主 × Vue 子应用）。
+ * createReactBridgeApp + routing prop（basePath=/br-vue + createReactBridgeNavigation 端口）；
+ * catch-all 路由（/br-vue/* 单条记录）保证子应用内部导航不重挂本组件；
+ * appProps 携带稳定回调供子应用上报事件。
+ */
+import { useState } from 'react'
+import type { ChangeEvent, ReactElement } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { createReactBridgeApp } from '@fulgurjs/federation/bridge/react'
+import { BRIDGE_BASE_PATH, getBridgeRouting } from '../routing'
+import { handleChildEvent, logNav } from '../demo-log'
+import ObsPanel from '../ObsPanel'
+
+const RemoteVueBridge = createReactBridgeApp('vue-remote/bridge', { retries: 1 })
+const appProps = { onChildEvent: handleChildEvent }
+
+export default function BridgeVuePage(): ReactElement {
+  // 端口在 main.tsx 的 initBridgeRouting(router) 之后才可用——必须在组件渲染期取，
+  // 不能放到模块顶层（main.tsx 静态 import 本模块早于 initBridgeRouting 执行）。
+  // getBridgeRouting 返回模块级单例，引用跨重渲染稳定 → routing 键不变，子应用不重挂。
+  const routing = getBridgeRouting()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [deepLink, setDeepLink] = useState(`${window.location.origin}${BRIDGE_BASE_PATH}/orders?q=网络&page=2`)
+  const [deepLinkError, setDeepLinkError] = useState('')
+
+  const handleDeepLinkChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    setDeepLink(event.target.value)
+  }
+
+  const handleDeepLink = (): void => {
+    const raw = deepLink.trim()
+    let path = raw
+    if (/^https?:\/\//i.test(raw)) {
+      try {
+        const parsed = new URL(raw)
+        path = parsed.pathname + parsed.search
+      } catch {
+        setDeepLinkError('URL 无法解析')
+        return
+      }
+    }
+    if (path !== BRIDGE_BASE_PATH && !path.startsWith(`${BRIDGE_BASE_PATH}/`)) {
+      setDeepLinkError(`路径必须位于 ${BRIDGE_BASE_PATH} 前缀下`)
+      return
+    }
+    setDeepLinkError('')
+    logNav('深链粘贴', `push ${path}`)
+    void navigate(path)
+  }
+
+  return (
+    <section>
+      <h2>桥接演示：React 宿主 × Vue 子应用（URL 同步）</h2>
+      <p style={{ color: '#666', fontSize: 13, margin: '4px 0' }}>
+        子应用挂载在宿主 <code>{BRIDGE_BASE_PATH}</code> 前缀下；当前宿主路径：
+        <code>{location.pathname + location.search}</code>
+      </p>
+      <ObsPanel />
+      <section style={{ border: '1px dashed #bbb', padding: '8px 12px', margin: '12px 0', borderRadius: 4 }}>
+        <h3 style={{ margin: '6px 0' }}>深链粘贴框（push 侧「刷新直达」复现）</h3>
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+          <input value={deepLink} onChange={handleDeepLinkChange} style={{ flex: '1 1 320px' }} aria-label="深链粘贴框" />
+          <button onClick={handleDeepLink}>push 复现直达</button>
+        </div>
+        {deepLinkError !== '' && <p style={{ color: '#c0392b' }}>{deepLinkError}</p>}
+        <p style={{ color: '#666', fontSize: 13, margin: '4px 0' }}>
+          粘贴带中文 query 的完整 URL 后点击按钮 = 复制地址栏在新窗口打开前的 push 侧动作。
+        </p>
+      </section>
+      <section data-demo-bridge-area style={{ border: '2px solid #42b883', padding: '8px 12px', margin: '12px 0', borderRadius: 4 }}>
+        <RemoteVueBridge routing={routing} appProps={appProps} />
+      </section>
+    </section>
+  )
+}

package/examples/templates/showcase/react-host/src/pages/HomePage.tsx

@@ -0,0 +1,14 @@
+/**
+ * examples/templates/showcase/react-host/src/pages/HomePage.tsx — 宿主首页。
+ */
+import type { ReactElement } from 'react'
+
+export default function HomePage(): ReactElement {
+  return (
+    <section>
+      <h2>首页</h2>
+      <p>双向桥接 URL 同步演示：宿主页级路由（首页 / 关于 / 桥接演示页）+ 子应用受控 memory 路由。</p>
+      <p>顶部菜单「桥接演示页 / 工单列表 / 设置」经宿主 navigate 直达子应用深链。</p>
+    </section>
+  )
+}

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

@@ -0,0 +1,30 @@
+/**
+ * examples/templates/showcase/react-host/src/routing.ts — 桥接宿主导航端口（模块级单例）。
+ * createReactBridgeNavigation 仅支持 data router 模式（createBrowserRouter/createHashRouter）；
+ * dev 下 Vite base 为 '/' 无需 basename；子目录部署时与 createBrowserRouter 同源传 basename。
+ * 端口引用保持稳定 → routing 键不变，宿主不重挂、不重复订阅。
+ */
+import { createReactBridgeNavigation } from '@fulgurjs/federation/bridge/router/react'
+
+export const BRIDGE_BASE_PATH = '/br-vue'
+
+/**
+ * 宿主 routing prop 结构（BridgeHostRouting）。
+ * 注：5.4.1 发布包未从 /bridge/router/react 导出 BridgeHostRouting 类型（README §8.3 示例
+ * 与发布包类型面不一致，已知问题），这里用端口函数返回值结构化等价替代。
+ */
+interface BridgeHostRoutingLike {
+  basePath: string
+  navigation: ReturnType<typeof createReactBridgeNavigation>
+}
+
+let routing: BridgeHostRoutingLike | undefined
+
+export function initBridgeRouting(router: Parameters<typeof createReactBridgeNavigation>[0]): void {
+  routing = { basePath: BRIDGE_BASE_PATH, navigation: createReactBridgeNavigation(router) }
+}
+
+export function getBridgeRouting(): BridgeHostRoutingLike {
+  if (!routing) throw new Error('桥接路由端口未初始化：请先在 main.tsx 调用 initBridgeRouting(router)')
+  return routing
+}

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

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "fulgurjs.config.ts", "vite.config.ts"],
+  "exclude": ["src/fulgurjs/types/vue-remote.d"]
+}

package/examples/templates/showcase/react-host/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { federation } from '@fulgurjs/federation'
+import fulgurjsConfig from './fulgurjs.config.ts'
+
+export default defineConfig({
+  plugins: [react(), federation(fulgurjsConfig)],
+})

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

@@ -0,0 +1,18 @@
+import type { FederationOptions } from '@fulgurjs/federation'
+
+/**
+ * React 子应用联邦配置（examples/templates/showcase/react-remote，端口 5333）。
+ * 只暴露 ./bridge 桥接契约；宿主（vue-host）启用 URL 同步后经它加载。
+ * react-router-dom 是子应用自己的受控路由库（不进 shared），由消费方自装。
+ */
+export default {
+  name: 'react-remote',
+  filename: 'fulgurjs-remoteEntry.js',
+  exposes: {
+    './bridge': './src/bridge.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+} satisfies FederationOptions

package/examples/templates/showcase/react-remote/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>react-remote（桥接 URL 同步子应用，5333）</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,25 @@
+{
+  "name": "fulgurjs-demo-bridge-react-remote",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5333 --strictPort",
+    "build": "vite build",
+    "preview": "vite preview --port 5333 --strictPort",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fulgurjs/federation": "5.9.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.8.0",
+    "vite": "^6.3.5"
+  }
+}

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

@@ -0,0 +1,48 @@
+/**
+ * examples/templates/showcase/react-remote/src/ChildLayout.tsx — 子应用根布局：导航演示按钮 + Outlet。
+ * push/replace 走被 createReactBridgeRouter 接管的 router.navigate（经通道同步宿主 URL）；
+ * 数字 navigate 委托宿主浏览器历史（go），不创建第二条独立历史。
+ */
+import { Outlet, useNavigate } from 'react-router-dom'
+import type { ReactElement } from 'react'
+import { getMountCount, reportNav } from './child-bus'
+
+export default function ChildLayout(): ReactElement {
+  const navigate = useNavigate()
+
+  const handlePushDemo = (): void => {
+    const target = `/orders?page=2&q=${encodeURIComponent('演示')}`
+    reportNav('子应用 push/replace', 'push', target)
+    void navigate(target)
+  }
+
+  const handleReplaceDemo = (): void => {
+    reportNav('子应用 push/replace', 'replace', '/settings')
+    void navigate('/settings', { replace: true })
+  }
+
+  const handleGoBack = (): void => {
+    reportNav('子应用 go', 'go', '-1')
+    navigate(-1)
+  }
+
+  const handleGoForward = (): void => {
+    reportNav('子应用 go', 'go', '1')
+    navigate(1)
+  }
+
+  return (
+    <div style={{ borderTop: '1px dashed #ccc', marginTop: 8, paddingTop: 8 }}>
+      <p style={{ margin: '4px 0' }}>
+        <strong>React 子应用</strong>（受控 memory 路由）· 本会话挂载次数：{getMountCount()}
+      </p>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '8px 0' }}>
+        <button onClick={handlePushDemo}>子应用 push /orders?q=演示&amp;page=2</button>
+        <button onClick={handleReplaceDemo}>子应用 replace /settings</button>
+        <button onClick={handleGoBack}>子应用 go(-1)</button>
+        <button onClick={handleGoForward}>子应用 go(1)</button>
+      </div>
+      <Outlet />
+    </div>
+  )
+}