Skip to content

Conversation

eiinu
Copy link
Member

@eiinu eiinu commented Jan 31, 2024

以 Collapse 组件为例。

在重构之前要执行:

1、将要修改的组件标记为新的 setup 模式:
修改 src/config.json 文件中组件 Collapse 配置项,增加 "setup": true

2、在 src/packages/index.ts src/packages/taro.ts 中为目标组件生成对应的额外导出:
执行 pnpm prepare 后会自动添加

3、创建目标组件的 index.tsindex.taro.ts 入口文件:
执行 pnpm gen:setup collapse 后会自动生成

4、手动修改文件名称:
collapse/index.vue -> collapse/collapse.vuecollapse/index.taro.vue -> collapse/collapse.taro.vue

5、重构源码

重构时需要注意的内容:

1、组件源码重构为 <script setup lang="ts"> 方式

  • 使用 defineOptions 注册组件名称 NutCollapse
  • 使用 withDefaultsdefineProps 定义基于类型的 Props,并导出 CollapseProps 类型
  • 使用 defineEmits 定义事件,要求参数为字符串数组(此处不声明事件的类型)
  • 使用 defineExpose 定义 expose 方法,未使用时不定义
  • 使用 defineSlots 定义 slots 方法,未使用时不定义

2、中文、英文、Taro 文档增加类型导出的说明,用 version 做标记。在 PR 合并后的下次发版前会修改为对应的版本号。

  • 所有类型导出 CollapseValue
  • Props 的类型 CollapseProps,Instance 类型 CollapseInstance

3、存在 reactive、toRefs 的代码逻辑,尽量重构为只使用 ref 的方式

4、修改外部引用组件的路径

  • 比如 Popup 组件中使用了 Overlay 组件
  • 单元测试中使用到了组件
    • overlay/index.vue -> overlay/index
    • overlay/index.taro.vue -> overlay/index.taro

5、完善组件中缺少的类型定义,尽量减少 any 的使用

6、单元测试:尽量保证单元测试覆盖率不下降

7、重点关注 expose 逻辑,script setup 方式下默认不暴露任何属性,如果原组件的某些内部属性在其他地方使用,重构后可能导致获取失败。

8、原使用渲染函数编写的组件暂时不做重构。

Copy link

codecov bot commented Jan 31, 2024

Codecov Report

Attention: 11 lines in your changes are missing coverage. Please review.

Comparison is base (14da68a) 85.44% compared to head (930f2c1) 85.45%.

Files Patch % Lines
src/packages/__VUE/collapseitem/collapse-item.vue 95.52% 6 Missing ⚠️
src/packages/__VUE/collapse/collapse.vue 93.42% 5 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##               v4    #2907   +/-   ##
=======================================
  Coverage   85.44%   85.45%           
=======================================
  Files         173      175    +2     
  Lines       21888    21885    -3     
  Branches     2534     2530    -4     
=======================================
- Hits        18703    18702    -1     
+ Misses       3168     3166    -2     
  Partials       17       17           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@eiinu eiinu merged commit 0567135 into jd-opensource:v4 Feb 11, 2024
@eiinu eiinu deleted the setup-collapse branch February 11, 2024 15:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant