Typescript Codemod

A collection of mostly random codemods you (might) find helpful.

Installation

npm install -g @brightnightpower/ts-codemod

Usage

ts-codemod [options] <directory>

Arguments:
  directory            Source directory

Options:
  -V, --version        output the version number
  -c, --config <path>  Path to tsconfig.json (default: "tsconfig.json")
  -t, --type <type>    Type of codemod, default .js (default: ".js")
  -h, --help           display help for command

Codemods

Update imports to .js

Codmod to turn all Typescript imports to '.js', as customary for ECMA modules.

ts-codemod src/ -t convert-to-.js-imports

For example, will turn:

import myModule from "./myModule";
import { type Type, Class } from "./myMixedModule";
import myJson from "./myJson.json";

into

import myModule from "./myModule.js";
import { type Type, Class } from "./myMixedModule.js";
import myJson from "./myJson.json" with { type: 'json' };

Update Material UI Icon imports

ts-codemod src/ -t merge-mui-icons

For example, will turn:

import myIcon from "@mui/material-icons/Icon";

into

import { Icon as myIcon } from "@mui/material-icons";

Remove .js imports

ts-codemod src/ -t remove-.js-imports

For example, will turn:

import myModule from "./myModule.js";

into

import myModule from "./myModule";

Merge imports

ts-codemod src/ -t merge-duplicate-imports

Will turn

import myModule from "./myModule.js";
import { Project } from "ts-morph";
import { type Stuff } from "ts-morph";
import { type Type, Class } from "./myModule.js";
import * as yup from "yup";
import type { AnySchema } from "yup";

into

import myModule, { type Type, Class } from "./myModule.js";
import { Project, type Stuff } from "ts-morph";
import * as yup from "yup";
import { AnySchema } from "yup"; // note: import type was dropped
import { Data } from "plotly.js";

[!NOTE] As noted in the comment above, the 'Type' modifier in the import statement may be dropped. A linter like biome will add these back in.

Tanstack's React Query v4 to v5

ts-codemod src/ -t react-query-v5-migrate

Will turn

useQuery('todos', fetchTodos, { enabled: false });
useMutation(createTodo, { onSuccess });

into

useQuery({ queryKey: 'todos', queryFn: fetchTodos, enabled: false });
useMutation({ mutationFn: createTodo, onSuccess });

Contributing

All contributions welcome! Make sure to install precommit hooks for complete functionality:

pre-commit install --install-hooks
pre-commit install --hook-type commit-msg