Implement Effects MVP

Author: qnighy

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Unreleased
 
+- Added
+  - Implement MVP for componentDidMount/componentDidUpdate/componentWillUnmount
 - Fixed
   - Don't fail if user-defined class field (e.g. `this.foo`) is assigned without initializing.
 

README.md

@@ -256,7 +256,9 @@ If you need to enforce specific styles, use Prettier or ESLint or whatever is yo
   - [ ] Transform legacy string refs as far as possible
 - [ ] Support for lifecycles
   - [ ] Transform componentDidMount, componentDidUpdate, and componentWillUnmount
-  - [ ]
+    - [x] Support "raw" effects -- simply mapping the three callbacks to guarded effects.
+    - [ ] Support re-pairing effects
+  - [ ] Transform shouldComponentUpdate
 - [ ] Support for receiving refs
   - [ ] Use `forwardRef` + `useImperativeHandle` when requested by the user
 - [ ] Support for contexts

src/analysis.ts

@@ -10,6 +10,7 @@ import { LocalManager, RemovableNode } from "./analysis/local.js";
 import { analyzeUserDefined, postAnalyzeCallbackDependencies, UserDefinedAnalysis } from "./analysis/user_defined.js";
 import type { PreAnalysisResult } from "./analysis/pre.js";
 import type { LibRef } from "./analysis/lib.js";
+import { EffectAnalysis, analyzeEffects } from "./analysis/effect.js";
 
 export { AnalysisError } from "./analysis/error.js";
 
