JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16
  • Score
    100M100P100Q78361F
  • License Apache-2.0

CLI tool for React component development and debugging

Package Exports

  • @reactstream/cli
  • @reactstream/cli/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@reactstream/cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

logo-reactstream2.svg

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.

Installation

# Install globally from npm
npm install -g reactstream
# Or install in your project
npm install --save-dev reactstream
# Or clone the repository
git clone https://github.com/reactstream/nodejs.git
cd reactstream
npm install
npm link # (to make commands available globally)

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
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