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/DEVELOPMENT.md
DELETED
|
@@ -1,353 +0,0 @@
|
|
|
1
|
-
# Development Guide
|
|
2
|
-
|
|
3
|
-
This guide will help you set up the development environment and contribute to SVGER-CLI.
|
|
4
|
-
|
|
5
|
-
## Prerequisites
|
|
6
|
-
|
|
7
|
-
- **Node.js**: >= 18.17.0 (we recommend using [nvm](https://github.com/nvm-sh/nvm))
|
|
8
|
-
- **npm**: >= 9.0.0
|
|
9
|
-
- **Git**: Latest version
|
|
10
|
-
|
|
11
|
-
## Setup Development Environment
|
|
12
|
-
|
|
13
|
-
1. **Clone the repository:**
|
|
14
|
-
```bash
|
|
15
|
-
git clone https://github.com/faezemohades/svger-cli.git
|
|
16
|
-
cd svger-cli
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
2. **Install dependencies:**
|
|
20
|
-
```bash
|
|
21
|
-
npm install
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
3. **Build the project:**
|
|
25
|
-
```bash
|
|
26
|
-
npm run build
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
4. **Run tests:**
|
|
30
|
-
```bash
|
|
31
|
-
npm test
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Development Workflow
|
|
35
|
-
|
|
36
|
-
### Building
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
# Build once
|
|
40
|
-
npm run build
|
|
41
|
-
|
|
42
|
-
# Build and watch for changes
|
|
43
|
-
npm run build:watch
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### Testing
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
# Run all tests
|
|
50
|
-
npm test
|
|
51
|
-
|
|
52
|
-
# Run tests in watch mode
|
|
53
|
-
npm run test:watch
|
|
54
|
-
|
|
55
|
-
# Run with coverage
|
|
56
|
-
npm run test:coverage
|
|
57
|
-
|
|
58
|
-
# Run integration tests only
|
|
59
|
-
npm run test:integration
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
### Linting and Formatting
|
|
63
|
-
|
|
64
|
-
```bash
|
|
65
|
-
# Check for linting issues
|
|
66
|
-
npm run lint
|
|
67
|
-
|
|
68
|
-
# Fix linting issues
|
|
69
|
-
npm run lint:fix
|
|
70
|
-
|
|
71
|
-
# Check formatting
|
|
72
|
-
npm run format:check
|
|
73
|
-
|
|
74
|
-
# Fix formatting
|
|
75
|
-
npm run format
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
### Development Mode
|
|
79
|
-
|
|
80
|
-
To test the CLI during development:
|
|
81
|
-
|
|
82
|
-
```bash
|
|
83
|
-
# Run CLI directly from source
|
|
84
|
-
npm run dev -- build ./test-icons ./test-output
|
|
85
|
-
|
|
86
|
-
# Or install globally for testing
|
|
87
|
-
npm run build
|
|
88
|
-
npm link
|
|
89
|
-
svger-cli --version
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
## Project Structure
|
|
93
|
-
|
|
94
|
-
```
|
|
95
|
-
svger-cli/
|
|
96
|
-
├── src/ # Source code
|
|
97
|
-
│ ├── core/ # Core functionality
|
|
98
|
-
│ ├── processors/ # SVG processing logic
|
|
99
|
-
│ ├── services/ # Business logic services
|
|
100
|
-
│ ├── templates/ # Framework templates
|
|
101
|
-
│ ├── types/ # TypeScript definitions
|
|
102
|
-
│ └── utils/ # Utility functions
|
|
103
|
-
├── bin/ # CLI entry point
|
|
104
|
-
├── docs/ # Documentation
|
|
105
|
-
├── dist/ # Compiled output (generated)
|
|
106
|
-
└── tests/ # Test files
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
## Adding New Framework Support
|
|
110
|
-
|
|
111
|
-
1. **Create framework template:**
|
|
112
|
-
```typescript
|
|
113
|
-
// src/core/framework-templates.ts
|
|
114
|
-
export const newFrameworkTemplate = {
|
|
115
|
-
name: 'newframework',
|
|
116
|
-
extension: '.jsx',
|
|
117
|
-
generate: (svgContent: string, componentName: string, options: any) => {
|
|
118
|
-
// Implementation
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
2. **Add to framework list:**
|
|
124
|
-
```typescript
|
|
125
|
-
// src/types/index.ts
|
|
126
|
-
export type FrameworkType = 'react' | 'vue' | 'angular' | 'newframework';
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
3. **Update CLI options:**
|
|
130
|
-
```typescript
|
|
131
|
-
// src/cli.ts - Add to framework choices
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
4. **Add tests:**
|
|
135
|
-
```typescript
|
|
136
|
-
// tests/frameworks/newframework.test.ts
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
## Testing Strategy
|
|
140
|
-
|
|
141
|
-
### Unit Tests
|
|
142
|
-
- Test individual functions and classes
|
|
143
|
-
- Mock external dependencies
|
|
144
|
-
- Focus on business logic
|
|
145
|
-
|
|
146
|
-
### Integration Tests
|
|
147
|
-
- Test CLI commands end-to-end
|
|
148
|
-
- Test file generation with real SVG files
|
|
149
|
-
- Verify output correctness
|
|
150
|
-
|
|
151
|
-
### Performance Tests
|
|
152
|
-
- Benchmark processing times
|
|
153
|
-
- Memory usage testing
|
|
154
|
-
- Regression detection
|
|
155
|
-
|
|
156
|
-
## Code Style Guidelines
|
|
157
|
-
|
|
158
|
-
### TypeScript
|
|
159
|
-
- Use strict TypeScript configuration
|
|
160
|
-
- Prefer interfaces over types for object shapes
|
|
161
|
-
- Use generics for reusable code
|
|
162
|
-
- Document complex types
|
|
163
|
-
|
|
164
|
-
### Naming Conventions
|
|
165
|
-
- **Files**: kebab-case (e.g., `svg-processor.ts`)
|
|
166
|
-
- **Classes**: PascalCase (e.g., `SVGProcessor`)
|
|
167
|
-
- **Functions/Variables**: camelCase (e.g., `processFile`)
|
|
168
|
-
- **Constants**: SCREAMING_SNAKE_CASE (e.g., `DEFAULT_SIZE`)
|
|
169
|
-
|
|
170
|
-
### Error Handling
|
|
171
|
-
- Use custom error classes
|
|
172
|
-
- Provide meaningful error messages
|
|
173
|
-
- Include context in errors
|
|
174
|
-
- Log appropriate levels
|
|
175
|
-
|
|
176
|
-
## Performance Considerations
|
|
177
|
-
|
|
178
|
-
### Optimization Guidelines
|
|
179
|
-
- Use streaming for large files
|
|
180
|
-
- Implement caching where appropriate
|
|
181
|
-
- Parallelize CPU-intensive tasks
|
|
182
|
-
- Monitor memory usage
|
|
183
|
-
|
|
184
|
-
### Benchmarking
|
|
185
|
-
```bash
|
|
186
|
-
# Run performance benchmarks
|
|
187
|
-
npm run benchmark
|
|
188
|
-
|
|
189
|
-
# Compare with previous versions
|
|
190
|
-
npm run benchmark -- --compare
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
## Contributing Guidelines
|
|
194
|
-
|
|
195
|
-
### Before You Start
|
|
196
|
-
1. Check existing issues and PRs
|
|
197
|
-
2. Create an issue for new features
|
|
198
|
-
3. Follow coding standards
|
|
199
|
-
4. Write tests for new code
|
|
200
|
-
|
|
201
|
-
### Pull Request Process
|
|
202
|
-
1. **Create feature branch:**
|
|
203
|
-
```bash
|
|
204
|
-
git checkout -b feature/your-feature-name
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
2. **Make changes and test:**
|
|
208
|
-
```bash
|
|
209
|
-
npm run validate # runs typecheck, lint, and test
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
3. **Commit with conventional format:**
|
|
213
|
-
```bash
|
|
214
|
-
git commit -m "feat: add support for new framework"
|
|
215
|
-
```
|
|
216
|
-
|
|
217
|
-
4. **Push and create PR:**
|
|
218
|
-
```bash
|
|
219
|
-
git push origin feature/your-feature-name
|
|
220
|
-
```
|
|
221
|
-
|
|
222
|
-
### Commit Message Format
|
|
223
|
-
```
|
|
224
|
-
<type>(<scope>): <description>
|
|
225
|
-
|
|
226
|
-
[optional body]
|
|
227
|
-
|
|
228
|
-
[optional footer]
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
**Types:**
|
|
232
|
-
- `feat`: New feature
|
|
233
|
-
- `fix`: Bug fix
|
|
234
|
-
- `docs`: Documentation changes
|
|
235
|
-
- `style`: Formatting changes
|
|
236
|
-
- `refactor`: Code restructuring
|
|
237
|
-
- `test`: Adding tests
|
|
238
|
-
- `chore`: Maintenance tasks
|
|
239
|
-
|
|
240
|
-
## Debugging
|
|
241
|
-
|
|
242
|
-
### CLI Debugging
|
|
243
|
-
```bash
|
|
244
|
-
# Enable verbose logging
|
|
245
|
-
DEBUG=svger:* npm run dev -- build ./icons ./components
|
|
246
|
-
|
|
247
|
-
# Debug specific modules
|
|
248
|
-
DEBUG=svger:processor npm run dev -- build ./icons ./components
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
### VS Code Configuration
|
|
252
|
-
Create `.vscode/launch.json`:
|
|
253
|
-
```json
|
|
254
|
-
{
|
|
255
|
-
"version": "0.2.0",
|
|
256
|
-
"configurations": [
|
|
257
|
-
{
|
|
258
|
-
"name": "Debug CLI",
|
|
259
|
-
"type": "node",
|
|
260
|
-
"request": "launch",
|
|
261
|
-
"program": "${workspaceFolder}/src/cli.ts",
|
|
262
|
-
"args": ["build", "./test-icons", "./test-output"],
|
|
263
|
-
"runtimeArgs": ["--loader", "ts-node/esm"],
|
|
264
|
-
"console": "integratedTerminal"
|
|
265
|
-
}
|
|
266
|
-
]
|
|
267
|
-
}
|
|
268
|
-
```
|
|
269
|
-
|
|
270
|
-
## Release Process
|
|
271
|
-
|
|
272
|
-
### Version Management
|
|
273
|
-
```bash
|
|
274
|
-
# Patch release (bug fixes)
|
|
275
|
-
npm run release
|
|
276
|
-
|
|
277
|
-
# Minor release (new features)
|
|
278
|
-
npm run release:minor
|
|
279
|
-
|
|
280
|
-
# Major release (breaking changes)
|
|
281
|
-
npm run release:major
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
### Manual Release Steps
|
|
285
|
-
1. Update CHANGELOG.md
|
|
286
|
-
2. Run all tests and validation
|
|
287
|
-
3. Build and test package
|
|
288
|
-
4. Update version and tag
|
|
289
|
-
5. Publish to npm
|
|
290
|
-
6. Create GitHub release
|
|
291
|
-
|
|
292
|
-
## Documentation
|
|
293
|
-
|
|
294
|
-
### API Documentation
|
|
295
|
-
```bash
|
|
296
|
-
# Generate API docs
|
|
297
|
-
npm run docs:generate
|
|
298
|
-
```
|
|
299
|
-
|
|
300
|
-
### Adding Documentation
|
|
301
|
-
- Update README.md for user-facing changes
|
|
302
|
-
- Add JSDoc comments for public APIs
|
|
303
|
-
- Update CHANGELOG.md for releases
|
|
304
|
-
- Create ADRs for architectural decisions
|
|
305
|
-
|
|
306
|
-
## Troubleshooting
|
|
307
|
-
|
|
308
|
-
### Common Issues
|
|
309
|
-
|
|
310
|
-
**Build Errors:**
|
|
311
|
-
```bash
|
|
312
|
-
# Clean and rebuild
|
|
313
|
-
npm run clean
|
|
314
|
-
npm install
|
|
315
|
-
npm run build
|
|
316
|
-
```
|
|
317
|
-
|
|
318
|
-
**Test Failures:**
|
|
319
|
-
```bash
|
|
320
|
-
# Update snapshots
|
|
321
|
-
npm test -- --updateSnapshot
|
|
322
|
-
|
|
323
|
-
# Run specific test
|
|
324
|
-
npm test -- --testNamePattern="specific test"
|
|
325
|
-
```
|
|
326
|
-
|
|
327
|
-
**TypeScript Errors:**
|
|
328
|
-
```bash
|
|
329
|
-
# Check types without emitting
|
|
330
|
-
npm run typecheck
|
|
331
|
-
|
|
332
|
-
# Check specific file
|
|
333
|
-
npx tsc --noEmit src/specific-file.ts
|
|
334
|
-
```
|
|
335
|
-
|
|
336
|
-
## Resources
|
|
337
|
-
|
|
338
|
-
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
|
|
339
|
-
- [Jest Testing Framework](https://jestjs.io/docs/getting-started)
|
|
340
|
-
- [ESLint Rules](https://eslint.org/docs/rules/)
|
|
341
|
-
- [Conventional Commits](https://www.conventionalcommits.org/)
|
|
342
|
-
|
|
343
|
-
## Support
|
|
344
|
-
|
|
345
|
-
If you need help with development:
|
|
346
|
-
|
|
347
|
-
1. Check existing issues and documentation
|
|
348
|
-
2. Ask in GitHub Discussions
|
|
349
|
-
3. Contact maintainers: faezemohades@gmail.com
|
|
350
|
-
|
|
351
|
-
---
|
|
352
|
-
|
|
353
|
-
Happy coding! 🚀
|