-
Notifications
You must be signed in to change notification settings - Fork 0
Codemod API
ABCrimson edited this page Mar 7, 2026
·
2 revisions
Complete API for @crimson_dev/command-codemod — automated migration from cmdk to @crimson_dev/command.
pnpm add -D @crimson_dev/command-codemod
Or run directly:
npx @crimson_dev/command-codemod --help
command-codemod [options] [files...]
| Flag | Description | Default |
|---|---|---|
--transform, -t |
Transform(s) to apply (comma-separated or all) |
all |
--dry-run |
Preview changes without writing | false |
--extensions |
File extensions to process | tsx,ts,jsx,js |
--ignore |
Glob patterns to ignore | node_modules,dist,.next |
# Run all transforms on src/ directory command-codemod src/ # Dry run to preview changes command-codemod --dry-run src/ # Run specific transforms command-codemod -t import-rewrite,data-attrs src/ # Process specific files command-codemod src/components/CommandPalette.tsx
Rewrites cmdk imports to @crimson_dev/command-react.
Before:
import { Command } from 'cmdk'; import type { CommandProps } from 'cmdk'; const Cmd = await import('cmdk');
After:
import { Command } from '@crimson_dev/command-react'; import type { CommandProps } from '@crimson_dev/command-react'; const Cmd = await import('@crimson_dev/command-react');
Handles:
- Named imports and re-exports
- Dynamic
import()expressions -
require()calls - Type-only imports
- Namespace imports (
import * as cmdk from 'cmdk')
Rewrites [cmdk-*] data attributes to [data-command-*].
Before:
<div cmdk-root=""> <div cmdk-item="" cmdk-item-active="">
[cmdk-root] { background: black; } [cmdk-item][cmdk-item-active] { color: white; }
After:
<div data-command-root=""> <div data-command-item="" data-command-item-active="">
[data-command-root] { background: black; } [data-command-item][data-command-item-active] { color: white; }
Handles:
- JSX attributes
- CSS selectors in
.css,.scss,.module.cssfiles - CSS-in-JS template literals (styled-components, emotion)
-
querySelector/querySelectorAllstring arguments
Removes React.forwardRef() wrappers and merges ref into the props parameter. React 19 accepts ref as a regular prop.
Before:
const MyCommand = React.forwardRef<HTMLDivElement, Props>((props, ref) => { return <Command ref={ref} {...props} />; });
After:
const MyCommand = ({ ref, ...props }: Props & { ref?: React.Ref<HTMLDivElement> }) => { return <Command ref={ref} {...props} />; };
Renames the shouldFilter prop to filter.
Before:
<Command shouldFilter={false}>
After:
<Command filter={false}>
Use transforms programmatically with jscodeshift:
import { applyTransform } from 'jscodeshift/core'; import importRewrite from '@crimson_dev/command-codemod/transforms/import-rewrite'; const result = applyTransform( importRewrite, {}, { source: fileContents, path: filePath }, );
After running codemods, verify manually:
-
Custom CSS -- Check any hand-written selectors targeting
[cmdk-*] - Tests -- Update test selectors and assertions
- Snapshots -- Regenerate snapshot tests
- Type imports -- Verify type names haven't changed in your usage
- Runtime -- Test the app end-to-end