taro icon indicating copy to clipboard operation
taro copied to clipboard

fix(taro-components): 组件与各lib解耦

Open ianzone opened this issue 4 months ago • 15 comments

这个 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.

ianzone avatar Aug 08 '25 05:08 ianzone

Walkthrough

将组件包从旧路径 @tarojs/components/lib/* 迁移到新包命名空间 @tarojs/components-library-(react|solid|vue3),统一构建产物目录为 dist,并更新相关 package.json、tsconfig、rollup、脚本、平台适配器与构建别名。

Changes

Cohort / File(s) Summary
Library package metadata
packages/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.cjsclean 改为 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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Aug 08 '25 05:08 coderabbitai[bot]

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

Impacted file tree graph

@@           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%> (ø)

... and 49 files with indirect coverage changes

: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.

codecov[bot] avatar Aug 08 '25 07:08 codecov[bot]

@yoyo837 这个需要在引入nx前合并

ianzone avatar Aug 10 '25 07:08 ianzone

@yoyo837 老哥帮忙合并一下?

ianzone avatar Aug 22 '25 03:08 ianzone

需要rebase

yoyo837 avatar Aug 25 '25 06:08 yoyo837

需要rebase

及时合一下哈

ianzone avatar Sep 06 '25 10:09 ianzone

@yoyo837 可以问一下这个PR的合并有什么顾虑吗?

ianzone avatar Sep 10 '25 10:09 ianzone

@yoyo837 @tutuxxx @luckyadam 该解耦修复了包之间的依赖关系,可以让pnpm正确执行构建顺序,应该可以解决Windows CI build 时卡死的问题

ianzone avatar Sep 13 '25 10:09 ianzone

我个人觉得这至少需要一个minor版本号来隔离,但是我没有看到固定的feature分支,等Owner来处理吧

yoyo837 avatar Sep 13 '25 12:09 yoyo837

@tutuxxx @luckyadam 帮忙发个版?

ianzone avatar Sep 22 '25 15:09 ianzone

@luckyadam @tutuxxx @Single-Dancer

幸苦方便了给个意见

yoyo837 avatar Sep 23 '25 08:09 yoyo837

@luckyadam @tutuxxx @Single-Dancer 可否得空跟进一下,谢谢

ianzone avatar Oct 16 '25 01:10 ianzone

这个PR还有人跟进吗?

ianzone avatar Oct 27 '25 07:10 ianzone

@yoyo837 能不能帮忙发个alpha版

ianzone avatar Nov 07 '25 09:11 ianzone

@yoyo837 能不能帮忙发个alpha版

我没有release权限

yoyo837 avatar Nov 11 '25 08:11 yoyo837