Auditing a React Application with Abstract Syntax Trees

Maintaining and refactoring a large codebase requires lots of development time and effort. Issues, such as inconsistencies in variable naming or passing incorrect arguments in function calls, tend to happen more frequently in larger codebases. As you scan your codebase for these issues, you may observe some of them emerging repeatedly in different parts of your codebase. Manually sifting through tens and hundreds of files to apply the same set of changes in multiple places is simply not feasible. Anytime you have to manually make many repetitive changes, the likelihood of a mistake occurring increases.

To automate this entire process, you need tooling that draws upon abstract syntax trees to audit code, report the findings and, if warranted, immediately resolve them. Abstract syntax trees are not only used for compilers; they are also present in other types of development tooling. By parsing source code into an abstract syntax tree, we can traverse the nodes of the tree to interact directly with each and every literal, identifier, etc. in the source code.

For React applications, auditing with abstract syntax trees lets us understand the current state of our components' source code and get information about our components' contents. For example, if we notice 

 elements scattered throughout our application, then we can write a tool to list the CSS classes assigned to their 

 attributes. Using this list, we can check if there are any incorrectly spelled CSS classes and/or invalid CSS classes and fix them. Additionally, we can refactor the 

 component and consolidate the CSS classes within this single component. Therefore, if we decide to rename/remove any of the CSS classes, then we only need to visit and edit one component instead of many.

