fix: register with template string

Author: jorisre

transforms/__testfixtures__/v7/update-register/template-string-register.input.js

@@ -0,0 +1,19 @@
+import { useForm } from 'react-hook-form';
+
+const id = 1;
+
+const Form = () => {
+  const { register } = useForm();
+
+  useEffect(() => {
+    register(`example.${id}`);
+  }, [register]);
+
+  return (
+    <form>
+      <input ref={register({ required: true })} name={`example.${id}`} />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/template-string-register.output.js

@@ -0,0 +1,19 @@
+import { useForm } from 'react-hook-form';
+
+const id = 1;
+
+const Form = () => {
+  const { register } = useForm();
+
+  useEffect(() => {
+    register(`example.${id}`);
+  }, [register]);
+
+  return (
+    <form>
+      <input {...register(`example.${id}`, { required: true })} />
+    </form>
+  );
+};
+
+export default Form;

transforms/__tests__/v7/update-register.test.ts

@@ -15,7 +15,8 @@ const fixtures = [
   'function-component-context',
   'function-components-context',
   'no-transform-context',
-  'custom-register-context'
+  'custom-register-context',
+  'template-string-register'
 ];
 
 fixtures.forEach(defineTest(__dirname, 'v7/update-register'));

transforms/v7/update-register.ts

@@ -16,7 +16,9 @@ export default function transformer(file: FileInfo, api: API, options) {
     trailingComma: true
   };
 
-  const transformDeclaration = (useFormDeclarator: ASTPath<VariableDeclarator>) => {
+  const transformDeclaration = (
+    useFormDeclarator: ASTPath<VariableDeclarator>
+  ) => {
     /**
      * We search for all `register` properties
      * @example
@@ -42,29 +44,29 @@ export default function transformer(file: FileInfo, api: API, options) {
       j(registerProperty)
         .closestScope()
         .forEach((component) => {
-        /**
-         * We search for all `register`
-         * */
+          /**
+           * We search for all `register`
+           * */
           const registerIdentifiers = j(component).find(j.Identifier, {
             name: register
           });
 
           registerIdentifiers.forEach((registerIdentifier) => {
             const isCallExpression =
-            registerIdentifier.parent.value.type === 'CallExpression';
+              registerIdentifier.parent.value.type === 'CallExpression';
 
             /**
-           * We filter `register` to keep only `ref`
-           * @example
-           *  <input ref={register} name="example" />
-           *  <input ref={register()} name="example" />
-           *  <input ref={register({ required: true })} name="example" />
-           *  <input ref={registerCustomName({ required: true })} name="example" />
-           * */
+             * We filter `register` to keep only `ref`
+             * @example
+             *  <input ref={register} name="example" />
+             *  <input ref={register()} name="example" />
+             *  <input ref={register({ required: true })} name="example" />
+             *  <input ref={registerCustomName({ required: true })} name="example" />
+             * */
             if (
               registerIdentifier.parent.value.type !==
-            'JSXExpressionContainer' &&
-            !isCallExpression
+                'JSXExpressionContainer' &&
+              !isCallExpression
             ) {
               return;
             }
@@ -84,28 +86,33 @@ export default function transformer(file: FileInfo, api: API, options) {
             nameAttributes.forEach((nameAttribute) => {
               if (
                 nameAttribute.value.value.type !== 'Literal' &&
-              nameAttribute.value.value.type !== 'StringLiteral'
+                nameAttribute.value.value.type !== 'StringLiteral' &&
+                nameAttribute.value.value.type !== 'JSXExpressionContainer' // Handle template string case
               ) {
                 return;
               }
 
-              const name = nameAttribute.value.value.value;
+              const name =
+                nameAttribute.value.value.type === 'JSXExpressionContainer'
+                  ? nameAttribute.value.value.expression
+                  : j.literal(nameAttribute.value.value.value);
+
               /**
-             *  Add name to register('name')
-             *                        ^
-             * */
-              const args = [j.literal(name)];
+               *  Add name to register('name')
+               *                        ^
+               * */
+              const args = [name];
 
               // If `register` have params, we add them to our new args
               if (isCallExpression) {
                 args.push(...registerIdentifier.parent.value.arguments);
               }
 
               /**
-             * Replace `name` attribute with the new `register` api and args
-             * @example
-             *  name="example" => {...register("example")}
-             * */
+               * Replace `name` attribute with the new `register` api and args
+               * @example
+               *  name="example" => {...register("example")}
+               * */
               j(nameAttribute).replaceWith(
                 j.jsxSpreadAttribute(
                   j.callExpression(j.identifier(register), args)