refactor(collapse): script setup #2907
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
以 Collapse 组件为例。
在重构之前要执行:
1、将要修改的组件标记为新的 setup 模式:
修改
src/config.json
文件中组件 Collapse 配置项,增加"setup": true
2、在
src/packages/index.ts
src/packages/taro.ts
中为目标组件生成对应的额外导出:执行
pnpm prepare
后会自动添加3、创建目标组件的
index.ts
和index.taro.ts
入口文件:执行
pnpm gen:setup collapse
后会自动生成4、手动修改文件名称:
collapse/index.vue
->collapse/collapse.vue
,collapse/index.taro.vue
->collapse/collapse.taro.vue
5、重构源码
重构时需要注意的内容:
1、组件源码重构为
<script setup lang="ts">
方式defineOptions
注册组件名称NutCollapse
withDefaults
与defineProps
定义基于类型的 Props,并导出CollapseProps
类型defineEmits
定义事件,要求参数为字符串数组(此处不声明事件的类型)defineExpose
定义 expose 方法,未使用时不定义defineSlots
定义 slots 方法,未使用时不定义2、中文、英文、Taro 文档增加类型导出的说明,用
version
做标记。在 PR 合并后的下次发版前会修改为对应的版本号。CollapseValue
CollapseProps
,Instance 类型CollapseInstance
3、存在 reactive、toRefs 的代码逻辑,尽量重构为只使用 ref 的方式
4、修改外部引用组件的路径
overlay/index.vue
->overlay/index
overlay/index.taro.vue
->overlay/index.taro
5、完善组件中缺少的类型定义,尽量减少 any 的使用
6、单元测试:尽量保证单元测试覆盖率不下降
7、重点关注
expose
逻辑,script setup
方式下默认不暴露任何属性,如果原组件的某些内部属性在其他地方使用,重构后可能导致获取失败。8、原使用渲染函数编写的组件暂时不做重构。