Set up prettier

Author: qnighy

.github/workflows/test.yml

@@ -25,5 +25,5 @@ jobs:
       run: yarn tsc
     # - name: Lint
     #   run: yarn lint --max-warnings 0
-    # - name: Check formatting
-    #   run: yarn fmt:check
+    - name: Check formatting
+      run: yarn fmt:check

.prettierignore

@@ -0,0 +1,9 @@
+.github/workflows
+.pnp.cjs
+.pnp.loader.mjs
+.vim
+.vscode
+.yarn
+.yarnrc.yml
+cjs/dist
+dist

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
-    "arcanis.vscode-zipfs"
+    "arcanis.vscode-zipfs",
+    "esbenp.prettier-vscode"
   ]
 }

.yarn/sdks/prettier/index.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/index.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier/index.js your application uses
+module.exports = absRequire(`prettier/index.js`);

.yarn/sdks/prettier/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "prettier",
+  "version": "2.8.7-sdk",
+  "main": "./index.js",
+  "type": "commonjs"
+}

README.md

@@ -2,9 +2,9 @@
 
 This codemod automatically transforms **React class components** into **React functional components using Hooks** for you!
 
-|Before|After|
-|---|---|
-|![before example 1](./img/example1-before.png)|![after example 1](./img/example1-after.png)|
+| Before                                         | After                                        |
+| ---------------------------------------------- | -------------------------------------------- |
+| ![before example 1](./img/example1-before.png) | ![after example 1](./img/example1-after.png) |
 
 ## Features
 
@@ -31,6 +31,7 @@ npx codemod --plugin react-declassify 'src/**/*.tsx'
 
 Before:
 
+<!-- prettier-ignore -->
 ```tsx
 import React from "react";
 
@@ -73,6 +74,7 @@ export class C extends React.Component<Props, State> {
 
 After:
 
+<!-- prettier-ignore -->
 ```tsx
 import React from "react";
 
