move-prop-types

A modern, TypeScript-based CLI tool that automatically refactors your React codebase to use the standalone prop-types package instead of the deprecated React.PropTypes. Supports JavaScript, JSX, TypeScript, and TSX files with robust transformation capabilities.

🚀 Why move-prop-types?

When React v15.5 was released in 2017, PropTypes was deprecated from the core React package and moved to a separate prop-types package. Many legacy React projects still use the old React.PropTypes syntax, which is no longer supported in modern React versions.

This CLI tool automates the migration process by:

✅ Detecting legacy PropTypes usage - Scans for React.PropTypes patterns
✅ Removing PropTypes from React imports - Cleans up import { PropTypes } from React
✅ Adding standalone prop-types import - Adds import PropTypes from 'prop-types'
✅ Replacing usage patterns - Changes React.PropTypes.string to PropTypes.string
✅ Handling complex nested patterns - Supports complex PropTypes like PropTypes.arrayOf(PropTypes.shape(...))
✅ Processing entire codebases - Recursively processes directories and subdirectories
✅ Installing dependencies - Optionally installs the prop-types package automatically
✅ TypeScript & JSX Support - Works with .js, .jsx, .ts, and .tsx files
✅ Advanced Pattern Recognition - Handles complex import patterns and edge cases

📦 Installation

Global Installation (Recommended)

npm install -g move-prop-types
# or with pnpm
pnpm add -g move-prop-types
# or with yarn
yarn global add move-prop-types

Local Installation

npm install --save-dev move-prop-types
# or with pnpm
pnpm add --save-dev move-prop-types
# or with yarn
yarn add --dev move-prop-types

🛠️ Usage

Usage: move-prop-types|mpt [options] [file|folder]

Options:
  -V, --version          output the version number
  -I, --install          install prop-types package and continue with transformation
  -P, --path <path>      transform a specific file
  -F, --folder <folder>  transform all .js/.jsx/.ts/.tsx files in a folder (recursive)
  -h, --help             display help for command

📖 Examples

Transform a Single File

# Transform JavaScript/JSX files
mpt -P src/components/UserProfile.jsx
mpt -P src/utils/validators.js

# Transform TypeScript/TSX files
mpt -P src/components/UserProfile.tsx
mpt -P src/types/PropTypes.ts

# Transform with automatic prop-types installation
mpt -I -P src/components/UserProfile.tsx

# Transform a file with relative path
mpt -P ./components/Header.ts

# Transform multiple files (run command for each)
mpt -P src/components/Button.jsx
mpt -P src/components/Modal.tsx
mpt -P src/utils/validators.ts

Transform an Entire Directory

# Transform all .js/.jsx/.ts/.tsx files in src directory recursively
mpt -F src

# Transform entire project with prop-types installation
mpt -I -F .

# Transform specific subdirectories
mpt -F src/components
mpt -F src/pages
mpt -F src/utils

# Large TypeScript project with automatic dependency installation
mpt -I -F src

Real-World Migration Scenarios

Legacy React Project

# 1. Install move-prop-types globally
npm install -g move-prop-types

# 2. Navigate to your React project
cd my-react-project

# 3. Install prop-types and transform entire codebase
mpt -I -F src

# 4. Verify changes and test your application
npm test

Migrating Specific Components

# Transform only component files
mpt -F src/components

# Transform only utility files that use PropTypes
mpt -P src/utils/propTypeValidators.js
mpt -P src/hoc/withPropTypes.js

Before and After Examples

Simple Component Migration

Before transformation:

import React, { Component, PropTypes } from 'react';

class UserProfile extends Component {
  render() {
    const { name, email, age, isActive } = this.props;
    return (
      <div className="user-profile">
        <h2>{name}</h2>
        <p>Email: {email}</p>
        <p>Age: {age}</p>
        {isActive && <span className="active">Active User</span>}
      </div>
    );
  }
}

UserProfile.propTypes = {
  name: React.PropTypes.string.isRequired,
  email: React.PropTypes.string.isRequired,
  age: React.PropTypes.number,
  isActive: React.PropTypes.bool
};

UserProfile.defaultProps = {
  age: 0,
  isActive: false
};

export default UserProfile;

