diff --git a/transforms/__testfixtures__/v7/update-register/template-string-register.input.js b/transforms/__testfixtures__/v7/update-register/template-string-register.input.js
new file mode 100644
index 0000000..3927c15
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default Form;
diff --git a/transforms/__testfixtures__/v7/update-register/template-string-register.output.js b/transforms/__testfixtures__/v7/update-register/template-string-register.output.js
new file mode 100644
index 0000000..85f2723
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default Form;
diff --git a/transforms/__tests__/v7/update-register.test.ts b/transforms/__tests__/v7/update-register.test.ts
index 5fa2ebd..da56dd9 100644
--- a/transforms/__tests__/v7/update-register.test.ts
+++ b/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'));
diff --git a/transforms/v7/update-register.ts b/transforms/v7/update-register.ts
index 62d5435..769de3e 100644
--- a/transforms/v7/update-register.ts
+++ b/transforms/v7/update-register.ts
@@ -16,7 +16,9 @@ export default function transformer(file: FileInfo, api: API, options) {
trailingComma: true
};
- const transformDeclaration = (useFormDeclarator: ASTPath) => {
+ const transformDeclaration = (
+ useFormDeclarator: ASTPath
+ ) => {
/**
* 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
- *
- *
- *
- *
- * */
+ * We filter `register` to keep only `ref`
+ * @example
+ *
+ *
+ *
+ *
+ * */
if (
registerIdentifier.parent.value.type !==
- 'JSXExpressionContainer' &&
- !isCallExpression
+ 'JSXExpressionContainer' &&
+ !isCallExpression
) {
return;
}
@@ -84,17 +86,22 @@ 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) {
@@ -102,10 +109,10 @@ export default function transformer(file: FileInfo, api: API, options) {
}
/**
- * 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)