feat: update-register codemod

update-register codemod

Author: jorisre

.eslintrc.js

@@ -11,6 +11,16 @@ module.exports = {
   },
   plugins: ['@typescript-eslint'],
   rules: {
-    semi: ['error', 'always']
-  }
+    semi: ['error', 'always'],
+    'comma-dangle': ['error', 'never'],
+    'space-before-function-paren': ['error', 'never']
+  },
+  overrides: [
+    {
+      files: 'transforms/__testfixtures__/**',
+      rules: {
+        'no-undef': 'off'
+      }
+    }
+  ]
 };

.prettierrc.json

@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "none"
 }

README.md

@@ -34,6 +34,48 @@ 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`.
+
+    npx @hookform/codemod v7/update-register
+
+<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
 

bin/cli.ts

@@ -0,0 +1,198 @@
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/cli.js
+// @hookform/codemod optional-name-of-transform optional/path/to/src [...options]
+
+const globby = require('globby');
+const inquirer = require('inquirer');
+const meow = require('meow');
+const path = require('path');
+const execa = require('execa');
+const chalk = require('chalk');
+const isGitClean = require('is-git-clean');
+
+const transformerDirectory = path.join(__dirname, '../', 'transforms');
+const jscodeshiftExecutable = require.resolve('.bin/jscodeshift');
+
+function checkGitStatus(force) {
+  let clean = false;
+  let errorMessage = 'Unable to determine if git directory is clean';
+  try {
+    clean = isGitClean.sync(process.cwd());
+    errorMessage = 'Git directory is not clean';
+  } catch (err) {
+    if (err && err.stderr && err.stderr.indexOf('Not a git repository') >= 0) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    if (force) {
+      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
+    } else {
+      console.log('Thank you for using @hookform/codemod!');
+      console.log(
+        chalk.yellow(
+          '\nBut before we continue, please stash or commit your git changes.'
+        )
+      );
+      console.log(
+        '\nYou may use the --force flag to override this safety check.'
+      );
+      process.exit(1);
+    }
+  }
+}
+
+function runTransform({ files, flags, transformer }) {
+  const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
+
+  let args = [];
+
+  const { dry, print } = flags;
+
+  if (dry) {
+    args.push('--dry');
+  }
+  if (print) {
+    args.push('--print');
+  }
+
+  args.push('--verbose=2');
+
+  args.push('--ignore-pattern=**/node_modules/**');
+
+  args.push('--extensions=tsx,ts,jsx,js');
+  args.push('--parser=tsx');
+
+  args = args.concat(['--transform', transformerPath]);
+
+  if (flags.jscodeshift) {
+    args = args.concat(flags.jscodeshift);
+  }
+
+  args = args.concat(files);
+
+  console.log(`Executing command: jscodeshift ${args.join(' ')}`);
+
+  const result = execa.sync(jscodeshiftExecutable, args, {
+    stdio: 'inherit',
+    stripEof: false
+  });
+
+  if (result.error) {
+    throw result.error;
+  }
+}
+
+const TRANSFORMER_INQUIRER_CHOICES = [
+  {
+    name: 'v7/update-register: Transforms register api from v6 to v7',
+    value: 'v7/update-register'
+  }
+];
+
+function expandFilePathsIfNeeded(filesBeforeExpansion) {
+  const shouldExpandFiles = filesBeforeExpansion.some((file) =>
+    file.includes('*')
+  );
+  return shouldExpandFiles
+    ? globby.sync(filesBeforeExpansion)
+    : filesBeforeExpansion;
+}
+
+function run() {
+  const cli = meow(
+    {
+      description: 'Codemods for updating react-hook-form apps.',
+      help: `
+    Usage
+      $ npx @hookform/codemod <transform> <path> <...options>
+        transform    One of the choices from https://github.com/react-hook-form/codemod/blob/master/README.md
+        path         Files or directory to transform. Can be a glob like src/**.js
+    Options
+      --force            Bypass Git safety checks and forcibly run codemods
+      --dry              Dry run (no changes are made to files)
+      --print            Print transformed files to your terminal
+      --jscodeshift  (Advanced) Pass options directly to jscodeshift
+    `
+    },
+    {
+      boolean: ['force', 'dry', 'print', 'help'],
+      string: ['_'],
+      alias: {
+        h: 'help'
+      }
+    }
+  );
+
+  if (!cli.flags.dry) {
+    checkGitStatus(cli.flags.force);
+  }
+
+  if (
+    cli.input[0] &&
+    !TRANSFORMER_INQUIRER_CHOICES.find((x) => x.value === cli.input[0])
+  ) {
+    console.error('Invalid transform choice, pick one of:');
+    console.error(
+      TRANSFORMER_INQUIRER_CHOICES.map((x) => '- ' + x.value).join('\n')
+    );
+    process.exit(1);
+  }
+
+  inquirer
+    .prompt([
+      {
+        type: 'input',
+        name: 'files',
+        message: 'On which files or directory should the codemods be applied?',
+        when: !cli.input[1],
+        default: '.',
+        // validate: () =>
+        filter: (files) => files.trim()
+      },
+      {
+        type: 'list',
+        name: 'transformer',
+        message: 'Which transform would you like to apply?',
+        when: !cli.input[0],
+        pageSize: TRANSFORMER_INQUIRER_CHOICES.length,
+        choices: TRANSFORMER_INQUIRER_CHOICES
+      }
+    ])
+    .then((answers) => {
+      const { files, transformer } = answers;
+
+      const filesBeforeExpansion = cli.input[1] || files;
+      const filesExpanded = expandFilePathsIfNeeded([filesBeforeExpansion]);
+
+      const selectedTransformer = cli.input[0] || transformer;
+
+      if (!filesExpanded.length) {
+        console.log(
+          `No files found matching ${filesBeforeExpansion.join(' ')}`
+        );
+        return null;
+      }
+
+      return runTransform({
+        files: filesExpanded,
+        flags: cli.flags,
+        transformer: selectedTransformer
+      });
+    });
+}
+
+module.exports = {
+  run: run,
+  runTransform: runTransform,
+  checkGitStatus: checkGitStatus,
+  jscodeshiftExecutable: jscodeshiftExecutable,
+  transformerDirectory: transformerDirectory
+};

bin/hookform-codemod.ts

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/react-codemod.js
+// @hookform/codemod optional-name-of-transform optional/path/to/src [...options]
+
+require('./cli').run();

transforms/__testfixtures__/v7/update-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/update-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/update-register/custom-register.input.js

@@ -0,0 +1,13 @@
+import { useForm as useRenamedForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register: customRegister } = useRenamedForm();
+
+  return (
+    <form>
+      <input ref={customRegister} name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/custom-register.output.js

@@ -0,0 +1,13 @@
+import { useForm as useRenamedForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register: customRegister } = useRenamedForm();
+
+  return (
+    <form>
+      <input {...customRegister('example')} />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-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;