@fulgurjs/federation 5.1.4 → 5.2.1

package/examples/vue/remote/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "fulgurjs-demo-vue-remote",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5213 --strictPort",
+    "build": "vite build",
+    "preview": "vite preview --port 5213 --strictPort"
+  },
+  "dependencies": {
+    "@fulgurjs/federation": "5.2.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.8.0",
+    "vite": "^6.3.5"
+  }
+}

package/examples/vue/remote/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <div style="font-family: sans-serif; padding: 16px">
+    <h1>vue-remote 独立运行</h1>
+    <p>这是远程应用自己的壳，用于单独开发。联邦消费方（examples/vue/host）按 exposes 加载以下模块：</p>
+    <ul>
+      <li>./ClickButton —— 可点击计数按钮组件</li>
+      <li>./utils —— 普通 TS 工具模块</li>
+      <li>./pages/HomePage / ./pages/DetailPage —— 联邦页面</li>
+    </ul>
+    <ClickButton />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ClickButton from './exposes/ClickButton.vue'
+</script>

package/examples/vue/remote/src/exposes/ClickButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <button
+    data-testid="demo-remote-button"
+    style="padding: 8px 16px; border: none; border-radius: 6px; background: #1677ff; color: #fff; cursor: pointer"
+    @click="count++"
+  >
+    远程按钮（点击了 {{ count }} 次）
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 本地状态保存在远程组件内部；被宿主消费时运行在宿主页面的 Vue 实例上
+const count = ref(0)
+</script>

