svger-cli 2.0.1 → 2.0.3

package/.svgerconfig.example.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://raw.githubusercontent.com/faezemohades/svger-cli/main/schemas/config.schema.json",
+  "source": "./src/assets/svg",
+  "output": "./src/components/icons",
+  "framework": "react",
+  "typescript": true,
+  "watch": false,
+  "parallel": true,
+  "batchSize": 10,
+  "defaultWidth": 24,
+  "defaultHeight": 24,
+  "defaultFill": "currentColor",
+  "exclude": [],
+  "styleRules": {
+    "fill": "inherit",
+    "stroke": "none"
+  },
+  "responsive": {
+    "enabled": false,
+    "breakpoints": ["sm", "md", "lg"],
+    "values": {
+      "width": ["20px", "24px", "32px"],
+      "height": ["20px", "24px", "32px"]
+    }
+  },
+  "theme": {
+    "mode": "light",
+    "variables": {
+      "primary": "#007bff",
+      "secondary": "#6c757d"
+    }
+  },
+  "performance": {
+    "optimization": "balanced",
+    "cache": true,
+    "memoryLimit": 512
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,64 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [2.0.3] - 2024-11-11
+
+### Added
+- Enhanced package.json with comprehensive metadata
+- Professional development tooling configuration
+- Extended TypeScript support and type definitions
+- Additional CLI aliases (`svger` shorthand)
+- Comprehensive export map for better module resolution
+- Development scripts for testing, linting, and formatting
+- Documentation generation scripts
+
+### Changed
+- Improved package description with full feature list
+- Enhanced keywords for better discoverability
+- Updated contributor information with roles
+- Expanded file inclusion patterns
+- More comprehensive engine requirements
+
+### Fixed
+- Package metadata completeness
+- Export definitions for better tree-shaking
+- Module resolution issues
+
+## [2.0.2] - 2024-11-01
+
+### Added
+- Multi-framework support (React, Vue, Angular, Svelte, Solid, Lit, Preact, Vanilla)
+- Auto-generated index.ts exports
+- Responsive design system
+- Theme support (light/dark/auto)
+- File locking mechanism
+- Performance optimization engine
+
+### Changed
+- Complete rewrite for enterprise-grade performance
+- Zero-dependency architecture
+- 85% performance improvement over SVGR
+- TypeScript-first approach
+
+### Removed
+- Legacy dependencies
+- Single-framework limitation
+
+## [1.x.x] - Legacy Versions
+
+Please see the [releases page](https://github.com/faezemohades/svger-cli/releases) for information about 1.x versions.
+
+---
+
+## Legend
+
+- **Added** for new features
+- **Changed** for changes in existing functionality
+- **Deprecated** for soon-to-be removed features
+- **Removed** for now removed features
+- **Fixed** for any bug fixes
+- **Security** for vulnerability fixes

package/DEVELOPMENT.md

@@ -0,0 +1,353 @@
+# Development Guide
+
+This guide will help you set up the development environment and contribute to SVGER-CLI.
+
+## Prerequisites
+
+- **Node.js**: >= 18.17.0 (we recommend using [nvm](https://github.com/nvm-sh/nvm))
+- **npm**: >= 9.0.0
+- **Git**: Latest version
+
+## Setup Development Environment
+
+1. **Clone the repository:**
+   ```bash
+   git clone https://github.com/faezemohades/svger-cli.git
+   cd svger-cli
+   ```
+
+2. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+3. **Build the project:**
+   ```bash
+   npm run build
+   ```
+
+4. **Run tests:**
+   ```bash
+   npm test
+   ```
+
+## Development Workflow
+
+### Building
+
+```bash
+# Build once
+npm run build
+
+# Build and watch for changes
+npm run build:watch
+```
+
+### Testing
+
+```bash
+# Run all tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run with coverage
+npm run test:coverage
+
+# Run integration tests only
+npm run test:integration
+```
+
+### Linting and Formatting
+
+```bash
+# Check for linting issues
+npm run lint
+
+# Fix linting issues
+npm run lint:fix
+
+# Check formatting
+npm run format:check
+
+# Fix formatting
+npm run format
+```
+
+### Development Mode
+
+To test the CLI during development:
+
+```bash
+# Run CLI directly from source
+npm run dev -- build ./test-icons ./test-output
+
+# Or install globally for testing
+npm run build
+npm link
+svger-cli --version
+```
+
+## Project Structure
+
+```
+svger-cli/
+├── src/                    # Source code
+│   ├── core/              # Core functionality
+│   ├── processors/        # SVG processing logic
+│   ├── services/          # Business logic services
+│   ├── templates/         # Framework templates
+│   ├── types/            # TypeScript definitions
+│   └── utils/            # Utility functions
+├── bin/                   # CLI entry point
+├── docs/                  # Documentation
+├── dist/                  # Compiled output (generated)
+└── tests/                # Test files
+```
+
+## Adding New Framework Support
+
+1. **Create framework template:**
+   ```typescript
+   // src/core/framework-templates.ts
+   export const newFrameworkTemplate = {
+     name: 'newframework',
+     extension: '.jsx',
+     generate: (svgContent: string, componentName: string, options: any) => {
+       // Implementation
+     }
+   };
+   ```
+
+2. **Add to framework list:**
+   ```typescript
+   // src/types/index.ts
+   export type FrameworkType = 'react' | 'vue' | 'angular' | 'newframework';
+   ```
+
+3. **Update CLI options:**
+   ```typescript
+   // src/cli.ts - Add to framework choices
+   ```
+
+4. **Add tests:**
+   ```typescript
+   // tests/frameworks/newframework.test.ts
+   ```
+
+## Testing Strategy
+
+### Unit Tests
+- Test individual functions and classes
+- Mock external dependencies
+- Focus on business logic
+
+### Integration Tests
+- Test CLI commands end-to-end
+- Test file generation with real SVG files
+- Verify output correctness
+
+### Performance Tests
+- Benchmark processing times
+- Memory usage testing
+- Regression detection
+
+## Code Style Guidelines
+
+### TypeScript
+- Use strict TypeScript configuration
+- Prefer interfaces over types for object shapes
+- Use generics for reusable code
+- Document complex types
+
+### Naming Conventions
+- **Files**: kebab-case (e.g., `svg-processor.ts`)
+- **Classes**: PascalCase (e.g., `SVGProcessor`)
+- **Functions/Variables**: camelCase (e.g., `processFile`)
+- **Constants**: SCREAMING_SNAKE_CASE (e.g., `DEFAULT_SIZE`)
+
+### Error Handling
+- Use custom error classes
+- Provide meaningful error messages
+- Include context in errors
+- Log appropriate levels
+
+## Performance Considerations
+
+### Optimization Guidelines
+- Use streaming for large files
+- Implement caching where appropriate
+- Parallelize CPU-intensive tasks
+- Monitor memory usage
+
+### Benchmarking
+```bash
+# Run performance benchmarks
+npm run benchmark
+
+# Compare with previous versions
+npm run benchmark -- --compare
+```
+
+## Contributing Guidelines
+
+### Before You Start
+1. Check existing issues and PRs
+2. Create an issue for new features
+3. Follow coding standards
+4. Write tests for new code
+
+### Pull Request Process
+1. **Create feature branch:**
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. **Make changes and test:**
+   ```bash
+   npm run validate  # runs typecheck, lint, and test
+   ```
+
+3. **Commit with conventional format:**
+   ```bash
+   git commit -m "feat: add support for new framework"
+   ```
+
+4. **Push and create PR:**
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+
+### Commit Message Format
+```
+<type>(<scope>): <description>
+
+[optional body]
+
+[optional footer]
+```
+
+**Types:**
+- `feat`: New feature
+- `fix`: Bug fix
+- `docs`: Documentation changes
+- `style`: Formatting changes
+- `refactor`: Code restructuring
+- `test`: Adding tests
+- `chore`: Maintenance tasks
+
+## Debugging
+
+### CLI Debugging
+```bash
+# Enable verbose logging
+DEBUG=svger:* npm run dev -- build ./icons ./components
+
+# Debug specific modules
+DEBUG=svger:processor npm run dev -- build ./icons ./components
+```
+
+### VS Code Configuration
+Create `.vscode/launch.json`:
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug CLI",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/src/cli.ts",
+      "args": ["build", "./test-icons", "./test-output"],
+      "runtimeArgs": ["--loader", "ts-node/esm"],
+      "console": "integratedTerminal"
+    }
+  ]
+}
+```
+
+## Release Process
+
+### Version Management
+```bash
+# Patch release (bug fixes)
+npm run release
+
+# Minor release (new features)
+npm run release:minor
+
+# Major release (breaking changes)
+npm run release:major
+```
+
+### Manual Release Steps
+1. Update CHANGELOG.md
+2. Run all tests and validation
+3. Build and test package
+4. Update version and tag
+5. Publish to npm
+6. Create GitHub release
+
+## Documentation
+
+### API Documentation
+```bash
+# Generate API docs
+npm run docs:generate
+```
+
+### Adding Documentation
+- Update README.md for user-facing changes
+- Add JSDoc comments for public APIs
+- Update CHANGELOG.md for releases
+- Create ADRs for architectural decisions
+
+## Troubleshooting
+
+### Common Issues
+
+**Build Errors:**
+```bash
+# Clean and rebuild
+npm run clean
+npm install
+npm run build
+```
+
+**Test Failures:**
+```bash
+# Update snapshots
+npm test -- --updateSnapshot
+
+# Run specific test
+npm test -- --testNamePattern="specific test"
+```
+
+**TypeScript Errors:**
+```bash
+# Check types without emitting
+npm run typecheck
+
+# Check specific file
+npx tsc --noEmit src/specific-file.ts
+```
+
+## Resources
+
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+- [Jest Testing Framework](https://jestjs.io/docs/getting-started)
+- [ESLint Rules](https://eslint.org/docs/rules/)
+- [Conventional Commits](https://www.conventionalcommits.org/)
+
+## Support
+
+If you need help with development:
+
+1. Check existing issues and documentation
+2. Ask in GitHub Discussions
+3. Contact maintainers: faezemohades@gmail.com
+
+---
+
+Happy coding! 🚀

package/README.md

@@ -9,13 +9,32 @@
 
 ## 🆕 **Latest Developer Experience Improvements**
 
-### **Auto-Generated index.ts Exports**
-Automatically generates clean index.ts files with all component exports for seamless importing:
+### **Auto-Generated index.ts Exports (Enhanced)**
+Automatically generates clean index.ts files with **unified export pattern** for maximum flexibility:
 ```typescript
 // Auto-generated in your output directory
-export { ArrowLeft } from './ArrowLeft';
-export { ArrowRight } from './ArrowRight';
-// ... all your components
+// Named exports for tree-shaking
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowRight } from './ArrowRight';
+
+// Grouped named exports
+export { ArrowLeft, ArrowRight };
+
+// Default export for convenience
+export default { ArrowLeft, ArrowRight };
+```
+
+**Import flexibility:**
+```typescript
+// Named imports (tree-shaking friendly)
+import { ArrowLeft, ArrowRight } from './components';
+
+// Namespace import
+import * as Icons from './components';
+
+// Default import
+import Icons from './components';
+const { ArrowLeft } = Icons;
 ```
 
 ### **Enhanced Props & Styling**

package/SECURITY.md

@@ -0,0 +1,69 @@
+# Security Policy
+
+## Supported Versions
+
+We actively support the following versions of SVGER-CLI with security updates:
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 2.0.x   | :white_check_mark: |
+| 1.x.x   | :x:                |
+
+## Reporting a Vulnerability
+
+We take the security of SVGER-CLI seriously. If you discover a security vulnerability, please follow these guidelines:
+
+### How to Report
+
+1. **DO NOT** create a public GitHub issue for security vulnerabilities
+2. Send an email to **faezemohades@gmail.com** with the subject line: `[SECURITY] SVGER-CLI Vulnerability Report`
+3. Include the following information:
+   - Description of the vulnerability
+   - Steps to reproduce the issue
+   - Potential impact
+   - Suggested fix (if any)
+   - Your contact information
+
+### What to Expect
+
+- **Acknowledgment**: We will acknowledge receipt of your report within 24 hours
+- **Assessment**: We will assess the vulnerability within 72 hours
+- **Updates**: We will provide regular updates on our progress
+- **Resolution**: Critical vulnerabilities will be patched within 7 days, others within 30 days
+
+### Security Best Practices for Users
+
+When using SVGER-CLI in your projects:
+
+1. **Keep Updated**: Always use the latest version
+2. **Validate Input**: Ensure SVG files come from trusted sources
+3. **Review Output**: Inspect generated components before deploying
+4. **File Permissions**: Use appropriate file permissions for generated components
+5. **CI/CD Security**: Secure your build pipelines that use SVGER-CLI
+
+### Security Features
+
+SVGER-CLI includes several security features:
+
+- **Zero Dependencies**: Eliminates third-party vulnerability vectors
+- **Input Validation**: Validates SVG content before processing
+- **Sandboxed Processing**: Processes files in isolated contexts
+- **Safe Output Generation**: Generates safe, sanitized component code
+- **File Locking**: Prevents unauthorized modification of protected files
+
+### Disclosure Policy
+
+- We believe in responsible disclosure
+- We will credit security researchers who report vulnerabilities responsibly
+- We may create a security advisory for significant vulnerabilities
+- We will notify users through our release notes and GitHub security advisories
+
+## Contact
+
+For any security-related questions or concerns:
+
+- **Primary Contact**: faezemohades@gmail.com
+- **Alternative Contact**: navidrezadoost07@gmail.com
+- **PGP Key**: Available upon request
+
+Thank you for helping keep SVGER-CLI secure!

package/dist/builder.js

@@ -1,8 +1,8 @@
-import path from "path";
-import { toPascalCase, FileSystem } from "./utils/native.js";
-import { isLocked } from "./lock.js";
-import { readConfig } from "./config.js";
-import { reactTemplate } from "./templates/ComponentTemplate.js";
+import path from 'path';
+import { toPascalCase, FileSystem } from './utils/native.js';
+import { isLocked } from './lock.js';
+import { readConfig } from './config.js';
+import { reactTemplate } from './templates/ComponentTemplate.js';
 /**
  * Converts all SVG files from a source directory into React components and writes them to an output directory.
  *
@@ -16,13 +16,13 @@ export async function buildAll(config) {
     const srcDir = path.resolve(config.src);
     const outDir = path.resolve(config.out);
     if (!(await FileSystem.exists(srcDir))) {
-        console.error("❌ Source folder not found:", srcDir);
+        console.error('❌ Source folder not found:', srcDir);
         process.exit(1);
     }
     await FileSystem.ensureDir(outDir);
-    const files = (await FileSystem.readDir(srcDir)).filter((f) => f.endsWith(".svg"));
+    const files = (await FileSystem.readDir(srcDir)).filter((f) => f.endsWith('.svg'));
     if (!files.length) {
-        console.log("⚠️  No SVG files found in", srcDir);
+        console.log('⚠️  No SVG files found in', srcDir);
         return;
     }
     for (const file of files) {
@@ -31,8 +31,8 @@ export async function buildAll(config) {
             console.log(`⚠️ Skipped locked file: ${file}`);
             continue;
         }
-        const svgContent = await FileSystem.readFile(svgPath, "utf-8");
-        const componentName = toPascalCase(file.replace(".svg", ""));
+        const svgContent = await FileSystem.readFile(svgPath, 'utf-8');
+        const componentName = toPascalCase(file.replace('.svg', ''));
         const componentCode = reactTemplate({
             componentName,
             svgContent,
@@ -41,10 +41,10 @@ export async function buildAll(config) {
             defaultFill: svgConfig.defaultFill,
         });
         const outFile = path.join(outDir, `${componentName}.tsx`);
-        await FileSystem.writeFile(outFile, componentCode, "utf-8");
+        await FileSystem.writeFile(outFile, componentCode, 'utf-8');
         console.log(`✅ Generated: ${componentName}.tsx`);
     }
-    console.log("🎉 All SVGs have been converted successfully!");
+    console.log('🎉 All SVGs have been converted successfully!');
 }
 /**
  * Generates a single React component from an SVG file.
@@ -62,11 +62,11 @@ export async function generateSVG({ svgFile, outDir, }) {
         return;
     }
     if (!(await FileSystem.exists(filePath))) {
-        console.error("❌ SVG file not found:", filePath);
+        console.error('❌ SVG file not found:', filePath);
         process.exit(1);
     }
-    const svgContent = await FileSystem.readFile(filePath, "utf-8");
-    const componentName = toPascalCase(path.basename(svgFile, ".svg"));
+    const svgContent = await FileSystem.readFile(filePath, 'utf-8');
+    const componentName = toPascalCase(path.basename(svgFile, '.svg'));
     const componentCode = reactTemplate({
         componentName,
         svgContent,
@@ -77,6 +77,6 @@ export async function generateSVG({ svgFile, outDir, }) {
     const outputFolder = path.resolve(outDir);
     await FileSystem.ensureDir(outputFolder);
     const outFile = path.join(outputFolder, `${componentName}.tsx`);
-    await FileSystem.writeFile(outFile, componentCode, "utf-8");
+    await FileSystem.writeFile(outFile, componentCode, 'utf-8');
     console.log(`✅ Generated: ${componentName}.tsx`);
 }

package/dist/clean.js

@@ -1,5 +1,5 @@
-import path from "path";
-import { FileSystem } from "./utils/native.js";
+import path from 'path';
+import { FileSystem } from './utils/native.js';
 /**
  * Cleans the specified output directory by removing all files and folders inside it.
  * Typically used to clear previously generated SVG React components before a new build.