Skip to main content

The community-owned codemod registry.

Discover the power of codemods for your development workflow. Our tools and resources allow you to easily manage dependencies, automate refactoring, and transform your codebase.

With support for code migration and evolution, you can modernize your code and keep it up-to-date with the latest best practices.

Read the docs
🎁

Publish

Create, test and publish your own codemods for your users.

🌱

Up-skill

Up-skill your engineering team using our guides & resources.

⚡️

Go fast

Use our helpers & testing utilities to make writing codemods a breeze.

🔭

Registry

Explore an extensive list of codemods contributed by the community.

Bring users with you.

Don't let APIs of the past hold you back. Give users the tools they need to upgrade across major versions by creating version-targeted codemods.

import Button from '@my-lib/button';


const App = () => (
  <Button
    appearance="bold"
    handleClick=()
  >
    Submit
  </Button>
);
v1.0.0
-import Button from '@my-lib/button';
+import Button from '@foobar/button';


const App = () => (
  <Button
    appearance="bold"
-    handleClick=()
+    onClick=()
  >
    Submit
  </Button>
);
v2.0.0
import Button from '@foobar/button';

const App = () => (
  <Button
-   appearance="bold"
+   appearance="primary"
    onClick=()
  >
    Submit
  </Button>
);
v3.0.0

How it works.

  1. 1. Initialize your project

    Instantly create a brand new Hypermod package that can be run from anywhere.

    $ npx @hypermod/cli init foobar

  2. 2. Create a config

    Label and organise your codemods.

    • Transforms: codemods that modify package across multiple versions
    • Presets: Utility codemods that support the use of a package
    export.module = {
      transforms: {
        '12.0.0': require('./18.0.0/transform'),
        '13.0.0': require('./19.0.0/transform'),
      },
      presets: {
        'format-imports': require('./format-imports/transform')
      }
    };

  3. 3. Write your codemod

    Painlessly author your codemod using our delightful library of utilities and documentation.

    import {
      hasImportDeclaration,
      renameImportDeclaration,
    } from '@hypermod/utils';

    function transformer(file, { jscodeshift: j }) {
      const source = j(file.source);
      const oldImport = 'bar';
      const newImport = 'foobar';

      if (!hasImportDeclaration(j, source, oldImport)) {
        return file.source;
      }

      renameImportDeclaration(j, source, oldImport, newImport),

      return source.toSource();
    }

    export default transformer;

  4. 4. Publish

    With a single command, share your codemods with the world. No need to create a bespoke CLI client.

    $ npm publish

  5. 5. Run

    Give your consumers a single API to keep their code up to date with the latest and greatest.

    $ npx @hypermod/cli -p foobar@12.0.0 path/to/src

Help make the JS ecosystem a better place.

Hypermod exists to make dependency management feel less of a juggling act. But it's a team effort...