Code Actions for React #115
Description
| - activation range
Create ref
Before:
<div ref={|} />After:
const divRef = useRef<HTMLDivElement>()
<div ref={divRef} />Also supports custom components that contain prop ref in types
Generate handler
Before:
<div onClick={|} />After:
const handleDivClick = useCallback((event: MouseEvent<HTMLDivElement>) => {
}, []);
<div onClick={handleDivClick} />Activated when the prop starts with on*, where * is any text starting with a capital letter. Also supports custom components that contain prop on* in types. Should automatically create an array of dependencies
Wrap handler into useCallback()
Before:
<div onClick={|(e) =>| { e.preventDefault() }} />After:
const handleDivClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
}, []);
<div onClick={handleDivClick} />Activation when an arrow function is passed as an argument to a prop. Should automatically create an array of dependencies.
Maybe we should improve the Wrap into useCallback instead of adding a new Code Action.
Create (prop_name) prop
Before:
// App.tsx
<MyComponent |newUnknownProp={123}| />
// MyComponent.tsx
interface Props {
someExistsProp: string;
}
const MyComponent: React.FC<Props> = (props) => ...After:
// App.tsx
<MyComponent newUnknownProp={123} />
// MyComponent.tsx
interface Props {
someExistsProp: string;
newUnknownProp: number; // Infer type from value
}
const MyComponent: React.FC<Props> = (props) => ...Activated when the user writes an unknown prop to a component. Should work only on components whose imports are outside of node_modules. If there is no Props interface, you need to create it. The type must be infered from the value, if there is no value, the boolean type by default.
Perhaps we need to create a setting that will control how to create types for the component:
- Via generics (
const MyComponent: React.FC<Props> = (props) => ...) - Via props (
const MyComponent = (props: Props) => ...) (should be default, reccomended by React)
This will also be useful for Create Props interface Code Action
Infer (useState|useRef) type
Before:
const [name, setName] = |useState|();
useEffect(() => {
setName('Agent_RBY_')
}, [])After:
const [name, setName] = useState<string>();
useEffect(() => {
setName('Agent_RBY_')
}, [])Activated when useState or useRef has no type specified.
For useState: if has a default value, then it must evaluate from it (except with null, undefined and [])
Create useState variable (variable_name)
Before:
<button name={|buttonName|} />After:
const [buttonName, setButtonName] = useState<string>();
<button name={buttonName} />Activated when an non-existing identifier is passed as a prop. The type must be infered from the prop type