convert-to-absolute-imports

README.md

Description

Convert Material UI icons to path imports. E.g.

-import DashboardTitle from "../../../components/Dashboard/DashboardTitle";
+import DashboardTitle from "components/Dashboard/DashboardTitle";

Reasoning:-

• Combined with jsconfig.json file reduces path complexity

Usage

git reset head --hard && jscodeshift -v 2 -t ./transform.js src

Refs

• https://create-react-app.dev/docs/importing-a-component/#absolute-imports
• https://hackernoon.com/react-pro-tip-use-absolute-imports-for-better-readability-and-easy-refactoring-2ad5c7f2f957
• https://ideas.hexbridge.com/root-imports-with-create-react-app-877641e7d117

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

transform.js

const path = require("path");

const SOURCE = "src";
const SOURCE_PATH = path.resolve(SOURCE) + "/";

const removeSourceDirName = (path) =>
  path.replace(new RegExp(`^${SOURCE}\/?`, "gi"), "");

const getAbsolutePath = (importPath, filePath) => {
  if (!importPath.startsWith(".")) {
    return importPath;
  }
  return path
    .resolve(path.dirname(filePath), importPath)
    .replace(SOURCE_PATH, "");
};

const replaceImportPath = (j, node, filePath) =>
  j.importDeclaration(
    node.value.specifiers,
    j.literal(getAbsolutePath(node.value.source.value, filePath))
  );

export default function (file, api) {
  const j = api.jscodeshift;
  const filePath = file.path;

  return j(file.source)
    .find(j.ImportDeclaration)
    .replaceWith((node) => replaceImportPath(j, node, filePath))
    .toSource();
}