@wigxel/react-tf-oxc

A CLI tool that transforms React codebase to the Wigxel coding standards, powered by oxc-parser (Rust-based).

Requires Node.js >= 22.

Features

• Arrow Function → Function Declaration: Automatically converts arrow function components to function declarations
• Inline Type Extraction: Extracts inline type literals to named type aliases (e.g., { name: string } → ComponentProps)
• Named Type Destructuring: Moves destructuring to function body for components with ≥3 props or default values
• Rest Element Handling: Renames ...props to ...restProps to avoid naming conflicts
• Gitignore-Aware Filtering: Respects .gitignore files when scanning for files
• Content-Hash Caching: Skips unchanged files for faster re-runs
• Parallel Processing: Uses worker threads for multi-core performance
• Debug Mode: Real-time logging with color-coded timing

Usage

# Basic usage (current directory)
oxc-nurm

# Scan specific directory
oxc-nurm ./src

# Scan multiple directories
oxc-nurm app components lib

# With debug logging
oxc-nurm ./src --debug

# Force reprocess (ignore cache)
oxc-nurm ./src --force

# Specify number of workers
oxc-nurm ./src --workers 8

Options

| Option | Alias | Description | Default | | ------------- | ----- | -------------------------------- | ------- | | --directory | - | Directories to scan (repeatable) | . | | --debug | -d | Enable debug logging | false | | --workers | -w | Number of worker threads | 4 | | --force | -f | Force reprocess (ignore cache) | false |

Transformations

Arrow Function with Inline Type

Before:

const Box = ({ boxes, count }: { boxes: number; count: string }) => {
  return (
    <div>
      {boxes} - {count}
    </div>
  );
};

After:

type BoxProps = {
  boxes: number;
  count: string;
};

function Box(props: BoxProps) {
  const { boxes, count } = props;

  return (
    <div>
      {boxes} - {count}
    </div>
  );
}

Function Declaration with Named Type (≥3 Props)

Before:

function Avatar({ size = 80, disabled, className, ...props }: AvatarProps) {
  return <div {...props} className={className} />;
}

After:

function Avatar(props: AvatarProps) {
  const { size = 80, disabled, className, ...restProps } = props;

  return <div {...restProps} className={className} />;
}

How It Works

1. Scanning: Recursively scans the target directory for .tsx files, respecting .gitignore rules
2. Caching: Checks content-hash cache to skip unchanged files
3. Parallel Processing: Distributes files across worker threads
4. AST Transformation: Uses oxc-parser to parse and transform the AST
5. Output: Writes transformed files back to disk

Cache

The tool uses content-hash caching stored in node_modules/.cache/react-component-transformer/transformer-cache.fsh at the project root. It automatically skips unchanged files between runs.

To force reprocessing of all files, use the --force flag.

Development

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build the CLI
pnpm build

# Run demo
pnpm demo

License

MIT