ReactStream

ReactStream is a comprehensive CLI toolkit designed to streamline React component development and debugging. It provides two main features:

1. Component Analysis: Analyze React components for common issues, best practices, and optimization opportunities.
2. Development Server: Quickly test and debug React components in isolation without needing to set up a full project.

ReactStream Installation Guide

Prerequisites

• Node.js >= 14.0.0
• npm or yarn

Option 1: Install from npm

The easiest way to install ReactStream is via npm:

# Install globally
npm install -g @reactstream/cli

# Or install in your project
npm install --save-dev @reactstream/cli

Option 2: Install from Source

If you want to install from source code:

1. Clone the repository:

   git clone https://github.com/reactstream/cli.git
   cd cli

2. Install dependencies:

   npm install

3. Link the package to make the commands available globally:

   npm link

Verifying Installation

To verify that ReactStream was installed correctly:

# Check the version
reactstream --version

# View help information
reactstream help

Setting Up File Permissions

If you're installing from source, you might need to make the scripts executable:

chmod +x bin/reactstream.js
chmod +x bin/reactstream-analyze.js

Troubleshooting

Common Issues

1. Command not found

   If you get a "command not found" error, make sure the npm bin directory is in your PATH:

   export PATH="$PATH:$(npm bin -g)"

2. Permission issues

   If you encounter permission issues when installing globally, you can:

   # Option 1: Use sudo (not recommended)
   sudo npm install -g @reactstream/cli
   
   # Option 2: Fix npm permissions (recommended)
   # See: https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

3. ESLint errors

   If you see ESLint errors, make sure you have a valid .eslintrc.js file in your project root.

Commands

ReactStream now provides a unified command interface with subcommands:

reactstream <command> [options] [arguments]

analyze

Analyze React components for issues and best practices.

reactstream analyze <component1.js> [component2.js...] [options]

Options:

• --fix: Attempt to automatically fix issues
• --debug: Show debug information
• --verbose: Show more detailed output

Examples:

reactstream analyze MyComponent.js
reactstream analyze src/components/*.js --fix

serve

Start a development server for testing React components.

reactstream serve <component1.js> [component2.js...] [options]

Options:

• --port=<port>: Specify the port to run the server on (default: 3000)

Examples:

reactstream serve MyComponent.js

npm run serve MyComponent.js

node src/reactstream.js serve MyComponent.js

reactstream serve src/components/Button.js src/components/Card.js --port=8080

Features

Analysis Features

• Syntax validation for React components
• ESLint integration for code quality
• Import analysis to detect unused imports
• Hook usage analysis to ensure proper usage of React hooks
• Performance analysis to detect potential bottlenecks
• Accessibility checks for common issues
• Automatic fixing of certain issues

Development Server Features

• Hot module replacement for instant feedback
• Isolation testing environment for components
• Built-in UI component library for testing
• Support for multiple components at once
• Custom port configuration

Detailed Features

1. Syntax and Structure Analysis

• Checking JSX syntax validity
• Analyzing imports and exports
• Detecting unused imports

2. Hook Analysis

• Checking hook rules
• Detecting potential dependency problems
• Optimization suggestions

3. Performance Analysis

• Detecting unnecessary re-renders
• Checking memoization optimizations
• Analyzing useCallback and useMemo usage

4. Debugging

• Automatically adding debug points
• Tracking state updates
• Monitoring side effects

5. Accessibility

• Checking ARIA attributes
• Verifying alt text for images
• Checking contrast and semantics

6. Optimizations

• Suggestions for using React.memo
• Hook optimization
• State refactoring

7. Component Comparison

• Similarity analysis
• Duplication detection
• Code sharing suggestions

Project Structure

reactstream/
├── index.js                  # Main CLI entry point
├── package.json              # Project dependencies and metadata
├── README.md                 # Project documentation
├── commands/                 # CLI command implementations
│   ├── analyze.js            # React component analysis command
│   └── serve.js              # Development server command
└── node_modules/             # Dependencies (generated by npm)

Usage Examples

Quick Start

# Analyze a component
reactstream analyze src/components/Button.jsx

# Start a development server
reactstream serve src/components/Button.jsx

Multiple Components

reactstream serve src/components/Button.jsx src/components/Card.jsx

Help Commands

reactstream help
reactstream analyze --help
reactstream serve --help

Combined Workflow

# First analyze
reactstream analyze MyComponent.js --debug

# Then start development server
reactstream serve MyComponent.js --port=3000 --debug

Requirements

• Node.js >= 14.0.0
• npm or yarn

Contributing

Please see CONTRIBUTING.md for detailed information on how to contribute to this project.

License