You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
// App.tsx<MyComponentnewUnknownProp={123}/>// MyComponent.tsxinterfaceProps{someExistsProp: string;newUnknownProp: number;// Infer type from value}constMyComponent: 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
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 [])
I suppose before example should contain not defined indentifier, so this is quickfix to define ref with the name (similar to Create (prop_name) prop or builtin define not defined method quickfix)
Generate handler
While Wrap handler into useCallback() will be easy to implement, this one will be much much harder I think. So the question is: why can't user write e => and then use Wrap handler into useCallback() callback? On the other hand, since this plugin is intended to work with vscode only, I guess we can find workaround here.
Wrap handler into useCallback()
I think this refactoring should should activate in following cases:
any position in => of function or attribute name
either only attribute initializer selection (the whole function) or whole attribute selection
Create (prop_name) prop
I really like this one, but I was always in need for this in the following case:
Though if we use recommended way to specify Props interface TypeScript will suggest Declare missing property 'newUnknownProp' quickfix. So I'm good for adding this one.
Activated when useState or useRef has no type specified.
No type and initializer for useState. Also I think it would make sense to ignore setState invokations with callbacks.
And obviously declare property and add ref or useState won't have activation ranges since they are quickfixes
| - activation range
Create ref
Before:
After:
Also supports custom components that contain prop
ref
in typesGenerate handler
Before:
After:
Activated when the prop starts with
on*
, where * is any text starting with a capital letter. Also supports custom components that contain propon*
in types. Should automatically create an array of dependenciesWrap handler into useCallback()
Before:
After:
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:
After:
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 noProps
interface, you need to create it. The type must be infered from the value, if there is no value, theboolean
type by default.Perhaps we need to create a setting that will control how to create types for the component:
const MyComponent: React.FC<Props> = (props) => ...
)const MyComponent = (props: Props) => ...
) (should be default, reccomended by React)This will also be useful for
Create Props interface
Code ActionInfer (useState|useRef) type
Before:
After:
Activated when
useState
oruseRef
has no type specified.For
useState
: if has a default value, then it must evaluate from it (except withnull
,undefined
and[]
)Create useState variable (variable_name)
Before:
After:
Activated when an non-existing identifier is passed as a prop. The type must be infered from the prop type
The text was updated successfully, but these errors were encountered: