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)