@fulgurjs/federation 5.9.3 → 6.1.0
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 +66 -0
- package/README.en.md +57 -416
- package/README.md +56 -446
- package/dist/bridge-app-vue.d.cts +1 -1
- package/dist/bridge-app-vue.d.ts +1 -1
- package/dist/bridge-core.cjs +1 -1
- package/dist/bridge-core.js +2 -2
- package/dist/bridge-errors.cjs +1 -1
- package/dist/bridge-errors.js +1 -1
- package/dist/bridge-host-react.cjs +1 -1
- package/dist/bridge-host-react.js +3 -3
- package/dist/bridge-host-vue.cjs +1 -1
- package/dist/bridge-host-vue.js +3 -3
- package/dist/bridge-router-react.d.ts +22 -3
- package/dist/bridge-router-react.js +107 -9
- package/dist/bridge-router-vue.d.ts +24 -5
- package/dist/bridge-router-vue.js +4 -5
- package/dist/{chunk-YKIFZIBH.js → chunk-77JZ6U6V.js} +1 -1
- package/dist/{chunk-Q6V5O5Y6.js → chunk-ENT3BOTX.js} +1 -1
- package/dist/{chunk-WRJG2YG6.js → chunk-ZAYNS7YQ.js} +1 -1
- package/dist/cli.js +460 -109
- package/dist/index.cjs +25 -38
- package/dist/index.js +25 -38
- package/dist/react-adapter.d.cts +7 -0
- package/dist/react-adapter.d.ts +7 -0
- package/dist/react.d.ts +229 -101
- package/dist/react.js +4 -0
- package/dist/runtime-entry.d.ts +27 -174
- package/dist/runtime-entry.js +0 -1
- package/dist/runtime.js +19 -17
- package/dist/vue-adapter.cjs +13 -1
- package/dist/vue-adapter.d.cts +1 -0
- package/dist/vue-adapter.d.ts +1 -0
- package/dist/vue-adapter.js +14 -2
- package/dist/vue.d.ts +594 -0
- package/dist/vue.js +8 -0
- package/docs/en/migration.md +210 -0
- package/docs/en/reference/api.md +555 -0
- package/docs/en/reference/errors.md +86 -0
- package/docs/{P5-vite7-8 → maintainers/P5-vite7-8}/345/205/274/345/256/271/347/237/251/351/230/265.md +7 -9
- package/docs/{webpack-mf- → maintainers/webpack-mf-}/345/257/271/347/205/247/344/270/216/347/274/272/345/217/243.md +10 -10
- package/docs/maintainers//346/262/231/347/256/261/350/276/271/347/225/214/345/256/241/350/256/241.md +43 -0
- package/docs/zh/migration.md +210 -0
- package/docs/zh/reference/api.md +551 -0
- package/docs/zh/reference/errors.md +86 -0
- package/examples/templates/README.md +1 -1
- package/examples/templates/react-host-vue-remote/pnpm-lock.yaml +7 -7
- package/examples/templates/react-host-vue-remote/pnpm-workspace.yaml +1 -1
- package/examples/templates/react-host-vue-remote/react-host/README.md +2 -2
- package/examples/templates/react-host-vue-remote/react-host/package.json +1 -1
- package/examples/templates/react-host-vue-remote/react-host/src/main.tsx +2 -2
- package/examples/templates/react-host-vue-remote/scripts/dev.config.json +11 -2
- package/examples/templates/react-host-vue-remote/vue-remote/package.json +1 -1
- package/examples/templates/react-host-vue-remote/vue-remote/src/bridge.ts +1 -1
- package/examples/templates/react-react/host/package.json +1 -1
- package/examples/templates/react-react/pnpm-lock.yaml +7 -7
- package/examples/templates/react-react/pnpm-workspace.yaml +1 -1
- package/examples/templates/react-react/remote/package.json +1 -1
- package/examples/templates/react-react/scripts/dev.config.json +11 -2
- package/examples/templates/showcase/README.md +6 -6
- package/examples/templates/showcase/pnpm-lock.yaml +11 -11
- package/examples/templates/showcase/pnpm-workspace.yaml +1 -1
- package/examples/templates/showcase/react-host/package.json +1 -1
- package/examples/templates/showcase/react-host/src/pages/BridgeVuePage.tsx +1 -1
- package/examples/templates/showcase/react-host/src/routing.ts +1 -1
- package/examples/templates/showcase/react-remote/package.json +1 -1
- package/examples/templates/showcase/react-remote/src/bridge.tsx +1 -1
- package/examples/templates/showcase/scripts/dev.config.json +22 -4
- package/examples/templates/showcase/vue-host/package.json +1 -1
- package/examples/templates/showcase/vue-host/src/pages/BridgeReactPage.vue +1 -1
- package/examples/templates/showcase/vue-host/src/routing.ts +3 -13
- package/examples/templates/showcase/vue-remote/package.json +1 -1
- package/examples/templates/showcase/vue-remote/src/bridge.ts +2 -2
- package/examples/templates/vue-host-react-remote/pnpm-lock.yaml +7 -7
- package/examples/templates/vue-host-react-remote/pnpm-workspace.yaml +1 -1
- package/examples/templates/vue-host-react-remote/react-remote/package.json +1 -1
- package/examples/templates/vue-host-react-remote/scripts/dev.config.json +11 -2
- package/examples/templates/vue-host-react-remote/vue-host/README.md +2 -2
- package/examples/templates/vue-host-react-remote/vue-host/package.json +1 -1
- package/examples/templates/vue-host-react-remote/vue-host/src/App.vue +2 -2
- package/examples/templates/vue-vue/host/package.json +1 -1
- package/examples/templates/vue-vue/host/src/main.ts +28 -21
- package/examples/templates/vue-vue/host/src/pages/HomePage.vue +1 -1
- package/examples/templates/vue-vue/pnpm-lock.yaml +7 -7
- package/examples/templates/vue-vue/pnpm-workspace.yaml +1 -1
- package/examples/templates/vue-vue/remote/package.json +1 -1
- package/examples/templates/vue-vue/scripts/dev.config.json +11 -2
- package/package.json +24 -37
- package/dist/bridge-core-D37VanBl.d.ts +0 -99
- package/dist/bridge-host-react-CGymCzD2.d.ts +0 -35
- package/dist/bridge-host-vue-B3GHaQAC.d.ts +0 -32
- package/dist/bridge-react.d.ts +0 -14
- package/dist/bridge-react.js +0 -3
- package/dist/bridge-vue.d.ts +0 -8
- package/dist/bridge-vue.js +0 -3
- package/dist/bridge.d.ts +0 -18
- package/dist/bridge.js +0 -5
- package/dist/chunk-GLASM5EX.js +0 -1730
- package/dist/chunk-V6EASSCR.js +0 -249
- package/dist/chunk-X34EJB4H.js +0 -207
- package/docs/API.en.md +0 -339
- package/docs/API.md +0 -914
- package/docs//346/262/231/347/256/261/350/276/271/347/225/214/345/256/241/350/256/241.md +0 -45
- package/docs//350/277/201/347/247/273/346/214/207/345/215/227.md +0 -179
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,71 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 6.1.0
|
|
4
|
+
|
|
5
|
+
**组件联邦的全局注册组件安装(setup `globalComponents` 契约)。** 修复一类真实缺陷:远程组件模板内的字符串标签(如 `<a-divider>`)按**消费方 app** 的全局注册表解析——提供方 app 里的 `app.use(X)` 全局注册不随组件走,消费方没注册就渲染成无样式的字面自定义元素(真实业务实测:流程内嵌表单的分节线/选人控件/上传按钮全部退化为死元素)。此前 setup 的注册目标 `hostApp` 在「宿主 → 桥接子应用 → 子应用内再消费远程表单」的嵌套场景拿不到真正渲染表单的子应用 app,本版本补齐该链路。
|
|
6
|
+
|
|
7
|
+
### 新增
|
|
8
|
+
|
|
9
|
+
- **`RemoteSetupModule.globalComponents`**(setup 模块可选具名导出,`Record<注册名, 组件>`):提供方声明其暴露面依赖的全局注册组件。运行时在**每次 `loadRemote`** 时把它们幂等注册到当次消费方 app(`app.component` 同名覆盖天然幂等)——按次而非按 setup 一次执行,桥接子应用每次挂载新建 app 实例也能拿到注册。非法导出类型(数组/非对象)按 MFU-011 三段式报错并支持重试。无声明、无消费方 app(手动 `loadRemote`)、或消费方 app 无 `component` 方法时零行为、零副作用。
|
|
10
|
+
- **`LoadRemoteOptions.consumerApp`**(可选):发起本次加载的消费方应用实例。由框架适配器自动传入(Vue 的 `remoteComponent` 在异步包装组件 setup 内同步捕获当前渲染 app),业务代码不需要手填;运行时只在当次调用内消费,不保存、不感知具体框架类型。React 无全局组件注册表,不参与该机制。
|
|
11
|
+
- **`globalComponents` 值支持零参 loader(`() => import('…')`,推荐形态)**:setup 模块自身保持零组件依赖,组件只在本框架消费方真实渲染时才加载——Vue 适配器注册时自动包 `defineAsyncComponent`。静态组件值仍支持(同框架消费一步到位)。实测教训(fixtures R12 回归拦截):setup 若静态 import 框架组件,会把框架依赖图拖进**任意**加载该远程模块的页面(含跨框架纯 TS 消费方),dev 下模块内根相对 URL 在跨源页面解析断链。
|
|
12
|
+
- 单测:`tests/global-components.test.ts`(注册/换 app 重注册/幂等/跳过/MFU-011/失败清缓存/无声明零行为)+ `tests/vue.test.ts` V-9/V-10(jsdom 全链路:远程模板字符串标签经 globalComponents 解析为真实 DOM;loader 形态惰性加载真实执行)。
|
|
13
|
+
|
|
14
|
+
### 修复
|
|
15
|
+
|
|
16
|
+
- **修复(文档):`createReactBridgeRouter` 返回值合同文档缺失 `routerReady` 与 `dispose`**——6.0.0 新增的 `routerReady` 就绪合同(fast 路径同步已 resolve;slow 路径惰性接线完成时 resolve、缺依赖 reject)只存在于源码与类型,公开 API 文档未覆盖。现已在 docs/zh 与 docs/en 的 API 参考/URL 同步指南补齐完整语义(返回类型、等待时机、成功/失败、与 element 的关系、调用顺序、卸载行为)。
|
|
17
|
+
|
|
18
|
+
## 6.0.0
|
|
19
|
+
|
|
20
|
+
**破坏性版本:公共入口统一为四类。** 应用开发者先选框架,再从同一个入口导入全部能力;内部 bridge/router/context 分层不再是用户必学的路径规则。
|
|
21
|
+
|
|
22
|
+
### 破坏性变化(迁移指南:docs/zh/migration.md / docs/en/migration.md)
|
|
23
|
+
|
|
24
|
+
- **公共入口收敛**:`/bridge`、`/bridge/vue`、`/bridge/react`、`/bridge/router/vue`、`/bridge/router/react` 公共入口移除。新合同:
|
|
25
|
+
- Vite 配置与插件类型 → `@fulgurjs/federation`(包根,不变);
|
|
26
|
+
- Vue 应用代码 → `@fulgurjs/federation/vue`(运行时全量 + remoteComponent/createHostPages + defineBridgeApp/createVueBridgeApp + createVueBridgeNavigation/connectVueBridgeRouter);
|
|
27
|
+
- React 应用代码 → `@fulgurjs/federation/react`(运行时全量 + React 适配 + defineBridgeApp/createReactBridgeApp + createReactBridgeNavigation/createReactBridgeRouter);
|
|
28
|
+
- 框架无关浏览器模块 → `@fulgurjs/federation/runtime`(**不再导出** Vue 的 remoteComponent/createHostPages/defineBridgeApp——迁移到 /vue)。
|
|
29
|
+
- 桥接宿主与路由同步实现转为 `/internal/*`(bridge-host-{vue,react}.js、bridge-router-{core,vue,react}.js 新增 internal 导出;internal 不供应用代码导入,dev 门面引用所需)。
|
|
30
|
+
- **`/runtime` 回归真正框架无关**:静态导入图零 vue/react/框架 router(runtime-entry-graph 测试守护);此前 /runtime 实际携带 Vue 适配层。
|
|
31
|
+
- **init `--template` 更名 `--out`**(与 create 的模板概念同名不同义;本轮仍接受 --template 并提示更名,后续版本移除)。
|
|
32
|
+
|
|
33
|
+
### 可选依赖边界(统一入口不制造新负担)
|
|
34
|
+
|
|
35
|
+
- **未安装 vue-router 的纯 Vue 组件工程**导入 /vue:dev、build、skipLibCheck:false 类型检查全部通过。bridge-router-vue 对 vue-router 仅类型导入(宿主导航端口参数为结构化 VueRouterLike,真实 Router 结构兼容可赋值);cancelled 导航失败判定以内联常量等价(vue-router 4.x/5.x 公开枚举一致,回归以真实 vue-router 覆盖)。
|
|
36
|
+
- **未安装 react-router-dom 的纯 React 组件工程**导入 /react:dev(Vite optional-peer-dep 干净拒绝)、build(Vite 8/rolldown throw-stub chunk)、类型检查全部通过。bridge-router-react 对 react-router-dom 仅类型导入 + 模块级按需预热(形状校验兜底空 chunk);就绪时行为与历史逐行一致(含 element.props.router 同步内省),未就绪走惰性宿主(首次渲染等待,缺依赖在首次渲染时以清晰合同内错误暴露)。gzip 预算 4096→4352B(合同增量,实测 4143B)。
|
|
37
|
+
- peerDependenciesMeta 五项(vue/react/react-dom/vue-router/react-router-dom)全部 optional(延续),不自动安装。
|
|
38
|
+
|
|
39
|
+
### 修复
|
|
40
|
+
|
|
41
|
+
- **修复(插件):dev 桥接门面误绑 `{ createVueBridgeApp }`**——internal/bridge-host-vue.js 实际只导出 `createVueBridgeAppWithLoader`(绑定发生在 dist 生成壳)。5.9.x 的旧 /bridge 桥接门面存在同一误写,因 expose 目标从不导入宿主工厂而从未触发;6.0.0 /vue 门面承载完整入口面后被 dev 预构建放大为 MFU-001( MESZC 实测)。修复为取 WithLoader 名并就地绑定 loadRemote;新增 tests/api-facade-bindings.test.ts 以 dist 真实导出面逐名核对门面导入(防回归)。
|
|
42
|
+
- **doctor 不再猜默认应用**:`--apps` 必填(缺省 main 的静默行为移除);支持 `.`(站点根)、完整 URL 条目(多 origin);新增 `--entry <文件名>`(自定义入口)、`--no-entry`(纯宿主)、`--no-manifest`(合法关闭)、`--no-html`;`--json` 输出实际检查目标 mode。
|
|
43
|
+
- **create 环境校验前置**:按模板真实 `engines.node`(>=20.19.0)与 pnpm 存在性在**写入前**校验,不满足即失败并给升级方法(此前在复制/安装后才警告);输出 `cd` 路径加引号(空格/中文路径);宿主入口按 dev.config.json 的 host 标记列出**全部**宿主(showcase 双宿主不再只显示一个)。
|
|
44
|
+
|
|
45
|
+
### 新增
|
|
46
|
+
|
|
47
|
+
- **CLI `fulgurjs port <应用> <新端口> [--write]`**:模板工程端口一处变更,默认预览(计划列出四个受影响文件与命中数),`--write` 才写入;词边界替换不误伤其他端口;README 端口表一并更新。
|
|
48
|
+
- **init 按场景生成最小有效配置**:框架从 package.json 依赖判断(判断不了要求显式 `--framework vue|react`,TTY 询问);`--role consumer|provider|dual` 区分纯消费/纯提供/双角色;shared 只列项目实际安装并跨应用共享的库,不再默认塞 vue-router/pinia/示例业务页。
|
|
49
|
+
- **接入核对清单按角色生成**(UX-03):expose 分类说明(普通组件/函数可直接 expose)、消费方式按需选择(普通组件不需要页面表/桥接)、独立 Router/store 的隔离设计明确为合法;explain/check-pages/doctor/create/help 输出同一合同。
|
|
50
|
+
|
|
51
|
+
### 文档
|
|
52
|
+
|
|
53
|
+
- **统一文档中心**(docs/README.md):docs/zh/(guide×8 + reference×4 + troubleshooting×2 + migration)、docs/en/(逐文件镜像)、docs/maintainers/(architecture/testing/releasing + 通用技术文档)。API/配置/CLI/错误码(48 码)逐项对齐 6.0.0 实现;私有业务资料、任务书与验收记录全部移出公开文档(Git 历史/历史发布不改动,风险自察)。
|
|
54
|
+
- 错误码防漂移门禁改读 docs/zh/reference/errors.md(节标题不变,48 码三方一致校验保持)。
|
|
55
|
+
- npm 包携带文档更新为 zh/en reference(api/errors/migration)+ maintainers 技术文档;根 README 收敛为产品介绍 + 快速开始 + 文档中心导航。
|
|
56
|
+
|
|
57
|
+
### 模板
|
|
58
|
+
|
|
59
|
+
- 五模板全部改为统一入口用法(/vue、/react);插件依赖钉 **6.0.0**(同批发布);根 package.json 声明 `engines.node >=20.19.0`;dev.config.json 应用条目新增 host 标记(create 宿主入口展示的数据源);vue-vue 模板远程 Router 记录从页面表派生(route+spec 唯一来源)。
|
|
60
|
+
- showcase vue-host 的 routing.ts 使用公开导出的 `BridgeHostRouting` 类型(移除历史替代类型)。
|
|
61
|
+
- 锁文件在 6.0.0 上 registry 后单阶段重生成(发布流程既定步骤)。
|
|
62
|
+
|
|
63
|
+
### 质量
|
|
64
|
+
|
|
65
|
+
- 插件单测 683/683(新增 api-facade-bindings、port、入口导出面/导入图守护更新);test:examples 15/15;干净消费者验证(无 vue-router 的 Vue 工程、无 react-router-dom 的 React 工程 × Vite 6/8 dev+build+tsc)通过。
|
|
66
|
+
- 版本 5.9.3 → 6.0.0。
|
|
67
|
+
|
|
68
|
+
|
|
3
69
|
## 5.9.3
|
|
4
70
|
|
|
5
71
|
- **修复:hostPages keepAlive 页在 Vue 3.5 下永不缓存**——Vue 3.5 的 KeepAlive 对「已解析的异步组件」按 `__asyncResolved.name`(内层组件自身的 name)做 include 匹配,而 createHostPages 的保活白名单给的是包装名(`Fulgurjs_<remote>_<spec>`):解析后两名不一致 → 白名单永不命中 → keepAlive 页每次进出都重挂(数据看板计数/表单输入丢失;pages-cli 实测 100% 复现)。修复:keepAlive 页的 loader 对解析结果做**浅克隆独立命名副本**(name 与包装一致,不改写共享模块导出对象——多页共享同一导出时改写会串名;非选项组件保持原样退化为旧行为)。回归:解析后内层与包装同名、共享模块导出保持原样、非 keepAlive 页不受影响(host-pages.test.ts 13/13,全量 675/675)。
|
package/README.en.md
CHANGED
|
@@ -1,459 +1,100 @@
|
|
|
1
1
|
# @fulgurjs/federation
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Let one Vite app use components, pages, functions — or entire sub apps — provided by another.**
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
For example: a main system loads an independently deployed approval page, a Vue page embeds a React sub app, or several apps share one copy of a dependency. Providers and consumers can live in separate repos and build/deploy independently. Supports Vue 3 and React 18/19 on Vite 5.1–8.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
[简体中文](README.md) | **[Documentation center](docs/README.md)** (Chinese [docs/zh](docs/zh/README.md) · English [docs/en](docs/en/README.md))
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Quick start
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
## Choose what you need
|
|
14
|
-
|
|
15
|
-
| Goal | Use | Example |
|
|
16
|
-
|---|---|---|
|
|
17
|
-
| Load a Vue component in Vue | `remoteComponent` | [Vue examples](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/templates/vue-vue) |
|
|
18
|
-
| Load a React component in React | `remoteComponent` from `/react` | [React examples](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/templates/react-react) |
|
|
19
|
-
| Call a remote JS/TS function | `loadRemote`; React also has `useLoadRemote` | Quick start below |
|
|
20
|
-
| Map several host routes to remote pages | `createHostPages` (Vue) / `createReactHostPages` (React) | [Page demo](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/demos/pages-cli) |
|
|
21
|
-
| Embed Vue in React, or React in Vue | `defineBridgeApp` + a host bridge component | [Bridge examples](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/templates) |
|
|
22
|
-
| Restore a sub-app detail route after refresh | Enable bridge URL sync | [Router demo](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/templates/showcase) |
|
|
23
|
-
| Provide user data or run remote initialization | `AppContext`, optional `setup`/`onSession` | Initialization below |
|
|
24
|
-
| Run React 18 and 19 on the same page | Separate dependency groups and consumers using `shareScope` | [Version isolation demo](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/demos/react-versions) |
|
|
25
|
-
|
|
26
|
-
Combine these features as needed. **A simple remote component does not require a bridge, page table or login lifecycle.**
|
|
27
|
-
|
|
28
|
-
## Terms in plain language
|
|
29
|
-
|
|
30
|
-
| Term | Meaning |
|
|
31
|
-
|---|---|
|
|
32
|
-
| Host | The application displaying remote content |
|
|
33
|
-
| Remote | The application providing a module |
|
|
34
|
-
| `exposes` | Files the remote allows other applications to load |
|
|
35
|
-
| `remotes` | The remote names and addresses the host uses |
|
|
36
|
-
| `shared` | Dependencies that participate in sharing, such as Vue or React |
|
|
37
|
-
| `singleton` | Adopt one dependency instance within a share scope; this does not make incompatible major versions compatible |
|
|
38
|
-
| `shareScope` | A group of shared dependencies; separate groups can use separate versions |
|
|
39
|
-
| Bridge | A DOM container in which a sub-app manages its own rendering and cleanup |
|
|
40
|
-
| URL sync | Record the sub-app route in the host URL so refresh, sharing and history navigation can restore it |
|
|
41
|
-
|
|
42
|
-
An application can both expose and consume modules.
|
|
43
|
-
|
|
44
|
-
## Install
|
|
45
|
-
|
|
46
|
-
Install in every participating Vite project:
|
|
11
|
+
**New project** (recommended): scaffold a fully runnable federation workspace from a template:
|
|
47
12
|
|
|
48
13
|
```bash
|
|
49
|
-
pnpm add -D @fulgurjs/federation
|
|
50
|
-
# npm projects: npm install -D @fulgurjs/federation
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
- Supports browser applications using Vue 3, React 18/19, and plain JS/TS modules.
|
|
54
|
-
- Supports Vite 5.1+ within the Vite 5/6/7/8 series. Your framework plugins must also support your chosen Vite version.
|
|
55
|
-
- The plugin requires Node.js ≥18, but **Vite 7/8 require Node.js 20.19+ or 22.12+**. Meet both requirements.
|
|
56
|
-
- Set the build target to `es2022` or newer. Chrome 108+ is the browser baseline; other browsers need corresponding ESM, dynamic import and top-level await support.
|
|
57
|
-
- A pure Vue application needs Vue; a pure React application needs React and react-dom. A cross-framework bridge host installs both frameworks as explained below.
|
|
58
|
-
|
|
59
|
-
## Starting fresh: create a complete project
|
|
60
|
-
|
|
61
|
-
Without an existing project, scaffold from a complete template with the CLI (Node ≥ 20 and pnpm ≥ 9 required):
|
|
62
|
-
|
|
63
|
-
```bash
|
|
64
|
-
npx @fulgurjs/federation create # interactive; or explicit:
|
|
65
14
|
npx @fulgurjs/federation create vue-vue --dir my-federation
|
|
15
|
+
cd my-federation
|
|
16
|
+
pnpm dev
|
|
66
17
|
```
|
|
67
18
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
Template sources live in [examples/templates/](examples/templates/README.md); no manual wiring is needed unless you change names/ports (fixed checklist in the template guide).
|
|
71
|
-
|
|
72
|
-
## Quick start: two Vue applications
|
|
73
|
-
|
|
74
|
-
These steps add federation to **existing Vite + Vue projects**, which retain their own HTML and application entry files.
|
|
75
|
-
|
|
76
|
-
```text
|
|
77
|
-
remote-vue/ Provides a button and add() function; dev port 5174
|
|
78
|
-
host-vue/ Loads them; dev port 5173
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
### 1. Declare remote files
|
|
82
|
-
|
|
83
|
-
`remote-vue/fulgurjs.config.ts`:
|
|
84
|
-
|
|
85
|
-
```ts
|
|
86
|
-
import type { FederationOptions } from '@fulgurjs/federation'
|
|
87
|
-
|
|
88
|
-
export default {
|
|
89
|
-
name: 'remote-vue',
|
|
90
|
-
exposes: {
|
|
91
|
-
'./Button': './src/Button.vue',
|
|
92
|
-
'./math': './src/math.ts',
|
|
93
|
-
},
|
|
94
|
-
shared: { vue: { singleton: true, strictVersion: true } },
|
|
95
|
-
} satisfies FederationOptions
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
`remote-vue/src/Button.vue`:
|
|
99
|
-
|
|
100
|
-
```vue
|
|
101
|
-
<script setup lang="ts">
|
|
102
|
-
import { ref } from 'vue'
|
|
103
|
-
defineProps<{ label: string }>()
|
|
104
|
-
const count = ref(0)
|
|
105
|
-
</script>
|
|
106
|
-
|
|
107
|
-
<template>
|
|
108
|
-
<button @click="count++">{{ label }}: {{ count }}</button>
|
|
109
|
-
</template>
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
`remote-vue/src/math.ts`:
|
|
113
|
-
|
|
114
|
-
```ts
|
|
115
|
-
export function add(a: number, b: number): number {
|
|
116
|
-
return a + b
|
|
117
|
-
}
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
### 2. Declare the address in the host
|
|
19
|
+
**Existing project**: install the package, register the plugin in `vite.config.ts`, and import from the unified entry for your framework:
|
|
121
20
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
```ts
|
|
125
|
-
import type { FederationOptions } from '@fulgurjs/federation'
|
|
126
|
-
|
|
127
|
-
export default {
|
|
128
|
-
name: 'host-vue',
|
|
129
|
-
remotes: {
|
|
130
|
-
'remote-vue': {
|
|
131
|
-
dev: 'http://localhost:5174',
|
|
132
|
-
prod: '/remote-vue',
|
|
133
|
-
},
|
|
134
|
-
},
|
|
135
|
-
shared: { vue: { singleton: true, strictVersion: true } },
|
|
136
|
-
} satisfies FederationOptions
|
|
21
|
+
```bash
|
|
22
|
+
npm add @fulgurjs/federation
|
|
137
23
|
```
|
|
138
24
|
|
|
139
|
-
`dev` is the development URL. `prod` is the deployed URL; `/remote-vue` refers to a path on the host origin, not a local filesystem folder.
|
|
140
|
-
|
|
141
|
-
### 3. Register the plugin in both applications
|
|
142
|
-
|
|
143
|
-
Each project's `vite.config.ts` imports its own federation config:
|
|
144
|
-
|
|
145
25
|
```ts
|
|
146
|
-
|
|
147
|
-
import vue from '@vitejs/plugin-vue'
|
|
26
|
+
// vite.config.ts — build config uses the package root
|
|
148
27
|
import federation from '@fulgurjs/federation'
|
|
149
|
-
import fulgurjsConfig from './fulgurjs.config'
|
|
150
|
-
|
|
151
|
-
export default defineConfig({
|
|
152
|
-
plugins: [vue(), federation(fulgurjsConfig)],
|
|
153
|
-
build: { target: 'es2022' },
|
|
154
|
-
})
|
|
155
|
-
```
|
|
156
28
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
```vue
|
|
164
|
-
<script setup lang="ts">
|
|
165
|
-
import { ref } from 'vue'
|
|
166
|
-
import { loadRemote, remoteComponent } from '@fulgurjs/federation/runtime'
|
|
167
|
-
|
|
168
|
-
const RemoteButton = remoteComponent('remote-vue/Button')
|
|
169
|
-
const result = ref('Not calculated yet')
|
|
170
|
-
|
|
171
|
-
async function calculate() {
|
|
172
|
-
try {
|
|
173
|
-
const math = await loadRemote<{ add(a: number, b: number): number }>('remote-vue/math')
|
|
174
|
-
result.value = String(math.add(1, 2))
|
|
175
|
-
} catch (error) {
|
|
176
|
-
result.value = error instanceof Error ? error.message : String(error)
|
|
177
|
-
}
|
|
29
|
+
export default {
|
|
30
|
+
plugins: [federation({
|
|
31
|
+
name: 'my-app',
|
|
32
|
+
// exposes / remotes / shared as needed — see "Adopting in an existing project"
|
|
33
|
+
})],
|
|
178
34
|
}
|
|
179
|
-
</script>
|
|
180
|
-
|
|
181
|
-
<template>
|
|
182
|
-
<RemoteButton label="Remote button" />
|
|
183
|
-
<button @click="calculate">Call remote add()</button>
|
|
184
|
-
<p>{{ result }}</p>
|
|
185
|
-
</template>
|
|
186
35
|
```
|
|
187
36
|
|
|
188
|
-
In `remote-vue/Button`, `remote-vue` matches the host's `remotes` key and `Button` matches the remote's `./Button` expose key. The `./` can be omitted when loading it.
|
|
189
|
-
|
|
190
|
-
`loadRemote` returns module exports. You still need to call `math.add()` to perform the calculation.
|
|
191
|
-
|
|
192
|
-
### 5. Run both applications
|
|
193
|
-
|
|
194
|
-
```bash
|
|
195
|
-
# Terminal one, inside remote-vue
|
|
196
|
-
npm run dev -- --port 5174 --strictPort
|
|
197
|
-
|
|
198
|
-
# Terminal two, inside host-vue
|
|
199
|
-
npm run dev -- --port 5173 --strictPort
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
Open `http://localhost:5173`. The remote button should count clicks, and the calculation should display `3`. pnpm projects can use `pnpm dev` instead.
|
|
203
|
-
|
|
204
|
-
Complete projects and deployment configuration: [Vue examples](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/templates/vue-vue).
|
|
205
|
-
|
|
206
|
-
## React setup
|
|
207
|
-
|
|
208
|
-
Use the same configuration structure with these changes:
|
|
209
|
-
|
|
210
|
-
1. Use `@vitejs/plugin-react` in `vite.config.ts`, followed by `federation(fulgurjsConfig)`.
|
|
211
|
-
2. Expose `./Button` from `./src/Button.tsx`; configure the remote's address in the host.
|
|
212
|
-
3. Both applications use compatible React/renderer versions and share:
|
|
213
|
-
|
|
214
37
|
```ts
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}
|
|
38
|
+
// Vue app code imports from @fulgurjs/federation/vue
|
|
39
|
+
import { loadRemote, remoteComponent } from '@fulgurjs/federation/vue'
|
|
40
|
+
const RemoteButton = remoteComponent('remote-a/Button')
|
|
41
|
+
const math = await loadRemote<{ add(a: number, b: number): number }>('remote-a/math')
|
|
219
42
|
```
|
|
220
43
|
|
|
221
|
-
Remote `src/Button.tsx`:
|
|
222
|
-
|
|
223
44
|
```tsx
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
export default function Button({ label }: { label: string }) {
|
|
227
|
-
const [count, setCount] = useState(0)
|
|
228
|
-
return <button onClick={() => setCount(count + 1)}>{label}: {count}</button>
|
|
229
|
-
}
|
|
45
|
+
// React app code imports from @fulgurjs/federation/react
|
|
46
|
+
import { remoteComponent, useLoadRemote, RemoteErrorBoundary } from '@fulgurjs/federation/react'
|
|
230
47
|
```
|
|
231
48
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
import { remoteComponent } from '@fulgurjs/federation/react'
|
|
236
|
-
|
|
237
|
-
// Create once at module scope, not on every render.
|
|
238
|
-
const RemoteButton = remoteComponent<{ label: string }>('remote-react/Button', {
|
|
239
|
-
fallback: <p>Loading…</p>,
|
|
240
|
-
})
|
|
241
|
-
|
|
242
|
-
export default function App() {
|
|
243
|
-
return <RemoteButton label="Remote React button" />
|
|
244
|
-
}
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
React also imports `loadRemote` and `useLoadRemote` from `/react` for ordinary modules. Complete projects: [React examples](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/templates/react-react).
|
|
248
|
-
|
|
249
|
-
## Embed Vue and React in each other
|
|
250
|
-
|
|
251
|
-
**A bridge embeds a sub-app with its own component tree. It does not convert a React component into a Vue component.**
|
|
252
|
-
|
|
253
|
-
For a Vue host embedding React:
|
|
254
|
-
|
|
255
|
-
1. React remote `src/bridge.tsx`:
|
|
256
|
-
|
|
257
|
-
```tsx
|
|
258
|
-
import { defineBridgeApp } from '@fulgurjs/federation/react'
|
|
259
|
-
|
|
260
|
-
export default defineBridgeApp((props) => (
|
|
261
|
-
<section>React sub-app: {String(props.message ?? '')}</section>
|
|
262
|
-
))
|
|
263
|
-
```
|
|
264
|
-
|
|
265
|
-
2. Add `exposes: { './bridge': './src/bridge.tsx' }` to the remote config.
|
|
266
|
-
3. Configure the remote address in the Vue host, then use:
|
|
267
|
-
|
|
268
|
-
```vue
|
|
269
|
-
<script setup lang="ts">
|
|
270
|
-
import { createVueBridgeApp } from '@fulgurjs/federation/bridge/vue'
|
|
271
|
-
const RemoteApp = createVueBridgeApp<{ message: string }>('remote-react/bridge')
|
|
272
|
-
</script>
|
|
273
|
-
|
|
274
|
-
<template>
|
|
275
|
-
<RemoteApp :app-props="{ message: 'From Vue host' }" />
|
|
276
|
-
</template>
|
|
49
|
+
```ts
|
|
50
|
+
// Framework-agnostic browser modules: @fulgurjs/federation/runtime (zero Vue/React)
|
|
51
|
+
import { loadRemote, loadShare } from '@fulgurjs/federation/runtime'
|
|
277
52
|
```
|
|
278
53
|
|
|
279
|
-
|
|
54
|
+
## Entries (6.0.0)
|
|
280
55
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
### The shortest bridge mental model
|
|
284
|
-
|
|
285
|
-
| Question | Answer |
|
|
56
|
+
| Where | Entry |
|
|
286
57
|
|---|---|
|
|
287
|
-
|
|
|
288
|
-
|
|
|
289
|
-
|
|
|
290
|
-
|
|
|
291
|
-
| When is URL sync needed? | Only when refresh/share/back-forward must restore the child's internal page (`routing` + `basePath`, configured on both ends). Without it, child navigation not touching the host URL is normal behavior |
|
|
292
|
-
| How do sessions and unmount work? | Login generations use `sessionKey` (new generation re-runs `onSession`; logout → `null` unmounts and empties). Unmount is driven by the host component lifecycle; a child cleanup throw blocks that container until a full page reload |
|
|
293
|
-
|
|
294
|
-
### `appProps` is a mount-time snapshot, not reactive props
|
|
295
|
-
|
|
296
|
-
Top-level fields are shallow-copied at mount; later host-side replacements do **not** update the child. Three channels for live data:
|
|
297
|
-
|
|
298
|
-
| Situation | Use | Cost |
|
|
299
|
-
|---|---|---|
|
|
300
|
-
| Child needs current host values (token, user name…) | Pass a **stable callback** (`getToken: () => store.token`) — calls read the latest value | No remount; good for "reads" |
|
|
301
|
-
| Both sides share one state | Pass the host store instance via `appProps` or AppContext; both subscribe to the same instance | Reactivity does not cross roots; the child subscribes explicitly |
|
|
302
|
-
| Must re-initialize with new props | Change the bridge component's `key` to remount explicitly (full unload → reload chain) | All state resets; do not trigger frequently |
|
|
303
|
-
|
|
304
|
-
This differs from ordinary component props on purpose — it is a structural property of cross-root mounting, not a bug. Separate component trees do not inherit Context, provide/inject or routers. Pass or install what is needed explicitly. Use `remoteComponent` for a same-framework component; use a bridge for a sub-app.
|
|
305
|
-
|
|
306
|
-
Complete bidirectional setup and login/cleanup flows: [bridge examples](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/templates).
|
|
307
|
-
|
|
308
|
-
## Keep child routes in the browser URL
|
|
309
|
-
|
|
310
|
-
Bridging does not change the host URL by default. Enable URL sync to map:
|
|
311
|
-
|
|
312
|
-
```text
|
|
313
|
-
Host /approval/list → Child /list
|
|
314
|
-
Host /approval/detail/42 → Child /detail/42
|
|
315
|
-
```
|
|
316
|
-
|
|
317
|
-
Configure both sides:
|
|
318
|
-
|
|
319
|
-
1. The host router must handle all child paths under `/approval` without unmounting the child on each detail navigation.
|
|
320
|
-
2. Pass `routing` to the host bridge component, including `basePath: '/approval'` and the host navigation adapter.
|
|
321
|
-
3. The child declares `defineBridgeApp(..., { routing: true })` and connects a controlled memory router.
|
|
322
|
-
|
|
323
|
-
Vue uses `createVueBridgeNavigation` / `connectVueBridgeRouter`; React uses `createReactBridgeNavigation` / `createReactBridgeRouter`. React hosts need a data router (`createBrowserRouter` or `createHashRouter`), not `BrowserRouter`. Built-in adapters support Vue Router 4 and React Router ≥6.11.
|
|
324
|
-
|
|
325
|
-
Refresh, shared links and browser history restore the route, **not form contents or business data**. See [routing API](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/API.en.md#url-sync) and the runnable [router demo](https://github.com/chenmingye/fulgurjs-federation/tree/master/examples/templates/showcase).
|
|
326
|
-
|
|
327
|
-
## User data and remote initialization
|
|
328
|
-
|
|
329
|
-
These features are optional. A plain button or utility module does not need them.
|
|
330
|
-
|
|
331
|
-
| Need | API | When |
|
|
332
|
-
|---|---|---|
|
|
333
|
-
| Provide user, token getter, store, etc. | `provideAppContext` | Host supplies them before loading business modules |
|
|
334
|
-
| Read host values | `getAppContext` / `requireAppContext` | Called by remote business code |
|
|
335
|
-
| Initialize a remote once | Default export in configured `setup` file | Before the first business `loadRemote('remote/module')` returns |
|
|
336
|
-
| Synchronize permissions after login/account changes | Named `onSession` export in the same file | Deduplicated by `sessionKey` |
|
|
337
|
-
| Clear account context on logout | `clearAppContext` | Host logout flow; host also removes private pages/caches |
|
|
338
|
-
|
|
339
|
-
`sessionKey` identifies a login attempt; it is **not a token or authorization credential**. Generate a new value on login/account change; token refresh alone retains it.
|
|
340
|
-
|
|
341
|
-
A bridge can read current data using `getContext`. Controlled `sessionKey: null` means logged out: unmount and stop loading. Omitting the key disables controlled session switching.
|
|
342
|
-
|
|
343
|
-
Only a configured `setup` file participates in initialization. `preloadRemote` fetches resources without running setup/onSession. Async initialization must check `context.signal.aborted` before writing state, so late responses do not restore old-account data.
|
|
344
|
-
|
|
345
|
-
See the [API reference](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/API.en.md#context).
|
|
58
|
+
| Vite config, `FederationOptions` types | `@fulgurjs/federation` |
|
|
59
|
+
| Vue app code (components/pages/bridge/router sync) | `@fulgurjs/federation/vue` |
|
|
60
|
+
| React app code (components/pages/bridge/router sync) | `@fulgurjs/federation/react` |
|
|
61
|
+
| Framework-agnostic browser modules | `@fulgurjs/federation/runtime` |
|
|
346
62
|
|
|
347
|
-
|
|
63
|
+
Since 6.0.0 the legacy entries `/bridge`, `/bridge/vue`, `/bridge/react` and `/bridge/router/{vue,react}` are removed; their features live in `/vue` and `/react`. See the [migration guide](docs/en/migration.md).
|
|
348
64
|
|
|
349
|
-
|
|
65
|
+
## Capabilities
|
|
350
66
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
Build each application separately with its own `npm run build`. The remote produces `fulgurjs-remoteEntry.js` and `fulgurjs-manifest.json` by default. The host locates them through `prod`.
|
|
358
|
-
|
|
359
|
-
Check these settings:
|
|
360
|
-
|
|
361
|
-
- Remote deployment `/remote-vue/` → remote Vite `base: '/remote-vue/'` and host `prod: '/remote-vue'`.
|
|
362
|
-
- HTML, remoteEntry and manifest use `Cache-Control: no-cache`; content-hashed chunks can use long-lived caching.
|
|
363
|
-
- SPA routes support refresh; missing resource URLs return 404 rather than HTML.
|
|
364
|
-
- Cross-origin deployments need production CORS headers; dev settings do not configure the production server.
|
|
365
|
-
- Keep chunks still referenced by old pages available during releases, or use a deployment flow that avoids mixed versions.
|
|
366
|
-
|
|
367
|
-
Deployment examples: [Vue](https://github.com/chenmingye/fulgurjs-federation/blob/master/examples/templates/vue-vue/README.md) / [React](https://github.com/chenmingye/fulgurjs-federation/blob/master/examples/templates/react-react/README.md).
|
|
368
|
-
|
|
369
|
-
## Handle failures
|
|
370
|
-
|
|
371
|
-
| Symptom | Check | Recovery |
|
|
372
|
-
|---|---|---|
|
|
373
|
-
| Remote unavailable | Server, address, CORS | Timeout/retry/error UI; optional backup entry or fallback module |
|
|
374
|
-
| Module missing | remotes name and exposes key | Fix the name and retry |
|
|
375
|
-
| Shared version incompatible | Installed versions, requiredVersion, strictVersion, scope | Align or isolate versions |
|
|
376
|
-
| Static dependency remains failed after service recovery | Browser may retain the failed dependency URL | User-initiated refresh preserves the current address |
|
|
377
|
-
| Child unmount fails | Child cleanup, timers and subscriptions | Container stays blocked; refresh and fix cleanup |
|
|
378
|
-
|
|
379
|
-
`remoteComponent` and bridge components provide default error UI. Direct `loadRemote` calls and React `useLoadRemote` require application error handling. An explicit `fallbackModule` does not repair the original remote.
|
|
380
|
-
|
|
381
|
-
Errors include a code, cause and fix. See [error codes](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/API.en.md#error-codes).
|
|
382
|
-
|
|
383
|
-
## Vite 8 and support boundaries
|
|
384
|
-
|
|
385
|
-
**Supports Vite 8 development and production. The earlier large-application startup hang has been fixed and relevant regression tests pass.**
|
|
386
|
-
|
|
387
|
-
Two practical details:
|
|
388
|
-
|
|
389
|
-
- A first dev visit may reload while Vite prepares newly discovered dependencies. Wait for optimization before judging stable behavior. This is not a production behavior on every visit.
|
|
390
|
-
- Some shared scenarios fetch an unused local library copy. One singleton scope still uses one instance; explicitly isolated React 18/19 scopes may use one each. Downloaded file count and active instance count are different.
|
|
391
|
-
|
|
392
|
-
Not provided: SSR/RSC, Node-side federation, React Native, automatic JS/CSS isolation, webpack `script/var` artifact interoperability, component-type conversion, automatic multi-level bridge routing proxies or cross-window route sync. Global CSS/variables can affect the host; children need their own internal error handling.
|
|
393
|
-
|
|
394
|
-
See the [capability comparison](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/webpack-mf-对照与缺口.md) for detailed boundaries and differences from webpack.
|
|
395
|
-
|
|
396
|
-
## Debugging, types and CLI
|
|
397
|
-
|
|
398
|
-
Run in the application directory:
|
|
399
|
-
|
|
400
|
-
```bash
|
|
401
|
-
# No existing project: create a complete project from a template (see "Starting fresh")
|
|
402
|
-
npx @fulgurjs/federation create
|
|
403
|
-
|
|
404
|
-
# Existing project: generate a federation config starter file
|
|
405
|
-
npx fulgurjs init # --template <path> sets the output path (a path, not a template id)
|
|
406
|
-
npx fulgurjs explain
|
|
407
|
-
|
|
408
|
-
# Optional: validate a configured host page table
|
|
409
|
-
npx fulgurjs check-pages --site http://localhost:5173
|
|
410
|
-
|
|
411
|
-
# After deployment under /remote-vue/, substitute your actual site:
|
|
412
|
-
npx fulgurjs doctor --base https://your-site.example --apps remote-vue
|
|
413
|
-
```
|
|
414
|
-
|
|
415
|
-
For `doctor`, `--base` is the site URL and `--apps` lists **deployment subdirectories** (a remote deployed under `/remote-vue/` is `remote-vue`): the example checks `https://your-site.example/remote-vue/`. It does not infer a different development port from a container name.
|
|
416
|
-
|
|
417
|
-
`init` creates a federation config template, not a full application, router or Nginx configuration (use `create` for a new complete project). `check-pages` compares the page table with remote exposes; an unreachable remote is reported as unverified.
|
|
418
|
-
|
|
419
|
-
Remote dev types are generated by default. Accessible source provides more precise mapping; inaccessible source produces `any` declarations without precise checks/completion. Set `dts: false` to disable generation. See the reference for details.
|
|
420
|
-
|
|
421
|
-
Advanced diagnostics use `window.__FULGURJS_SCOPE__`, `window.__FULGURJS_INFO__` and `FULGURJS_DEBUG`. Normal integration does not require editing these objects.
|
|
422
|
-
|
|
423
|
-
## API reference
|
|
424
|
-
|
|
425
|
-
Use the current reference rather than guessing signatures from old task documents:
|
|
426
|
-
|
|
427
|
-
- [Plugin options and defaults](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/API.en.md#plugin-options)
|
|
428
|
-
- [Runtime loading, registration and hooks](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/API.en.md#runtime)
|
|
429
|
-
- [Bridge props, sessions and cleanup](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/API.en.md#bridge)
|
|
430
|
-
- [URL sync and navigation](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/API.en.md#url-sync)
|
|
431
|
-
- [Chinese API reference](https://github.com/chenmingye/fulgurjs-federation/blob/master/docs/API.md)
|
|
432
|
-
|
|
433
|
-
### When an AI implements your integration
|
|
434
|
-
|
|
435
|
-
Specify the framework, whether you need a component or sub-app, remote URLs/expose names, and whether login switching or URL sync is required. Have it read the guide and relevant API section first, preserve the existing Vite configuration, check installed versions and use the correct browser entry. It should not invent configuration fields. Verify mounting, interaction and error handling; URL sync also needs deep-link refresh, history and cancellation checks.
|
|
67
|
+
- **Components & modules**: `remoteComponent` (Vue/React), `useLoadRemote`, `RemoteErrorBoundary`, `loadRemote` — explicit retryable error states, no silent fallbacks.
|
|
68
|
+
- **Per-page pages**: `definePages` + `createHostPages` (host route table → remote pages) with CLI `check-pages` contract checks.
|
|
69
|
+
- **Full sub app bridge**: `defineBridgeApp` (child) + `createVueBridgeApp` / `createReactBridgeApp` (host); mount/unmount, session epochs, unmount-failure quarantine.
|
|
70
|
+
- **URL sync**: `createVueBridgeNavigation` / `createReactBridgeNavigation` (host) + `connectVueBridgeRouter` / `createReactBridgeRouter` (child); deep-link refresh, guard cancellation, query/hash preservation.
|
|
71
|
+
- **Shared dependencies**: singleton / requiredVersion / strictVersion / shareScope / eager, sync & async negotiation, React 18/19 multi-version isolation.
|
|
72
|
+
- **CLI**: `create` / `init` / `explain` / `check-pages` / `doctor` / `port`.
|
|
436
73
|
|
|
437
74
|
## Documentation
|
|
438
75
|
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
76
|
+
| Need | Entry |
|
|
77
|
+
|---|---|
|
|
78
|
+
| New project / existing project | [Getting started](docs/en/guide/getting-started.md) |
|
|
79
|
+
| Vue/React components & plain modules | [Components & modules](docs/en/guide/components-and-modules.md) |
|
|
80
|
+
| Full sub apps / cross-framework nesting | [App bridge](docs/en/guide/app-bridge.md) |
|
|
81
|
+
| Router sync / deep links | [URL sync](docs/en/guide/url-sync.md) |
|
|
82
|
+
| All options & defaults | [Configuration](docs/en/reference/configuration.md) |
|
|
83
|
+
| Full API signatures & semantics | [API reference](docs/en/reference/api.md) |
|
|
84
|
+
| CLI commands & exit codes | [CLI reference](docs/en/reference/cli.md) |
|
|
85
|
+
| Error codes (symptom/cause/fix) | [Error code table](docs/en/reference/errors.md) |
|
|
86
|
+
| Troubleshooting / compatibility | [Troubleshooting](docs/en/troubleshooting/README.md) |
|
|
87
|
+
| Templates & demos | [Examples overview](examples/README.md) |
|
|
444
88
|
|
|
445
|
-
##
|
|
89
|
+
## Examples
|
|
446
90
|
|
|
447
|
-
|
|
91
|
+
Five complete templates (`vue-vue` / `react-react` / `vue-host-react-remote` / `react-host-vue-remote` / `showcase`) plus feature demos live in [examples/](examples/README.md). Each can be copied out and installed standalone.
|
|
448
92
|
|
|
449
|
-
|
|
450
|
-
pnpm --dir packages/plugin install
|
|
451
|
-
pnpm --dir packages/plugin build
|
|
452
|
-
pnpm test:unit
|
|
453
|
-
```
|
|
93
|
+
## Contributing & security
|
|
454
94
|
|
|
455
|
-
See [CONTRIBUTING](
|
|
95
|
+
- See [CONTRIBUTING.md](CONTRIBUTING.md); architecture and release process live in [docs/maintainers/](docs/maintainers/README.md).
|
|
96
|
+
- Please report security issues privately via [SECURITY.md](SECURITY.md).
|
|
456
97
|
|
|
457
98
|
## License
|
|
458
99
|
|
|
459
|
-
[MIT](LICENSE)
|
|
100
|
+
[MIT](LICENSE)
|