feat: create update-register codemod

Author: jorisre

.eslintrc.js

@@ -14,5 +14,13 @@ module.exports = {
     semi: ['error', 'always'],
     'comma-dangle': ['error', 'never'],
     'space-before-function-paren': ['error', 'never']
-  }
+  },
+  overrides: [
+    {
+      files: 'transforms/__testfixtures__/**',
+      rules: {
+        'no-undef': 'off'
+      }
+    }
+  ]
 };

README.md

@@ -34,6 +34,46 @@ This will start an interactive wizard, and then run the specified transform.
 
 ### Migrate from V6 to V7
 
+#### `v7/update-register`
+
+Update the `register` API inside a component which use `useForm` of React Hook Form. This transform is not applied if the component doesn't use `useForm`.
+
+<details>
+    <summary>Examples</summary>
+
+```diff
+- <input ref={register} name="example" />
++ <input {...register('example')} />
+
+- <input ref={register()} name="example" />
++ <input {...register('example')} />
+
+- <input ref={register()} name="example" />
++ <input {...register('example')} />
+
+- <input ref={register({ required: true })} name="example" />
++ <input {...register('example', { required: true })} />
+
+- <TextInput ref={register({ required: true })} name="example" />
++ <TextInput {...register('example', { required: true })} />
+```
+
+With a custom `register` name
+
+```diff
+    function MyForm() {
+      const { register: customRegister } = useForm();
+
+      return (
+        <form>
+-         <input ref={customRegister} name="example" />
++         <input {...customRegister('example')} />
+        </form>
+      );
+    }
+```
+
+</details>
 
 ## Backers
 

transforms/__testfixtures__/v7/register/already-migrated.input.js

@@ -0,0 +1,16 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register } = useForm();
+
+  return (
+    <form>
+      <input {...register('example', { required: true })} />
+      <input {...register('example-2')} />
+      <input {...register('example-3')} />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/register/already-migrated.output.js

@@ -0,0 +1,16 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register } = useForm();
+
+  return (
+    <form>
+      <input {...register('example', { required: true })} />
+      <input {...register('example-2')} />
+      <input {...register('example-3')} />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/register/function-component-2.input.js

@@ -0,0 +1,29 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register, handleSubmit } = useForm();
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <InputContainer label="Email">
+        <Input
+          name="email"
+          ref={register}
+          autoComplete="username"
+        />
+      </InputContainer>
+      <InputContainer label="Password *">
+        <Input
+          name="password"
+          ref={register({
+            required: true,
+            validate: (value) => !!value
+          })}
+          type="password"
+        />
+      </InputContainer>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/register/function-component-2.output.js

@@ -0,0 +1,23 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register, handleSubmit } = useForm();
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <InputContainer label="Email">
+        <Input {...register('email')} autoComplete="username" />
+      </InputContainer>
+      <InputContainer label="Password *">
+        <Input
+          {...register('password', {
+            required: true,
+            validate: (value) => !!value
+          })}
+          type="password" />
+      </InputContainer>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/register/function-component.input.js

@@ -0,0 +1,21 @@
+import { useForm } from 'react-hook-form';
+
+function Input() {
+  return <input />;
+}
+
+const Form = () => {
+  const { register } = useForm();
+
+  return (
+    <form>
+      <input ref={register({ required: true })} name="example" />
+      <input ref={register()} name="example-2" />
+      <input ref={register} name="example-3" />
+      <Input ref={register} name="example-4" />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/register/function-component.output.js

@@ -0,0 +1,21 @@
+import { useForm } from 'react-hook-form';
+
+function Input() {
+  return <input />;
+}
+
+const Form = () => {
+  const { register } = useForm();
+
+  return (
+    <form>
+      <input {...register('example', { required: true })} />
+      <input {...register('example-2')} />
+      <input {...register('example-3')} />
+      <Input {...register('example-4')} />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/register/function-components.input.js

@@ -0,0 +1,29 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register } = useForm();
+
+  return (
+    <form>
+      <input ref={register({ required: true })} name="example" />
+      <input ref={register()} name="example-2" />
+      <input ref={register} name="example-3" />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;
+
+export const Form2 = () => {
+  const { register } = useForm();
+
+  return (
+    <form>
+      <input ref={register({ required: true })} name="example" />
+      <input ref={register()} name="example-2" />
+      <input ref={register} name="example-3" />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};

transforms/__testfixtures__/v7/register/function-components.output.js

@@ -0,0 +1,29 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register } = useForm();
+
+  return (
+    <form>
+      <input {...register('example', { required: true })} />
+      <input {...register('example-2')} />
+      <input {...register('example-3')} />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;
+
+export const Form2 = () => {
+  const { register } = useForm();
+
+  return (
+    <form>
+      <input {...register('example', { required: true })} />
+      <input {...register('example-2')} />
+      <input {...register('example-3')} />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};