@@ -43,6 +44,7 @@ export type AnalysisResult = {
   state: StateObjAnalysis;
   props: PropsObjAnalysis;
   userDefined: UserDefinedAnalysis;
+  effects: EffectAnalysis;
 };
 
 export function analyzeClass(
@@ -59,6 +61,10 @@ export function analyzeClass(
   const setStateAnalysis = getAndDelete(sites, "setState") ?? { sites: [] };
   const states = analyzeState(stateObjAnalysis, setStateAnalysis, locals, preanalysis);
 
+  const componentDidMount = getAndDelete(sites, "componentDidMount") ?? { sites: [] };
+  const componentDidUpdate = getAndDelete(sites, "componentDidUpdate") ?? { sites: [] };
+  const componentWillUnmount = getAndDelete(sites, "componentWillUnmount") ?? { sites: [] };
+
   const renderAnalysis = getAndDelete(sites, "render") ?? { sites: [] };
 
   analyzeOuterCapturings(path, locals);
@@ -102,6 +108,13 @@ export function analyzeClass(
     }
   }
 
+  const effects = analyzeEffects(
+    componentDidMount,
+    componentDidUpdate,
+    componentWillUnmount,
+    userDefined,
+  );
+
   const render = analyzeRender(renderPath, locals);
 
   for (const [name, stateAnalysis] of states.entries()) {
@@ -114,6 +127,13 @@ export function analyzeClass(
     field.localName = locals.newLocal(name, field.sites.map((site) => site.path));
   }
 
+  if (effects.cdmPath || effects.cduPath || effects.cwuPath) {
+    effects.isMountedLocalName = locals.newLocal("isMounted", []);
+    if (effects.cwuPath) {
+      effects.cleanupLocalName = locals.newLocal("cleanup", []);
+    }
+  }
+
   return {
     name: preanalysis.name,
     typeParameters: preanalysis.typeParameters,
@@ -125,6 +145,7 @@ export function analyzeClass(
     state: states,
     props,
     userDefined,
+    effects,
   };
 }
 

src/analysis/effect.ts

@@ -0,0 +1,101 @@
+import type { ClassMethod } from "@babel/types";
+import type { NodePath } from "@babel/traverse";
+import type { ClassFieldAnalysis } from "./class_fields.js";
+import { AnalysisError } from "./error.js";
+import type { UserDefinedAnalysis } from "./user_defined.js";
+
+export type EffectAnalysis = {
+  cdmPath: NodePath<ClassMethod> | undefined;
+  cduPath: NodePath<ClassMethod> | undefined;
+  cwuPath: NodePath<ClassMethod> | undefined;
+  isMountedLocalName?: string | undefined;
+  cleanupLocalName?: string | undefined;
+};
+export function analyzeEffects(
+  componentDidMount: ClassFieldAnalysis,
+  componentDidUpdate: ClassFieldAnalysis,
+  componentWillUnmount: ClassFieldAnalysis,
+  userDefined: UserDefinedAnalysis,
+): EffectAnalysis {
+  const cdmInit = componentDidMount.sites.find((site) => site.init);
+  const cduInit = componentDidUpdate.sites.find((site) => site.init);
+  const cwuInit = componentWillUnmount.sites.find((site) => site.init);
+  if (componentDidMount.sites.some((site) => !site.init)) {
+    throw new AnalysisError("Do not use componentDidMount by yourself");
+  }
+  if (componentDidUpdate.sites.some((site) => !site.init)) {
+    throw new AnalysisError("Do not use componentDidUpdate by yourself");
+  }
+  if (componentWillUnmount.sites.some((site) => !site.init)) {
+    throw new AnalysisError("Do not use componentWillUnmount by yourself");
+  }
+  let cdmPath: NodePath<ClassMethod> | undefined = undefined;
+  let cduPath: NodePath<ClassMethod> | undefined = undefined;
+  let cwuPath: NodePath<ClassMethod> | undefined = undefined;
+  if (cdmInit) {
+    if (!cdmInit.path.isClassMethod()) {
+      throw new AnalysisError("Not a class method: componentDidMount");
+    }
+    if (cdmInit.path.node.params.length > 0) {
+      throw new AnalysisError("Invalid parameter of componentDidMount");
+    }
+    cdmPath = cdmInit.path;
+  }
+  if (cduInit) {
+    if (!cduInit.path.isClassMethod()) {
+      throw new AnalysisError("Not a class method: componentDidUpdate");
+    }
+    if (cduInit.path.node.params.length > 0) {
+      throw new AnalysisError("Not supported: componentDidUpdate parameters");
+    }
+    cduPath = cduInit.path;
+  }
+  if (cwuInit) {
+    if (!cwuInit.path.isClassMethod()) {
+      throw new AnalysisError("Not a class method: componentWillUnmount");
+    }
+    if (cwuInit.path.node.params.length > 0) {
+      throw new AnalysisError("Invalid parameter of componentWillUnmount");
+    }
+    cwuPath = cwuInit.path;
+  }
+
+  for (const [name, field] of userDefined.fields) {
+    if (
+      field.type === "user_defined_function"
+      && field.sites.some((site) =>
+        site.type === "expr"
+        && site.owner === "componentWillUnmount"
+        && !site.path.parentPath.isCallExpression()
+      )
+    ) {
+      // A user-defined function is used without immediately calling in componentWillUnmount.
+      // This is likely the following idiom:
+      //
+      // ```js
+      // onMouseOver = () => {
+      //   ...
+      // }
+      // componentDidMount() {
+      //   this.div.addEventListener("mouseover", this.onMouseOver);
+      // }
+      // componentWillUnmount() {
+      //   this.div.removeEventListener("mouseover", this.onMouseOver);
+      // }
+      // ```
+      //
+      // It may break in our "raw effect" transformation
+      // because function identity may change over time.
+      //
+      // We will implement a separate paths for the patterns above,
+      // but for now we just error out to avoid risks.
+
+      throw new AnalysisError(`Possible event unregistration of ${name} in componentWillUnmount`);
+    }
+  }
+  return {
+    cdmPath,
+    cduPath,
+    cwuPath,
+  };
+}

src/index.test.ts

@@ -1158,6 +1158,61 @@ describe("react-declassify", () => {
     });
   });
 
+  describe("Effects", () => {
+    it("transforms raw effects", () => {
+      const input = dedent`\
+        class C extends React.Component {
+          componentDidMount() {
+            console.log("mounted");
+          }
+          componentDidUpdate() {
+            console.log("updated");
+          }
+          componentWillUnmount() {
+            console.log("unmounting");
+          }
+          render() {
+            return null;
+          }
+        }
+      `;
+      const output = dedent`\
+        const C = () => {
+          const isMounted = React.useRef(false);
+
+          // TODO(react-declassify): refactor this effect (automatically generated from lifecycle)
+          React.useEffect(() => {
+            if (!isMounted.current) {
+              isMounted.current = true;
+              console.log("mounted");
+            } else {
+              console.log("updated");
+            }
+          });
+
+          const cleanup = React.useRef(null);
+
+          cleanup.current = () => {
+            console.log("unmounting");
+          };
+
+          // TODO(react-declassify): refactor this effect (automatically generated from lifecycle)
+          React.useEffect(() => {
+            return () => {
+              if (isMounted.current) {
+                isMounted.current = false;
+                cleanup.current?.();
+              }
+            };
+          }, []);
+
+          return null;
+        };
+      `;
+      expect(transform(input)).toBe(output);
+    });
+  });
+
   test("readme example 1", () => {
     const input = dedent`\
       import React from "react";