Writing development tooling based on abstract syntax trees takes little time thanks to Babel's large ecosystem of packages and plugins. 

 comes with packages for parsing source code (

Below, I'm going to show you how to write an auditing tool for React applications using Babel.

To get started, initialize a new Create React App project:

$ npx create-react-app <project-name> --template typescript

For this tutorial, we will be writing an auditing tool that generates a report of the 

 elements used within the React application. The report will list the attributes (i.e. 

) set on these elements and the values assigned to them. If the report shows many many 

 elements sharing the same CSS classes, then we can refactor them into a single 

Within the new project, create three components that contain 

import React, { FC, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";

const modalRoot = document.getElementById("modal-root");

interface ModalProps {
  children: JSX.Element;
  title: string;
  onClose: () => void;
  onConfirm: () => void;
}

export const Modal: FC<ModalProps> = ({
  children,
  title,
  onClose,
  onConfirm,
}) => {
  const [isHidden, setIsHidden] = useState(true);
  const element = useRef<HTMLDivElement>(document.createElement("div"));

  useEffect(() => {
    modalRoot?.appendChild(element.current);
    setIsHidden(false);

    return () => {
      modalRoot?.removeChild(element.current);
      setIsHidden(true);
    };
  }, []);

  return createPortal(
    <>
      <div className="modal__backdrop" />
      <div className="modal" tabIndex={-1} role="dialog" aria-hidden={isHidden}>
        <div className="modal__content">
          <button type="button" className="modal__close" onClick={onClose}>
            X
          </button>
          <div className="modal__header">{title}</div>
          <div className="modal__body">{children}</div>
          <div className="modal__footer">
            <button
              type="button"
              className="btn btn--secondary"
              data-dismiss="modal"
              onClick={onClose}
            >
              Close
            </button>
            <button
              type="button"
              className="btn btn--primary"
              onClick={onConfirm}
            >
              Confirm
            </button>
          </div>
        </div>
      </div>
    </>,
    element.current
  );
};

export default Modal;

import React, { FC, SyntheticEvent, useRef, useState } from "react";

interface LoginFormProps {
  onSubmit: (formData: {
    emailAddress: string;
    password: string;
    rememberPassword: boolean;
  }) => Promise<Object>;
  redirectUrl: string;
}

export const LoginForm: FC<LoginFormProps> = ({ onSubmit, redirectUrl }) => {
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  const emailAddressRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);
  const rememberPasswordRef = useRef<HTMLInputElement>(null);

  const handleOnSubmit = async (evt: SyntheticEvent) => {
    evt.preventDefault();

    const formData = {
      emailAddress: emailAddressRef.current?.value,
      password: passwordRef.current?.value,
      rememberPassword: rememberPasswordRef.current?.value,
    };

    if (formData.emailAddress && formData.password) {
      setIsLoggingIn(true);

      try {
        const user = await onSubmit(formData);

        window.location.replace(redirectUrl);
      } catch (err) {
        console.error(err);
      } finally {
        setIsLoggingIn(false);
      }
    }
  };

  return (
    <form className="form form--login" onSubmit={handleOnSubmit}>
      <div className="form__group">
        <label htmlFor="emailAddress">Email Address</label>
        <input
          type="email"
          className="form__control"
          id="emailAddress"
          placeholder="Email Address"
          ref={emailAddressRef}
        />
      </div>
      <div className="form__group">
        <label htmlFor="password">Password</label>
        <input
          type="password"
          className="form__control"
          id="password"
          placeholder="Password"
          ref={passwordRef}
        />
      </div>
      <div className="form__check">
        <input
          type="checkbox"
          className="form__check__input"
          id="rememberPassword"
          ref={rememberPasswordRef}
        />
        <label className="form__check__label" htmlFor="rememberPassword">
          Remember Password
        </label>
      </div>
      <button type="submit" className="btn btn--primary" disabled={isLoggingIn}>
        Submit
      </button>
    </form>
  );
};

export default LoginForm;

import React, { FC } from "react";

interface CardProps {
  item: {
    imageUrl: string;
    title: string;
    desc: string;
    url: string;
  };
}

export const Card: FC<CardProps> = ({ item }) => {
  const handleOnClick = () => {
    window.location.href = item.url;
  };

  return (
    <div className="card">
      <img className="card__image" src={item.imageUrl} alt={item.title} />
      <div className="card__body">
        <h4 className="card__title">{item.title}</h4>
        <p className="card__desc">{item.desc}</p>
        <button
          type="button"
          className="btn btn--primary"
          onClick={handleOnClick}
        >
          Read More
        </button>
      </div>
    </div>
  );
};

export default Card;

While the components are not actively used within the application, you can still audit them since the auditing tool statically analyzes the components' source code. It does not run the React application.

The auditing tool uses two Babel packages:

$ npm install --save-dev @babel/parser @babel/traverse

To find all the relevant component files, the auditing tool uses a glob pattern to search for files by their name. 

Since this tool will be written with TypeScript, we will need to install 

 to run it and type definition files for the 

$ npm install --save-dev ts-node @types/babel__traverse @types/glob

 provides its own type definitions. Therefore, you don't need to install any extra dependency for its type definitions.

At the root of the project directory, create a new directory named 

$ mkdir audits && touch audits/buttons-audit.ts 

Within this file, start by synchronously glob searching for the component files and reading their content.

import * as fs from "fs";
import * as glob from "glob";

const files = glob.sync("./src/components/**/*.tsx"); // Relative to `package.json`.

files.forEach(file => {
  const contents = fs.readFileSync(file).toString();
});

 compiler option suppresses the warning message 

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

. For larger projects, you should define compiler options within a 

Now, parse the source code of each file into an abstract syntax tree.

import { parse } from "@babel/parser";
// ...

files.forEach(file => {
  const contents = fs.readFileSync(file).toString();

  const ast = parse(contents, {
    sourceType: "module",
    plugins: ["typescript", "jsx"],
  });
});

 package to traverse the abstract syntax tree. Pass it the abstract syntax tree generated by the parser and an object with the nodes to execute code when visited. In this case, we would like to execute code whenever Babel finds a 

 JSX element. Since an element's attributes are assigned to its opening, not closing, tag, we should execute code on 

 node represents any opening JSX element (i.e. opening 

 element tags), so how do we narrow down to opening 

, this indicates that we have reached a node that represents an opening 

 element tag. This is where we want to execute code to retrieve the 

 element's attributes and corresponding values.

import traverse from "@babel/traverse";
// ...

files.forEach(file => {
  // ...

  traverse(ast, {
    JSXOpeningElement({ node }) {
      if (node.name.type === "JSXIdentifier" && node.name.name === "button") {
        // Record attributes and corresponding values.
      }
    }
  });
});

 attribute, we must iterate the node's attributes for a 

const hasButtonClassName = node.attributes.find((attribute) => {
  return (
    attribute.type === "JSXAttribute" &&
    attribute.name.type === "JSXIdentifier" &&
    attribute.name.name === "className" &&
    attribute.value?.type === "StringLiteral" &&
    attribute.value?.value?.split(" ").includes("btn") // Limit to buttons with `btn` within their `className`.
  );
});

Next, record the button's attributes and their corresponding values to an object named 

, which we declare in the outer scope of the script:

// ...

const propsAndValues: Record<string, string[]> = {};

// ...

node.attributes.forEach((attribute) => {
  if (
    attribute.type === "JSXAttribute" &&
    attribute.name.type === "JSXIdentifier"
  ) {
    const propName = attribute.name.name;

    let value;
    if (attribute.value?.type === "StringLiteral") {
      value = attribute.value?.value;
    } else {
      value = attribute.value?.type;
    }

    if (!value) return;

    if (propsAndValues[propName]) {
      propsAndValues[propName].push(value);
    } else {
      propsAndValues[propName] = [value];
    }
  }
});

Once the audit finishes, we can log our findings.

console.log(`Audit for <button /> Element:`);

for (let propName in propsAndValues) {
  console.group();
  console.log(`${propName} (Total - ${propsAndValues[propName].length}):`);
  console.group();

  for (let value in propsAndValues[propName].sort()) {
    console.log(propsAndValues[propName][value]);
  }

  console.groupEnd();
  console.groupEnd();
}

import { parse } from "@babel/parser";
import traverse from "@babel/traverse";
import * as fs from "fs";
import * as glob from "glob";

const files = glob.sync("./src/components/**/*.tsx");

const propsAndValues: Record<string, string[]> = {};

files.forEach((file) => {
  const contents = fs.readFileSync(file).toString();

  const ast = parse(contents, {
    sourceType: "module",
    plugins: ["typescript", "jsx"],
  });

  traverse(ast, {
    JSXOpeningElement({ node }) {
      if (node.name.type === "JSXIdentifier" && node.name.name === "button") {
        const hasButtonClassName = node.attributes.find((attribute) => {
          return (
            attribute.type === "JSXAttribute" &&
            attribute.name.type === "JSXIdentifier" &&
            attribute.name.name === "className" &&
            attribute.value?.type === "StringLiteral" &&
            attribute.value?.value?.split(" ").includes("btn")
          );
        });

        if (!hasButtonClassName) return;

        node.attributes.forEach((attribute) => {
          if (
            attribute.type === "JSXAttribute" &&
            attribute.name.type === "JSXIdentifier"
          ) {
            const propName = attribute.name.name;

            let value;
            if (attribute.value?.type === "StringLiteral") {
              value = attribute.value?.value;
            } else {
              value = attribute.value?.type;
            }

            if (!value) return;

            if (propsAndValues[propName]) {
              propsAndValues[propName].push(value);
            } else {
              propsAndValues[propName] = [value];
            }
          }
        });
      }
    },
  });
});

console.log(`Audit for <button /> Element:`);

for (let propName in propsAndValues) {
  console.group();
  console.log(`${propName} (Total - ${propsAndValues[propName].length}):`);
  console.group();

  for (let value in propsAndValues[propName].sort()) {
    console.log(propsAndValues[propName][value]);
  }

  console.groupEnd();
  console.groupEnd();
}

If you re-run the audit, then you will see that there are four buttons with the CSS class 

 CSS class, we may consider refactoring these buttons into a 

 component that centralizes these CSS classes in one file. If we ever decide to rename these CSS classes during a redesign, then we would only need to make the changes within this file only.

For larger codebases, this approach allows you to quickly audit your code, saving you lots of development time that can be allocated towards other important tasks.

Best of all, you can export this report into a separate file to share these results with other team members. 

Try auditing your own React applications with abstract syntax trees. 

You can also check out our new course,  

The newline Guide to Practical Abstract Syntax Trees

, for more practical techniques you need to maintain any size codebase. 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Auditing a React Application with Abstract Syntax Trees

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript