Add support for useCallback

Author: qnighy

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Unreleased
 
+- Added
+  - Add support for `useCallback`
 - Fixed
   - Use function declaration instead of function expression when possible
 

README.md

@@ -239,8 +239,8 @@ If you need to enforce specific styles, use Prettier or ESLint or whatever is yo
 - [ ] Support for user-defined methods
   - [x] Transform methods to `function`s
   - [x] Transform class fields initialized as functions to `function`s
-  - [ ] Use `useCallback` if deemed necessary
-  - [ ] Auto-expand direct callback call (like `this.props.onClick()`) to indirect call
+  - [x] Use `useCallback` if deemed necessary
+  - [x] Auto-expand direct callback call (like `this.props.onClick()`) to indirect call
   - [x] Rename methods if necessary
   - [ ] Skip method-binding expressions (e.g. `onClick={this.onClick.bind(this)}`)
   - [ ] Skip method-binding statements (e.g. `this.onClick = this.onClick.bind(this)`)

src/analysis.ts

@@ -5,9 +5,9 @@ import { AnalysisError } from "./analysis/error.js";
 import { analyzeClassFields } from "./analysis/class_fields.js";
 import { analyzeState, StateObjAnalysis } from "./analysis/state.js";
 import { getAndDelete } from "./utils.js";
-import { analyzeProps, PropsObjAnalysis } from "./analysis/prop.js";
+import { analyzeProps, needAlias, PropsObjAnalysis } from "./analysis/prop.js";
 import { LocalManager, RemovableNode } from "./analysis/local.js";
-import { analyzeUserDefined, UserDefinedAnalysis } from "./analysis/user_defined.js";
+import { analyzeUserDefined, postAnalyzeCallbackDependencies, UserDefinedAnalysis } from "./analysis/user_defined.js";
 import type { PreAnalysisResult } from "./analysis/pre.js";
 import type { LibRef } from "./analysis/lib.js";
 
@@ -20,6 +20,7 @@ export type {
 export { preanalyzeClass } from "./analysis/pre.js";
 export type { LocalManager } from "./analysis/local.js";
 export type { StateObjAnalysis } from "./analysis/state.js";
+export { needAlias } from "./analysis/prop.js";
 export type { PropsObjAnalysis } from "./analysis/prop.js";
 
 const SPECIAL_STATIC_NAMES = new Set<string>([
@@ -85,8 +86,15 @@ export function analyzeClass(
     throw new AnalysisError(`Missing render method`);
   }
   const props = analyzeProps(propsObjAnalysis, defaultPropsObjAnalysis, locals, preanalysis);
+  postAnalyzeCallbackDependencies(
+    userDefined,
+    props,
+    states,
+    sites,
+  );
+
   for (const [name, propAnalysis] of props.props) {
-    if (propAnalysis.needsAlias) {
+    if (needAlias(propAnalysis)) {
       propAnalysis.newAliasName = locals.newLocal(
         name,
         propAnalysis.sites.map((site) => site.path)

src/analysis/class_fields.ts

@@ -42,6 +42,10 @@ export type ClassFieldDeclSite = {
    * - Assignment to `this` in a static initialization block (static case)
    */
   path: NodePath<ClassProperty | ClassPrivateProperty | ClassMethod | ClassPrivateMethod | ClassAccessorProperty | TSDeclareMethod | AssignmentExpression>;
+  /**
+   * Where is it referenced in?
+   */
+  owner: string | undefined;
   /**
    * Type annotation, if any.
    *
@@ -65,6 +69,7 @@ export type ClassFieldExprSite = {
    * The node that accesses the field (both read and write)
    */
   path: NodePath<MemberExpression>;
+  owner: string | undefined;
   typing: undefined;
   init: undefined;
   /**
@@ -112,7 +117,10 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
   const staticFields = new Map<string, ClassFieldAnalysis>();
   const getStaticField = (name: string) => getOr(staticFields, name, () => ({ sites: [] }));
   let constructor: NodePath<ClassMethod> | undefined = undefined;
-  const bodies: NodePath[] = [];
+  const bodies: {
+    owner: string | undefined,
+    path: NodePath,
+  }[] = [];
   // 1st pass: look for class field definitions
   for (const itemPath of path.get("body").get("body")) {
     if (isNamedClassElement(itemPath)) {
@@ -133,6 +141,7 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
         field.sites.push({
           type: "decl",
           path: itemPath,
+          owner: undefined,
           typing: typeAnnotation_
             ? {
               type: "type_value",
@@ -145,7 +154,13 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
         });
         if (valuePath) {
           // Initializer should be analyzed in step 2 too (considered to be in the constructor)
-          bodies.push(valuePath);
+          bodies.push({
+            owner:
+              valuePath.isFunctionExpression() || valuePath.isArrowFunctionExpression()
+              ? name
+              : undefined,
+            path: valuePath,
+          });
         }
       } else if (isClassMethodOrDecl(itemPath)) {
         // Class method, constructor, getter/setter, or an accessor (those that will be introduced in the decorator proposal).
@@ -156,6 +171,7 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
           field.sites.push({
             type: "decl",
             path: itemPath,
+            owner: undefined,
             // We put `typing` here only when it is type-only
             typing: itemPath.isTSDeclareMethod()
               ? {
@@ -172,9 +188,15 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
           // Analysis for step 2
           if (isClassMethodLike(itemPath)) {
             for (const paramPath of itemPath.get("params")) {
-               bodies.push(paramPath);
+              bodies.push({
+                owner: name,
+                path: paramPath,
+              });
             }
-            bodies.push(itemPath.get("body"));
+            bodies.push({
+              owner: name,
+              path: itemPath.get("body"),
+            });
           }
         } else if (kind === "get" || kind === "set") {
           throw new AnalysisError(`Not implemented yet: getter / setter`);
@@ -262,6 +284,7 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
       field.sites.push({
         type: "decl",
         path: exprPath,
+        owner: undefined,
         typing: undefined,
         init: {
           type: "init_value",
@@ -270,12 +293,15 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
         hasWrite: undefined,
         hasSideEffect: estimateSideEffect(stmt.node.expression.right),
       });
-      bodies.push(exprPath.get("right"));
+      bodies.push({
+        owner: name,
+        path: exprPath.get("right"),
+      });
     }
   }
 
   // 2nd pass: look for uses within items
-  function traverseItem(path: NodePath) {
+  function traverseItem(owner: string | undefined, path: NodePath) {
     traverseThis(path, (thisPath) => {
       // Ensure this is part of `this.foo`
       const thisMemberPath = thisPath.parentPath;
@@ -306,6 +332,7 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
 
       field.sites.push({
         type: "expr",
+        owner,
         path: thisMemberPath,
         typing: undefined,
         init: undefined,
@@ -315,7 +342,7 @@ export function analyzeClassFields(path: NodePath<ClassDeclaration>): ClassField
     });
   }
   for (const body of bodies) {
-    traverseItem(body);
+    traverseItem(body.owner, body.path);
   }
 
   // Post validation

src/analysis/prop.ts

@@ -18,26 +18,30 @@ export type PropsObjAnalysis = {
 export type PropAnalysis = {
   newAliasName?: string | undefined;
   defaultValue?: NodePath<Expression>;
-  /**
-   * present only when there is defaultProps.
-   */
   sites: PropSite[];
   aliases: PropAlias[];
-  needsAlias: boolean;
   typing?: NodePath<TSPropertySignature | TSMethodSignature> | undefined;
 };
 
+// These are mutually linked
 export type PropsObjSite = {
   path: NodePath<MemberExpression>;
+  owner: string | undefined;
+  decomposedAsAliases: boolean;
+  child: PropSite | undefined;
 };
 
 export type PropSite = {
   path: NodePath<MemberExpression>;
+  parent: PropsObjSite;
+  owner: string | undefined;
+  enabled: boolean;
 };
 
 export type PropAlias = {
   scope: Scope,
   localName: string,
+  owner: string | undefined,
 };
 
 /**
@@ -66,31 +70,45 @@ export function analyzeProps(
   const getProp = (name: string) => getOr(props, name, () => ({
     sites: [],
     aliases: [],
-    needsAlias: false,
   }));
 
   for (const site of propsObjAnalysis.sites) {
     if (site.type !== "expr" || site.hasWrite) {
       throw new AnalysisError(`Invalid use of this.props`);
     }
-    newObjSites.push({
-      path: site.path,
-    });
     const memberAnalysis = trackMember(site.path);
+    const parentSite: PropsObjSite = {
+      path: site.path,
+      owner: site.owner,
+      decomposedAsAliases: false,
+      child: undefined,
+    };
+    newObjSites.push(parentSite);
     if (memberAnalysis.fullyDecomposed && memberAnalysis.memberAliases) {
       for (const [name, aliasing] of memberAnalysis.memberAliases) {
         getProp(name).aliases.push({
           scope: aliasing.scope,
           localName: aliasing.localName,
+          owner: site.owner,
         });
         locals.reserveRemoval(aliasing.idPath);
       }
-    } else if (defaultProps) {
-      if (memberAnalysis.memberExpr) {
-        getProp(memberAnalysis.memberExpr.name).sites.push({ path: memberAnalysis.memberExpr.path });
-      } else {
+      parentSite.decomposedAsAliases = true;
+    } else {
+      if (defaultProps && !memberAnalysis.memberExpr) {
         throw new AnalysisError(`Non-analyzable this.props in presence of defaultProps`);
       }
+      if (memberAnalysis.memberExpr) {
+        const child: PropSite = {
+          path: memberAnalysis.memberExpr.path,
+          parent: parentSite,
+          owner: site.owner,
+          // `enabled` will also be turned on later in callback analysis
+          enabled: !!defaultProps,
+        };
+        parentSite.child = child;
+        getProp(memberAnalysis.memberExpr.name).sites.push(child);
+      }
     }
   }
   for (const [name, propTyping] of preanalysis.propsEach) {
@@ -101,9 +119,6 @@ export function analyzeProps(
       getProp(name).defaultValue = defaultValue;
     }
   }
-  for (const [, prop] of props) {
-    prop.needsAlias = prop.aliases.length > 0 || prop.sites.length > 0;
-  }
   const allAliases = Array.from(props.values()).flatMap((prop) => prop.aliases);
   return {
     hasDefaults: !!defaultProps,
@@ -113,6 +128,10 @@ export function analyzeProps(
   };
 }
 
+export function needAlias(prop: PropAnalysis): boolean {
+  return prop.aliases.length > 0 || prop.sites.some((s) => s.enabled);
+}
+
 function analyzeDefaultProps(
   defaultPropsAnalysis: ClassFieldAnalysis,
 ): Map<string, NodePath<Expression>> | undefined {

src/analysis/state.ts

@@ -27,6 +27,7 @@ export type StateInitSite = {
 export type StateExprSite = {
   type: "expr";
   path: NodePath<Expression>;
+  owner: string | undefined;
 };
 export type SetStateSite = {
   type: "setState";
@@ -103,13 +104,15 @@ export function analyzeState(
           getState(name).sites.push({
             type: "expr",
             path,
+            owner: site.owner,
           });
         }
       }
     } else if (memberAnalysis.memberExpr) {
       getState(memberAnalysis.memberExpr.name).sites.push({
         type: "expr",
         path: memberAnalysis.memberExpr.path,
+        owner: site.owner,
       });
     } else {
       throw new AnalysisError(`Non-analyzable this.state`);