@fulgurjs/federation 5.2.5 → 5.3.1

package/examples/bridge/react-host/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "fulgurjs-demo-bridge-react-host",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5304 --strictPort",
+    "build": "vite build",
+    "preview": "vite preview --port 5304 --strictPort"
+  },
+  "dependencies": {
+    "@fulgurjs/federation": "5.3.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.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/bridge/react-host/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>
+  export default component
+}

package/examples/bridge/react-host/src/host-session.ts

@@ -0,0 +1,26 @@
+/**
+ * 宿主自有会话源（示例实现）：同步纯 getter，语义要求同 vue-host/src/host-session.ts。
+ */
+export interface HostSession {
+  key: string | null
+  user: { id: number; name: string }
+}
+
+let current: HostSession = { key: 'login-1-alice', user: { id: 1, name: 'Alice' } }
+
+export function getLatestHostContext(): Record<string, unknown> & { sessionKey: string } {
+  if (current.key === null) throw new Error('已登出：此刻不应有桥接代次请求 context')
+  return {
+    sessionKey: current.key,
+    user: current.user,
+    getToken: () => `token-for-${current.key}`,
+  }
+}
+
+export function login(key: string, user: { id: number; name: string }): void {
+  current = { key, user }
+}
+
+export function logout(): void {
+  current = { key: null, user: { id: 0, name: '' } }
+}

package/examples/bridge/react-host/src/main.tsx

@@ -0,0 +1,62 @@
+import { StrictMode, useCallback, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { clearAppContext } from '@fulgurjs/federation/react'
+import { createReactBridgeApp } from '@fulgurjs/federation/bridge/react'
+import { getLatestHostContext, login, logout } from './host-session'
+
+// 工厂选项：fallback（pending 占位）、error（节点或 (error, retry) => ReactNode）、
+// retries、timeout、getContext 与 Vue 宿主同语义
+const RemoteVueApp = createReactBridgeApp('bridge-vue-remote/bridge', {
+  retries: 1,
+  getContext: () => getLatestHostContext(),
+})
+
+function Host() {
+  const [sessionKey, setSessionKey] = useState<string | null>('login-1-alice')
+  const [userName, setUserName] = useState('Alice')
+  const [label, setLabel] = useState('来自 React 宿主')
+  const [readyCount, setReadyCount] = useState(0)
+
+  const handleReady = useCallback(() => setReadyCount((c) => c + 1), [])
+
+  const nextFrame = async (): Promise<void> => {
+    await new Promise((r) => requestAnimationFrame(() => r(null)))
+  }
+
+  const switchUser = async (): Promise<void> => {
+    setSessionKey(null)
+    await nextFrame()
+    clearAppContext()
+    login('login-2-bob', { id: 2, name: 'Bob' })
+    setUserName('Bob')
+    setSessionKey('login-2-bob')
+  }
+
+  const doLogout = async (): Promise<void> => {
+    setSessionKey(null)
+    await nextFrame()
+    clearAppContext()
+    logout()
+    setUserName('')
+  }
+
+  return (
+    <div style={{ fontFamily: 'sans-serif', padding: 16, maxWidth: 720 }}>
+      <h1>React 宿主 × Vue 子应用（@fulgurjs/federation/bridge/react）</h1>
+      <p data-testid="demo-session">{`会话：${sessionKey ?? '未登录'}（${userName || '—'}）· onReady 次数：${readyCount}`}</p>
+      <p>
+        <button data-testid="demo-switch" onClick={() => void switchUser()}>切换到 Bob（clearAppContext → 重挂）</button>
+        <button data-testid="demo-logout" onClick={() => void doLogout()}>登出（sessionKey → null）</button>
+      </p>
+      <section style={{ marginTop: 12 }}>
+        <RemoteVueApp sessionKey={sessionKey} appProps={{ label, onReady: handleReady }} />
+      </section>
+    </div>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Host />
+  </StrictMode>,
+)

package/examples/bridge/react-host/tsconfig.json

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

package/examples/bridge/react-host/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { federation } from '@fulgurjs/federation'
+import fulgurjsConfig from './fulgurjs.config'
+
+export default defineConfig(({ command }) => ({
+  base: command === 'build' ? '/bridge-react-host/' : undefined,
+  plugins: [react(), federation(fulgurjsConfig)],
+}))

package/examples/bridge/react-remote/README.md

@@ -0,0 +1,20 @@
+# bridge-react-remote — React 桥接子应用示例
+
+`@fulgurjs/federation` 跨框架桥接的 **React 18/19 子应用**侧示例：以 `defineBridgeApp`（`@fulgurjs/federation/react`）导出 `mount/unmount` 契约，可被 **Vue 宿主**（配合 `examples/bridge/vue-host`）整站挂载。
+
+## 运行
+
+```bash
+npm install
+npm run dev        # http://localhost:5303（独立运行态）
+npm run build      # 产出 /bridge-react-remote/ 子路径产物
+```
+
+## 关键点
+
+- `src/bridge.tsx`：`defineBridgeApp((props) => <MemoryRouter>…</MemoryRouter>)`，作为 `./bridge` expose 的默认导出。
+- `mount` 的 Promise 在**首次根提交完成后**才 resolve（契约内建提交探针）；首次渲染前报错会拒绝挂载并转 MFU-016。
+- `react-dom/client` 在实际 mount 时才按需加载；共享子路径 `react-dom/client` 与 `react/jsx-runtime` 由宿主/子应用 shared 配方协商单实例。
+- 子应用只安装并共享 `react` + `react-dom`（+ `react-router-dom` 为直接依赖），**不安装 Vue**。
+
+配套阅读：根目录 README §8.2「跨框架桥接 API — /bridge」。

package/examples/bridge/react-remote/fulgurjs.config.ts

@@ -0,0 +1,17 @@
+import type { FederationOptions } from '@fulgurjs/federation'
+
+/**
+ * React 子应用联邦配置：`./bridge` expose = defineBridgeApp 契约模块（任务书 §3.3）。
+ * 子应用只安装并共享自己的框架（react + react-dom），不为桥接安装 Vue。
+ */
+export default {
+  name: 'bridge-react-remote',
+  filename: 'fulgurjs-remoteEntry.js',
+  exposes: {
+    './bridge': './src/bridge.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+} satisfies FederationOptions

package/examples/bridge/react-remote/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>bridge-react-remote（React 桥接子应用独立运行）</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>