react-native-optimizer
Version:
๐ Zero-config React Native & Node.js optimizer. Find unused imports, dead code, analyze bundle size. Works with Expo, Metro, TypeScript. Fast AST parsing, HTML reports, CI/CD ready. Boost performance instantly!
360 lines (270 loc) โข 11 kB
Markdown
# ๐ค Contributing to React Native Optimizer
Thank you for your interest in contributing to React Native Optimizer! We welcome contributions from developers of all skill levels and backgrounds.
<div align="center">
[](https://github.com/junaidsaleemtkxel/react-native-optimizer/graphs/contributors)
[](https://github.com/junaidsaleemtkxel/react-native-optimizer/issues)
[](https://github.com/junaidsaleemtkxel/react-native-optimizer/pulls)
</div>
---
## ๐ Quick Start for Contributors
### Prerequisites
Before you begin, ensure you have:
- **Node.js 16+** (we recommend Node.js 18 LTS)
- **npm** or **yarn** package manager
- **Git** for version control
- **TypeScript** knowledge (intermediate level)
- Basic understanding of **AST parsing** and **CLI development**
### Development Setup
1. **Fork the Repository**
```bash
# Fork on GitHub, then clone your fork
git clone https://github.com/YOUR_USERNAME/react-native-optimizer.git
cd react-native-optimizer
```
2. **Install Dependencies**
```bash
npm install
```
3. **Build the Project**
```bash
npm run build
```
4. **Run Tests**
```bash
npm test
```
5. **Test CLI Locally**
```bash
# Test on a sample project
npx rnopt analyze ./test-project
# Or create a test project
mkdir test-project && cd test-project
npm init -y && npm install react-native
cd .. && npx rnopt analyze ./test-project
```
---
## ๐๏ธ Project Architecture
### Directory Structure
```
react-native-optimizer/
โโโ src/ # Source code
โ โโโ cli.ts # CLI entry point & argument parsing
โ โโโ index.ts # Main API exports & project orchestration
โ โโโ analyze.ts # Core analysis coordinator
โ โโโ packageAnalyzer.ts # Package dependency analysis
โ โโโ purePackageAnalyzer.ts # Pure AST-based package analysis
โ โโโ unusedImports.ts # Unused import detection
โ โโโ unusedFiles.ts # Unused file detection
โ โโโ buildAnalyzer.ts # Bundle size analysis
โ โโโ htmlReport.ts # Interactive report generation
โ โโโ utils/ # Shared utilities
โ โโโ logger.ts # Logging system
โ โโโ performance.ts # Performance monitoring
โ โโโ config.ts # Configuration management
โ โโโ validation.ts # Input validation
โ โโโ errors.ts # Error handling
โโโ dist/ # Built output (generated)
โโโ unit/ # Test suite
โโโ docs/ # Documentation
โโโ scripts/ # Build & development scripts
```
### Key Components
#### ๐ **Analysis Engine** (`src/purePackageAnalyzer.ts`)
- **Pure Babel AST parsing** - No external dependencies like Knip
- **Framework-aware detection** - Handles React Native, Node.js, databases
- **Safety rules** - Prevents false positives on critical packages
- **Config file analysis** - Scans babel.config.js, package.json scripts, etc.
#### ๐ฏ **CLI Interface** (`src/cli.ts`)
- **Commander.js** for argument parsing
- **Real-time progress tracking** with modular updates
- **Colored output** with chalk for better UX
- **Error handling** and user-friendly messages
#### ๐ **Report Generation** (`src/htmlReport.ts`)
- **Interactive visualizations** with charts and metrics
- **Responsive design** for desktop and mobile viewing
- **Actionable insights** with copy-pastable fix commands
- **JSON export** for automation and CI/CD integration
---
## ๐ฏ How to Contribute
### Types of Contributions We Welcome
1. **๐ Bug Fixes**
- Fix false positives in unused code detection
- Improve accuracy for specific frameworks
- Handle edge cases in AST parsing
2. **โจ New Features**
- Add support for new frameworks (Vue, Svelte, etc.)
- Enhance reporting with new visualizations
- Add configuration options for better customization
3. **๐ Documentation**
- Improve README with clearer examples
- Add JSDoc comments to complex functions
- Create guides for specific use cases
4. **๐งช Testing**
- Add test coverage for edge cases
- Create integration tests for real projects
- Performance benchmarking
### Contribution Workflow
#### 1. **Choose an Issue**
- Browse [open issues](https://github.com/junaidsaleemtkxel/react-native-optimizer/issues)
- Look for `good first issue` or `help wanted` labels
- Comment on the issue to claim it
#### 2. **Create a Branch**
```bash
git checkout -b feature/your-feature-name
# or
git checkout -b fix/issue-number-description
```
#### 3. **Make Your Changes**
- Write clean, documented code
- Follow existing code style and patterns
- Add tests for new functionality
#### 4. **Test Thoroughly**
```bash
# Run all tests
npm test
# Test on real projects
npm run build
npx rnopt analyze ./real-project
# Check TypeScript compilation
npm run lint
```
#### 5. **Commit and Push**
```bash
git add .
git commit -m "feat: add framework detection for Vue.js projects"
git push origin feature/your-feature-name
```
#### 6. **Create Pull Request**
- Use our PR template
- Link related issues
- Provide clear description of changes
---
## ๐ Development Guidelines
### Code Style
We follow strict TypeScript and formatting standards:
```typescript
// โ
Good: Clear, typed function with JSDoc
/**
* Analyzes package usage in a project directory
* @param projectPath - Absolute path to project root
* @param packages - Package.json dependencies object
* @returns Promise resolving to usage analysis results
*/
export async function analyzePackageUsage(
projectPath: string,
packages: Record<string, string>
): Promise<PackageUsageResult> {
// Implementation here
}
// โ Bad: Unclear naming, missing types
async function analyze(path: any, pkgs: any): Promise<any> {
// Implementation here
}
```
### Commit Message Format
```
type(scope): description
feat(analyzer): add Vue.js project detection
fix(cli): resolve progress bar overlapping issue
docs(readme): update installation instructions
test(integration): add comprehensive package analysis tests
```
### Testing Standards
All new features must include comprehensive tests:
```typescript
describe('PurePackageAnalyzer', () => {
describe('analyzePackageUsage', () => {
it('should detect unused packages correctly', async () => {
const testProject = createTestProject({
dependencies: { 'lodash': '^4.0.0', 'unused-package': '^1.0.0' },
sourceFiles: { 'index.js': "import _ from 'lodash'; console.log(_);" }
});
const result = await analyzer.analyzePackageUsage(testProject.path, testProject.dependencies);
expect(result.unused).toContain('unused-package');
expect(result.used).toContain('lodash');
});
});
});
```
---
## ๐งช Testing Strategy
### Running Tests
```bash
npm test # Run all tests
npm run test:watch # Watch mode for development
npm run test:coverage # Generate coverage report
npm run test:integration # Test with real projects
npm run test:performance # Benchmark analysis speed
```
### Test Categories
1. **Unit Tests** - Individual function testing
2. **Integration Tests** - Full CLI workflow testing
3. **Performance Tests** - Speed and memory benchmarks
4. **Edge Case Tests** - Complex project scenarios
---
## ๐ Bug Reporting & Feature Requests
### Bug Report Template
When reporting bugs, please include:
- **Description**: Clear explanation of the issue
- **Reproduction Steps**: Exact commands and setup
- **Expected vs Actual Behavior**: What should happen vs what happens
- **Environment**: OS, Node.js version, project type
- **Sample Files**: Relevant package.json or source code snippets
### Feature Request Guidelines
- **Problem Statement**: What need does this address?
- **Proposed Solution**: How should it work?
- **Use Cases**: Real-world scenarios where this helps
- **Implementation Ideas**: Technical approach (optional)
---
## ๏ฟฝ Pull Request Guidelines
### Before Submitting
- [ ] Tests pass (`npm test`)
- [ ] Code follows style guidelines
- [ ] Documentation updated (if needed)
- [ ] Breaking changes documented
- [ ] Commit messages follow convention
### PR Review Process
1. **Automated Checks**: CI runs tests and linting
2. **Code Review**: Maintainer reviews architecture and quality
3. **Testing**: Manual verification on various projects
4. **Approval**: Merge after all checks pass
---
## ๐ Recognition & Community
### Contributor Levels
- **๐ฑ First-time**: Welcome package and mentorship
- **๐ Regular**: Featured in release notes
- **โญ Core**: Planning discussions access
- **๐ ๏ธ Maintainer**: Full repository access
### Getting Help
- **๐ฌ Discussions**: [GitHub Discussions](https://github.com/junaidsaleemtkxel/react-native-optimizer/discussions)
- **๐ Issues**: [Report bugs](https://github.com/junaidsaleemtkxel/react-native-optimizer/issues)
- **๐ง Email**: [contribute@react-native-optimizer.com](mailto:contribute@react-native-optimizer.com)
---
## ๐ Code of Conduct
We are committed to fostering an inclusive community. All contributors must:
- **Be Respectful**: Treat everyone with kindness and professionalism
- **Be Inclusive**: Welcome contributors from all backgrounds
- **Be Constructive**: Provide helpful feedback and criticism
- **Be Patient**: Remember everyone was a beginner once
---
## ๐ Thank You
Every contribution makes React Native Optimizer better for everyone. Thank you for helping us build amazing developer tools!
<div align="center">
**Ready to contribute?** [Browse open issues](https://github.com/junaidsaleemtkxel/react-native-optimizer/issues) or [start a discussion](https://github.com/junaidsaleemtkxel/react-native-optimizer/discussions)!
</div>
- Package version
- Sample project structure that reproduces the issue
- Expected vs actual behavior
## โจ Feature Requests
We welcome feature requests! Please:
- Check existing issues first
- Provide clear use cases
- Consider backward compatibility
## ๐ Pull Request Process
1. Create a feature branch from main
2. Make your changes with tests
3. Update documentation if needed
4. Ensure all tests pass
5. Submit PR with clear description
## ๐ License
By contributing, you agree that your contributions will be licensed under the MIT License.