package/examples/vue/remote/src/exposes/pages/DetailPage.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-testid="demo-remote-detail">
+    <h3>vue-remote / 详情页</h3>
+    <p data-testid="demo-detail-id">路由参数 id：{{ id }}</p>
+    <p data-testid="demo-detail-tab">query 参数 tab：{{ tab }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 页面参数由宿主路由传入（宿主把 route.params + route.query 作为 props 透传）
+const props = defineProps<{ id?: string; tab?: string }>()
+const id = props.id ?? '(无)'
+const tab = props.tab ?? '(无)'
+</script>

package/examples/vue/remote/src/exposes/pages/HomePage.vue

@@ -0,0 +1,11 @@
+<template>
+  <div data-testid="demo-remote-home">
+    <h3>vue-remote / 首页</h3>
+    <p>这是由 vue-remote 暴露的联邦页面，渲染在宿主的路由出口内。</p>
+    <ClickButton />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ClickButton from '../ClickButton.vue'
+</script>

package/examples/vue/remote/src/exposes/utils.ts

@@ -0,0 +1,10 @@
+/** 普通 TS 工具模块：演示跨应用函数/常量消费（不含任何组件） */
+export const DEMO_ANSWER = 42
+
+export function sumNumbers(...numbers: number[]): number {
+  return numbers.reduce((acc, n) => acc + n, 0)
+}
+
+export function formatPrice(yuan: number): string {
+  return `¥${yuan.toFixed(2)}`
+}

package/examples/vue/remote/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// 独立运行入口：单独开发/调试远程自身时使用。
+// 被宿主消费时走的是 fulgurjs-remoteEntry.js 容器入口，与本文件无关。
+createApp(App).mount('#app')

package/examples/vue/remote/tsconfig.json

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

package/examples/vue/remote/vite.config.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fulgurjs/federation",
-  "version": "5.1.4",
+  "version": "5.2.1",
   "type": "module",
   "description": "Vite Module Federation with full Webpack MF parity. Dev & production, no compromise.",
   "license": "MIT",
@@ -67,7 +67,7 @@
     "docs/P5-vite7-8兼容矩阵.md"
   ],
   "scripts": {
-    "build": "cp ../../README.md README.md && cp ../../README.en.md README.en.md && mkdir -p docs && cp ../../docs/迁移指南.md ../../docs/webpack-mf-对照与缺口.md ../../docs/沙箱边界审计.md ../../docs/P5-vite7-8兼容矩阵.md docs/ && cp ../../CHANGELOG.md CHANGELOG.md && cp ../../DESIGN.md DESIGN.md && rm -rf examples && cp -r ../../examples examples && esbuild src/runtime/index.ts --bundle --format=esm --target=es2022 --minify --outfile=dist/runtime.js && node scripts/gen-runtime.mjs && tsup src/index.ts src/pages.ts src/vue-adapter.ts src/react-adapter.ts src/context.ts --format esm,cjs --dts --external vite --target node18 --clean && tsup src/runtime-entry.ts --format esm --dts --external vite,vue --target node18 && tsup src/react.ts --format esm --dts --external vite,react --target node18 && esbuild src/cli.ts --bundle --format=esm --target=node18 --platform=node --outfile=dist/cli.js && esbuild src/runtime/index.ts --bundle --format=esm --target=es2022 --minify --outfile=dist/runtime.js && node scripts/gen-runtime-entry.mjs && node scripts/check-gzip.mjs && node scripts/check-manual-codes.mjs",
+    "build": "cp ../../README.md README.md && cp ../../README.en.md README.en.md && mkdir -p docs && cp ../../docs/迁移指南.md ../../docs/webpack-mf-对照与缺口.md ../../docs/沙箱边界审计.md ../../docs/P5-vite7-8兼容矩阵.md docs/ && cp ../../CHANGELOG.md CHANGELOG.md && cp ../../DESIGN.md DESIGN.md && rm -rf examples && cp -R ../../examples examples && find examples \\( -name node_modules -o -name dist -o -path '*/src/fulgurjs/types' \\) -exec rm -rf {} + && esbuild src/runtime/index.ts --bundle --format=esm --target=es2022 --minify --outfile=dist/runtime.js && node scripts/gen-runtime.mjs && tsup src/index.ts src/pages.ts src/vue-adapter.ts src/react-adapter.ts src/context.ts --format esm,cjs --dts --external vite --target node18 --clean && tsup src/runtime-entry.ts --format esm --dts --external vite,vue --target node18 && tsup src/react.ts --format esm --dts --external vite,react --target node18 && esbuild src/cli.ts --bundle --format=esm --target=node18 --platform=node --outfile=dist/cli.js && esbuild src/runtime/index.ts --bundle --format=esm --target=es2022 --minify --outfile=dist/runtime.js && node scripts/gen-runtime-entry.mjs && node scripts/check-gzip.mjs && node scripts/check-manual-codes.mjs",
     "dev": "tsup --watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",

package/examples/host/fulgurjs.config.ts

@@ -1,26 +0,0 @@
-// host/fulgurjs.config.ts —— 宿主应用自己的配置（一项目一份；整文件可复制到你的宿主项目根目录）
-//
-// 宿主只写自己的 name / remotes / shared；页面核对数据以具名导出 hostPages 提供给 CLI。
-// Vite 接入（本项目 vite.config.ts 只需两行联邦相关代码）：
-//   import federation from '@fulgurjs/federation'
-//   import fulgurjsConfig from './fulgurjs.config'
-//   // plugins: [ ...原有插件, federation(fulgurjsConfig) ]
-import type { FederationOptions } from '@fulgurjs/federation'
-
-export default {
-  name: 'host-app',
-  // 消费的远程（键 = import 前缀；dev/prod 地址二段式，单地址字符串也行）
-  remotes: {
-    'remote-a': { dev: 'http://localhost:5174/remote-a', prod: '/remote-a' },
-  },
-  shared: {
-    vue: { singleton: true },
-  },
-} satisfies FederationOptions
-
-// ── 以下仅供 CLI explain/check-pages 读取（不是 federation() 的参数）──
-// 页面数据与运行时 createHostPages 消费同一份纯数据模块（唯一手工维护位置）
-export const hostPages = {
-  remotePrefixes: { '/remote-a/': 'remote-a' },
-  pages: [{ route: '/remote-a/home', name: 'RemoteAHome', title: '首页' }],
-}

package/examples/react-host/README.md

@@ -1,28 +0,0 @@
-# react-host / react-remote（React 宿主与远程示例）
-
-独立可运行的 React 联邦工程：从 npm registry 安装正式版 `@fulgurjs/federation`（无 link:/workspace:/绝对路径依赖）。
-
-## 运行
-
-```bash
-# 终端 1：远程（5203）
-cd react-remote && npm install && npm run dev
-
-# 终端 2：宿主（5204）
-cd react-host && npm install && npm run dev
-# 打开 http://localhost:5204 —— 首页有远程按钮与 utils 模块，/remote-react/home 与 /remote-react/detail/42?tab=basic 是远程页面
-```
-
-## 配置形态（每个应用两份文件）
-
-- `fulgurjs.config.ts`：纯数据（FederationOptions）——`vite.config.ts` 调 `federation(fulgurjsConfig)`，`react()` 照常放 plugins。
-- React 应用统一从 `@fulgurjs/federation/react` 导入（`remoteComponent` / `useLoadRemote` / `RemoteErrorBoundary` / `createReactHostPages` 与通用运行时 API）。
-
-## CLI
-
-```bash
-npx fulgurjs explain            # 解析联邦配置
-npx fulgurjs check-pages        # 校验页面表与线上 manifest（远程 dev server 启动时）
-```
-
-与 `fixtures/`（仓库内 e2e 回归夹具，用 `link:` 依赖本地插件）的区别：examples 面向使用者复制，依赖来自 registry。

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

@@ -1,19 +0,0 @@
-import type { FederationOptions } from '@fulgurjs/federation'
-import { pages, remotePrefixes } from './src/federation/pages.data'
-
-export default {
-  name: 'host-react',
-  remotes: {
-    'remote-react': {
-      dev: 'http://localhost:5203',
-      prod: '/remote-react/',
-    },
-  },
-  shared: {
-    react: { singleton: true },
-    'react-dom': { singleton: true },
-  },
-} satisfies FederationOptions
-
-/** 仅 CLI 读取（fulgurjs explain/check-pages）；同一纯数据模块也供浏览器页面适配器使用 */
-export const hostPages = { pages, remotePrefixes }

package/examples/react-host/src/App.tsx

@@ -1,66 +0,0 @@
-/**
- * react-host：一个文件看清 React 宿主的联邦用法。
- * ① 每个应用根目录一份 fulgurjs.config.ts（纯数据）；vite.config.ts 调 federation(fulgurjsConfig)
- * ② React 应用统一从 '@fulgurjs/federation/react' 导入（通用运行时 + React 适配 API）
- * ③ remoteComponent 工厂放模块顶层（首次渲染才加载）；页面用 createReactHostPages + component(spec)
- */
-import { Link, Route, Routes, useParams, useSearchParams } from 'react-router-dom'
-import {
-  createReactHostPages,
-  remoteComponent,
-  remoteSchema,
-  useLoadRemote,
-} from '@fulgurjs/federation/react'
-import { pages, remotePrefixes } from './federation/pages.data'
-
-// 页面表（纯数据 + dev schema；R1–R5 校验与 Vue 完全一致）
-const hp = createReactHostPages({ pages, remotePrefixes, schema: remoteSchema })
-
-// 普通远程组件：模块顶层创建，不能在 render 内重复调用工厂
-const RemoteButton = remoteComponent<{ label: string; onClick?: () => void }>('remote-react/Button', {
-  fallback: <p>正在加载远程按钮…</p>,
-})
-
-// 页面组件：与 Vue 相同动词 component(spec)；路由层用 element 渲染
-const RemoteHome = hp.component('remote-react/pages/home')
-const RemoteDetail = hp.component<{ id: string; tab?: string }>('remote-react/pages/detail')
-
-/** 普通远程模块：useLoadRemote（data/error/loading/reload；错误无默认占位，由宿主决定 UI） */
-function UtilsPanel() {
-  type Utils = { formatMoney(v: number, currency?: string): string }
-  const { data, error, loading, reload } = useLoadRemote<Utils>('remote-react/utils')
-  if (loading) return <p>utils 加载中…</p>
-  if (error) return <button onClick={() => void reload()}>utils 加载失败，重试</button>
-  return (
-    <p>
-      12.5 → {data?.formatMoney(12.5)}（<button onClick={() => void reload()}>reload</button>）
-    </p>
-  )
-}
-
-function DetailRoute() {
-  const { id } = useParams()
-  const [sp] = useSearchParams()
-  return <RemoteDetail id={id ?? ''} tab={sp.get('tab') ?? undefined} />
-}
-
-export default function App() {
-  return (
-    <div style={{ fontFamily: 'sans-serif', padding: 16 }}>
-      <h1>react-host（fulgurjs example）</h1>
-      <nav>
-        <Link to="/">首页</Link> · <Link to="/remote-react/home">远程首页</Link> ·{' '}
-        <Link to="/remote-react/detail/42?tab=basic">远程参数页</Link>
-      </nav>
-      <Routes>
-        <Route path="/" element={<main>
-          <p>宿主首页（远程组件按需加载）</p>
-          <RemoteButton label="远程按钮" onClick={() => console.log('clicked')} />
-          <UtilsPanel />
-        </main>} />
-        <Route path="/remote-react/home" element={<RemoteHome />} />
-        <Route path="/remote-react/detail/:id" element={<DetailRoute />} />
-      </Routes>
-    </div>
-  )
-}

package/examples/react-host/src/federation/pages.data.ts

@@ -1,21 +0,0 @@
-/**
- * 页面表数据（纯数据：不 import React/路由库/浏览器对象——CLI 与浏览器适配器共用）。
- * spec 缺省推导 = 去首段（远程前缀）+ 剥 :参数 段；带参路由建议显式 spec。
- */
-export interface PageRecord {
-  route: string
-  spec?: string
-  name?: string
-  title?: string
-  /** 宿主自由扩展位（keepAlive 等）——与插件 PageRouteLike 的 index signature 对齐 */
-  [key: string]: unknown
-}
-
-export const pages: PageRecord[] = [
-  { route: '/remote-react/home', spec: 'pages/home', name: 'RemoteHome' },
-  { route: '/remote-react/detail/:id', spec: 'pages/detail', name: 'RemoteDetail' },
-]
-
-export const remotePrefixes: Record<string, string> = {
-  '/remote-react': 'remote-react',
-}

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

@@ -1,8 +0,0 @@
-import { createElement, StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import App from './App'
-
-createRoot(document.getElementById('root')!).render(
-  createElement(StrictMode, null, createElement(BrowserRouter, null, createElement(App))),
-)

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

@@ -1,17 +0,0 @@
-import type { FederationOptions } from '@fulgurjs/federation'
-
-export default {
-  name: 'remote-react',
-  exposes: {
-    './Button': './src/Button.tsx',
-    './utils': './src/utils.ts',
-    './pages/home': './src/pages/Home.tsx',
-    './pages/detail': './src/pages/Detail.tsx',
-  },
-  // 有初始化需求才添加（应用级 setup 一次 + 会话级 onSession 按宿主 sessionKey 去重）：
-  // setup: './src/fulgurjs/setup.ts',
-  shared: {
-    react: { singleton: true },
-    'react-dom': { singleton: true },
-  },
-} satisfies FederationOptions

package/examples/react-remote/src/Button.tsx

@@ -1,15 +0,0 @@
-import { useState } from 'react'
-
-export interface ButtonProps {
-  label: string
-  onClick?: () => void
-}
-
-export default function Button({ label, onClick }: ButtonProps) {
-  const [count, setCount] = useState(0)
-  return (
-    <button type="button" onClick={() => { setCount((c) => c + 1); onClick?.() }}>
-      {label}：已点击 {count} 次
-    </button>
-  )
-}

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

@@ -1,6 +0,0 @@
-import { createElement } from 'react'
-import { createRoot } from 'react-dom/client'
-
-createRoot(document.getElementById('root')!).render(
-  createElement('p', null, 'react-remote 独立运行（联邦消费请从 react-host 访问）'),
-)

package/examples/react-remote/src/pages/Detail.tsx

@@ -1,10 +0,0 @@
-/** 参数页：宿主路由的 params/query 以 props 传入（id 必填） */
-export default function Detail({ id, tab }: { id: string; tab?: string }) {
-  return (
-    <section>
-      <h2>remote-react / Detail</h2>
-      <p>id: {id}</p>
-      <p>tab: {tab ?? '(none)'}</p>
-    </section>
-  )
-}

package/examples/react-remote/src/pages/Home.tsx

@@ -1,14 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export default function Home() {
-  const [now, setNow] = useState('')
-  useEffect(() => {
-    setNow(new Date().toISOString().slice(0, 19))
-  }, [])
-  return (
-    <section>
-      <h2>remote-react / Home</h2>
-      <p>mounted at {now}</p>
-    </section>
-  )
-}

package/examples/react-remote/src/utils.ts

@@ -1,3 +0,0 @@
-export function formatMoney(value: number, currency = '¥'): string {
-  return `${currency}${value.toFixed(2)}`
-}

package/examples/remote-a/fulgurjs.config.ts

@@ -1,24 +0,0 @@
-// remote-a/fulgurjs.config.ts —— 远程应用自己的配置（一项目一份；整文件可复制到你的远程项目根目录）
-//
-// Vite 接入（本项目 vite.config.ts 只需两行联邦相关代码）：
-//   import federation from '@fulgurjs/federation'
-//   import fulgurjsConfig from './fulgurjs.config'
-//   // plugins: [ ...原有插件, federation(fulgurjsConfig) ]
-//
-// CLI（纯本地，无网络）：npx fulgurjs explain
-import type { FederationOptions } from '@fulgurjs/federation'
-
-export default {
-  // 联邦容器名（宿主引用它时用这个名；同一页面内唯一）
-  name: 'remote-a',
-  // 对外暴露的模块：'./键' → 相对本项目根的源文件路径
-  exposes: {
-    './pages/remote-a/home': './src/views/Home.vue',
-    './pages/remote-a/detail': './src/views/Detail.vue',
-  },
-  // 可选：远程需要启动期初始化（全局样式/组件/locale）时声明入口文件
-  // setup: './src/fulgurjs/setup.ts',
-  shared: {
-    vue: { singleton: true },
-  },
-} satisfies FederationOptions

package/examples/remote-a/src/views/Detail.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>remote-a detail</div>
-</template>

package/examples/remote-a/src/views/Home.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>remote-a home</div>
-</template>