@fulgurjs/federation 6.11.6 → 6.11.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cli.js +16 -8
- package/dist/index.cjs +2 -2
- package/dist/index.js +2 -2
- package/dist/runtime.js +1 -1
- package/examples/templates/README.md +5 -1
- package/examples/templates/react-host-vue-remote/README.md +2 -2
- package/examples/templates/react-host-vue-remote/react-host/src/{application.tsx → fulgurjs/host/application.tsx} +2 -1
- package/examples/templates/react-host-vue-remote/react-host/src/{host-session.ts → fulgurjs/host/session.ts} +1 -1
- package/examples/templates/react-host-vue-remote/react-host/src/main.tsx +1 -1
- package/examples/templates/react-host-vue-remote/vue-remote/README.md +2 -2
- package/examples/templates/react-host-vue-remote/vue-remote/fulgurjs.config.ts +1 -1
- package/examples/templates/react-host-vue-remote/vue-remote/src/App.vue +1 -1
- package/examples/templates/react-host-vue-remote/vue-remote/src/{application.ts → fulgurjs/exposes/application.ts} +4 -3
- package/examples/templates/react-host-vue-remote/vue-remote/src/main.ts +1 -1
- package/examples/templates/react-react/README.md +5 -5
- package/examples/templates/react-react/host/README.md +1 -1
- package/examples/templates/react-react/host/src/{application.tsx → fulgurjs/host/application.tsx} +3 -2
- package/examples/templates/react-react/host/src/{remotePages.tsx → fulgurjs/host/remotePages.tsx} +1 -1
- package/examples/templates/react-react/host/src/main.tsx +1 -1
- package/examples/templates/react-react/remote/README.md +4 -4
- package/examples/templates/react-react/remote/fulgurjs.config.ts +4 -4
- package/examples/templates/react-react/remote/src/App.tsx +1 -1
- package/examples/templates/react-react/remote/src/{application.tsx → fulgurjs/exposes/application.tsx} +2 -1
- package/examples/templates/react-react/remote/src/main.tsx +1 -1
- package/examples/templates/showcase/README.md +13 -13
- package/examples/templates/showcase/react-host/src/GuardBanner.tsx +2 -2
- package/examples/templates/showcase/react-host/src/Layout.tsx +1 -1
- package/examples/templates/showcase/react-host/src/ObsPanel.tsx +2 -2
- package/examples/templates/showcase/react-host/src/{pages → fulgurjs/host}/BridgeVuePage.tsx +4 -4
- package/examples/templates/showcase/react-host/src/{application.tsx → fulgurjs/host/application.tsx} +5 -4
- package/examples/templates/showcase/react-host/src/{demo-log.ts → fulgurjs/host/demo-log.ts} +1 -1
- package/examples/templates/showcase/react-host/src/{routing.ts → fulgurjs/host/routing.ts} +1 -1
- package/examples/templates/showcase/react-host/src/main.tsx +1 -1
- package/examples/templates/showcase/react-remote/fulgurjs.config.ts +1 -1
- package/examples/templates/showcase/react-remote/src/{application.tsx → fulgurjs/exposes/application.tsx} +7 -6
- package/examples/templates/showcase/react-remote/src/main.tsx +1 -1
- package/examples/templates/showcase/vue-host/src/App.vue +1 -1
- package/examples/templates/showcase/vue-host/src/GuardBanner.vue +1 -1
- package/examples/templates/showcase/vue-host/src/ObsPanel.vue +2 -2
- package/examples/templates/showcase/vue-host/src/{pages → fulgurjs/host}/BridgeReactPage.vue +4 -4
- package/examples/templates/showcase/vue-host/src/{application.ts → fulgurjs/host/application.ts} +5 -4
- package/examples/templates/showcase/vue-host/src/{demo-log.ts → fulgurjs/host/demo-log.ts} +1 -1
- package/examples/templates/showcase/vue-host/src/{guard.ts → fulgurjs/host/guard.ts} +1 -1
- package/examples/templates/showcase/vue-host/src/{routing.ts → fulgurjs/host/routing.ts} +1 -1
- package/examples/templates/showcase/vue-host/src/main.ts +1 -1
- package/examples/templates/showcase/vue-remote/fulgurjs.config.ts +1 -1
- package/examples/templates/showcase/vue-remote/src/{application.ts → fulgurjs/exposes/application.ts} +7 -6
- package/examples/templates/showcase/vue-remote/src/main.ts +1 -1
- package/examples/templates/vue-host-react-remote/README.md +2 -2
- package/examples/templates/vue-host-react-remote/react-remote/README.md +2 -2
- package/examples/templates/vue-host-react-remote/react-remote/fulgurjs.config.ts +1 -1
- package/examples/templates/vue-host-react-remote/react-remote/src/{application.tsx → fulgurjs/exposes/application.tsx} +1 -0
- package/examples/templates/vue-host-react-remote/react-remote/src/main.tsx +1 -1
- package/examples/templates/vue-host-react-remote/vue-host/README.md +1 -1
- package/examples/templates/vue-host-react-remote/vue-host/src/App.vue +1 -1
- package/examples/templates/vue-host-react-remote/vue-host/src/fulgurjs/host/application.ts +6 -0
- package/examples/templates/vue-host-react-remote/vue-host/src/main.ts +1 -1
- package/examples/templates/vue-vue/README.md +6 -6
- package/examples/templates/vue-vue/host/src/{application.ts → fulgurjs/host/application.ts} +5 -4
- package/examples/templates/vue-vue/host/src/main.ts +1 -1
- package/examples/templates/vue-vue/host/src/pages/UtilsDemo.vue +1 -1
- package/examples/templates/vue-vue/remote/README.md +4 -4
- package/examples/templates/vue-vue/remote/fulgurjs.config.ts +4 -4
- package/examples/templates/vue-vue/remote/src/App.vue +1 -1
- package/examples/templates/vue-vue/remote/src/{application.ts → fulgurjs/exposes/application.ts} +2 -1
- package/examples/templates/vue-vue/remote/src/main.ts +1 -1
- package/package.json +1 -1
- package/examples/templates/vue-host-react-remote/vue-host/src/application.ts +0 -5
- /package/examples/templates/react-react/remote/src/{exposes → fulgurjs/exposes}/ClickButton.tsx +0 -0
- /package/examples/templates/react-react/remote/src/{exposes → fulgurjs/exposes}/pages/DetailPage.tsx +0 -0
- /package/examples/templates/react-react/remote/src/{exposes → fulgurjs/exposes}/pages/HomePage.tsx +0 -0
- /package/examples/templates/react-react/remote/src/{exposes → fulgurjs/exposes}/utils.ts +0 -0
- /package/examples/templates/vue-host-react-remote/vue-host/src/{host-session.ts → fulgurjs/host/session.ts} +0 -0
- /package/examples/templates/vue-vue/host/src/{type-demo.ts → fulgurjs/host/type-demo.ts} +0 -0
- /package/examples/templates/vue-vue/remote/src/{exposes → fulgurjs/exposes}/ClickButton.vue +0 -0
- /package/examples/templates/vue-vue/remote/src/{exposes → fulgurjs/exposes}/pages/DetailPage.vue +0 -0
- /package/examples/templates/vue-vue/remote/src/{exposes → fulgurjs/exposes}/pages/HomePage.vue +0 -0
- /package/examples/templates/vue-vue/remote/src/{exposes → fulgurjs/exposes}/utils.ts +0 -0
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
/** 应用装配入口:main 只调用 start;独立与嵌入复用本工厂,每次挂载的实例和清理由插件管理。 */
|
|
1
2
|
import { createApp } from 'vue'
|
|
2
3
|
import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'
|
|
3
4
|
import { defineApplication } from '@fulgurjs/federation/vue'
|
|
4
|
-
import App from '
|
|
5
|
-
import HomePage from '
|
|
6
|
-
import AboutPage from '
|
|
5
|
+
import App from '../../App.vue'
|
|
6
|
+
import HomePage from '../../HomePage.vue'
|
|
7
|
+
import AboutPage from '../../AboutPage.vue'
|
|
7
8
|
|
|
8
9
|
export interface BridgeVueProps { label?: string; onReady?: () => void }
|
|
9
10
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import application from './application'
|
|
1
|
+
import application from './fulgurjs/exposes/application'
|
|
2
2
|
void application.start('#app', { label: '独立 Vue 子应用' }).catch(console.error)
|
|
@@ -34,9 +34,9 @@ pnpm dev # 同时启动远程和宿主
|
|
|
34
34
|
|
|
35
35
|
| 功能 | 位置 |
|
|
36
36
|
| --- | --- |
|
|
37
|
-
| 远程可点击组件(Hooks 计数) | `remote/src/exposes/ClickButton.tsx`,宿主首页消费 |
|
|
38
|
-
| 普通 TS 模块调用(useLoadRemote) | `remote/src/exposes/utils.ts`,`host/src/pages/UtilsDemo.tsx` |
|
|
39
|
-
| 联邦页面(远程首页 / 带参数详情页) | `remote/src/exposes/pages/`,页面表见 `host/fulgurjs.config.ts` |
|
|
37
|
+
| 远程可点击组件(Hooks 计数) | `remote/src/fulgurjs/exposes/ClickButton.tsx`,宿主首页消费 |
|
|
38
|
+
| 普通 TS 模块调用(useLoadRemote) | `remote/src/fulgurjs/exposes/utils.ts`,`host/src/pages/UtilsDemo.tsx` |
|
|
39
|
+
| 联邦页面(远程首页 / 带参数详情页) | `remote/src/fulgurjs/exposes/pages/`,页面表见 `host/fulgurjs.config.ts` |
|
|
40
40
|
| 宿主导航 + 懒加载(不批量预取) | `host/src/main.tsx`(路由级按需加载) |
|
|
41
41
|
| 默认加载/错误/恢复占位 | 插件内置(`remoteComponent` / `createReactHostPages`),示例不自建错误组件 |
|
|
42
42
|
|
|
@@ -100,8 +100,8 @@ pnpm prod
|
|
|
100
100
|
|
|
101
101
|
| 文件 | 职责 |
|
|
102
102
|
|---|---|
|
|
103
|
-
| `host/src/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
104
|
-
| `remote/src/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
103
|
+
| `host/src/fulgurjs/host/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
104
|
+
| `remote/src/fulgurjs/exposes/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
105
105
|
| `host/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
106
106
|
| `remote/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
107
107
|
| `scripts/dev.mjs` / `scripts/prod.mjs` | 统一开发/生产启动器;业务接入不复制它们到应用源码 |
|
|
@@ -19,7 +19,7 @@ pnpm --dir host dev
|
|
|
19
19
|
| --- | --- |
|
|
20
20
|
| `fulgurjs.config.ts` | **联邦唯一声明**:remotes 地址(dev/prod)、页面表 `pages`、前缀归属 `remotePrefixes` |
|
|
21
21
|
| `vite.config.ts` | 标准 Vite 配置,`federation(fulgurjsConfig)` 挂载插件 |
|
|
22
|
-
| `src/remotePages.tsx` | `createReactHostPages({ pages, remotePrefixes })`(模块顶层一次);`component(spec)` 取远程页面组件 |
|
|
22
|
+
| `src/fulgurjs/host/remotePages.tsx` | `createReactHostPages({ pages, remotePrefixes })`(模块顶层一次);`component(spec)` 取远程页面组件 |
|
|
23
23
|
| `src/App.tsx` | `remoteComponent('react-remote/ClickButton')` 消费单个远程组件 |
|
|
24
24
|
| `src/pages/UtilsDemo.tsx` | `useLoadRemote('react-remote/utils')` 调用普通 TS 模块 |
|
|
25
25
|
| `src/main.tsx` | react-router 路由;参数页把 `params`/`query` 透传给远程组件 |
|
package/examples/templates/react-react/host/src/{application.tsx → fulgurjs/host/application.tsx}
RENAMED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
/** 宿主装配入口:main 只调用 start;在这里连接本工程的路由与远程挂载,原业务页面仍在 pages/。 */
|
|
1
2
|
import { StrictMode } from 'react'
|
|
2
3
|
import { defineApplication } from '@fulgurjs/federation/react'
|
|
3
4
|
import { BrowserRouter, Link, Route, Routes, useParams, useSearchParams } from 'react-router-dom'
|
|
4
|
-
import App from '
|
|
5
|
-
import UtilsDemo from '
|
|
5
|
+
import App from '../../App'
|
|
6
|
+
import UtilsDemo from '../../pages/UtilsDemo'
|
|
6
7
|
import { RemoteHomePage, RemoteDetailPage } from './remotePages'
|
|
7
8
|
|
|
8
9
|
export default defineApplication(() => (
|
package/examples/templates/react-react/host/src/{remotePages.tsx → fulgurjs/host/remotePages.tsx}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createReactHostPages } from '@fulgurjs/federation/react'
|
|
2
|
-
import { pages, remotePrefixes } from '
|
|
2
|
+
import { pages, remotePrefixes } from '../../../fulgurjs.config.ts'
|
|
3
3
|
|
|
4
4
|
// 页面适配器:URL 解析、最长前缀远程归属、异步组件缓存、
|
|
5
5
|
// 加载/错误占位(含「重试加载 / 刷新页面重试」)全部由插件完成。
|
|
@@ -17,10 +17,10 @@ pnpm --dir remote dev
|
|
|
17
17
|
|
|
18
18
|
| expose 键 | 源文件 | 说明 |
|
|
19
19
|
| --- | --- | --- |
|
|
20
|
-
| `./ClickButton` | `src/exposes/ClickButton.tsx` | 可点击计数按钮(useState 本地状态) |
|
|
21
|
-
| `./utils` | `src/exposes/utils.ts` | 普通 TS 模块:`sumNumbers` / `DEMO_ANSWER` / `formatPrice` |
|
|
22
|
-
| `./pages/HomePage` | `src/exposes/pages/HomePage.tsx` | 联邦页面:远程首页 |
|
|
23
|
-
| `./pages/DetailPage` | `src/exposes/pages/DetailPage.tsx` | 联邦页面:详情页(接收宿主路由的 `id` / `tab` props) |
|
|
20
|
+
| `./ClickButton` | `src/fulgurjs/exposes/ClickButton.tsx` | 可点击计数按钮(useState 本地状态) |
|
|
21
|
+
| `./utils` | `src/fulgurjs/exposes/utils.ts` | 普通 TS 模块:`sumNumbers` / `DEMO_ANSWER` / `formatPrice` |
|
|
22
|
+
| `./pages/HomePage` | `src/fulgurjs/exposes/pages/HomePage.tsx` | 联邦页面:远程首页 |
|
|
23
|
+
| `./pages/DetailPage` | `src/fulgurjs/exposes/pages/DetailPage.tsx` | 联邦页面:详情页(接收宿主路由的 `id` / `tab` props) |
|
|
24
24
|
|
|
25
25
|
宿主如何调用 `./utils`(宿主侧代码):
|
|
26
26
|
|
|
@@ -8,10 +8,10 @@ export default {
|
|
|
8
8
|
name: 'react-remote',
|
|
9
9
|
filename: 'fulgurjs-remoteEntry.js',
|
|
10
10
|
exposes: {
|
|
11
|
-
'./ClickButton': './src/exposes/ClickButton.tsx',
|
|
12
|
-
'./utils': './src/exposes/utils.ts',
|
|
13
|
-
'./pages/HomePage': './src/exposes/pages/HomePage.tsx',
|
|
14
|
-
'./pages/DetailPage': './src/exposes/pages/DetailPage.tsx',
|
|
11
|
+
'./ClickButton': './src/fulgurjs/exposes/ClickButton.tsx',
|
|
12
|
+
'./utils': './src/fulgurjs/exposes/utils.ts',
|
|
13
|
+
'./pages/HomePage': './src/fulgurjs/exposes/pages/HomePage.tsx',
|
|
14
|
+
'./pages/DetailPage': './src/fulgurjs/exposes/pages/DetailPage.tsx',
|
|
15
15
|
},
|
|
16
16
|
shared: {
|
|
17
17
|
react: { singleton: true },
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
/** 应用装配入口:main 只调用 start;独立与嵌入复用本工厂,每次挂载的实例和清理由插件管理。 */
|
|
1
2
|
import { StrictMode } from 'react'
|
|
2
3
|
import { defineApplication } from '@fulgurjs/federation/react'
|
|
3
|
-
import App from '
|
|
4
|
+
import App from '../../App'
|
|
4
5
|
|
|
5
6
|
// 独立运行入口:单独开发/调试远程自身时使用。
|
|
6
7
|
// 被宿主消费时走的是 fulgurjs-remoteEntry.js 容器入口,与本文件无关。
|
|
@@ -84,14 +84,14 @@ curl --noproxy '*' -s -o /dev/null -w '%{http_code}\n' http://localhost:5335/@fu
|
|
|
84
84
|
|
|
85
85
|
| 插件公开 API | 入口 | 本演示接线位置 |
|
|
86
86
|
|---|---|---|
|
|
87
|
-
| `createVueBridgeApp(spec, options)` | `@fulgurjs/federation/vue` | `vue-host/src/
|
|
88
|
-
| `createVueBridgeNavigation(router)` | `@fulgurjs/federation/vue` | `vue-host/src/routing.ts`(宿主导航端口,application.ts 组装后 `initBridgeRouting(router)`) |
|
|
89
|
-
| `defineApplication(factory, { routing: true })` → 返回 `{ app, router }` | `@fulgurjs/federation/vue` | `vue-remote/src/application.ts`(根据 mode 选择 web/memory history;插件等待初始路由并安装) |
|
|
90
|
-
| `createReactBridgeApp(spec, options)` | `@fulgurjs/federation/react` | `react-host/src/
|
|
91
|
-
| `createReactBridgeNavigation(router, { canNavigate?, basename? })`(仅 data router) | `@fulgurjs/federation/react` | `react-host/src/routing.ts`(`createBrowserRouter` 实例组装后初始化) |
|
|
92
|
-
| `createReactBridgeRouter(routing, routes, { signal })` → `{ element, dispose }` 作为工厂返回值 | `@fulgurjs/federation/react` | `react-remote/src/application.tsx`(`/` 经 loader `redirect('/orders')` 以 replace 规范化) |
|
|
93
|
-
| `defineApplication(factory, { routing: true })`(协议声明,缺失即 MFU-031) | `@fulgurjs/federation/vue`(Vue)/ `@fulgurjs/federation/react`(React) | `vue-remote/src/application.ts`、`react-remote/src/application.tsx`(实例 mode/signal;独立与桥接复用同一套路由) |
|
|
94
|
-
| `BridgeHostRouting`(`{ basePath, navigation }` 组件 prop,独立控制通道不进 appProps) | 类型面见 [API 参考](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/zh/reference/api.md) | `vue-host/src/routing.ts`、`react-host/src/routing.ts`(basePath 常量 `BRIDGE_BASE_PATH`) |
|
|
87
|
+
| `createVueBridgeApp(spec, options)` | `@fulgurjs/federation/vue` | `vue-host/src/fulgurjs/host/BridgeReactPage.vue`(`<RemoteReactBridge :routing="routing" :app-props="appProps" />`) |
|
|
88
|
+
| `createVueBridgeNavigation(router)` | `@fulgurjs/federation/vue` | `vue-host/src/fulgurjs/host/routing.ts`(宿主导航端口,application.ts 组装后 `initBridgeRouting(router)`) |
|
|
89
|
+
| `defineApplication(factory, { routing: true })` → 返回 `{ app, router }` | `@fulgurjs/federation/vue` | `vue-remote/src/fulgurjs/exposes/application.ts`(根据 mode 选择 web/memory history;插件等待初始路由并安装) |
|
|
90
|
+
| `createReactBridgeApp(spec, options)` | `@fulgurjs/federation/react` | `react-host/src/fulgurjs/host/BridgeVuePage.tsx`(`<RemoteVueBridge routing={routing} appProps={appProps} />`) |
|
|
91
|
+
| `createReactBridgeNavigation(router, { canNavigate?, basename? })`(仅 data router) | `@fulgurjs/federation/react` | `react-host/src/fulgurjs/host/routing.ts`(`createBrowserRouter` 实例组装后初始化) |
|
|
92
|
+
| `createReactBridgeRouter(routing, routes, { signal })` → `{ element, dispose }` 作为工厂返回值 | `@fulgurjs/federation/react` | `react-remote/src/fulgurjs/exposes/application.tsx`(`/` 经 loader `redirect('/orders')` 以 replace 规范化) |
|
|
93
|
+
| `defineApplication(factory, { routing: true })`(协议声明,缺失即 MFU-031) | `@fulgurjs/federation/vue`(Vue)/ `@fulgurjs/federation/react`(React) | `vue-remote/src/fulgurjs/exposes/application.ts`、`react-remote/src/fulgurjs/exposes/application.tsx`(实例 mode/signal;独立与桥接复用同一套路由) |
|
|
94
|
+
| `BridgeHostRouting`(`{ basePath, navigation }` 组件 prop,独立控制通道不进 appProps) | 类型面见 [API 参考](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/zh/reference/api.md) | `vue-host/src/fulgurjs/host/routing.ts`、`react-host/src/fulgurjs/host/routing.ts`(basePath 常量 `BRIDGE_BASE_PATH`) |
|
|
95
95
|
| `BridgeChildRoute` / `BridgeLocation`(通道与位置契约) | `@fulgurjs/federation/vue`、`@fulgurjs/federation/react` | 由插件随 mount 第三参数注入子应用;两端仓库源码 `packages/plugin/src/bridge-router-core.ts` |
|
|
96
96
|
|
|
97
97
|
## 配置要点(复刻到其他工程时必读)
|
|
@@ -101,7 +101,7 @@ curl --noproxy '*' -s -o /dev/null -w '%{http_code}\n' http://localhost:5335/@fu
|
|
|
101
101
|
- **vue-remote 的 vue-router 双实例防护**:`resolve.dedupe: ['vue', 'vue-router']` + `optimizeDeps.exclude: ['vue-router']`(vue-router 纯 ESM,exclude 后其 vue 导入被插件 dev 改写到 shared 门面;同 `fixtures/remote-a`)。
|
|
102
102
|
- **react-remote 的 react-router-dom 必须正常进预构建**(同 e2e 实测的 `fixtures/remote-react`:不 exclude、不 alias):其传递依赖 cookie 是 CJS-only 包,exclude 后浏览器报 `does not provide an export named 'parse'`;预构建内的 react 导入不会双实例——插件 dev 会向预构建注入 shared 键外部化 resolver(`fulgurjs:optimize-shared-external`)。
|
|
103
103
|
- **远程类型自动同步**:宿主 dev 启动时插件自动同步远程声明闭包到 `src/fulgurjs/types/<远程名>/`(ambient 声明 + 类型注册表),普通 import 与字符串 API 共用同一套类型;跨框架(React 宿主消费 Vue 远程)同样工作,无需 tsconfig paths 或 exclude。CI 在 typecheck 前运行 `pnpm run types`(= `fulgurjs types`)。
|
|
104
|
-
- **守卫与 go 的交互**:守卫按目标路径拦截(不区分会话内触发方式),子应用 `go(-1)` 回到受守卫页面同样会弹确认;Vue 宿主守卫在任何新导航开始时自动作废旧待确认(`vue-host/src/guard.ts` 的 `invalidatePending`),避免确认横幅悬挂。两宿主守卫都**不拦截本会话的首跳**:整页刷新的深链恢复直接渲染(操作 15),Vue 宿主以 `router.isReady()` 解除首跳武装,与 React 宿主 `useBlocker` 随组件挂载生效的语义对齐。
|
|
104
|
+
- **守卫与 go 的交互**:守卫按目标路径拦截(不区分会话内触发方式),子应用 `go(-1)` 回到受守卫页面同样会弹确认;Vue 宿主守卫在任何新导航开始时自动作废旧待确认(`vue-host/src/fulgurjs/host/guard.ts` 的 `invalidatePending`),避免确认横幅悬挂。两宿主守卫都**不拦截本会话的首跳**:整页刷新的深链恢复直接渲染(操作 15),Vue 宿主以 `router.isReady()` 解除首跳武装,与 React 宿主 `useBlocker` 随组件挂载生效的语义对齐。
|
|
105
105
|
|
|
106
106
|
## 构建 / 类型检查
|
|
107
107
|
|
|
@@ -145,10 +145,10 @@ pnpm prod
|
|
|
145
145
|
|
|
146
146
|
| 文件 | 职责 |
|
|
147
147
|
|---|---|
|
|
148
|
-
| `react-host/src/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
149
|
-
| `react-remote/src/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
150
|
-
| `vue-host/src/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
151
|
-
| `vue-remote/src/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
148
|
+
| `react-host/src/fulgurjs/host/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
149
|
+
| `react-remote/src/fulgurjs/exposes/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
150
|
+
| `vue-host/src/fulgurjs/host/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
151
|
+
| `vue-remote/src/fulgurjs/exposes/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
152
152
|
| `react-host/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
153
153
|
| `react-remote/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
154
154
|
| `vue-host/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import type { ReactElement } from 'react'
|
|
7
7
|
import { useBlocker } from 'react-router-dom'
|
|
8
|
-
import { logNav } from './demo-log'
|
|
9
|
-
import { BRIDGE_BASE_PATH } from './routing'
|
|
8
|
+
import { logNav } from './fulgurjs/host/demo-log'
|
|
9
|
+
import { BRIDGE_BASE_PATH } from './fulgurjs/host/routing'
|
|
10
10
|
|
|
11
11
|
export default function GuardBanner(): ReactElement | null {
|
|
12
12
|
const blocker = useBlocker(({ nextLocation }) => nextLocation.pathname.startsWith(`${BRIDGE_BASE_PATH}/locked`))
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { Outlet, useNavigate } from 'react-router-dom'
|
|
6
6
|
import type { ReactElement } from 'react'
|
|
7
7
|
import GuardBanner from './GuardBanner'
|
|
8
|
-
import { logNav } from './demo-log'
|
|
8
|
+
import { logNav } from './fulgurjs/host/demo-log'
|
|
9
9
|
|
|
10
10
|
interface MenuItem {
|
|
11
11
|
label: string
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
import { useEffect, useState, useSyncExternalStore } from 'react'
|
|
7
7
|
import type { ReactElement } from 'react'
|
|
8
8
|
import { useLocation } from 'react-router-dom'
|
|
9
|
-
import { demoLog } from './demo-log'
|
|
10
|
-
import { BRIDGE_BASE_PATH } from './routing'
|
|
9
|
+
import { demoLog } from './fulgurjs/host/demo-log'
|
|
10
|
+
import { BRIDGE_BASE_PATH } from './fulgurjs/host/routing'
|
|
11
11
|
|
|
12
12
|
export default function ObsPanel(): ReactElement {
|
|
13
13
|
const snapshot = useSyncExternalStore(demoLog.subscribe, demoLog.getSnapshot)
|
package/examples/templates/showcase/react-host/src/{pages → fulgurjs/host}/BridgeVuePage.tsx
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* examples/templates/showcase/react-host/src/
|
|
2
|
+
* examples/templates/showcase/react-host/src/fulgurjs/host/BridgeVuePage.tsx — 桥接演示页(React 宿主 × Vue 子应用)。
|
|
3
3
|
* createReactBridgeApp + routing prop(basePath=/br-vue + createReactBridgeNavigation 端口);
|
|
4
4
|
* catch-all 路由(/br-vue/* 单条记录)保证子应用内部导航不重挂本组件;
|
|
5
5
|
* appProps 携带稳定回调供子应用上报事件。
|
|
@@ -8,9 +8,9 @@ import { useState } from 'react'
|
|
|
8
8
|
import type { ChangeEvent, ReactElement } from 'react'
|
|
9
9
|
import { useLocation, useNavigate } from 'react-router-dom'
|
|
10
10
|
import { createReactBridgeApp } from '@fulgurjs/federation/react'
|
|
11
|
-
import { BRIDGE_BASE_PATH, getBridgeRouting } from '
|
|
12
|
-
import { handleChildEvent, logNav } from '
|
|
13
|
-
import ObsPanel from '
|
|
11
|
+
import { BRIDGE_BASE_PATH, getBridgeRouting } from './routing'
|
|
12
|
+
import { handleChildEvent, logNav } from './demo-log'
|
|
13
|
+
import ObsPanel from '../../ObsPanel'
|
|
14
14
|
|
|
15
15
|
const RemoteVueBridge = createReactBridgeApp('vue-remote/bridge', { retries: 1 })
|
|
16
16
|
const appProps = { onChildEvent: handleChildEvent }
|
package/examples/templates/showcase/react-host/src/{application.tsx → fulgurjs/host/application.tsx}
RENAMED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
/** 宿主装配入口:main 只调用 start;在这里连接本工程的路由与远程挂载,原业务页面仍在 pages/。 */
|
|
1
2
|
import { defineApplication } from '@fulgurjs/federation/react'
|
|
2
3
|
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
|
|
3
|
-
import Layout from '
|
|
4
|
-
import HomePage from '
|
|
5
|
-
import AboutPage from '
|
|
6
|
-
import BridgeVuePage from './
|
|
4
|
+
import Layout from '../../Layout'
|
|
5
|
+
import HomePage from '../../pages/HomePage'
|
|
6
|
+
import AboutPage from '../../pages/AboutPage'
|
|
7
|
+
import BridgeVuePage from './BridgeVuePage'
|
|
7
8
|
import { initBridgeRouting } from './routing'
|
|
8
9
|
import { installPopStateLogger } from './demo-log'
|
|
9
10
|
|
package/examples/templates/showcase/react-host/src/{demo-log.ts → fulgurjs/host/demo-log.ts}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* examples/templates/showcase/react-host/src/demo-log.ts — URL 同步观测台数据源(模块级单例,跨宿主页面存活)。
|
|
2
|
+
* examples/templates/showcase/react-host/src/fulgurjs/host/demo-log.ts — URL 同步观测台数据源(模块级单例,跨宿主页面存活)。
|
|
3
3
|
* 事件来源标注:宿主菜单 / 深链粘贴 / 子应用 Link / 子应用 push·replace / 子应用 go /
|
|
4
4
|
* 子应用初始化 / 浏览器前进后退 / 宿主守卫。最多保留 10 条。
|
|
5
5
|
* 外部经 useSyncExternalStore(demoLog.subscribe, demoLog.getSnapshot) 订阅。
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* examples/templates/showcase/react-host/src/routing.ts — 桥接宿主导航端口(模块级单例)。
|
|
2
|
+
* examples/templates/showcase/react-host/src/fulgurjs/host/routing.ts — 桥接宿主导航端口(模块级单例)。
|
|
3
3
|
* createReactBridgeNavigation 仅支持 data router 模式(createBrowserRouter/createHashRouter);
|
|
4
4
|
* dev 下 Vite base 为 '/' 无需 basename;子目录部署时与 createBrowserRouter 同源传 basename。
|
|
5
5
|
* 端口引用保持稳定 → routing 键不变,宿主不重挂、不重复订阅。
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import application from './application'
|
|
1
|
+
import application from './fulgurjs/host/application'
|
|
2
2
|
void application.start('#root').catch(console.error)
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
/** 应用装配入口:main 只调用 start;独立与嵌入复用本工厂,每次挂载的实例和清理由插件管理。 */
|
|
1
2
|
// 独立与桥接使用同一套真实业务路由;每次工厂创建自己的 router。
|
|
2
3
|
import { createBrowserRouter, RouterProvider, redirect } from 'react-router-dom'
|
|
3
4
|
import { defineApplication, createReactBridgeRouter, hasBridgeMount } from '@fulgurjs/federation/react'
|
|
4
|
-
import ChildLayout from '
|
|
5
|
-
import OrderList from '
|
|
6
|
-
import OrderDetail from '
|
|
7
|
-
import Settings from '
|
|
8
|
-
import Locked from '
|
|
9
|
-
import { createChildReporter, ChildReporterContext, type ChildProps, type ChildReporter } from '
|
|
5
|
+
import ChildLayout from '../../ChildLayout'
|
|
6
|
+
import OrderList from '../../pages/OrderList'
|
|
7
|
+
import OrderDetail from '../../pages/OrderDetail'
|
|
8
|
+
import Settings from '../../pages/Settings'
|
|
9
|
+
import Locked from '../../pages/Locked'
|
|
10
|
+
import { createChildReporter, ChildReporterContext, type ChildProps, type ChildReporter } from '../../child-bus'
|
|
10
11
|
|
|
11
12
|
/** 初始位置读取用的最小 data router 结构面(避免耦合 react-router 内部类型路径) */
|
|
12
13
|
interface MemoryRouterProbe {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import application from './application'
|
|
1
|
+
import application from './fulgurjs/exposes/application'
|
|
2
2
|
void application.start('#root').catch(console.error)
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* examples/templates/showcase/vue-host/src/GuardBanner.vue — 宿主守卫确认横幅(异步 beforeEach 等待用户选择)。
|
|
4
4
|
* 「取消」= Vue Router 导航失败 → 通道收到 cancelled,URL/子应用位置保持不变。
|
|
5
5
|
*/
|
|
6
|
-
import { guardPending, resolveGuard } from './guard'
|
|
6
|
+
import { guardPending, resolveGuard } from './fulgurjs/host/guard'
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
9
|
<template>
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
8
8
|
import { hasBridgeMount } from '@fulgurjs/federation/vue'
|
|
9
9
|
import { useRoute } from 'vue-router'
|
|
10
|
-
import { navLog, mountCount } from './demo-log'
|
|
11
|
-
import { BRIDGE_BASE_PATH } from './routing'
|
|
10
|
+
import { navLog, mountCount } from './fulgurjs/host/demo-log'
|
|
11
|
+
import { BRIDGE_BASE_PATH } from './fulgurjs/host/routing'
|
|
12
12
|
|
|
13
13
|
// 宿主自己是独立 app;子应用挂载不会改变宿主的模式。
|
|
14
14
|
const bridged = hasBridgeMount(getCurrentInstance()?.appContext.app)
|
package/examples/templates/showcase/vue-host/src/{pages → fulgurjs/host}/BridgeReactPage.vue
RENAMED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
/**
|
|
3
|
-
* examples/templates/showcase/vue-host/src/
|
|
3
|
+
* examples/templates/showcase/vue-host/src/fulgurjs/host/BridgeReactPage.vue — 桥接演示页(Vue 宿主 × React 子应用)。
|
|
4
4
|
* createVueBridgeApp + routing prop(basePath=/br-react + createVueBridgeNavigation 端口);
|
|
5
5
|
* catch-all 路由保证子应用内部导航不重挂本组件;appProps 携带稳定回调供子应用上报事件。
|
|
6
6
|
*/
|
|
7
7
|
import { ref } from 'vue'
|
|
8
8
|
import { useRouter } from 'vue-router'
|
|
9
9
|
import { createVueBridgeApp } from '@fulgurjs/federation/vue'
|
|
10
|
-
import { BRIDGE_BASE_PATH, getBridgeRouting } from '
|
|
11
|
-
import { handleChildEvent, logNav } from '
|
|
12
|
-
import ObsPanel from '
|
|
10
|
+
import { BRIDGE_BASE_PATH, getBridgeRouting } from './routing'
|
|
11
|
+
import { handleChildEvent, logNav } from './demo-log'
|
|
12
|
+
import ObsPanel from '../../ObsPanel.vue'
|
|
13
13
|
|
|
14
14
|
const RemoteReactBridge = createVueBridgeApp('react-remote/bridge', { retries: 1 })
|
|
15
15
|
const routing = getBridgeRouting()
|
package/examples/templates/showcase/vue-host/src/{application.ts → fulgurjs/host/application.ts}
RENAMED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
/** 宿主装配入口:main 只调用 start;在这里连接本工程的路由与远程挂载,原业务页面仍在 pages/。 */
|
|
1
2
|
import { createApp } from 'vue'
|
|
2
3
|
import { createRouter, createWebHistory } from 'vue-router'
|
|
3
4
|
import { defineApplication } from '@fulgurjs/federation/vue'
|
|
4
|
-
import App from '
|
|
5
|
-
import HomePage from '
|
|
6
|
-
import AboutPage from '
|
|
7
|
-
import BridgeReactPage from './
|
|
5
|
+
import App from '../../App.vue'
|
|
6
|
+
import HomePage from '../../pages/HomePage.vue'
|
|
7
|
+
import AboutPage from '../../pages/AboutPage.vue'
|
|
8
|
+
import BridgeReactPage from './BridgeReactPage.vue'
|
|
8
9
|
import { initBridgeRouting } from './routing'
|
|
9
10
|
import { installGuard } from './guard'
|
|
10
11
|
import { installPopStateLogger } from './demo-log'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* examples/templates/showcase/vue-host/src/demo-log.ts — URL 同步观测台数据源(模块级单例,跨宿主页面存活)。
|
|
2
|
+
* examples/templates/showcase/vue-host/src/fulgurjs/host/demo-log.ts — URL 同步观测台数据源(模块级单例,跨宿主页面存活)。
|
|
3
3
|
* 事件来源标注:宿主菜单 / 深链粘贴 / 子应用 Link / 子应用 push·replace / 子应用 go /
|
|
4
4
|
* 子应用初始化 / 浏览器前进后退 / 宿主守卫。最多保留 10 条。
|
|
5
5
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* examples/templates/showcase/vue-host/src/guard.ts — 宿主真实权限守卫(Vue Router 4)。
|
|
2
|
+
* examples/templates/showcase/vue-host/src/fulgurjs/host/guard.ts — 宿主真实权限守卫(Vue Router 4)。
|
|
3
3
|
* /br-react/locked 需人工确认:异步 beforeEach 返回 Promise → Vue Router 等待用户选择;
|
|
4
4
|
* 返回 false = 真实取消(NavigationFailure)→ 桥接通道收到 cancelled,URL/历史/子应用位置
|
|
5
5
|
* 全部保持最后确认状态,插件绝不自动重试。
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* examples/templates/showcase/vue-host/src/routing.ts — 桥接宿主导航端口(模块级单例)。
|
|
2
|
+
* examples/templates/showcase/vue-host/src/fulgurjs/host/routing.ts — 桥接宿主导航端口(模块级单例)。
|
|
3
3
|
* application.ts 组装宿主 router 后初始化一次:createVueBridgeNavigation(router)——
|
|
4
4
|
* Vue Router fullPath 已剥离 history base,逻辑路径无需再处理部署前缀;
|
|
5
5
|
* 端口引用保持稳定 → routing 键不变,宿主不重挂、不重复订阅。
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import application from './application'
|
|
1
|
+
import application from './fulgurjs/host/application'
|
|
2
2
|
void application.start('#app').catch(console.error)
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
/** 应用装配入口:main 只调用 start;独立与嵌入复用本工厂,每次挂载的实例和清理由插件管理。 */
|
|
1
2
|
// 独立与桥接装配唯一入口;返回未安装的 app/router,交给插件等待与挂载。
|
|
2
3
|
import { createApp } from 'vue'
|
|
3
4
|
import { createMemoryHistory, createWebHistory, createRouter, type RouteRecordRaw } from 'vue-router'
|
|
4
5
|
import { defineApplication } from '@fulgurjs/federation/vue'
|
|
5
|
-
import ChildLayout from '
|
|
6
|
-
import OrderList from '
|
|
7
|
-
import OrderDetail from '
|
|
8
|
-
import Settings from '
|
|
9
|
-
import Locked from '
|
|
10
|
-
import { createChildReporter, childReporterKey, type ChildProps } from '
|
|
6
|
+
import ChildLayout from '../../ChildLayout.vue'
|
|
7
|
+
import OrderList from '../../pages/OrderList.vue'
|
|
8
|
+
import OrderDetail from '../../pages/OrderDetail.vue'
|
|
9
|
+
import Settings from '../../pages/Settings.vue'
|
|
10
|
+
import Locked from '../../pages/Locked.vue'
|
|
11
|
+
import { createChildReporter, childReporterKey, type ChildProps } from '../../child-bus'
|
|
11
12
|
|
|
12
13
|
const routes: RouteRecordRaw[] = [
|
|
13
14
|
// 根路径以 replace 规范化到 /orders(不产生额外历史条目)
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import application from './application'
|
|
1
|
+
import application from './fulgurjs/exposes/application'
|
|
2
2
|
void application.start('#app').catch(console.error)
|
|
@@ -39,8 +39,8 @@ pnpm prod
|
|
|
39
39
|
|
|
40
40
|
| 文件 | 职责 |
|
|
41
41
|
|---|---|
|
|
42
|
-
| `react-remote/src/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
43
|
-
| `vue-host/src/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
42
|
+
| `react-remote/src/fulgurjs/exposes/application.tsx` | 本应用唯一装配;main 只负责调用 start |
|
|
43
|
+
| `vue-host/src/fulgurjs/host/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
44
44
|
| `react-remote/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
45
45
|
| `vue-host/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
46
46
|
| `scripts/dev.mjs` / `scripts/prod.mjs` | 统一开发/生产启动器;业务接入不复制它们到应用源码 |
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
## 按顺序读源码
|
|
6
6
|
|
|
7
|
-
1. `fulgurjs.config.ts`:`./bridge` 直接 expose `src/application.tsx`,公开模块名称不受文件名称约束。
|
|
8
|
-
2. `src/application.tsx`:`defineApplication` 唯一装配;独立模式用浏览器路由,桥接模式用本地 memory 路由,两者显示同一套真实页面、计数与 props。
|
|
7
|
+
1. `fulgurjs.config.ts`:`./bridge` 直接 expose `src/fulgurjs/exposes/application.tsx`,公开模块名称不受文件名称约束。
|
|
8
|
+
2. `src/fulgurjs/exposes/application.tsx`:`defineApplication` 唯一装配;独立模式用浏览器路由,桥接模式用本地 memory 路由,两者显示同一套真实页面、计数与 props。
|
|
9
9
|
3. `src/main.tsx`:只调用 application.start,不再复制初始化或新增转发文件。
|
|
10
10
|
4. `vue-host/`:宿主的挂载、会话与回调,见[组合说明](../README.md)。
|
|
11
11
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import application from './application'
|
|
1
|
+
import application from './fulgurjs/exposes/application'
|
|
2
2
|
void application.start('#root', { label: '独立 React 子应用' }).catch(console.error)
|
|
@@ -20,6 +20,6 @@ pnpm build # 构建完整组合
|
|
|
20
20
|
- **双框架安装合同**:本宿主同时安装 `vue` + `react` + `react-dom`,shared 三键全部 `singleton: true`。
|
|
21
21
|
- **入口选择**:统一入口 `@fulgurjs/federation/vue`——宿主代码全部来自 /vue,不会加载 React 适配代码(6.0.0 起 /bridge、/bridge/* 深层入口已移除)。
|
|
22
22
|
- **`sessionKey`**:受控登录代次(非业务 props)。置 `null` = 登出态(立即卸载、不再请求);换账号走「null → `clearAppContext()` → 新代次」顺序,保证 A 的 context 字段零残留。
|
|
23
|
-
- **`getContext`**:同步纯 getter(`src/host
|
|
23
|
+
- **`getContext`**:同步纯 getter(`src/fulgurjs/host/session.ts`),桥接层校验其快照的 `sessionKey` 后才代写 AppContext。
|
|
24
24
|
- **`appProps`**:挂载时浅拷贝快照;函数引用(`onReady`)保留原引用;换顶层引用不重挂,需要重置时用 `:key`。
|
|
25
25
|
- 错误占位默认内置中文诊断 +「重试加载 / 刷新页面重试」;可用 `errorComponent` 完全接管。
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { ref } from 'vue'
|
|
7
7
|
import { clearAppContext } from '@fulgurjs/federation/runtime'
|
|
8
8
|
import { createVueBridgeApp } from '@fulgurjs/federation/vue'
|
|
9
|
-
import { getLatestHostContext, login, logout } from './host
|
|
9
|
+
import { getLatestHostContext, login, logout } from './fulgurjs/host/session'
|
|
10
10
|
|
|
11
11
|
// 工厂选项:retries 透传 loadRemote;getContext 在每次实际加载前同步取最新快照
|
|
12
12
|
const RemoteReactApp = createVueBridgeApp('bridge-react-remote/bridge', {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import application from './application'
|
|
1
|
+
import application from './fulgurjs/host/application'
|
|
2
2
|
void application.start('#app').catch(console.error)
|
|
@@ -34,9 +34,9 @@ pnpm dev # 同时启动远程和宿主
|
|
|
34
34
|
|
|
35
35
|
| 功能 | 位置 |
|
|
36
36
|
| --- | --- |
|
|
37
|
-
| 远程可点击组件(计数、本地状态在远程组件内) | `remote/src/exposes/ClickButton.vue`,宿主首页消费 |
|
|
38
|
-
| 普通 TS 模块调用 | `remote/src/exposes/utils.ts`,`host/src/pages/UtilsDemo.vue` |
|
|
39
|
-
| 联邦页面(远程首页 / 带参数详情页) | `remote/src/exposes/pages/`,页面表见 `host/fulgurjs.config.ts` |
|
|
37
|
+
| 远程可点击组件(计数、本地状态在远程组件内) | `remote/src/fulgurjs/exposes/ClickButton.vue`,宿主首页消费 |
|
|
38
|
+
| 普通 TS 模块调用 | `remote/src/fulgurjs/exposes/utils.ts`,`host/src/pages/UtilsDemo.vue` |
|
|
39
|
+
| 联邦页面(远程首页 / 带参数详情页) | `remote/src/fulgurjs/exposes/pages/`,页面表见 `host/fulgurjs.config.ts` |
|
|
40
40
|
| 宿主导航 + 懒加载(不批量预取) | `host/src/App.vue` + `host/src/main.ts`(路由级按需加载) |
|
|
41
41
|
| 默认加载/错误/恢复占位 | 插件内置(`remoteComponent` / `createHostPages`),示例不自建错误组件 |
|
|
42
42
|
|
|
@@ -45,7 +45,7 @@ pnpm dev # 同时启动远程和宿主
|
|
|
45
45
|
启动后打开 <http://localhost:5214/utils-demo>(菜单「TS 模块调用」)。页面会显示真实计算结果:`sumNumbers(2, 3, 7) = 12`、`DEMO_ANSWER = 42`、`formatPrice(12.5)`,以及远程详情组件的 `id=7`、`tab=type-demo`。
|
|
46
46
|
|
|
47
47
|
1. 用编辑器打开整个模板目录,启用 Vue 官方扩展 **Vue - Official**。
|
|
48
|
-
2. 打开 [`host/src/type-demo.ts`](host/src/type-demo.ts),在 `utils.` 后触发补全,或悬停 `sumNumbers`:应显示数字参数和数字返回值。类型直接来自远程,没有手写接口或显式泛型。
|
|
48
|
+
2. 打开 [`host/src/fulgurjs/host/type-demo.ts`](host/src/fulgurjs/host/type-demo.ts),在 `utils.` 后触发补全,或悬停 `sumNumbers`:应显示数字参数和数字返回值。类型直接来自远程,没有手写接口或显式泛型。
|
|
49
49
|
3. 打开 [`host/src/pages/UtilsDemo.vue`](host/src/pages/UtilsDemo.vue),在 `<RemoteDetail>` 上查看属性提示。把 `id="7"` 临时改成 `:id="7"`,应提示数字不能赋给字符串;检查后还原。
|
|
50
50
|
4. 在模板根执行:
|
|
51
51
|
|
|
@@ -122,8 +122,8 @@ pnpm prod
|
|
|
122
122
|
|
|
123
123
|
| 文件 | 职责 |
|
|
124
124
|
|---|---|
|
|
125
|
-
| `host/src/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
126
|
-
| `remote/src/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
125
|
+
| `host/src/fulgurjs/host/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
126
|
+
| `remote/src/fulgurjs/exposes/application.ts` | 本应用唯一装配;main 只负责调用 start |
|
|
127
127
|
| `host/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
128
128
|
| `remote/fulgurjs.config.ts` | 本应用的远程地址、exposes、实际共享依赖 |
|
|
129
129
|
| `scripts/dev.mjs` / `scripts/prod.mjs` | 统一开发/生产启动器;业务接入不复制它们到应用源码 |
|