Zephyr Codemod

The Zephyr Codemod automatically adds Zephyr integration to your existing projects. It detects your bundler and modifies your configuration to include the appropriate Zephyr plugin.

Quick Start

npm
yarn
pnpm
bun
npx with-zephyr

Options

# Preview changes without applying them
npx with-zephyr --dry-run

# Automatically install missing packages
npx with-zephyr --install

# Target specific directory
npx with-zephyr ./my-project

# Filter specific bundlers
npx with-zephyr --bundlers webpack vite

# Combined usage
npx with-zephyr --dry-run --install

What It Does

The codemod scans your project for bundler configuration files and automatically:

  1. Detects your bundler (Webpack, Vite, Rollup, etc.)
  2. Adds the correct Zephyr plugin import
  3. Updates your configuration to include Zephyr
  4. Shows you what changed

Supported Bundlers

  • Webpackzephyr-webpack-plugin
  • Rspackzephyr-rspack-plugin
  • Vitevite-plugin-zephyr
  • Rolluprollup-plugin-zephyr
  • Rolldownzephyr-rolldown-plugin
  • RSBuildzephyr-rsbuild-plugin
  • Modern.jszephyr-modernjs-plugin
  • RSPresszephyr-rspress-plugin
  • Parcelparcel-reporter-zephyr
  • Re.Packzephyr-repack-plugin

Examples

Webpack
Vite
Rollup

Before:

const { composePlugins, withNx } = require('@nx/webpack');

module.exports = composePlugins(withNx(), (config) => config);

After:

const { withZephyr } = require('zephyr-webpack-plugin');
const { composePlugins, withNx } = require('@nx/webpack');

module.exports = composePlugins(withNx(), withZephyr(), (config) => config);

Best Practices

  1. Commit your changes before running the codemod
  2. Use --dry-run to preview changes first
  3. Review the diff after running to ensure correctness
  4. Test your build to verify everything works
  5. Use --install to automatically add missing packages