After transformation:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class UserProfile extends Component {
  render() {
    const { name, email, age, isActive } = this.props;
    return (
      <div className="user-profile">
        <h2>{name}</h2>
        <p>Email: {email}</p>
        <p>Age: {age}</p>
        {isActive && <span className="active">Active User</span>}
      </div>
    );
  }
}

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  age: PropTypes.number,
  isActive: PropTypes.bool
};

UserProfile.defaultProps = {
  age: 0,
  isActive: false
};

export default UserProfile;

Complex PropTypes Migration

Before transformation:

import React, { PropTypes } from 'react';

const DataTable = ({ data, columns, onRowClick, pagination, loading }) => {
  // Component implementation
  return <div>DataTable Component</div>;
};

DataTable.propTypes = {
  data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
  columns: React.PropTypes.arrayOf(React.PropTypes.shape({
    key: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    render: React.PropTypes.func,
    sortable: React.PropTypes.bool
  })).isRequired,
  onRowClick: React.PropTypes.func,
  pagination: React.PropTypes.oneOfType([
    React.PropTypes.bool,
    React.PropTypes.shape({
      page: React.PropTypes.number,
      pageSize: React.PropTypes.number,
      total: React.PropTypes.number
    })
  ]),
  loading: React.PropTypes.bool
};

export default DataTable;

After transformation:

import React from 'react';
import PropTypes from 'prop-types';

const DataTable = ({ data, columns, onRowClick, pagination, loading }) => {
  // Component implementation
  return <div>DataTable Component</div>;
};

DataTable.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object).isRequired,
  columns: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    render: PropTypes.func,
    sortable: PropTypes.bool
  })).isRequired,
  onRowClick: PropTypes.func,
  pagination: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.shape({
      page: PropTypes.number,
      pageSize: PropTypes.number,
      total: PropTypes.number
    })
  ]),
  loading: PropTypes.bool
};

export default DataTable;

Functional Component Migration

Before transformation:

import React, { PropTypes } from 'react';

function Button({ label, onClick, disabled, variant, size }) {
  return (
    <button 
      onClick={onClick} 
      disabled={disabled}
      className={`btn btn-${variant} btn-${size}`}
    >
      {label}
    </button>
  );
}

Button.propTypes = {
  label: React.PropTypes.string.isRequired,
  onClick: React.PropTypes.func.isRequired,
  disabled: React.PropTypes.bool,
  variant: React.PropTypes.oneOf(['primary', 'secondary', 'danger']),
  size: React.PropTypes.oneOf(['small', 'medium', 'large'])
};

Button.defaultProps = {
  disabled: false,
  variant: 'primary',
  size: 'medium'
};

export default Button;

After transformation:

import React from 'react';
import PropTypes from 'prop-types';

function Button({ label, onClick, disabled, variant, size }) {
  return (
    <button 
      onClick={onClick} 
      disabled={disabled}
      className={`btn btn-${variant} btn-${size}`}
    >
      {label}
    </button>
  );
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
  size: PropTypes.oneOf(['small', 'medium', 'large'])
};

Button.defaultProps = {
  disabled: false,
  variant: 'primary',
  size: 'medium'
};

export default Button;

TypeScript Component Migration

Before transformation:

import React, { FC, PropTypes } from 'react';

interface MyComponentProps {
  title: string;
  count?: number;
  onClick: (id: number) => void;
}

const MyComponent: FC<MyComponentProps> = ({ title, count = 0, onClick }) => {
  return (
    <div>
      <h2>{title}</h2>
      <p>Count: {count}</p>
      <button onClick={() => onClick(count)}>Click me</button>
    </div>
  );
};

MyComponent.propTypes = {
  title: React.PropTypes.string.isRequired,
  count: React.PropTypes.number,
  onClick: React.PropTypes.func.isRequired
};

export default MyComponent;

After transformation:

import React, { FC } from 'react';
import PropTypes from 'prop-types';

interface MyComponentProps {
  title: string;
  count?: number;
  onClick: (id: number) => void;
}

const MyComponent: FC<MyComponentProps> = ({ title, count = 0, onClick }) => {
  return (
    <div>
      <h2>{title}</h2>
      <p>Count: {count}</p>
      <button onClick={() => onClick(count)}>Click me</button>
    </div>
  );
};

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
  count: PropTypes.number,
  onClick: PropTypes.func.isRequired
};

export default MyComponent;

🏗️ Features

TypeScript Support: Built with TypeScript for better reliability and type safety
Modern Tooling: Uses latest ESLint, Prettier, and build tools
Comprehensive Testing: Full test suite with unit and integration tests
Recursive Processing: Handles entire directory structures
Smart Detection: Only processes files that actually use PropTypes
Safe Transformations: Preserves existing prop-types imports
Multiple Import Patterns: Handles various React import styles
TypeScript Compatibility: Preserves TypeScript syntax, interfaces, and type annotations
Advanced Pattern Detection: Handles complex PropTypes patterns including middle-position imports

🧪 Development

Prerequisites

Node.js 18+
pnpm (recommended) or npm

Setup

# Clone the repository
git clone https://github.com/vish288/move-prop-types.git
cd move-prop-types

# Install dependencies
pnpm install

# Build the project
pnpm run build

# Run tests
pnpm test

# Run linting
pnpm run lint

Project Structure

src/
├── core.ts           # CLI command setup and argument parsing
├── helper.ts         # Core transformation logic with TypeScript support
├── ast-helper.ts     # Advanced AST-based transformation (experimental)
├── ast-transformer.ts # AST parsing and transformation utilities
├── constants.ts      # Regular expressions and transformation patterns
├── types.ts          # TypeScript type definitions
└── updateFile.ts     # Build utility for adding shebang

test/
├── unit/            # Unit tests for individual modules
│   ├── helper.test.ts
│   ├── ast-transformer.test.ts
│   ├── constants.test.ts
│   └── core.test.ts
├── integration/     # Integration tests for real-world scenarios
└── fixtures/        # Test files for various transformation scenarios

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📦 Release Status & NPM Publishing

Current Releases

✅ v1.0.0 - Stable release with full TypeScript support
✅ v0.20.1-beta.1 - Beta release with TypeScript support
🔄 NPM Publishing - Automatic publishing configured

Missing NPM Versions

The following GitHub releases are ready but not yet published to npm:

v0.20.1-beta.1 (TypeScript support beta)
v1.0.0 (stable release with TypeScript support)

These will be automatically published once the repository maintainer configures the NPM_TOKEN secret.

Automatic Publishing System

This repository includes an automated system to:

✅ Detect missing versions between GitHub releases and npm
✅ Publish automatically when NPM_TOKEN is configured
✅ Daily checks for any missing versions
✅ Manual triggers available via GitHub Actions

For maintainers: See docs/NPM_PUBLISHING.md for setup instructions.

📋 Requirements

Node.js: Version 18 or higher
File Types: Supports .js, .jsx, .ts, and .tsx files
React Versions: Compatible with all React versions that used React.PropTypes

🐛 Issues

If you encounter any issues or have feature requests, please open an issue on GitHub.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

React team for the smooth transition process
The community for feedback and contributions
All users who have helped improve this tool

Name		Name	Last commit message	Last commit date
Latest commit History 127 Commits
.github		.github
docs		docs
scripts		scripts
src		src
test		test
.babelrc.json		.babelrc.json
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc.json		.prettierrc.json
.releaserc.json		.releaserc.json
.tool-versions		.tool-versions
.travis.yml		.travis.yml
.versionrc.json		.versionrc.json
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
ISSUE_TEMPLATE.md		ISSUE_TEMPLATE.md
LEARNINGS.md		LEARNINGS.md
LICENSE		LICENSE
PR_DESCRIPTION.md		PR_DESCRIPTION.md
SECURITY.md		SECURITY.md
eslint.config.js		eslint.config.js
index.js		index.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
readme.md		readme.md
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
vitest.config.js		vitest.config.js

Folders and files

Latest commit

History

Repository files navigation

move-prop-types

🚀 Why move-prop-types?

📦 Installation

Global Installation (Recommended)

Local Installation

🛠️ Usage

📖 Examples

Transform a Single File

Transform an Entire Directory

Real-World Migration Scenarios

Legacy React Project

Migrating Specific Components

Before and After Examples

Simple Component Migration

Complex PropTypes Migration

Functional Component Migration

TypeScript Component Migration

🏗️ Features

🧪 Development

Prerequisites

Setup

Project Structure

🤝 Contributing

📦 Release Status & NPM Publishing

Current Releases

Missing NPM Versions

Automatic Publishing System

📋 Requirements

🐛 Issues

📄 License

🙏 Acknowledgments

About

Topics

Resources

License

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases 42

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages