feat: support auto migrate your v3 form

Author: AshoneA

README.md

@@ -155,6 +155,50 @@ import { Modal } from 'antd';
   });
 ```
 
+### migrate your form v3 to v4
+
+You can auto migrate your `v3 form` by `antd4-codemod src --migrateform`, when execute this command, you should insure your already upgrade `antd v4`, also recommend your already execute above command.This scripts can't migrate all incompatible `api`, so if your codes aren't standard code(like `Form Form.Item`).We recommend you execute the command migrate form file one by one.When a file migrate, you should check incompatible `api`
+
+```diff
+
+- import { Form } from '@ant-design/compatible'; // remove compatible package
+- import '@ant-design/compatible/assets/index.css'; // if not includes compatible package, remove css
+
+
+-<Form className="login-form">
+-  <Form.Item>
+-    {getFieldDecorator('username', {
+-      rules: [{ required: true, message: 'Please input your username!' }],
+-      initialValue: 'antd',
+-    })(<Input />)}
++<Form
++  className="login-form"
++  initialValue={{
++    username: 'antd',
++    password: '123456'
++  }}>
++  <Form.Item
++    name='username'
++    rules={[{ required: true, message: 'Please input your username!' }]}>
++    <Input />
+   </Form.Item>
+   <div>
+-    {getFieldDecorator('password', {
+-      initialValue: '123456',
+-      rules: [{ required: true, message: 'Please input your Password!' }],
+-    })(<Input />)}
++    <Form.Item
++      noStyle
++      name='password'
++      rules={[{ required: true, message: 'Please input your Password!' }]}><Input /></Form.Item>
+   </div>
+ </Form>;
+
+- export default Form.create({})(Input) // remove Form.create
++ export default Input;
+
+```
+
 ## License
 
 MIT

README.zh-CN.md

@@ -155,6 +155,52 @@ import { Modal } from 'antd';
   });
 ```
 
+### migrate your form v3 to v4
+
+使用 `antd4-codemod src --migrateform`来自动迁移你的旧版`Form`，使用此命令时确保你已经升级到 v4，并且推荐已经执行上述其他迁移脚本。此脚本并不会帮你迁移所有不兼容的`api`，所以如果不是标准写法的话(`Form Form.Item`)推荐对用此命令对单个文件边迁移边及时修改不兼容`api`
+
+```diff
+
+- import { Form } from '@ant-design/compatible'; // 去掉兼容包的导入
+- import '@ant-design/compatible/assets/index.css'; // 如果不在有兼容包，去除兼容包css
+
++ import { Form } from 'antd';
+
+-<Form className="login-form">
+-  <Form.Item>
+-    {getFieldDecorator('username', {
+-      rules: [{ required: true, message: 'Please input your username!' }],
+-      initialValue: 'antd',
+-    })(<Input />)}
++<Form
++  className="login-form"
++  initialValue={{
++    username: 'antd',
++    password: '123456'
++  }}>
++  <Form.Item
++    name='username'
++    rules={[{ required: true, message: 'Please input your username!' }]}>
++    <Input />
+   </Form.Item>
+   <div>
+-    {getFieldDecorator('password', {
+-      initialValue: '123456',
+-      rules: [{ required: true, message: 'Please input your Password!' }],
+-    })(<Input />)}
++    <Form.Item
++      noStyle
++      name='password'
++      rules={[{ required: true, message: 'Please input your Password!' }]}><Input /></Form.Item>
+   </div>
+ </Form>;
+
+
+- export default Form.create({})(Input) // 去除掉Form.create
++ export default Input;
+
+```
+
 ## License
 
 MIT

bin/cli.js

@@ -121,9 +121,11 @@ async function run(filePath, args = {}) {
   const tsPaths = paths.filter(n => /.tsx?$/.test(n));
 
   const extraScripts = args.extraScripts ? args.extraScripts.split(',') : [];
-
+  const usedTransformers = args.migrateform
+    ? ['v3-Form-to-FieldForm']
+    : transformers.concat(extraScripts);
   // eslint-disable-next-line no-restricted-syntax
-  for (const transformer of transformers.concat(extraScripts)) {
+  for (const transformer of usedTransformers) {
     console.log(chalk.bgYellow.bold('JS/JSX files to convert'), jsPaths.length);
     console.log(chalk.bgBlue.bold('TS/TSX files to convert'), tsPaths.length);
 

transforms/__testfixtures__/v3-Form-to-FieldForm/form-item.input.js

@@ -0,0 +1,19 @@
+import { Form } from 'antd';
+
+const input = <input />;
+
+ReactDOM.render(
+  <div>
+    <Form.Item>
+      {getFieldDecorator('field1', {
+        rules: [{ required: true }]
+      })(<input style={{ width: 100 }} />)}
+    </Form.Item>
+    <Form.Item>
+      {getFieldDecorator('field2', {
+        rules: [{ required: true }]
+      })(input)}
+    </Form.Item>
+  </div>,
+  mountNode
+);

transforms/__testfixtures__/v3-Form-to-FieldForm/form-item.output.js

@@ -0,0 +1,15 @@
+import { Form } from 'antd';
+
+const input = <input />;
+
+ReactDOM.render(
+  <div>
+    <Form.Item name='field1' rules={[{ required: true }]}>
+      <input style={{ width: 100 }} />
+    </Form.Item>
+    <Form.Item name='field2' rules={[{ required: true }]}>
+      {input}
+    </Form.Item>
+  </div>,
+  mountNode
+);

transforms/__testfixtures__/v3-Form-to-FieldForm/getFieldDecorator.input.js

@@ -0,0 +1,19 @@
+import { Form } from 'antd';
+
+const input = <input />;
+
+ReactDOM.render(
+  <div>
+    <div>
+      {getFieldDecorator('field1', {
+        rules: [{ required: true }]
+      })(<input style={{ width: 100 }} />)}
+    </div>
+    <div>
+      {getFieldDecorator('field2', {
+        rules: [{ required: true }]
+      })(input)}
+    </div>
+  </div>,
+  mountNode
+);

transforms/__testfixtures__/v3-Form-to-FieldForm/getFieldDecorator.output.js

@@ -0,0 +1,15 @@
+import { Form } from 'antd';
+
+const input = <input />;
+
+ReactDOM.render(
+  <div>
+    <div>
+      <Form.Item noStyle name='field1' rules={[{ required: true }]}><input style={{ width: 100 }} /></Form.Item>
+    </div>
+    <div>
+      <Form.Item noStyle name='field2' rules={[{ required: true }]}>{input}</Form.Item>
+    </div>
+  </div>,
+  mountNode
+);

transforms/__testfixtures__/v3-Form-to-FieldForm/remove-useless.input.js

@@ -0,0 +1,18 @@
+import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
+
+class AntForm extends React.Component {
+  render() {
+    return (
+      <Form>
+        <Form.Item>
+          {getFieldDecorator('field1', {
+            rules: [{ required: true }],
+            initialValue: 'antd'
+          })(<input style={{ width: 100 }} />)}
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+export default Form.create({})(AntForm);

transforms/__testfixtures__/v3-Form-to-FieldForm/remove-useless.output.js

@@ -0,0 +1,19 @@
+import { Form } from 'antd';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+
+class AntForm extends React.Component {
+  render() {
+    return (
+      <Form
+        initialValue={{
+          field1: 'antd'
+        }}>
+        <Form.Item name='field1' rules={[{ required: true }]}>
+          <input style={{ width: 100 }} />
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+export default AntForm;

transforms/__testfixtures__/v3-Form-to-FieldForm/wrapper-form.input.js

@@ -0,0 +1,30 @@
+import { Form } from 'antd';
+
+const input = <input />;
+
+const outerForm = (
+  <Form.Item>
+    {getFieldDecorator('outerform', {
+      initialValue: 'outer'
+    })(<input />)}
+  </Form.Item>
+);
+
+ReactDOM.render(
+  <Form>
+    <Form.Item>
+      {getFieldDecorator('field1', {
+        rules: [{ required: true }],
+        initialValue: 'antd'
+      })(<input style={{ width: 100 }} />)}
+    </Form.Item>
+    <Form.Item>
+      {getFieldDecorator(field2, {
+        rules: [{ required: true }],
+        initialValue: 'antd-1'
+      })(input)}
+    </Form.Item>
+    {outerForm}
+  </Form>,
+  mountNode
+);