Skip to content

About semi codemod v2

Jump to bottom
pointhalo edited this page Mar 22, 2023 · 2 revisions

相关说明

当你从 semi v1迁移到 v2时，可以使用我们提供的自动化迁移工具 semi-codemod-v2 对breaking change进行自动变更（基于AST）
codemod具体做的自动变更范围如下

迁移工具修改详情

  • ✅ 修改 Semi 组件的import包名
- import { Select, Input } from '@ies/semi-ui-react';
+ import { Select, Input } from '@douyinfe/semi-ui';
  • 修改 Interface 导入
    • 修改所有 ts interface的导入路径（若存在名称变更的，会同时更新为新的命名）
- import { SelectProps } from '@ies/semi-ui-react';
+ import { SelectProps } from '@douyinfe/semi-ui/lib/es/select';

- import { TriggerRenderType } from '@ies/semi-ui-react/datePicker';
+ import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/datePicker';
  • ✅ Locale
    修改locale source文件的import路径
- import en_GB from '@ies/semi-ui-react/locale/source/en_GB';
+ import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
  • ✅ AutoComplete
    • 移除onChangeWithObject, 可用更符合语义的 onSelectWithObject 替代
- <AutoComplete onChangeWithObject />
- <Form.AutoComplete onChangeWithObject />
+ <AutoComplete onSelectWithObject />
+ <Form.AutoComplete onSelectWithObject />

Or

let props = {
-  onChangeWithObject: true,
+  onSelectWithObject: true
}
<AutoComplete {...props} />
<Form.AutoComplete {...props} />
  • ✅ Tree
    • onRightClick 更名为 onContextMenu，与DOM原生API对齐
- <Tree onRightClick={xxx} />
+ <Tree onContextMenu={xxx} />

Or

let props = {
-  onRightClick: true,
+  onContextMenu: true,
};
<Tree {...props} />
  • ✅ Empty
    • 修改import路径，并修改使用方式
- import Construction from '@ies/semi-illustrations/construction.svg';
- import RenameModuleSuccess from '@ies/semi-illustrations/success.svg';
- <Empty image={Construction} />
- <Empty image={RenameModuleSuccess} />
+ import { IllustrationConstruction, IllustrationSuccess } from '@douyinfe/semi-illustrations';
+ <Empty image={<IllustrationConstruction />} />
+ <Empty image={<IllustrationSuccess />} />
  • ✅ Icon
    • 修改用法，并自动添加对应资源的import
// icon为lazyload用法时
- import homeSvg from '@ies/semi-icons/semi-icons-home.svg';
- <Icon type={homeSvg.id} />
// icon为全量引入用法时
- <Icon type="branch" />
- <Icon type={'calendar'} />
+ import { IconHome, IconCalendar, IconBranch } from '@douyinfe/semi-icons';
+ <IconHome />
+ <IconCalendar />
+ <IconBranch />
  • ✅ Dropdown
    • 修改关于 Icon 用法
- <Dropdown.Item iconType='home' />
+ import { IconHome } from '@douyinfe/semi-icons';
+ <Dropdown.Item icon={<IconHome />} />
  • ✅ Button
    • 修改关于 Icon 用法
- <Button icon='home' />
+ import { IconHome } from '@douyinfe/semi-icons';
+ <Button icon={<IconHome />} />
  • ✅ Notification
    • 修改关于 Icon 用法
- Notification.open({ content: 'ies', duration: 3, icon: 'home' })
+ import { IconHome } from '@douyinfe/semi-icons';
+ Notification.open({ content: 'ies', duration: 3, icon: <IconHome /> })

Or

+ import { IconHome } from '@douyinfe/semi-icons';
let props = {
  content: 'ies',
-  icon: 'home'
+  icon: <IconHome />
}
Notification.open(props)
  • ✅ Nav
    • 修改关于 Icon 用法
- <Nav.Item icon='home' />
- <Nav.Sub icon='setting' />
+ import { IconHome, IconSetting } from '@douyinfe/semi-icons';
+ <Nav.Item icon={<IconHome>} />
+ <Nav.Item icon={<IconSetting>} />

Or

+ import { IconHome } from '@douyinfe/semi-icons';
let navItems = [
-  { itemKey: 'a', text: '一级导航', icon: 'home' }
+  { itemKey: 'a', text: '一级导航', icon: <IconHome> }
];
<Nav items={navItems}>
  • ✅ Upload
    • dragable 更名为 draggable
- <Upload dragable />
- <Form.Upload dragable />
+ <Upload draggable />
+ <Form.Upload draggable />

Or

const RenameFormUpload = Form.Input;
let props = {
-  dragable: true,
+  draggable: true,
};
<RenameFormUpload {...props} />
  • ✅ Banner
    • 修改关于 Icon 用法
- <Banner icon='home' closeIcon='home'/>
+ import { IconHome } from '@douyinfe/semi-icons';
+ <Banner icon={<IconHome />} closeIcon={<IconHome />}/>

Or

+ import { IconHome } from '@douyinfe/semi-icons';
let bannerProps = [
-  { icon: 'home' }
+  { icon: <IconHome /> }
];
<Banner {...bannerProps} />
  • ✅ Typography.Text
    • 修改关于 Icon 用法
const Text = Typography.Text;
- <Typography.Text icon='home' />
- <Text icon='home' />
+ import { IconHome } from '@douyinfe/semi-icons';
+ <Typography.Text icon={<IconHome />} />
+ <Text icon={<IconHome/>}>

Or

+ import { IconHome } from '@douyinfe/semi-icons';
const Text = Typography.Text;
let textProps = [
-  { icon: 'home' }
+  { icon: <IconHome /> }
];
<Typography.Text {...textProps} />
<Text {...textProps} />

  • 📣 不再从index.js中导出 Label，对 从@ies/semi-ui-react import了该模块的文件，抛出 waring （需手动修改）

  • 📣 Table不再在 componentDidUpdate 时响应的 API：（defaultExpandAllRows、defaultExpandRowKeys、defaultExpandAllGroupRows） 对使用了该API的文件具体代码块，抛出 waring （需人工确认）

  • 📣 Cascader的triggerRender 入参不再包括 onInputChange，对使用了该API的文件具体代码块，抛出 waring，需人工确认并修改（如确有消费到该入参的话）

Clone this wiki locally