Support PureComponent

Author: qnighy

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added
   - Add support for more type annotations on methods
   - Add support for modifying types reflecting `defaultProps`
+  - Add support for `React.PureComponent`
 
 ## 0.1.5
 

README.md

@@ -147,9 +147,9 @@ export const C = props => {
 ## Progress
 
 - [x] Convert render function (basic feature)
-- [ ] Superclass detection
+- [x] Superclass detection
   - [x] Support `React.Component`
-  - [ ] Support `React.PureComponent`
+  - [x] Support `React.PureComponent`
 - [ ] Class node type
   - [x] Support class declarations
   - [x] Support `export default class` declarations

src/analysis/head.ts

@@ -1,10 +1,12 @@
 import type { NodePath } from "@babel/core";
-import type { BlockStatement, ClassDeclaration, Program, TSInterfaceBody, TSMethodSignature, TSPropertySignature, TSType } from "@babel/types";
+import type { BlockStatement, ClassDeclaration, Identifier, Program, TSInterfaceBody, TSMethodSignature, TSPropertySignature, TSType } from "@babel/types";
 import { memberName } from "../utils.js";
 import { analyzeLibRef, isReactRef, LibRef } from "./lib.js";
 
 export type ComponentHead = {
+  name?: Identifier | undefined;
   superClassRef: LibRef;
+  isPure: boolean;
   props: NodePath<TSType> | undefined;
   propsEach: Map<string, NodePath<TSPropertySignature | TSMethodSignature>>;
   states: Map<string, NodePath<TSPropertySignature | TSMethodSignature>>;
@@ -35,6 +37,8 @@ export function analyzeHead(path: NodePath<ClassDeclaration>): ComponentHead | u
     return;
   }
   if (superClassRef.name === "Component" || superClassRef.name === "PureComponent") {
+    const name = path.node.id;
+    const isPure = superClassRef.name === "PureComponent";
     let props: NodePath<TSType> | undefined;
     let propsEach: Map<string, NodePath<TSPropertySignature | TSMethodSignature>> | undefined = undefined;
     let states: Map<string, NodePath<TSPropertySignature | TSMethodSignature>> | undefined = undefined;
@@ -52,7 +56,7 @@ export function analyzeHead(path: NodePath<ClassDeclaration>): ComponentHead | u
     }
     propsEach ??= new Map();
     states ??= new Map();
-    return { superClassRef, props, propsEach, states };
+    return { name, superClassRef, isPure, props, propsEach, states };
   }
 }
 

src/index.test.ts

@@ -146,7 +146,7 @@ describe("react-declassify", () => {
       `;
       const output = dedent`\
         import React from "react";
-        const C = () => {};
+        const C = React.memo(function C() {});
       `;
       expect(transform(input)).toBe(output);
     });
@@ -1021,6 +1021,40 @@ describe("react-declassify", () => {
     });
   });
 
+  describe("Memoization", () => {
+    it("transforms PureComponent to React.memo", () => {
+      const input = dedent`\
+        class C extends React.PureComponent {
+          render() {
+            return <div>Hello, world!</div>;
+          }
+        }
+      `;
+      const output = dedent`\
+        const C = React.memo(function C() {
+          return <div>Hello, world!</div>;
+        });
+      `;
+      expect(transform(input)).toBe(output);
+    });
+
+    it("Places types on const", () => {
+      const input = dedent`\
+        class C extends React.PureComponent {
+          render() {
+            return <div>Hello, world!</div>;
+          }
+        }
+      `;
+      const output = dedent`\
+        const C: React.FC = React.memo(function C() {
+          return <div>Hello, world!</div>;
+        });
+      `;
+      expect(transform(input, { ts: true })).toBe(output);
+    });
+  });
+
   test("readme example 1", () => {
     const input = dedent`\
       import React from "react";

src/index.ts

@@ -77,7 +77,7 @@ export default function plugin(babel: typeof import("@babel/core")): PluginObj<P
 }
 
 type TransformResult = {
-  funcNode: ArrowFunctionExpression;
+  funcNode: Expression;
   typeNode?: TSType | undefined;
 };
 
@@ -311,11 +311,24 @@ function transformClass(head: ComponentHead, body: ComponentBody, options: { ts:
   }
   const bodyNode = body.render.path.node.body;
   bodyNode.body.splice(0, 0, ...preamble);
-  return {
-    funcNode: t.arrowFunctionExpression(
+  const functionNeeded = head.isPure;
+  const funcNode = functionNeeded
+    ? t.functionExpression(
+      head.name ? t.cloneNode(head.name) : undefined,
       needsProps(body) ? [t.identifier("props")] : [],
       bodyNode
-    ),
+    )
+    : t.arrowFunctionExpression(
+      needsProps(body) ? [t.identifier("props")] : [],
+      bodyNode
+    );
+  return {
+    funcNode: head.isPure
+      ? t.callExpression(
+          getReactImport("memo", babel, head.superClassRef),
+          [funcNode]
+        )
+      : funcNode,
     typeNode: ts
       ? t.tsTypeReference(
         toTSEntity(getReactImport("FC", babel, head.superClassRef), babel),