react-hook-form / codemod Goto Github PK

react-hook-form V6 provides an standard context API (useFormContext). It should be also covered by codemod.

Hi, thanks for such a good library and ability to migrate to new version with a codemod.

I want to suggest you a couple 🐊Putout-based codemods built to make migration even simpler: @putout/plugin-react-hook-form

Describe the bug
When there was template literal used in name of input codemod only removes ref={register} but doesn't create {...register()} and leaves name

To Reproduce
example input before running codemod:

<input
name={`${key.name}.apply`}
type="checkbox"
ref={register}
label="should apply for this key?"
id={`${key.name}.apply`}
/>

After codemod:

<input
name={`${key.name}.apply`}
type="checkbox"

label="should apply for this key?"
id={`${key.name}.apply`}
/>

Expected behavior

<input
{...register(`${key.name}.apply`)}
type="checkbox"
label="should apply for this key?"
id={`${key.name}.apply`}
/>

The v7/update-register isn't working with material UI TextField as it uses inputRef instead of ref. It'd be great if a transform can be added for that.

Describe the bug
No changes in TS components all files with NOC status.

Example:

import {CustomInput, FormGroup, Label} from 'reactstrap';
// ...
<FormGroup>
            <CustomInput
              type="checkbox"
              name="setCustomFeature"
              id="setCustomFeature"
              label={
                <input
                  type="text"
                  name="reason.custom_feature"
                  className="custom-input-undeline"
                  placeholder="Custom feature"
                  ref={register}
                />
              }
              innerRef={register}/>
          </FormGroup>

Output:

All done. 
Results: 
0 errors
459 unmodified
0 skipped
0 ok

Describe the bug
In a few of my inputs, either ref prop was simply deleted, or left untouched, with no new props added. Codemod completed with 0 errors.

To Reproduce
On this one ref prop was just deleted, nothing added:

<Input.med
  name={`${type}.containers`}
  type="number"
  ref={register({
    required: true,
    validate: {
      min: (value) =>
        parseFloat(value) >= min ||
        `You must have at least ${min} containers`,
      max: (value) =>
        parseFloat(value) <= max ||
        `You cannot have more than ${max} containers`,
      integer: (value) =>
        Number.isInteger(parseFloat(value)) ||
        'Must be an integer',
    },
  })}
/>

This one was just left as is - nothing deleted, nothing added:

<Input.med
  name={`${type}.memory`}
  type="number"
  disabled={!haEnabled}
  ref={
    !haEnabled
      ? null
      : register({
          validate: {
            min: (value) =>
              parseFloat(value) >= min || `Should be greater than ${min}`,
            max: (value) =>
              parseFloat(value) <= max || `Should be greater than ${max}`,
          },
        })
  }
/>

Expected behavior
Should be replaced with a set of corresponding props

Desktop (please complete the following information):

• OS: macOS Catalina
• Node.js 14

Describe the bug
A clear and concise description of what the bug is.

The npx @hookform/codemod v7/update-register does not update material UI textfield with
<TextField disabled fullWidth margin="normal" name="name" size="small" type="text" variant="outlined" error={!!errors.name} inputRef={register({ required: true })} />
Only works for
`-

• <input {...register('example')} />

• <input {...register('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 })} />`

To Reproduce
Steps to reproduce the behavior

Expected behavior
A clear and concise description of what you expected to happen.

when I run npx @hookform/codemod v7/update-register
it should update matatrial UI textfield input from
<TextField disabled fullWidth margin="normal" name="name" size="small" type="text" variant="outlined" error={!!errors.name} inputRef={register({ required: true })} />
To
<TextField disabled fullWidth margin="normal" size="small" type="text" variant="outlined" error={!!errors.name} {...register("name",{ required: true })} />

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. MacOs, Linux]
• Node.js [e.g. 12, 14]

Additional context
Add any other context about the problem here.

Describe the solution you'd like
replace such lines:

import { useTypedController } from '@hookform/strictly-typed';
...
const TypedController = useTypedController<DealPlacementPositionValue>({ control });
...
<TypedController ... />
...

with

import { Controller } from 'react-hook-form';
...
<Controller contol={control} render={({field})} ... />
...

Additional context
We can create codemod for TypedController (from @hookform/strictly-typed package). It was working very similar way as a new Controller.

TODO:
Handle new structure of render properties