[WIP] Refactor: Convert React.Component, React.SFC, React.PureCompoennt to each other by Jack-Works · Pull Request #24518 · microsoft/TypeScript

Jack-Works · 2018-05-31T09:14:42Z

Related to #15090

This PR adds a refactor to convert SFC-like function to PureComponent or Component to SFC.
This will help one who wants to add lifecycle methods to an SFC component.

Example

class A extends React.PureComponent<T> {
    render() { return this.props.children; }
}
// ^ to v; or v to ^
const A: React.SFC<T> = (props) => props.children;

To-dos

Rewrite with new expected behaviour
Consider how to deal with other JSX using libraries like Vue, Preact or Mithril...
Add tests

Behavior in detail

     * This refactor follows this rule.
     * 0. [ ] Continue if we are in a .jsx or .tsx file.
     * 1. [ ] Get the current JSX config (reactNamespace, jsxFactory, jsx).
     *            Continue if there is a JSX provider
     *            ? It's better be React, ReactNative and Preact ?
     * 2. [ ] Continue if the selection include a SFCLikeDeclaration | ClassLikeDeclaration
     *        [ ] and the declaration is the direct child of the current SourceFile
     *        [ ] and we can find the name (Class name, or variable name) in the declaration
     *
     * For ClassLikeDeclaration detection:
     * A. [ ] Continue if the declaration is a subclass of `PureComponent` or `Component`
     * B. [ ] Continue if there is no reference to `this.state` or `this.setState`
     * C. [ ] Continue if there is no any property more than listed below
     *            [ ] `render`
     *            [ ] static `propTypes`
     *            [ ] static `contextTypes`
     *            [ ] static `defaultProps`
     *            [ ] static `displayName`
     *            [ ] static `childContextTypes`
     * D. [ ] Continue if the `render` method is not invalid
     * E. [ ] Provide an action, Convert `PureComponent` or `Component` to SFC
     *
     * For SFCLikeDeclaration detection:
     * a. [ ] Goto c, if the selection is a function declaration of type `React.SFC`.
     * b. [ ] Continue if we guess the selection is an SFC
     *            In @types/react, ReactNode is =
     *                ReactElement<any> | ReactText (number | string) // ReactChild
     *                | {} | ReactNode[] // ReactFragment
     *                | { key: Key | null; children: ReactNode; } // ReactPortal
     *                | string
     *                | number | boolean | null | undefined
     *         define type MeaningfulReactNode =
     *                     ReactElement<any> | MeaningfulReactNode[] | ReactPortal | string
     *         Guess as follow rules.
     *             [ ] i. Check all return path, make then an union undefined
     *             [ ] ii. Continue if parameters length < 3 (props?, context?)
     *             [ ] iii. Continue if all of member of U is compatiable with ReactNode
     *             [ ] iv. Continue if there is MeaningfulReactNode in U
     *             [ ] v. Continue if there is no reference to `this`
     *             [ ] vi. This is an SFC
     * c. [ ] Continue if there is a body
     * c. [ ] Provide an action, Convert SFC to `PureComponent` or `Component`
     *
     * For ClassLikeDeclaration transformation:
     * A. [ ] Get the Class `C`, get the class name `Name` (by ClassDeclaration, or variable declaration)
     * B. [ ] Collect the properties below
     *            [ ] `render`
     *            [ ] static `propTypes`?
     *            [ ] static `contextTypes`?
     *            [ ] static `defaultProps`?
     *            [ ] static `displayName`?
     *            [ ] static `childContextTypes`?
     * C. [ ] Replace
     *        [ ] all `this.props` to `props` in `render`,
     *        [ ] all `this.context` to `context` in `render`,
     *        [ ] and make sure there is no name conflict in the current lexical scope
     *        [ ] if there is, generate a random name other than `props` and `context`?
     * D. [ ] Create a FunctionDeclaration `F` named `Name`, with body `render`
     *        [ ] In .tsx file, add type annoation
     *        [ ] In .jsx file, add JSDoc Type annoation?
     * E. [ ] For those static properties, add something like `Name`.propTypes = ...
     * F. [ ] Replace `C` with `F`
     *
     * For SFCLikeDeclaration transformation:
     * A. [ ] Get the SFC `F`, get the class name `Name` (by FunctionDeclaration, or variable declaration)
     * B. [ ] Collect the properties below
     *            [ ] function body as `render`
     * C. [ ] Replace
     *        [ ] first parameter to `this.props` in `render`,
     *        [ ] second parameter to `this.context` in `render`,
     * D. [ ] Create a ClassDeclaration `C` named `Name` extends (React|Preact).PureComponent
     *        [ ] In .tsx file, add type arguments `T` if `F` is typed `(React|Preact).(Pure)?Component<T>`
     * E. [ ] Replace `F` with `C`

…toryIsReact; Rewrite isConvertibleReactClassComponent

mhegazy · 2018-06-13T00:05:09Z

        "category": "Message",
        "code": 95057
+    },
+    "Covert React.Component to SFC": {


nit. Convert component to a Stateless Functional Component (SFC)

mhegazy · 2018-06-13T00:06:12Z

+        "category": "Message",
+        "code": 95058
+    },
+    "Covert React.SFC to PureComponent": {


Convert Stateless Functional Component to a statefull component

@DanielRosenwasser can you help out with these messages..

Is Pure Component better than stateful component?

Refactor provides an action to PureComponent but not Component, because PureComponent has better performance in default, if developers want to use state, they can just remove Pure.

mhegazy · 2018-06-13T00:11:59Z

+            }
+        },
+        getEditsForAction(context: RefactorContext, actionName: string): RefactorEditInfo | undefined {
+            Debug.assert(actionName === actionNameComponentToSFC || actionName === actionNameSFCToPureComponent);


you want to check again for the same conditions to defensively guard against changes to the file state before the actions are requested.

I would extract the code in getAvailableActions to getConvertableReactElemnt that will return you the SFC/Class or undefined if not found.

See generateGetAccessorsAndSetAccessors.ts for a sample.

mhegazy · 2018-06-13T00:23:51Z

+            StatelessComponent: undefined,
+        } as any;
+        let importClause: ImportClause;
+        sourcefile.forEachChild(c => {


i do not think we should be walking the file as such. first there are easier ways to get the resolved module references, and second, this does not handle cases where anything is aliased.. e.g. reactNamespace, jsxFactory, path mapping in jsconfig.json.. etc..

I would base all the checks on the class/function, and then verify that whatever its import clause is coming from the same location as the JSXFactory.

I can't get it, about the "easier ways to get the resolved module". I look around for the compiler API, there seemed to be a SourceFile.getNamedDeclarations can get me back all declarations. And in runtime I found it has a property called propertyName can give me the import declarations and its original name. But there is no such type on the type Declaration, it seemd not like the correct way to do it.

And, by using SourceFile.getNamedDeclarations, there is not much difference with I iterate over all children.

mhegazy · 2018-06-13T00:27:51Z

+        const { file } = context;
+        const span = getRefactorContextSpan(context);
+        const token = getTokenAtPosition(file, span.start, /*includeJsDocComment*/ false);
+        const component = getParentNodeInSpan(token, file, span);


this will enable the refactor in any location within the declaration. we want to limit it to spans that include the name of the declaration. so first get the token, walk up untill you find a class/class expression or a function/function expression/lambda, verify that the name of the class, or function keyword or class keyword or the name of the const/var on the left hand side is included in the span.

see generateGetAccessorAndSetAccessor.ts:: getConvertibleFieldAtPosition for an example.

mhegazy · 2018-06-13T00:30:21Z

+
+    // function checkJSXFactoryIsReact(host: LanguageServiceHost) {
+    //     const config = host.getCompilationSettings();
+    //     if (config.jsxFactory === undefined) { if (config.jsx) return true; }


as i noted erlier, you do not want to limit this to React or the module name "react" there is peact, vue, mithril, etc..

But this refactor is meaningless for the Vue and Mithril, why don't we limit it to React, ReactNative and Preact?

mhegazy · 2018-06-13T00:41:37Z

+        if (!node.body) { return; }
+
+        // TODO: Should also check the actual type insteadof only receive explicit typed
+        const typeNode = node.type;


we should not be relying on type annoation. tsserver support JS experience as well. so these apply to both JS and TS files.

we should isntead try to "guess" if this is an SFC or not..

funciton declaration

or const declaration with initializer function expression or lambda

Zero, one or two parameters

function returnns a JSX element (this is gonna be a bit tricky, but we can start by saying the expression of all return statements must be a JSX element).

We can go further and say it has to be at the top-level of the file.

Yes, in todo I'll try to guess if it is an SFC after I done the explicit typed SFC.

context, propTypes, contextTypes, defaultProps and displayName are also in later stage of pr.

And, hmm, what does it mean by at the top-level of the file? Like it is one of the SourceFile's children?

mhegazy · 2018-06-13T00:42:27Z

+            render = node.body;
+        }
+        else if (isExpression(node.body!)) {
+            render = createBlock([createReturn(node.body)]);


do not create a block untill you are applying the edit.

I got a problem with manipulating the AST and get the textchange, do I do something wrong? Thanks

#24751

mhegazy · 2018-06-13T00:42:46Z

+    }
+
+    function isReactSFCDeclaration(node: Node, sourcefile: SourceFile): Component | undefined {
+        if (!isSFCLikeDeclaration(node)) { return; }


combine in one if statement

mhegazy · 2018-06-13T00:43:01Z

+
+    function isReactSFCDeclaration(node: Node, sourcefile: SourceFile): Component | undefined {
+        if (!isSFCLikeDeclaration(node)) { return; }
+        if (node.asteriskToken) { return; }


return undefined explicitly

ghost · 2018-07-30T17:19:29Z

+        const newNode: FunctionDeclaration = createFunctionDeclaration(
+            void 0, void 0, void 0, component.name, void 0,
+            [createParameter(void 0, void 0, void 0, "props", void 0)],
+            createTypeReferenceNode(react.SFC, component.propsType ? [component.propsType] : undefined),


When I tested this, react.SFC was the string "React.Component". That's not a valid identifier, so it causes assertion failures in the formatter (#24751). Should use an EntityName node instead.
Also, when a node in the old tree is moved to the new tree, you should use getSynthesizedDeepClone to get new nodes.

Thanks, with your help I can continue working on it

Jack-Works · 2018-10-26T00:29:04Z

Due to new concepts in React@next (about 16.7), the complexity of this refator has been more higher. Since the develop has been paused for months and it's out of date, so I decided to close this pull request.

Jessidhia · 2018-10-26T01:23:16Z

I presume the new concepts is https://reactjs.org/docs/hooks-intro.html ?

Jack-Works · 2018-10-26T01:34:52Z

Yes, and also React.memo( )

Jack-Works added 7 commits June 7, 2018 17:56

Impl getReferenceToReact isReactComponentClass isConvertableClass

1938650

Add refactors to tsconfig; Impl getAvailableActions; Impl checkJSXFac…

d453f48

…toryIsReact; Rewrite isConvertibleReactClassComponent

Impl isReactSFCDeclaration

ad18a1a

Transformer for SFC->PureComponent

0b9f2f9

Transform Component -> SFC

fcddd51

Fix build error

c471040

Fix some logic error and tslint rule

f5b619f

mhegazy reviewed Jun 13, 2018

View reviewed changes

Rewrite whole expect behavior after review

46e1c0a

ghost reviewed Jul 30, 2018

View reviewed changes

RyanCavanaugh added this to the Community milestone Sep 17, 2018

Jack-Works closed this Oct 26, 2018

microsoft locked as resolved and limited conversation to collaborators Oct 21, 2025

Conversation

Jack-Works commented May 31, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Example

To-dos

Behavior in detail

Uh oh!

mhegazy Jun 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mhegazy Jun 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jack-Works commented Oct 26, 2018

Uh oh!

Jessidhia commented Oct 26, 2018

Uh oh!

Jack-Works commented Oct 26, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Jack-Works commented May 31, 2018 •

edited

Loading

mhegazy Jun 13, 2018 •

edited

Loading

mhegazy Jun 13, 2018 •

edited

Loading