Add support for defaultProps typing

Author: qnighy

CHANGELOG.md

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

README.md

@@ -77,7 +77,7 @@ After:
 import React from "react";
 
 type Props = {
-  by: number;
+  by?: number | undefined
 };
 
 type State = {
@@ -160,7 +160,7 @@ export const C = props => {
   - [x] Transform `S` type argument
   - [x] Transform ref types
   - [ ] Transform generic components
-  - [ ] Modify Props appropriately if defaultProps is present
+  - [x] Modify Props appropriately if defaultProps is present
   - [ ] Modify Props appropriately if `children` seems to be used
 - [ ] Support for `this.props`
   - [x] Convert `this.props` to `props` parameter

img/example1-after.png

@@ -78,7 +78,7 @@ export function analyzeBody(
   if (!renderPath) {
     throw new AnalysisError(`Missing render method`);
   }
-  const props = analyzeProps(propsObjSites, defaultPropsObjSites, locals);
+  const props = analyzeProps(propsObjSites, defaultPropsObjSites, locals, head);
   for (const [name, propAnalysis] of props.props) {
     if (propAnalysis.needsAlias) {
       propAnalysis.newAliasName = locals.newLocal(

src/analysis.ts

@@ -6,6 +6,7 @@ import { analyzeLibRef, isReactRef, LibRef } from "./lib.js";
 export type ComponentHead = {
   superClassRef: LibRef;
   props: NodePath<TSType> | undefined;
+  propsEach: Map<string, NodePath<TSPropertySignature | TSMethodSignature>>;
   states: Map<string, NodePath<TSPropertySignature | TSMethodSignature>>;
 };
 
@@ -35,36 +36,46 @@ export function analyzeHead(path: NodePath<ClassDeclaration>): ComponentHead | u
   }
   if (superClassRef.name === "Component" || superClassRef.name === "PureComponent") {
     let props: NodePath<TSType> | undefined;
-    const states = new Map<string, NodePath<TSPropertySignature | TSMethodSignature>>();
+    let propsEach: Map<string, NodePath<TSPropertySignature | TSMethodSignature>> | undefined = undefined;
+    let states: Map<string, NodePath<TSPropertySignature | TSMethodSignature>> | undefined = undefined;
     const superTypeParameters = path.get("superTypeParameters");
     if (superTypeParameters.isTSTypeParameterInstantiation()) {
       const params = superTypeParameters.get("params");
       if (params.length > 0) {
         props = params[0];
+        propsEach = decompose(params[0]!);
       }
       if (params.length > 1) {
         const stateParamPath = params[1]!;
-        const statePath = resolveAlias(stateParamPath);
-        const members =
-          statePath.isTSTypeLiteral()
-          ? statePath.get("members")
-          : statePath.isTSInterfaceBody()
-          ? statePath.get("body")
-          : undefined;
-        if (members) {
-          for (const member of members) {
-            if (member.isTSPropertySignature() || member.isTSMethodSignature()) {
-              const name = memberName(member.node);
-              if (name != null) {
-                states.set(name, member);
-              }
-            }
-          }
+        states = decompose(stateParamPath);
+      }
+    }
+    propsEach ??= new Map();
+    states ??= new Map();
+    return { superClassRef, props, propsEach, states };
+  }
+}
+
+function decompose(path: NodePath<TSType>): Map<string, NodePath<TSPropertySignature | TSMethodSignature>> {
+  const aliasPath = resolveAlias(path);
+  const members =
+    aliasPath.isTSTypeLiteral()
+    ? aliasPath.get("members")
+    : aliasPath.isTSInterfaceBody()
+    ? aliasPath.get("body")
+    : undefined;
+  const decomposed = new Map<string, NodePath<TSPropertySignature | TSMethodSignature>>();
+  if (members) {
+    for (const member of members) {
+      if (member.isTSPropertySignature() || member.isTSMethodSignature()) {
+        const name = memberName(member.node);
+        if (name != null) {
+          decomposed.set(name, member);
         }
       }
     }
-    return { superClassRef, props, states };
   }
+  return decomposed;
 }
 
 function resolveAlias(path: NodePath<TSType>): NodePath<TSType | TSInterfaceBody> {

src/analysis/head.ts

@@ -1,11 +1,12 @@
 import type { NodePath } from "@babel/core";
 import type { Scope } from "@babel/traverse";
-import type { Expression, MemberExpression } from "@babel/types";
+import type { Expression, MemberExpression, TSMethodSignature, TSPropertySignature } from "@babel/types";
 import { getOr, memberName } from "../utils.js";
 import { AnalysisError } from "./error.js";
 import type { LocalManager } from "./local.js";
 import { StaticFieldSite, ThisFieldSite } from "./this_fields.js";
 import { trackMember } from "./track_member.js";
+import { ComponentHead } from "./head.js";
 
 export type PropsObjAnalysis = {
   hasDefaults: boolean;
@@ -23,6 +24,7 @@ export type PropAnalysis = {
   sites: PropSite[];
   aliases: PropAlias[];
   needsAlias: boolean;
+  typing?: NodePath<TSPropertySignature | TSMethodSignature> | undefined;
 };
 
 export type PropsObjSite = {
@@ -56,6 +58,7 @@ export function analyzeProps(
   propsObjSites: ThisFieldSite[],
   defaultPropsObjSites: StaticFieldSite[],
   locals: LocalManager,
+  head: ComponentHead,
 ): PropsObjAnalysis {
   const defaultProps = analyzeDefaultProps(defaultPropsObjSites);
   const newObjSites: PropsObjSite[] = [];
@@ -90,6 +93,9 @@ export function analyzeProps(
       }
     }
   }
+  for (const [name, propTyping] of head.propsEach) {
+    getProp(name).typing = propTyping;
+  }
   if (defaultProps) {
     for (const [name, defaultValue] of defaultProps) {
       getProp(name).defaultValue = defaultValue;

src/analysis/prop.ts

@@ -615,6 +615,46 @@ describe("react-declassify", () => {
       expect(transform(input)).toBe(output);
     });
 
+    it("Transforms types for defaultProps", () => {
+      const input = dedent`\
+        type Props = {
+          foo: number;
+          bar: number;
+          baz: number;
+          quux: number;
+        };
+        class C extends React.Component<Props> {
+          static defaultProps = {
+            foo: 42,
+            quux: 0,
+          };
+          render() {
+            const { foo, bar } = this.props;
+            return foo + bar + this.props.baz + this.props.quux;
+          }
+        }
+      `;
+      const output = dedent`\
+        type Props = {
+          foo?: number | undefined
+          bar: number;
+          baz: number;
+          quux?: number | undefined
+        };
+
+        const C: React.FC<Props> = props => {
+          const {
+            foo = 42,
+            bar,
+            baz,
+            quux = 0
+          } = props;
+          return foo + bar + baz + quux;
+        };
+      `;
+      expect(transform(input, { ts: true })).toBe(output);
+    });
+
     it("transforms method types", () => {
       const input = dedent`\
         class C extends React.Component {
@@ -1025,7 +1065,7 @@ describe("react-declassify", () => {
       import React from "react";
 
       type Props = {
-        by: number;
+        by?: number | undefined
       };
 
       type State = {

src/index.test.ts

@@ -1,6 +1,6 @@
 import type { ArrowFunctionExpression, ClassMethod, ClassPrivateMethod, Expression, FunctionDeclaration, FunctionExpression, Identifier, ImportDeclaration, MemberExpression, ObjectMethod, Pattern, RestElement, Statement, TSEntityName, TSType, TSTypeAnnotation } from "@babel/types";
 import type { NodePath, PluginObj, PluginPass } from "@babel/core";
-import { assignReturnType, assignTypeAnnotation, assignTypeParameters, importName, isTS } from "./utils.js";
+import { assignReturnType, assignTypeAnnotation, assignTypeParameters, importName, isTS, nonNullPath } from "./utils.js";
 import { AnalysisError, analyzeBody, analyzeHead, ComponentBody, ComponentHead, needsProps, LibRef } from "./analysis.js";
 
 type Options = {};
@@ -116,6 +116,35 @@ function transformClass(head: ComponentHead, body: ComponentBody, options: { ts:
       site.path.replaceWith(site.path.node.property);
     }
   }
+  for (const [, prop] of body.props.props) {
+    if (prop.defaultValue && prop.typing) {
+      // Make the prop optional
+      prop.typing.node.optional = true;
+      if (prop.typing.isTSPropertySignature()) {
+        const typeAnnotation = nonNullPath(prop.typing.get("typeAnnotation"))?.get("typeAnnotation");
+        if (typeAnnotation) {
+          if (typeAnnotation.isTSUnionType()) {
+            if (typeAnnotation.node.types.some((t) => t.type === "TSUndefinedKeyword")) {
+              // No need to add undefined
+            } else {
+              typeAnnotation.node.types.push(t.tsUndefinedKeyword());
+            }
+          } else {
+            typeAnnotation.replaceWith(t.tsUnionType([
+              typeAnnotation.node,
+              t.tsUndefinedKeyword(),
+            ]))
+          }
+        }
+      }
+      if (
+        prop.typing.node.type === "TSPropertySignature"
+        && prop.typing.node.typeAnnotation
+      ) {
+        const typeAnnot = prop.typing.node.typeAnnotation
+      }
+    }
+  }
   for (const [name, stateAnalysis] of body.state) {
     for (const site of stateAnalysis.sites) {
       if (site.type === "expr") {