DOCSEARCHbyAlgolia
Submit Docs

Codemod Kit

website·Indexed 30 days ago

https://codemod-kit.netlify.app

A tool for performing automated code transformations via CLI or programmatic methods. It provides a set of transformers to modify import modules, change or remove component props, and modify function arguments.

Tokens
4.7K
Snippets
36
Records
46
Agent score
71%

What's inside Codemod Kit

  1. Introduction to Codemod Kit

    codemod-kit is a codemod library built on top of jscodeshift. It provides utilities to simplify the creation of codemods, specifically offering support for managing components and imports.

  2. Overview of Codemod Kit usage

    Codemod Kit allows developers to perform code transformations without requiring deep knowledge of Abstract Syntax Trees (AST) or the internal operations of transformation libraries like jscodeshift. It provides built-in transformer cases specifically for handling components and imports and can be executed via two different methods: programmatically or through a Command Line Interface (CLI).

  3. Report bugs or suggest features via GitHub Issues

    To report a bug, request documentation, or suggest a feature, use the project's issue templates. Fill in all required fields and submit the issue. Additionally, questions about features should be posted as issues to help the maintainers improve documentation and prevent future confusion.

  4. Change a named import specifier and its usages

    Use the change-named-specifier transformer to rename a specific named import (the specifier) and update all corresponding identifiers that use it throughout the file. Note that this transformer only converts global values; local variables that shadow the import name are not converted.

  5. Remove side-effect import modules using remove-import

    The remove-import transformer removes import statements that do not include specifiers (e.g., import "module";). It specifically does not remove imports that contain specifiers because removing those would require identifying and removing all associated identifiers throughout the codebase, which is not currently supported.
    // Before
import "utils";
import "lib";

// After
(empty)

  7. Run code transformations using codemod-kit CLI

    Execute the codemod-kit CLI using npx. The tool will prompt you for the following inputs in order:

    1. type: Select a transformer type from the provided list.
    2. path: Enter the file or directory paths to transform, separated by commas. Glob patterns are supported.
    3. parser: Select the appropriate parser for your code from the list.
    4. options: Provide a JSON object containing the configuration options specific to the selected transformer type.
    npx codemod-kit

  8. Choose between Programmatic or CLI execution for Codemod Kit

    Codemod Kit can be executed using two different methods: a programmatic approach (via code) or a CLI approach. Both methods produce identical results; the choice depends on the user's specific workflow requirements.

  10. Contribute to the codemod-kit project

    codemod-kit is a community-driven project. The general process for contributing involves three main steps: finding or creating an issue to work on, setting up a local development environment, and submitting a Pull Request (PR) to resolve the accepted issue.

  12. Example: Programmatically rename a specifier using add-props

    This example demonstrates how to use the add-props transformer programmatically to change an import specifier from sum to calculateSum for a specific file.
    import { transformMap } from "codemod-kit/programmatic"

transformMap['add-props']({
    toConvertPaths: "src/test.ts",
    customOptions: {
        source: "utils",
        sourceType: "absolute",
        fromSpecifier: "sum",
        toSpecifier: "calculateSum",
    },
    jscodeshiftOptions: {
        parser: "tsx"
    }
})