fix(taro-components): 组件与各lib解耦
这个 PR 做了什么? (简要描述所做更改) 如题
这个 PR 是什么类型? (至少选择一个)
- [x] 错误修复 (Bugfix) issue: fix #
- [ ] 新功能 (Feature)
- [ ] 代码重构 (Refactor)
- [ ] TypeScript 类型定义修改 (Types)
- [ ] 文档修改 (Docs)
- [ ] 代码风格更新 (Code style update)
- [ ] 构建优化 (Chore)
- [ ] 其他,请描述 (Other, please describe):
这个 PR 涉及以下平台:
- [x] 所有平台
- [ ] Web 端(H5)
- [ ] 移动端(React-Native)
- [ ] 鸿蒙(Harmony)
- [ ] 鸿蒙容器(Harmony Hybrid)
- [ ] ASCF 元服务
- [ ] 快应用(QuickApp)
- [ ] 所有小程序
- [ ] 微信小程序
- [ ] 企业微信小程序
- [ ] 京东小程序
- [ ] 百度小程序
- [ ] 支付宝小程序
- [ ] 支付宝 IOT 小程序
- [ ] 钉钉小程序
- [ ] QQ 小程序
- [ ] 飞书小程序
- [ ] 快手小程序
- [ ] 头条小程序
Summary by CodeRabbit
-
新功能
- 按框架拆分并发布组件库(React/Solid/Vue3),对外暴露 dist 输出与子路径导出,若干包从私有改为可发布。
-
重构
- 大量组件的导出源切换到新组件库包;平台运行时与加载器别名、导入路径按框架调整;移除部分下拉刷新导出。
-
杂务
- 统一构建输出为 dist,简化清理/构建脚本,更新 TypeScript/打包配置与维护脚本,新增并调整若干构建辅助脚本。
-
测试
- 更新测试与别名配置以匹配新的包名与路径。
✏️ Tip: You can customize this high-level summary in your review settings.
Walkthrough
将组件包从旧路径 @tarojs/components/lib/* 迁移到新包命名空间 @tarojs/components-library-(react|solid|vue3),统一构建产物目录为 dist,并更新相关 package.json、tsconfig、rollup、脚本、平台适配器与构建别名。
Changes
| Cohort / File(s) | Summary |
|---|---|
Library package metadatapackages/taro-components-library-react/package.json, packages/taro-components-library-solid/package.json, packages/taro-components-library-vue3/package.json |
移除 private,新增 files:["dist"],main 指向 ./dist/index.js,新增 exports("." 与 "./component-lib"),prebuild 改为 node ./scripts/fix.cjs,clean 改为 rimraf dist。 |
Library 构建输出配置packages/taro-components-library-*/rollup.config.mjs |
Rollup 输出目录由 ../taro-components/lib/* 改为本包 dist。 |
TypeScript 输出配置packages/taro-components-library-*/tsconfig.json |
新增 outDir: "./dist",移除指向 ../taro-components/lib/* 的 declarationDir。 |
Library 修复脚本packages/taro-components-library-*/scripts/fix.cjs |
读取路径改为 node_modules 内的 dist/lib/* components 文件,处理后写回本地 src/components.ts,逻辑未改。 |
组件重导出(React / Solid)packages/taro-components-react/src/index.react.ts, packages/taro-components-react/src/index.solid.ts |
大量 re-export 源路径由 `@tarojs/components/lib/(react |
类型声明模块别名packages/taro-components-react/types/global.d.ts, packages/taro-platform-harmony-hybrid/types/component.d.ts |
模块声明由 `'@tarojs/components/lib/(react |
主组件包构建脚本精简packages/taro-components/package.json |
从发布文件移除 lib,构建脚本收敛为 stencil build,移除多余旧脚本(generate:lib、build:ci 等)。 |
Stencil 代理输出路径packages/taro-components/scripts/stencil/stencil.config.ts |
proxiesFile 输出路径从外部库源改为包内 dist/lib/*/components.ts;注释微调。 |
H5 平台:适配器与别名packages/taro-platform-h5/src/program.ts, packages/taro-platform-h5/package.json |
componentLibrary 解析改为 @tarojs/components-library-*(含 useHtmlComponents/特殊分支),移除通用 componentAdapter,新增 framework-specific 适配器(react/solid/vue3),更新 Webpack/Vite 别名与 Vue3 loader 路径。 |
Harmony Hybrid:适配器与别名packages/taro-platform-harmony-hybrid/src/program.ts, packages/taro-platform-harmony-hybrid/package.json |
新增三库依赖;component-library 路径和 component-adapter 拆分为三者;Webpack alias 与 Vue3 loader 路径更新;注释格式微调。 |
Harmony Hybrid 组件入口packages/taro-platform-harmony-hybrid/src/components/... |
所有导出源从旧 @tarojs/components/lib/* 迁移到 @tarojs/components-library-*,导出签名不变,分组顺序有微调。 |
测试别名调整tests/__tests__/utils/compiler.ts |
测试内 alias 从 `@tarojs/components/lib/(react |
Sequence Diagram(s)
sequenceDiagram
autonumber
participant App as 应用
participant Bundler as 打包器 (Webpack/Vite)
participant Program as Platform Program (H5/Harmony)
participant Lib as `@tarojs/components-library-`*
participant Runtime as ./runtime/components
App->>Bundler: import '@tarojs/components' / 子路径
Bundler->>Program: 解析别名与适配器
alt useDeprecatedAdapterComponent
Program-->>Bundler: resolve -> Lib/component-lib
Bundler->>Lib: 加载 component-lib 入口
else useHtmlComponents & framework==react/solid
Program-->>Bundler: resolve -> `@tarojs/components-react/dist/solid` (special)
Bundler->>Lib: 加载 framework 特殊适配器
else fallback
Program-->>Bundler: resolve -> ./runtime/components
Bundler->>Runtime: 加载运行时组件
end
sequenceDiagram
autonumber
participant Stencil as Stencil
participant TC as `@tarojs/components`
participant Proxy as proxiesFile (dist/lib/*/components.ts)
participant Lib as components-library-*
Stencil->>TC: 构建 web 组件并生成代理
Stencil->>Proxy: 写入 dist/lib/*/components.ts
Lib->>Proxy: 使用 dist 中的 proxiesFile 作为 framework 入口
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~60 minutes
需重点关注:
packages/taro-components-react/src/index.react.ts的大规模 re-export(核对是否遗漏或改变导出语义)。- H5 与 Harmony Hybrid 中的 alias/loader 路径与三套 componentAdapter 实现(
program.ts)在 Webpack 与 Vite 下的一致性。 - 各包
tsconfig.json/rollup.config.mjs/package.json改动在 CI 发布、类型生成与 rollup 输出上的协同(declaration 路径、exports 字段)。
Possibly related PRs
- NervJS/taro#17510 — 修改 H5 的 program.ts/加载注入逻辑,和本次 H5 loader/alias 改动高度相关。
- NervJS/taro#18097 — 涉及 React 组件导出调整(Picker、List 等)与组件包边界变更,可能与本次组件重导出有关。
- NervJS/taro#17916 — 增加或重构组件包的导出桶文件,与本次 package.json exports 与 proxies 生成有直接交集。
Suggested reviewers
- luckyadam
- yoyo837
- tutuxxx
Poem
我是爱敲键的兔子,跳进仓库的洞,
把旧的 lib 小径改成了 dist 的新公路。
三路适配分明,别名也排好队,
构建更整齐,组件安家乐业,🥕🐇
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR标题清晰准确地反映了主要变更内容:组件库与各子库的解耦,涵盖了从monorepo中分离组件库的核心目标。 |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ Finishing touches
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
Codecov Report
:white_check_mark: All modified and coverable lines are covered by tests.
:white_check_mark: Project coverage is 56.33%. Comparing base (dc9bd71) to head (67be2a0).
Additional details and impacted files
@@ Coverage Diff @@
## main #18150 +/- ##
========================================
Coverage 56.33% 56.33%
========================================
Files 447 447
Lines 23342 23342
Branches 5763 5791 +28
========================================
Hits 13149 13149
- Misses 8364 8495 +131
+ Partials 1829 1698 -131
| Flag | Coverage Δ | |
|---|---|---|
| taro-cli | 72.85% <ø> (ø) |
|
| taro-runtime | 60.33% <ø> (ø) |
|
| taro-web | 53.12% <ø> (ø) |
Flags with carried forward coverage won't be shown. Click here to find out more.
| Files with missing lines | Coverage Δ | |
|---|---|---|
| tests/__tests__/utils/compiler.ts | 100.00% <100.00%> (ø) |
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
@yoyo837 这个需要在引入nx前合并
@yoyo837 老哥帮忙合并一下?
需要rebase
需要rebase
及时合一下哈
@yoyo837 可以问一下这个PR的合并有什么顾虑吗?
@yoyo837 @tutuxxx @luckyadam 该解耦修复了包之间的依赖关系,可以让pnpm正确执行构建顺序,应该可以解决Windows CI build 时卡死的问题
我个人觉得这至少需要一个minor版本号来隔离,但是我没有看到固定的feature分支,等Owner来处理吧
@tutuxxx @luckyadam 帮忙发个版?
@luckyadam @tutuxxx @Single-Dancer
幸苦方便了给个意见
@luckyadam @tutuxxx @Single-Dancer 可否得空跟进一下,谢谢
这个PR还有人跟进吗?
@yoyo837 能不能帮忙发个alpha版
@yoyo837 能不能帮忙发个alpha版
我没有release权限