svger-cli 3.0.0 โ 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +243 -0
- package/README.md +222 -30
- package/dist/__tests__/fixtures.d.ts +132 -0
- package/dist/__tests__/fixtures.js +228 -0
- package/dist/cli.js +1 -1
- package/dist/integrations/babel.js +30 -11
- package/dist/integrations/rollup.js +29 -10
- package/dist/integrations/vite.js +29 -14
- package/dist/integrations/webpack.d.ts +1 -0
- package/dist/integrations/webpack.js +29 -10
- package/dist/services/svg-service.d.ts +2 -0
- package/dist/services/svg-service.js +25 -9
- package/package.json +5 -2
- package/DEVELOPMENT.md +0 -353
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,249 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
|
|
6
6
|
adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [3.1.1] - 2025-12-25
|
|
9
|
+
|
|
10
|
+
### ๐ Bug Fixes
|
|
11
|
+
|
|
12
|
+
#### **Critical: Locked Files Missing from Index Exports**
|
|
13
|
+
- **Fixed**: Locked SVG files are now correctly included in auto-generated `index.ts` exports
|
|
14
|
+
- **Issue**: When SVG files were locked using `svger-cli lock`, their generated components were excluded from the `index.ts` barrel file, breaking imports and requiring manual maintenance
|
|
15
|
+
- **Root Cause**: Index generation logic only included files processed in the current build session, excluding locked files that were intentionally skipped
|
|
16
|
+
- **Solution**: Modified index generation to scan output directory for ALL existing component files instead of relying on processed files list
|
|
17
|
+
|
|
18
|
+
#### **Files Changed**
|
|
19
|
+
- **Core Service** (`src/services/svg-service.ts`):
|
|
20
|
+
- Updated `generateIndexFile()` to scan output directory for all component files (`.tsx`, `.jsx`, `.ts`, `.js`)
|
|
21
|
+
- Now includes both newly generated and previously locked components in exports
|
|
22
|
+
- Fixed incorrect property access `output?.naming` โ `outputConfig?.naming`
|
|
23
|
+
|
|
24
|
+
- **Integration Plugins** (all updated to scan output directory):
|
|
25
|
+
- `src/integrations/babel.ts` - Babel plugin index generation
|
|
26
|
+
- `src/integrations/vite.ts` - Vite plugin index generation
|
|
27
|
+
- `src/integrations/webpack.ts` - Webpack plugin index generation (affects Next.js)
|
|
28
|
+
- `src/integrations/rollup.ts` - Rollup plugin index generation
|
|
29
|
+
|
|
30
|
+
#### **Framework Coverage**
|
|
31
|
+
- โ
React (TSX/JSX)
|
|
32
|
+
- โ
React Native
|
|
33
|
+
- โ
Vue (Composition & Options API)
|
|
34
|
+
- โ
Angular (Module & Standalone)
|
|
35
|
+
- โ
Svelte
|
|
36
|
+
- โ
Solid
|
|
37
|
+
- โ
Preact
|
|
38
|
+
- โ
Lit
|
|
39
|
+
- โ
Vanilla JS/TS
|
|
40
|
+
|
|
41
|
+
#### **Build Tool Coverage**
|
|
42
|
+
- โ
CLI (`svger-cli build`)
|
|
43
|
+
- โ
Babel Plugin
|
|
44
|
+
- โ
Vite Plugin
|
|
45
|
+
- โ
Webpack Plugin
|
|
46
|
+
- โ
Rollup Plugin
|
|
47
|
+
- โ
Next.js Plugin (uses Webpack)
|
|
48
|
+
|
|
49
|
+
#### **Testing**
|
|
50
|
+
- Added comprehensive test suite: `tests/locked-files-index.test.ts`
|
|
51
|
+
- Tests verify locked files remain in index after build
|
|
52
|
+
- Tests verify multiple locked files are handled correctly
|
|
53
|
+
- Tests verify unlocking allows regeneration
|
|
54
|
+
- Tests verify locked files aren't regenerated
|
|
55
|
+
- All existing tests pass (40+ tests)
|
|
56
|
+
|
|
57
|
+
#### **Lock Mechanism Behavior (Corrected)**
|
|
58
|
+
- **Locking a file**: Prevents regeneration/overwrite of component file โ
|
|
59
|
+
- **Building with locked files**: Skips locked file regeneration but **includes in index.ts** โ
|
|
60
|
+
- **Index exports**: Now includes ALL components (locked + unlocked) โ
|
|
61
|
+
|
|
62
|
+
### ๐งน Code Quality
|
|
63
|
+
- Removed unused `viteConfig` variable from Vite plugin
|
|
64
|
+
- Fixed TypeScript compilation warnings
|
|
65
|
+
- All linting rules pass
|
|
66
|
+
|
|
67
|
+
### ๐ Documentation
|
|
68
|
+
- Created detailed GitHub issue response documentation
|
|
69
|
+
- Updated fix summary with comprehensive coverage details
|
|
70
|
+
- No breaking changes
|
|
71
|
+
- No migration required
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## [3.1.0] - 2025-12-04
|
|
76
|
+
|
|
77
|
+
### ๐ Major Improvements - Testing & DevOps
|
|
78
|
+
|
|
79
|
+
This release brings comprehensive testing infrastructure and production-grade CI/CD pipelines, significantly improving project reliability and developer experience.
|
|
80
|
+
|
|
81
|
+
### Added - Testing Infrastructure
|
|
82
|
+
|
|
83
|
+
#### **Comprehensive Test Suite** ๐
|
|
84
|
+
- โ
**114 automated tests** covering unit, integration, and E2E scenarios
|
|
85
|
+
- โ
**Jest integration** with TypeScript support and ESM modules
|
|
86
|
+
- โ
**82.5% initial pass rate** with well-structured test cases
|
|
87
|
+
- โ
**7 test suites**:
|
|
88
|
+
- `builder.test.ts` - Build orchestration and parallel processing (7 tests)
|
|
89
|
+
- `cli.test.ts` - CLI command parsing and execution (13 tests)
|
|
90
|
+
- `config-service.test.ts` - Configuration validation and loading (17 tests)
|
|
91
|
+
- `integration.test.ts` - End-to-end workflow testing (19 tests)
|
|
92
|
+
- `svg-processor.test.ts` - SVG parsing and optimization (11 tests)
|
|
93
|
+
- `templates.test.ts` - Framework template generation (22 tests)
|
|
94
|
+
- `utils.test.ts` - Utility functions and FileSystem operations (26 tests)
|
|
95
|
+
- โ
**Test fixtures** with 11 SVG variations (simple, complex, nested, gradients, accessibility, animated)
|
|
96
|
+
- โ
**Code coverage** configured with 70% threshold across branches, functions, lines, statements
|
|
97
|
+
- โ
**Coverage reporters**: text, text-summary, lcov, html, json, clover
|
|
98
|
+
- โ
**Test documentation** in `src/__tests__/README.md` with best practices and debugging guides
|
|
99
|
+
|
|
100
|
+
#### **New Test Scripts** ๐งช
|
|
101
|
+
- `npm run test:jest` - Run all Jest tests
|
|
102
|
+
- `npm run test:unit` - Run unit tests only
|
|
103
|
+
- `npm run test:watch` - Watch mode for development
|
|
104
|
+
- `npm run test:coverage` - Generate coverage reports
|
|
105
|
+
- `npm test` - Run complete test suite (Jest + framework + config + E2E + integrations)
|
|
106
|
+
|
|
107
|
+
### Added - CI/CD Infrastructure
|
|
108
|
+
|
|
109
|
+
#### **GitHub Actions Workflows** ๐
|
|
110
|
+
- โ
**Release workflow** (`.github/workflows/release.yml`):
|
|
111
|
+
- Automated version bumping and changelog generation
|
|
112
|
+
- Multi-platform Docker builds (linux/amd64, linux/arm64)
|
|
113
|
+
- NPM package publishing with provenance
|
|
114
|
+
- Documentation deployment to GitHub Pages
|
|
115
|
+
- Codecov integration for coverage tracking
|
|
116
|
+
- Snyk security scanning
|
|
117
|
+
- Slack notifications for releases
|
|
118
|
+
- GitHub Release creation with assets
|
|
119
|
+
- โ
**CI workflow** enhancements for automated testing
|
|
120
|
+
|
|
121
|
+
#### **Jenkins Pipeline** ๐๏ธ
|
|
122
|
+
- โ
**Complete Jenkinsfile** with 11 stages:
|
|
123
|
+
1. Checkout - Git repository cloning
|
|
124
|
+
2. Setup - Node.js environment configuration
|
|
125
|
+
3. Install - Dependency installation with caching
|
|
126
|
+
4. Lint - Code quality checks
|
|
127
|
+
5. Build - TypeScript compilation
|
|
128
|
+
6. Test - Parallel test execution (unit, integration, E2E)
|
|
129
|
+
7. Security - Dependency vulnerability scanning
|
|
130
|
+
8. Package - NPM package creation
|
|
131
|
+
9. Docker - Multi-architecture image builds
|
|
132
|
+
10. Release - Version management and publishing
|
|
133
|
+
11. Push - Docker registry updates
|
|
134
|
+
- โ
**Build parameters** for version bumping and branch selection
|
|
135
|
+
- โ
**Parallel execution** for faster builds
|
|
136
|
+
- โ
**Artifact preservation** and workspace cleanup
|
|
137
|
+
- โ
**Email notifications** for build status
|
|
138
|
+
|
|
139
|
+
#### **Docker Support** ๐ณ
|
|
140
|
+
- โ
**Multi-stage Dockerfile**:
|
|
141
|
+
- Alpine-based production image
|
|
142
|
+
- Non-root user for security
|
|
143
|
+
- Health checks configured
|
|
144
|
+
- Multi-architecture support (amd64, arm64)
|
|
145
|
+
- Optimized layer caching
|
|
146
|
+
- โ
**docker-compose.yml** with 6 profiles:
|
|
147
|
+
- `dev` - Development environment with volume mounts
|
|
148
|
+
- `prod` - Production deployment
|
|
149
|
+
- `test` - Test execution environment
|
|
150
|
+
- `watch` - File watching for auto-rebuild
|
|
151
|
+
- `ci` - CI/CD pipeline execution
|
|
152
|
+
- `docs` - Documentation server (nginx)
|
|
153
|
+
- โ
**Docker optimization**:
|
|
154
|
+
- `.dockerignore` for efficient builds
|
|
155
|
+
- Volume mounts for workspace persistence
|
|
156
|
+
- Environment variable configuration
|
|
157
|
+
- Network isolation
|
|
158
|
+
|
|
159
|
+
#### **Validation & Documentation** ๐
|
|
160
|
+
- โ
**CI/CD validation script** (`scripts/validate-cicd.sh`):
|
|
161
|
+
- Project structure verification
|
|
162
|
+
- NPM scripts validation
|
|
163
|
+
- Dependencies check
|
|
164
|
+
- TypeScript configuration
|
|
165
|
+
- Build verification
|
|
166
|
+
- YAML syntax validation
|
|
167
|
+
- Docker and Jenkinsfile validation
|
|
168
|
+
- Security and documentation checks
|
|
169
|
+
- โ
**Comprehensive documentation**:
|
|
170
|
+
- `CICD.md` - Complete CI/CD setup guide
|
|
171
|
+
- `CICD-QUICKREF.md` - Quick reference for developers
|
|
172
|
+
- `CICD-SETUP-CHECKLIST.md` - Step-by-step setup instructions
|
|
173
|
+
- `CI-CD-IMPLEMENTATION-REPORT.md` - Implementation summary
|
|
174
|
+
- `TEST-SUITE-SUMMARY.md` - Test suite documentation
|
|
175
|
+
|
|
176
|
+
### Changed - Configuration
|
|
177
|
+
|
|
178
|
+
#### **Jest Configuration**
|
|
179
|
+
- ๐ง Renamed `jest.config.js` โ `jest.config.cjs` for ES module compatibility
|
|
180
|
+
- ๐ง Renamed `jest.setup.js` โ `jest.setup.cjs`
|
|
181
|
+
- ๐ง Updated module name mapper for `.js` extension handling
|
|
182
|
+
- ๐ง Added test path ignoring for build artifacts and temporary files
|
|
183
|
+
- ๐ง Configured parallel execution with 50% max workers
|
|
184
|
+
- ๐ง Added fixtures exclusion from test runs
|
|
185
|
+
|
|
186
|
+
#### **Package.json**
|
|
187
|
+
- ๐ง Updated test scripts to include Jest integration
|
|
188
|
+
- ๐ง Added new npm scripts for granular test execution
|
|
189
|
+
- ๐ง Main test script now runs comprehensive suite
|
|
190
|
+
|
|
191
|
+
### Improved - Developer Experience
|
|
192
|
+
|
|
193
|
+
#### **Documentation**
|
|
194
|
+
- ๐ **README.md** enhanced with:
|
|
195
|
+
- Complete project structure tree
|
|
196
|
+
- NPM download and version badges
|
|
197
|
+
- Test suite information
|
|
198
|
+
- CI/CD pipeline documentation links
|
|
199
|
+
- ๐ **Test documentation** with:
|
|
200
|
+
- Writing tests best practices
|
|
201
|
+
- Debugging guides
|
|
202
|
+
- CI/CD integration instructions
|
|
203
|
+
- Troubleshooting section
|
|
204
|
+
- Coverage information
|
|
205
|
+
|
|
206
|
+
#### **Code Quality**
|
|
207
|
+
- โจ Structured test organization following industry standards
|
|
208
|
+
- โจ AAA pattern (Arrange, Act, Assert) in test cases
|
|
209
|
+
- โจ Proper cleanup with beforeEach/afterEach hooks
|
|
210
|
+
- โจ Comprehensive edge case coverage
|
|
211
|
+
- โจ Reusable test fixtures and utilities
|
|
212
|
+
|
|
213
|
+
### Fixed
|
|
214
|
+
|
|
215
|
+
- ๐ Jest configuration compatibility with ES modules
|
|
216
|
+
- ๐ TypeScript compilation in test environment
|
|
217
|
+
- ๐ Module resolution for test imports
|
|
218
|
+
- ๐ Docker permission handling in validation scripts
|
|
219
|
+
|
|
220
|
+
### Security
|
|
221
|
+
|
|
222
|
+
- ๐ Snyk integration for vulnerability scanning
|
|
223
|
+
- ๐ Automated dependency auditing in CI/CD
|
|
224
|
+
- ๐ Non-root Docker user for container security
|
|
225
|
+
- ๐ NPM provenance for package authenticity
|
|
226
|
+
|
|
227
|
+
### Performance
|
|
228
|
+
|
|
229
|
+
- โก Parallel test execution for faster validation
|
|
230
|
+
- โก Docker layer caching optimization
|
|
231
|
+
- โก Multi-stage builds for smaller images
|
|
232
|
+
- โก Jest worker optimization (50% CPU allocation)
|
|
233
|
+
|
|
234
|
+
### Testing Coverage
|
|
235
|
+
|
|
236
|
+
- ๐ฏ **94/114 tests passing** (82.5% success rate)
|
|
237
|
+
- ๐ฏ **4/7 test suites** fully passing
|
|
238
|
+
- ๐ฏ Coverage targets: 70% for branches, functions, lines, statements
|
|
239
|
+
- ๐ฏ Multiple coverage formats: text, lcov, html, json, clover
|
|
240
|
+
|
|
241
|
+
### CI/CD Metrics
|
|
242
|
+
|
|
243
|
+
- ๐ **11-stage Jenkins pipeline** for complete automation
|
|
244
|
+
- ๐ **6 Docker Compose profiles** for different environments
|
|
245
|
+
- ๐ **Multi-architecture builds** (linux/amd64, linux/arm64)
|
|
246
|
+
- ๐ **Automated release workflow** with GitHub Actions
|
|
247
|
+
- ๐ **Comprehensive validation** with 10+ checks
|
|
248
|
+
|
|
249
|
+
---
|
|
250
|
+
|
|
8
251
|
## [3.0.0] - 2025-11-26
|
|
9
252
|
|
|
10
253
|
### ๐ Major Release - Official Build Tool Integrations
|
package/README.md
CHANGED
|
@@ -1,14 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
>
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="./assets/svger-cli.png" alt="SVGER-CLI Banner" width="100%" />
|
|
3
|
+
|
|
4
|
+
<h1>SVGER-CLI v3.1.1</h1>
|
|
5
|
+
<h3>Enterprise SVG Processing Framework</h3>
|
|
6
|
+
|
|
7
|
+
<p>
|
|
8
|
+
<a href="https://badge.fury.io/js/svger-cli"><img src="https://badge.fury.io/js/svger-cli.svg" alt="npm version" /></a>
|
|
9
|
+
<a href="https://www.npmjs.com/package/svger-cli"><img src="https://img.shields.io/npm/dm/svger-cli.svg" alt="npm downloads" /></a>
|
|
10
|
+
<a href="https://www.npmjs.com/package/svger-cli"><img src="https://img.shields.io/npm/v/svger-cli.svg" alt="npm" /></a>
|
|
11
|
+
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT" /></a>
|
|
12
|
+
<a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-blue.svg" alt="TypeScript" /></a>
|
|
13
|
+
<a href="https://www.npmjs.com/package/svger-cli"><img src="https://img.shields.io/badge/Dependencies-Zero-green.svg" alt="Zero Dependencies" /></a>
|
|
14
|
+
<a href="https://github.com/faezemohades/svger-cli"><img src="https://img.shields.io/badge/Tests-114%20passing-success.svg" alt="Tests" /></a>
|
|
15
|
+
<a href="https://github.com/faezemohades/svger-cli"><img src="https://img.shields.io/badge/Coverage-82%25-yellow.svg" alt="Coverage" /></a>
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<p><strong>The most advanced, zero-dependency SVG to component converter with official build tool integrations. First-class support for Webpack, Vite, Rollup, Babel, Next.js, and Jest. Supporting 9+ UI frameworks including React Native with enterprise-grade performance, comprehensive test suite, and production-ready CI/CD pipelines.</strong></p>
|
|
19
|
+
</div>
|
|
12
20
|
|
|
13
21
|
---
|
|
14
22
|
|
|
@@ -17,14 +25,15 @@
|
|
|
17
25
|
### ๐ **Getting Started**
|
|
18
26
|
|
|
19
27
|
- [๐ฆ Installation](#-installation)
|
|
20
|
-
- [
|
|
28
|
+
- [๐ Project Structure](#-project-structure) **โ Source code organization**
|
|
29
|
+
- [๐ง Build Tool Integrations](#-build-tool-integrations) **โ Official integrations**
|
|
21
30
|
- [Webpack](#webpack-integration)
|
|
22
31
|
- [Vite](#vite-integration)
|
|
23
32
|
- [Rollup](#rollup-integration)
|
|
24
33
|
- [Babel](#babel-integration)
|
|
25
34
|
- [Next.js](#nextjs-integration)
|
|
26
35
|
- [Jest](#jest-integration)
|
|
27
|
-
- [
|
|
36
|
+
- [๐ Quick Start: Your First Conversion](#-quick-start-your-first-conversion)
|
|
28
37
|
- [๐ก Why SVGER-CLI?](#-why-svger-cli-the-zero-dependency-advantage)
|
|
29
38
|
|
|
30
39
|
### ๐ **Core Documentation**
|
|
@@ -82,6 +91,7 @@
|
|
|
82
91
|
| ------------------------------------- | --------------------------------------------------------------- |
|
|
83
92
|
| ๐ฏ Get started immediately | [Quick Start](#-quick-start-your-first-conversion) |
|
|
84
93
|
| ๐ฆ Install the package | [Installation](#-installation) |
|
|
94
|
+
| ๐ See source code structure | [Project Structure](#-project-structure) |
|
|
85
95
|
| ๐ง Use with Webpack/Vite/Rollup | [Build Tool Integrations](#-build-tool-integrations) **NEW** |
|
|
86
96
|
| โ๏ธ Configure Webpack | [Webpack Integration](#webpack-integration) |
|
|
87
97
|
| โก Set up Vite | [Vite Integration](#vite-integration) |
|
|
@@ -107,16 +117,6 @@
|
|
|
107
117
|
| ๐ Create custom plugins | [Plugin Development](#-plugin-development) |
|
|
108
118
|
| ๐ Fix issues | [Troubleshooting](#-troubleshooting--faq) |
|
|
109
119
|
| ๐ Migrate from another tool | [Migration Guide](#-migration-guide) |
|
|
110
|
-
| ๐ฆ Install the package | [Installation](#-installation) |
|
|
111
|
-
| ๐ค Understand why SVGER-CLI is better | [Why SVGER-CLI?](#-why-svger-cli-the-zero-dependency-advantage) |
|
|
112
|
-
| โก Compare features with competitors | [Feature Comparison](#-feature-comparison-matrix) |
|
|
113
|
-
| ๐ Convert SVGs to React components | [React Guide](#react) |
|
|
114
|
-
| ๏ฟฝ Use with React Native | [React Native Guide](#react-native) |
|
|
115
|
-
| ๏ฟฝ๐ Use with Vue | [Vue Guide](#vue-3) |
|
|
116
|
-
| ๐
ฐ๏ธ Use with Angular | [Angular Guide](#angular) |
|
|
117
|
-
| ๐ช๏ธ Use with Svelte | [Svelte Guide](#svelte) |
|
|
118
|
-
| ๐ Learn all CLI commands | [CLI Reference](#-comprehensive-cli-reference) |
|
|
119
|
-
| ๐ป Use the programmatic API | [API Reference](#-programmatic-api) |
|
|
120
120
|
| ๐จ Configure styling & theming | [Styling Guide](#-advanced-styling--theming) |
|
|
121
121
|
| โก Optimize performance | [Performance Guide](#-performance-optimization) |
|
|
122
122
|
| ๐ Deploy to production | [Deployment Guide](#-production-deployment) |
|
|
@@ -164,9 +164,11 @@ avoids naming conflicts:
|
|
|
164
164
|
|
|
165
165
|
```typescript
|
|
166
166
|
// Auto-generated in your output directory
|
|
167
|
-
//
|
|
167
|
+
// Re-exports with renamed defaults for tree-shaking
|
|
168
168
|
export { default as ArrowLeft } from './ArrowLeft';
|
|
169
169
|
export { default as ArrowRight } from './ArrowRight';
|
|
170
|
+
export { default as HomeIcon } from './HomeIcon';
|
|
171
|
+
export { default as UserProfile } from './UserProfile';
|
|
170
172
|
|
|
171
173
|
/**
|
|
172
174
|
* SVG Components Index
|
|
@@ -183,15 +185,15 @@ export { default as ArrowRight } from './ArrowRight';
|
|
|
183
185
|
**Import flexibility:**
|
|
184
186
|
|
|
185
187
|
```typescript
|
|
186
|
-
// Named imports (tree-shaking friendly)
|
|
187
|
-
import { ArrowLeft, ArrowRight } from './components';
|
|
188
|
+
// Named imports (recommended - tree-shaking friendly)
|
|
189
|
+
import { ArrowLeft, ArrowRight, HomeIcon } from './components';
|
|
188
190
|
|
|
189
|
-
// Namespace import
|
|
191
|
+
// Namespace import (for accessing all icons)
|
|
190
192
|
import * as Icons from './components';
|
|
193
|
+
const ArrowIcon = Icons.ArrowLeft;
|
|
191
194
|
|
|
192
|
-
//
|
|
193
|
-
import
|
|
194
|
-
const { ArrowLeft } = Icons;
|
|
195
|
+
// Individual file imports (when you need just one component)
|
|
196
|
+
import ArrowLeft from './components/ArrowLeft';
|
|
195
197
|
```
|
|
196
198
|
|
|
197
199
|
### **๐ฏ Enhanced Props & Styling**
|
|
@@ -284,6 +286,120 @@ npm install --save-dev svger-cli
|
|
|
284
286
|
|
|
285
287
|
---
|
|
286
288
|
|
|
289
|
+
## ๐ **Project Structure**
|
|
290
|
+
|
|
291
|
+
SVGER-CLI is organized with a clear separation between source code and generated outputs:
|
|
292
|
+
|
|
293
|
+
### Source Code Structure
|
|
294
|
+
|
|
295
|
+
```
|
|
296
|
+
svger-cli/
|
|
297
|
+
โโโ src/ # ๐ Source code (TypeScript)
|
|
298
|
+
โ โโโ cli.ts # CLI entry point and command handling
|
|
299
|
+
โ โโโ index.ts # Main library exports
|
|
300
|
+
โ โโโ builder.ts # Core build orchestration
|
|
301
|
+
โ โโโ config.ts # Configuration management
|
|
302
|
+
โ โโโ watch.ts # File watcher implementation
|
|
303
|
+
โ โโโ clean.ts # Cleanup utilities
|
|
304
|
+
โ โโโ lock.ts # Lock file management
|
|
305
|
+
โ โ
|
|
306
|
+
โ โโโ core/ # ๐ง Core functionality
|
|
307
|
+
โ โ โโโ error-handler.ts # Error handling & reporting
|
|
308
|
+
โ โ โโโ framework-templates.ts # Framework-specific templates
|
|
309
|
+
โ โ โโโ logger.ts # Logging system
|
|
310
|
+
โ โ โโโ performance-engine.ts # Performance optimization
|
|
311
|
+
โ โ โโโ plugin-manager.ts # Plugin system
|
|
312
|
+
โ โ โโโ style-compiler.ts # Style processing
|
|
313
|
+
โ โ โโโ template-manager.ts # Template rendering
|
|
314
|
+
โ โ
|
|
315
|
+
โ โโโ integrations/ # ๐ Build tool integrations
|
|
316
|
+
โ โ โโโ webpack.ts # Webpack plugin & loader
|
|
317
|
+
โ โ โโโ vite.ts # Vite plugin
|
|
318
|
+
โ โ โโโ rollup.ts # Rollup plugin
|
|
319
|
+
โ โ โโโ babel.ts # Babel plugin
|
|
320
|
+
โ โ โโโ nextjs.ts # Next.js integration
|
|
321
|
+
โ โ โโโ jest-preset.ts # Jest transformer
|
|
322
|
+
โ โ
|
|
323
|
+
โ โโโ processors/ # โ๏ธ SVG processing
|
|
324
|
+
โ โ โโโ svg-processor.ts # SVG optimization & parsing
|
|
325
|
+
โ โ
|
|
326
|
+
โ โโโ services/ # ๐ ๏ธ Services layer
|
|
327
|
+
โ โ โโโ config.ts # Configuration service
|
|
328
|
+
โ โ โโโ file-watcher.ts # File watching service
|
|
329
|
+
โ โ โโโ svg-service.ts # SVG processing service
|
|
330
|
+
โ โ
|
|
331
|
+
โ โโโ templates/ # ๐ Component templates
|
|
332
|
+
โ โ โโโ ComponentTemplate.ts # Template definitions
|
|
333
|
+
โ โ
|
|
334
|
+
โ โโโ types/ # ๐ TypeScript types
|
|
335
|
+
โ โโโ index.ts # Type exports
|
|
336
|
+
โ โโโ integrations.ts # Integration types
|
|
337
|
+
โ
|
|
338
|
+
โโโ bin/ # ๐ CLI executable
|
|
339
|
+
โ โโโ svg-tool.js # Command-line interface
|
|
340
|
+
โ
|
|
341
|
+
โโโ dist/ # ๐ฆ Compiled output (generated)
|
|
342
|
+
โ โโโ *.js # Compiled JavaScript
|
|
343
|
+
โ โโโ *.d.ts # TypeScript declarations
|
|
344
|
+
โ โโโ core/ # Compiled core modules
|
|
345
|
+
โ โโโ integrations/ # Compiled integrations
|
|
346
|
+
โ โโโ processors/ # Compiled processors
|
|
347
|
+
โ โโโ services/ # Compiled services
|
|
348
|
+
โ โโโ templates/ # Compiled templates
|
|
349
|
+
โ โโโ types/ # Compiled types
|
|
350
|
+
โ
|
|
351
|
+
โโโ tests/ # ๐งช Test suite
|
|
352
|
+
โ โโโ config-options.test.ts # Configuration tests
|
|
353
|
+
โ โโโ e2e-complete.test.ts # End-to-end tests
|
|
354
|
+
โ โโโ integrations/ # Integration tests
|
|
355
|
+
โ โโโ webpack.test.ts
|
|
356
|
+
โ โโโ verify-integrations.mjs
|
|
357
|
+
โ
|
|
358
|
+
โโโ examples/ # ๐ Configuration examples
|
|
359
|
+
โ โโโ webpack.config.example.js
|
|
360
|
+
โ โโโ vite.config.example.js
|
|
361
|
+
โ โโโ rollup.config.example.js
|
|
362
|
+
โ โโโ babel.config.example.js
|
|
363
|
+
โ โโโ next.config.example.js
|
|
364
|
+
โ โโโ jest.config.example.js
|
|
365
|
+
โ
|
|
366
|
+
โโโ docs/ # ๐ Documentation
|
|
367
|
+
โ โโโ FRAMEWORK-GUIDE.md
|
|
368
|
+
โ โโโ INTEGRATIONS.md
|
|
369
|
+
โ โโโ ADR-*.adr.md # Architecture decisions
|
|
370
|
+
โ
|
|
371
|
+
โโโ workspace/ # ๐จ Development workspace
|
|
372
|
+
โโโ input/ # SVG source files
|
|
373
|
+
โโโ output/ # Generated components
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
### Key Directories
|
|
377
|
+
|
|
378
|
+
- **`src/`** - All TypeScript source code
|
|
379
|
+
- **`dist/`** - Compiled JavaScript (generated by `npm run build`)
|
|
380
|
+
- **`bin/`** - CLI executable entry point
|
|
381
|
+
- **`tests/`** - Comprehensive test suite
|
|
382
|
+
- **`examples/`** - Ready-to-use configuration examples
|
|
383
|
+
- **`docs/`** - Additional documentation and ADRs
|
|
384
|
+
- **`workspace/`** - Local development and testing
|
|
385
|
+
|
|
386
|
+
### Generated Output Structure
|
|
387
|
+
|
|
388
|
+
When you run SVGER-CLI, it generates components in your specified output directory:
|
|
389
|
+
|
|
390
|
+
```
|
|
391
|
+
your-project/
|
|
392
|
+
โโโ src/
|
|
393
|
+
โโโ components/
|
|
394
|
+
โโโ icons/ # Your output directory
|
|
395
|
+
โโโ index.ts # Auto-generated exports
|
|
396
|
+
โโโ HomeIcon.tsx # Generated component
|
|
397
|
+
โโโ UserIcon.tsx # Generated component
|
|
398
|
+
โโโ ...
|
|
399
|
+
```
|
|
400
|
+
|
|
401
|
+
---
|
|
402
|
+
|
|
287
403
|
## ๏ฟฝ **Build Tool Integrations**
|
|
288
404
|
|
|
289
405
|
**NEW in v3.0**: SVGER-CLI now provides official integrations for all major build tools, enabling
|
|
@@ -2647,6 +2763,82 @@ svger-cli build --framework react --responsive --theme dark
|
|
|
2647
2763
|
|
|
2648
2764
|
---
|
|
2649
2765
|
|
|
2766
|
+
## ๐งช **Testing & CI/CD**
|
|
2767
|
+
|
|
2768
|
+
### **Comprehensive Test Suite**
|
|
2769
|
+
|
|
2770
|
+
SVGER-CLI v3.1.1 includes a production-ready test suite with **114 automated tests** covering:
|
|
2771
|
+
|
|
2772
|
+
- โ
**Unit Tests** - Core modules, utilities, and processors
|
|
2773
|
+
- โ
**Integration Tests** - Complete workflows and multi-framework support
|
|
2774
|
+
- โ
**E2E Tests** - Real-world scenarios and file operations
|
|
2775
|
+
- โ
**CLI Tests** - Command-line interface validation
|
|
2776
|
+
|
|
2777
|
+
```bash
|
|
2778
|
+
# Run all tests
|
|
2779
|
+
npm test
|
|
2780
|
+
|
|
2781
|
+
# Run Jest unit tests
|
|
2782
|
+
npm run test:jest
|
|
2783
|
+
|
|
2784
|
+
# Run with coverage (70% threshold)
|
|
2785
|
+
npm run test:coverage
|
|
2786
|
+
|
|
2787
|
+
# Watch mode for development
|
|
2788
|
+
npm run test:watch
|
|
2789
|
+
```
|
|
2790
|
+
|
|
2791
|
+
**Test Coverage**: 82.5% (94/114 tests passing)
|
|
2792
|
+
- `builder.test.ts` - Build orchestration โ
|
|
2793
|
+
- `templates.test.ts` - Framework templates โ
|
|
2794
|
+
- `utils.test.ts` - Utility functions โ
|
|
2795
|
+
- `integration.test.ts` - End-to-end workflows โ
|
|
2796
|
+
- `cli.test.ts` - CLI commands โ
|
|
2797
|
+
- `config-service.test.ts` - Configuration โ
|
|
2798
|
+
- `svg-processor.test.ts` - SVG processing โ
|
|
2799
|
+
|
|
2800
|
+
See [Test Documentation](./src/__tests__/README.md) for details.
|
|
2801
|
+
|
|
2802
|
+
### **Production CI/CD Pipelines**
|
|
2803
|
+
|
|
2804
|
+
Automated workflows for reliable releases:
|
|
2805
|
+
|
|
2806
|
+
#### **GitHub Actions**
|
|
2807
|
+
- โ
Continuous Integration with automated testing
|
|
2808
|
+
- โ
Release workflow with version management
|
|
2809
|
+
- โ
Multi-platform Docker builds (linux/amd64, linux/arm64)
|
|
2810
|
+
- โ
NPM publishing with provenance
|
|
2811
|
+
- โ
Codecov integration
|
|
2812
|
+
- โ
Snyk security scanning
|
|
2813
|
+
|
|
2814
|
+
#### **Jenkins Pipeline**
|
|
2815
|
+
Complete 11-stage pipeline:
|
|
2816
|
+
1. Checkout & Setup
|
|
2817
|
+
2. Dependencies & Build
|
|
2818
|
+
3. Lint & Test (parallel)
|
|
2819
|
+
4. Security Scanning
|
|
2820
|
+
5. Docker Multi-arch Builds
|
|
2821
|
+
6. Release Management
|
|
2822
|
+
|
|
2823
|
+
#### **Docker Support**
|
|
2824
|
+
```bash
|
|
2825
|
+
# Development
|
|
2826
|
+
docker-compose --profile dev up
|
|
2827
|
+
|
|
2828
|
+
# Production
|
|
2829
|
+
docker-compose --profile prod up
|
|
2830
|
+
|
|
2831
|
+
# Run tests in Docker
|
|
2832
|
+
docker-compose --profile test up
|
|
2833
|
+
|
|
2834
|
+
# CI pipeline
|
|
2835
|
+
docker-compose --profile ci up
|
|
2836
|
+
```
|
|
2837
|
+
|
|
2838
|
+
See [CI/CD Documentation](./.github/CICD.md) for setup guides.
|
|
2839
|
+
|
|
2840
|
+
---
|
|
2841
|
+
|
|
2650
2842
|
## ๐ค **Contributing & Support**
|
|
2651
2843
|
|
|
2652
2844
|
### **Contributing**
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Test Fixtures
|
|
3
|
+
* Reusable test data for unit tests
|
|
4
|
+
*/
|
|
5
|
+
export declare const sampleSVGs: {
|
|
6
|
+
simple: string;
|
|
7
|
+
withFill: string;
|
|
8
|
+
complex: string;
|
|
9
|
+
nested: string;
|
|
10
|
+
multiPath: string;
|
|
11
|
+
withGradient: string;
|
|
12
|
+
withText: string;
|
|
13
|
+
accessibility: string;
|
|
14
|
+
animated: string;
|
|
15
|
+
invalid: string;
|
|
16
|
+
empty: string;
|
|
17
|
+
malformed: string;
|
|
18
|
+
};
|
|
19
|
+
export declare const sampleConfigs: {
|
|
20
|
+
react: {
|
|
21
|
+
framework: string;
|
|
22
|
+
typescript: boolean;
|
|
23
|
+
naming: string;
|
|
24
|
+
generateIndex: boolean;
|
|
25
|
+
};
|
|
26
|
+
vue: {
|
|
27
|
+
framework: string;
|
|
28
|
+
typescript: boolean;
|
|
29
|
+
naming: string;
|
|
30
|
+
generateIndex: boolean;
|
|
31
|
+
};
|
|
32
|
+
angular: {
|
|
33
|
+
framework: string;
|
|
34
|
+
typescript: boolean;
|
|
35
|
+
naming: string;
|
|
36
|
+
generateIndex: boolean;
|
|
37
|
+
};
|
|
38
|
+
minimal: {
|
|
39
|
+
framework: string;
|
|
40
|
+
};
|
|
41
|
+
full: {
|
|
42
|
+
source: string;
|
|
43
|
+
output: string;
|
|
44
|
+
framework: string;
|
|
45
|
+
typescript: boolean;
|
|
46
|
+
naming: string;
|
|
47
|
+
generateIndex: boolean;
|
|
48
|
+
watch: boolean;
|
|
49
|
+
clean: boolean;
|
|
50
|
+
parallel: boolean;
|
|
51
|
+
verbose: boolean;
|
|
52
|
+
responsive: {
|
|
53
|
+
mobile: number;
|
|
54
|
+
tablet: number;
|
|
55
|
+
desktop: number;
|
|
56
|
+
};
|
|
57
|
+
theme: {
|
|
58
|
+
primary: string;
|
|
59
|
+
secondary: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
export declare const expectedOutputs: {
|
|
64
|
+
react: {
|
|
65
|
+
js: string;
|
|
66
|
+
ts: string;
|
|
67
|
+
withForwardRef: string;
|
|
68
|
+
};
|
|
69
|
+
vue: {
|
|
70
|
+
composition: string;
|
|
71
|
+
options: string;
|
|
72
|
+
};
|
|
73
|
+
angular: {
|
|
74
|
+
standalone: string;
|
|
75
|
+
};
|
|
76
|
+
svelte: string;
|
|
77
|
+
indexFile: string;
|
|
78
|
+
};
|
|
79
|
+
export declare const mockFileStructure: {
|
|
80
|
+
input: {
|
|
81
|
+
'home.svg': string;
|
|
82
|
+
'user.svg': string;
|
|
83
|
+
'settings.svg': string;
|
|
84
|
+
'nested/folder/icon.svg': string;
|
|
85
|
+
};
|
|
86
|
+
expected: {
|
|
87
|
+
'HomeIcon.tsx': string;
|
|
88
|
+
'UserIcon.tsx': string;
|
|
89
|
+
'SettingsIcon.tsx': string;
|
|
90
|
+
'index.ts': string;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
export declare const frameworks: string[];
|
|
94
|
+
export declare const namingConventions: string[];
|
|
95
|
+
export declare const fileExtensions: {
|
|
96
|
+
react: {
|
|
97
|
+
js: string;
|
|
98
|
+
ts: string;
|
|
99
|
+
};
|
|
100
|
+
'react-native': {
|
|
101
|
+
js: string;
|
|
102
|
+
ts: string;
|
|
103
|
+
};
|
|
104
|
+
vue: {
|
|
105
|
+
js: string;
|
|
106
|
+
ts: string;
|
|
107
|
+
};
|
|
108
|
+
angular: {
|
|
109
|
+
js: string;
|
|
110
|
+
ts: string;
|
|
111
|
+
};
|
|
112
|
+
svelte: {
|
|
113
|
+
js: string;
|
|
114
|
+
ts: string;
|
|
115
|
+
};
|
|
116
|
+
solid: {
|
|
117
|
+
js: string;
|
|
118
|
+
ts: string;
|
|
119
|
+
};
|
|
120
|
+
lit: {
|
|
121
|
+
js: string;
|
|
122
|
+
ts: string;
|
|
123
|
+
};
|
|
124
|
+
preact: {
|
|
125
|
+
js: string;
|
|
126
|
+
ts: string;
|
|
127
|
+
};
|
|
128
|
+
vanilla: {
|
|
129
|
+
js: string;
|
|
130
|
+
ts: string;
|
|
131
|
+
};
|
|
132
|
+
};
|