@@ -106,6 +108,7 @@ export const C: React.FC<Props> = props => {
 
 Before:
 
+<!-- prettier-ignore -->
 ```jsx
 import React from "react";
 
@@ -125,6 +128,7 @@ export class C extends React.Component {
 
 After:
 
+<!-- prettier-ignore -->
 ```jsx
 import React from "react";
 
@@ -201,6 +205,7 @@ Class components may receive refs; this is to be supported in the future. Once i
 
 This codemod relies on [recast](https://github.com/benjamn/recast) for pretty-printing and sometimes generates code that does not match your preferred style. This is ineviable. For example it does not currently emit parentheses for the arrow function:
 
+<!-- prettier-ignore -->
 ```js
 const MyComponent: FC = props => {
   //                    ^^^^^ no parentheses

babel-cjs.config.js

@@ -3,9 +3,6 @@
 /** @type {import("@babel/core").TransformOptions} */
 const config = {
   extends: "./babel.config.js",
-  presets: [
-    ["@babel/env", { modules: "commonjs" }],
-  ],
+  presets: [["@babel/env", { modules: "commonjs" }]],
 };
 export default config;
-

package.json

@@ -35,6 +35,8 @@
     "build": "$npm_execpath build:esm && $npm_execpath build:cjs",
     "build:cjs": "babel -x .ts -d cjs/dist src --ignore '**/*.test.ts' --config-file ./babel-cjs.config.js",
     "build:esm": "babel -x .ts -d dist src --ignore '**/*.test.ts'",
+    "fmt": "prettier -w .",
+    "fmt:check": "prettier -c .",
     "prepack": "$npm_execpath build",
     "test": "NODE_OPTIONS='--experimental-vm-modules' yarn jest"
   },
@@ -52,6 +54,7 @@
     "@yarnpkg/sdks": "^3.0.0-rc.40",
     "babel-jest": "^29.5.0",
     "jest": "^29.5.0",
+    "prettier": "^2.8.7",
     "ts-jest-resolver": "^2.0.1",
     "typescript": "^5.0.2"
   },

renovate.json

@@ -1,8 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ],
+  "extends": ["config:base"],
   "packageRules": [
     {
       "matchManagers": ["npm"],

src/analysis.ts

@@ -1,26 +1,39 @@
 import type { NodePath } from "@babel/core";
 import type { Scope } from "@babel/traverse";
-import type { ClassDeclaration, ClassMethod, Identifier, JSXIdentifier, TSType, TSTypeParameterDeclaration } from "@babel/types";
+import type {
+  ClassDeclaration,
+  ClassMethod,
+  Identifier,
+  JSXIdentifier,
+  TSType,
+  TSTypeParameterDeclaration,
+} from "@babel/types";
 import { AnalysisError } from "./analysis/error.js";
 import { BindThisSite, analyzeClassFields } from "./analysis/class_fields.js";
 import { analyzeState, StateObjAnalysis } from "./analysis/state.js";
 import { getAndDelete } from "./utils.js";
 import { analyzeProps, needAlias, PropsObjAnalysis } from "./analysis/prop.js";
 import { LocalManager, RemovableNode } from "./analysis/local.js";
-import { analyzeUserDefined, postAnalyzeCallbackDependencies, 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";
 import { EffectAnalysis, analyzeEffects } from "./analysis/effect.js";
 
 export { AnalysisError } from "./analysis/error.js";
 
 export type { LibRef } from "./analysis/lib.js";
-export type {
-  PreAnalysisResult
-} from "./analysis/pre.js";
+export type { PreAnalysisResult } from "./analysis/pre.js";
 export { preanalyzeClass } from "./analysis/pre.js";
 export type { LocalManager } from "./analysis/local.js";
-export type { StateObjAnalysis, SetStateSite, SetStateFieldSite } from "./analysis/state.js";
+export type {
+  StateObjAnalysis,
+  SetStateSite,
+  SetStateFieldSite,
+} from "./analysis/state.js";
 export { needAlias } from "./analysis/prop.js";
 export type { PropsObjAnalysis } from "./analysis/prop.js";
 
@@ -53,18 +66,36 @@ export function analyzeClass(
   preanalysis: PreAnalysisResult
 ): AnalysisResult {
   const locals = new LocalManager(path);
-  const { instanceFields: sites, staticFields, bindThisSites } = analyzeClassFields(path);
+  const {
+    instanceFields: sites,
+    staticFields,
+    bindThisSites,
+  } = analyzeClassFields(path);
 
   const propsObjAnalysis = getAndDelete(sites, "props") ?? { sites: [] };
-  const defaultPropsObjAnalysis = getAndDelete(staticFields, "defaultProps") ?? { sites: [] };
+  const defaultPropsObjAnalysis = getAndDelete(
+    staticFields,
+    "defaultProps"
+  ) ?? { sites: [] };
 
   const stateObjAnalysis = getAndDelete(sites, "state") ?? { sites: [] };
   const setStateAnalysis = getAndDelete(sites, "setState") ?? { sites: [] };
-  const states = analyzeState(stateObjAnalysis, setStateAnalysis, locals, preanalysis);
+  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 componentDidMount = getAndDelete(sites, "componentDidMount") ?? {
+    sites: [],
+  };
+  const componentDidUpdate = getAndDelete(sites, "componentDidUpdate") ?? {
+    sites: [],
+  };
+  const componentWillUnmount = getAndDelete(sites, "componentWillUnmount") ?? {
+    sites: [],
+  };
 
   const renderAnalysis = getAndDelete(sites, "render") ?? { sites: [] };
 
@@ -92,13 +123,13 @@ export function analyzeClass(
   if (!renderPath) {
     throw new AnalysisError(`Missing render method`);
   }
-  const props = analyzeProps(propsObjAnalysis, defaultPropsObjAnalysis, locals, preanalysis);
-  postAnalyzeCallbackDependencies(
-    userDefined,
-    props,
-    states,
-    sites,
+  const props = analyzeProps(
+    propsObjAnalysis,
+    defaultPropsObjAnalysis,
+    locals,
+    preanalysis
   );
+  postAnalyzeCallbackDependencies(userDefined, props, states, sites);
 
   for (const [name, propAnalysis] of props.props) {
     if (needAlias(propAnalysis)) {
@@ -113,19 +144,25 @@ export function analyzeClass(
     componentDidMount,
     componentDidUpdate,
     componentWillUnmount,
-    userDefined,
+    userDefined
   );
 
   const render = analyzeRender(renderPath, locals);
 
   for (const [name, stateAnalysis] of states.states.entries()) {
     const bindingPaths = stateAnalysis.sites.map((site) => site.path);
     stateAnalysis.localName = locals.newLocal(name, bindingPaths);
-    stateAnalysis.localSetterName = locals.newLocal(`set${name.replace(/^[a-z]/, (s) => s.toUpperCase())}`, bindingPaths);
+    stateAnalysis.localSetterName = locals.newLocal(
+      `set${name.replace(/^[a-z]/, (s) => s.toUpperCase())}`,
+      bindingPaths
+    );
   }
 
   for (const [name, field] of userDefined.fields) {
-    field.localName = locals.newLocal(name, field.sites.map((site) => site.path));
+    field.localName = locals.newLocal(
+      name,
+      field.sites.map((site) => site.path)
+    );
   }
 
   if (effects.cdmPath || effects.cduPath || effects.cwuPath) {
@@ -157,20 +194,18 @@ export type RenderAnalysis = {
 };
 
 export type LocalRename = {
-  scope: Scope,
+  scope: Scope;
   oldName: string;
   newName: string;
 };
 
 function analyzeRender(
   path: NodePath<ClassMethod>,
-  locals: LocalManager,
+  locals: LocalManager
 ): RenderAnalysis {
   const renames: LocalRename[] = [];
   for (const [name, binding] of Object.entries(path.scope.bindings)) {
-    if (
-      locals.allRemovePaths.has(binding.path as NodePath<RemovableNode>)
-    ) {
+    if (locals.allRemovePaths.has(binding.path as NodePath<RemovableNode>)) {
       // Already handled as an alias
       continue;
     }
@@ -184,10 +219,13 @@ function analyzeRender(
   return { path, renames };
 }
 
-function analyzeOuterCapturings(classPath: NodePath<ClassDeclaration>, locals: LocalManager): Set<string> {
+function analyzeOuterCapturings(
+  classPath: NodePath<ClassDeclaration>,
+  locals: LocalManager
+): Set<string> {
   const capturings = new Set<string>();
   function visitIdent(path: NodePath<Identifier | JSXIdentifier>) {
-    path.getOuterBindingIdentifiers
+    path.getOuterBindingIdentifiers;
     const binding = path.scope.getBinding(path.node.name);
     if (!binding || binding.path.isAncestor(classPath)) {
       capturings.add(path.node.name);
@@ -204,7 +242,7 @@ function analyzeOuterCapturings(classPath: NodePath<ClassDeclaration>, locals: L
       if (path.isReferencedIdentifier()) {
         visitIdent(path);
       }
-    }
+    },
   });
   return capturings;
 }