Tech upgrade

技术升级指引

前言

Next组件库经过长期发展，已经有了很重的历史包袱，技术架构、用户体验已经全面落后于开源社区同类竞品，急需从用户、开发者角度出发，进行一波技术升级，为后续的发展铺平道路。

本次升级在 1.x 的基础上进行技术性改造，不涉及组件功能的调整，完全向前兼容。计划发布 1.27.x 版本，并停止 minor 位的升级。目前已经完成项目基本结构与部分组件的的改造，发布了 1.27.2 版本，接下来需要结合社区力量，将剩余组件逐步升级上来。

升级原则

• 向前完全兼容性
• TS 类型明确
• 文档清晰完备
• 测试用例稳定有效

待改造组件列表

https://github.com/alibaba-fusion/next/issues?q=is:open+is:issue+label:%22Technical+Upgrade%22+no:assignee

升级指引

升级点

• TS 化
• 文档优化
• 测试工具升级，用例优化

TS 化

1. 重命名

# 通过脚本将 components/date-picker 目录内所有的 js 文件重命名为 ts 文件
# 脚本根据文件内是否有 jsx 语法来确定文件后缀为 .tsx 还是 .ts
npm run tool:rename2ts date-picker

# 执行一次 commit，保证 git 能够正确追踪文件历史
git commit -m 'refactor(DatePicker): rename to ts'

2. 类型补全与修正

• 组件的类型集中在 types.ts 文件内管理
• import 不允许携带文件后缀，如：import '../../style.js'
• 组件入口文件导出规范 components/date-picker/index.ts
  • default 导出组件本身，如：export default config(DatePicker)
  • named 导出组件 Props 类型定义 {组件名大驼峰}Props，如：export type { DatePickerProps }
  • named 导出原先 components/*/index.d.ts 导出的其它类型
  • 查看示例

3. 类型校验

文档优化

测试工具升级，用例优化

示例

组件入口导出示例

参考：components/button/index.tsx

import * as React from 'react';
import ConfigProvider from '../config-provider';
// src/radio/types.ts 内集中放置radio相关所有类型
import type { RadioProps, RadioState, RadioShape, RadioGroupProps } from './types';
// 子组件 Group
import Group from './group';

class Radio extends React.Component<RadioProps, RadioState> {
  static Group = Group;
  // ...
  render() {}
};

// 导出组件Props，以及其他原先在 types/radio/index.d.ts 里导出的类型，例如RadioShape
export type { RadioProps, RadioGroupProps, RadioShape };

// default 导出组件实现
export default ConfigProvider.config(Radio);