#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

npx with-zephyr

yarn dlx with-zephyr

pnpx with-zephyr

bunx 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

For Metro, configuration and publication are separate. Supported React Native CLI projects receive Zephyr-wrapped bundle-mf-host and bundle-mf-remote commands in addition to withZephyr(). Supported RNEF projects receive the Zephyr RNEF plugin, which registers the same commands.

If the codemod cannot determine the project type or safely preserve a non-standard companion configuration, it does not guess. It reports the manual React Native CLI and RNEF completion options instead of claiming publication setup is complete. Review and run one of those publication paths explicitly. See Metro configuration and publication for the required setup and upload boundary.

#Supported Bundlers

• Webpack → zephyr-webpack-plugin
• Rspack → zephyr-rspack-plugin
• Vite → vite-plugin-zephyr
• Rollup → rollup-plugin-zephyr
• Rolldown → zephyr-rolldown-plugin
• RSBuild → zephyr-rsbuild-plugin
• Modern.js → zephyr-modernjs-plugin
• RSPress → zephyr-rspress-plugin
• Parcel → parcel-reporter-zephyr
• Re.Pack → zephyr-repack-plugin
• Metro → zephyr-metro-plugin

#Examples

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

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

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

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

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

import { withZephyr } from 'vite-plugin-zephyr';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react(), withZephyr()],
});

import resolve from '@rollup/plugin-node-resolve';

export default {
  plugins: [resolve()],
};

import { withZephyr } from 'rollup-plugin-zephyr';
import resolve from '@rollup/plugin-node-resolve';

export default withZephyr()({
  plugins: [resolve()],
});

#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