svger-cli 2.0.0 → 2.0.2
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/dist/cli.js +0 -0
- package/dist/core/error-handler.d.ts +63 -0
- package/dist/core/error-handler.js +224 -0
- package/dist/core/framework-templates.d.ts +17 -0
- package/{src/core/framework-templates.ts → dist/core/framework-templates.js} +100 -137
- package/dist/core/logger.d.ts +22 -0
- package/dist/core/logger.js +85 -0
- package/dist/core/performance-engine.d.ts +67 -0
- package/dist/core/performance-engine.js +251 -0
- package/dist/core/plugin-manager.d.ts +56 -0
- package/dist/core/plugin-manager.js +189 -0
- package/dist/core/style-compiler.d.ts +88 -0
- package/dist/core/style-compiler.js +466 -0
- package/dist/core/template-manager.d.ts +64 -0
- package/{src/core/template-manager.ts → dist/core/template-manager.js} +172 -255
- package/dist/index.d.ts +151 -0
- package/{src/index.ts → dist/index.js} +30 -108
- package/dist/processors/svg-processor.d.ts +67 -0
- package/dist/processors/svg-processor.js +225 -0
- package/dist/services/config.d.ts +55 -0
- package/dist/services/config.js +209 -0
- package/dist/services/file-watcher.d.ts +54 -0
- package/dist/services/file-watcher.js +180 -0
- package/dist/services/svg-service.d.ts +81 -0
- package/dist/services/svg-service.js +383 -0
- package/dist/types/index.d.ts +140 -0
- package/dist/types/index.js +4 -0
- package/dist/utils/native.d.ts +74 -0
- package/dist/utils/native.js +305 -0
- package/package.json +9 -3
- package/.svgconfig.json +0 -3
- package/CODE_OF_CONDUCT.md +0 -79
- package/CONTRIBUTING.md +0 -146
- package/TESTING.md +0 -143
- package/cli-framework.test.js +0 -16
- package/cli-test-angular/Arrowbenddownleft.component.ts +0 -27
- package/cli-test-angular/Vite.component.ts +0 -27
- package/cli-test-angular/index.ts +0 -25
- package/cli-test-output/Arrowbenddownleft.vue +0 -33
- package/cli-test-output/Vite.vue +0 -33
- package/cli-test-output/index.ts +0 -25
- package/cli-test-react/Arrowbenddownleft.tsx +0 -39
- package/cli-test-react/Vite.tsx +0 -39
- package/cli-test-react/index.ts +0 -25
- package/cli-test-svelte/Arrowbenddownleft.svelte +0 -22
- package/cli-test-svelte/Vite.svelte +0 -22
- package/cli-test-svelte/index.ts +0 -25
- package/docs/ADR-SVG-INTRGRATION-METHODS-001.adr.md +0 -157
- package/docs/ADR-SVG-INTRGRATION-METHODS-002.adr.md +0 -550
- package/docs/FRAMEWORK-GUIDE.md +0 -768
- package/docs/IMPLEMENTATION-SUMMARY.md +0 -376
- package/docs/TDR-SVG-INTRGRATION-METHODS-001.tdr.md +0 -115
- package/frameworks.test.js +0 -170
- package/my-svgs/ArrowBendDownLeft.svg +0 -6
- package/my-svgs/vite.svg +0 -1
- package/src/builder.ts +0 -104
- package/src/clean.ts +0 -21
- package/src/cli.ts +0 -221
- package/src/config.ts +0 -81
- package/src/core/error-handler.ts +0 -303
- package/src/core/logger.ts +0 -104
- package/src/core/performance-engine.ts +0 -327
- package/src/core/plugin-manager.ts +0 -228
- package/src/core/style-compiler.ts +0 -605
- package/src/lock.ts +0 -74
- package/src/processors/svg-processor.ts +0 -288
- package/src/services/config.ts +0 -241
- package/src/services/file-watcher.ts +0 -218
- package/src/services/svg-service.ts +0 -468
- package/src/templates/ComponentTemplate.ts +0 -57
- package/src/types/index.ts +0 -169
- package/src/utils/native.ts +0 -352
- package/src/watch.ts +0 -88
- package/test-output-mulit/TestIcon-angular-module.component.ts +0 -26
- package/test-output-mulit/TestIcon-angular-standalone.component.ts +0 -27
- package/test-output-mulit/TestIcon-lit.ts +0 -35
- package/test-output-mulit/TestIcon-preact.tsx +0 -38
- package/test-output-mulit/TestIcon-react.tsx +0 -35
- package/test-output-mulit/TestIcon-solid.tsx +0 -27
- package/test-output-mulit/TestIcon-svelte.svelte +0 -22
- package/test-output-mulit/TestIcon-vanilla.ts +0 -37
- package/test-output-mulit/TestIcon-vue-composition.vue +0 -33
- package/test-output-mulit/TestIcon-vue-options.vue +0 -31
- package/tsconfig.json +0 -18
|
@@ -1,169 +1,134 @@
|
|
|
1
|
-
import { Template, ComponentGenerationOptions, TemplateConfig } from '../types/index.js';
|
|
2
1
|
import { logger } from '../core/logger.js';
|
|
3
2
|
import { FileSystem } from '../utils/native.js';
|
|
4
3
|
import path from 'path';
|
|
5
|
-
|
|
6
4
|
/**
|
|
7
5
|
* Template management system for customizable component generation
|
|
8
6
|
*/
|
|
9
7
|
export class TemplateManager {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
this.loadBuiltinTemplates();
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
public static getInstance(): TemplateManager {
|
|
19
|
-
if (!TemplateManager.instance) {
|
|
20
|
-
TemplateManager.instance = new TemplateManager();
|
|
8
|
+
static instance;
|
|
9
|
+
templates = new Map();
|
|
10
|
+
defaultTemplate = 'react-functional';
|
|
11
|
+
constructor() {
|
|
12
|
+
this.loadBuiltinTemplates();
|
|
21
13
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
*/
|
|
28
|
-
private loadBuiltinTemplates(): void {
|
|
29
|
-
// Standard React Functional Component
|
|
30
|
-
this.registerTemplate({
|
|
31
|
-
name: 'react-functional',
|
|
32
|
-
generate: (options: ComponentGenerationOptions) => this.generateReactFunctional(options),
|
|
33
|
-
validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
// React Functional Component with forwardRef
|
|
37
|
-
this.registerTemplate({
|
|
38
|
-
name: 'react-forwardref',
|
|
39
|
-
generate: (options: ComponentGenerationOptions) => this.generateReactForwardRef(options),
|
|
40
|
-
validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
// React Class Component (legacy support)
|
|
44
|
-
this.registerTemplate({
|
|
45
|
-
name: 'react-class',
|
|
46
|
-
generate: (options: ComponentGenerationOptions) => this.generateReactClass(options),
|
|
47
|
-
validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
// Styled Components Template
|
|
51
|
-
this.registerTemplate({
|
|
52
|
-
name: 'styled-components',
|
|
53
|
-
generate: (options: ComponentGenerationOptions) => this.generateStyledComponents(options),
|
|
54
|
-
validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
// TypeScript Native (no React)
|
|
58
|
-
this.registerTemplate({
|
|
59
|
-
name: 'typescript-native',
|
|
60
|
-
generate: (options: ComponentGenerationOptions) => this.generateTypeScriptNative(options),
|
|
61
|
-
validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
// Enhanced Styled Template
|
|
65
|
-
this.registerTemplate({
|
|
66
|
-
name: 'enhanced-styled',
|
|
67
|
-
generate: (options: ComponentGenerationOptions) => this.generateEnhancedStyled(options),
|
|
68
|
-
validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
logger.debug('Built-in templates loaded');
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* Register a new template
|
|
76
|
-
*/
|
|
77
|
-
public registerTemplate(template: Template): void {
|
|
78
|
-
this.templates.set(template.name, template);
|
|
79
|
-
logger.debug(`Template registered: ${template.name}`);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/**
|
|
83
|
-
* Generate component using specified template
|
|
84
|
-
*/
|
|
85
|
-
public generateComponent(
|
|
86
|
-
templateName: string,
|
|
87
|
-
options: ComponentGenerationOptions
|
|
88
|
-
): string {
|
|
89
|
-
const template = this.templates.get(templateName);
|
|
90
|
-
|
|
91
|
-
if (!template) {
|
|
92
|
-
logger.warn(`Template not found: ${templateName}, using default`);
|
|
93
|
-
return this.generateComponent(this.defaultTemplate, options);
|
|
14
|
+
static getInstance() {
|
|
15
|
+
if (!TemplateManager.instance) {
|
|
16
|
+
TemplateManager.instance = new TemplateManager();
|
|
17
|
+
}
|
|
18
|
+
return TemplateManager.instance;
|
|
94
19
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Load built-in templates
|
|
22
|
+
*/
|
|
23
|
+
loadBuiltinTemplates() {
|
|
24
|
+
// Standard React Functional Component
|
|
25
|
+
this.registerTemplate({
|
|
26
|
+
name: 'react-functional',
|
|
27
|
+
generate: (options) => this.generateReactFunctional(options),
|
|
28
|
+
validate: (options) => !!options.componentName && !!options.svgContent
|
|
29
|
+
});
|
|
30
|
+
// React Functional Component with forwardRef
|
|
31
|
+
this.registerTemplate({
|
|
32
|
+
name: 'react-forwardref',
|
|
33
|
+
generate: (options) => this.generateReactForwardRef(options),
|
|
34
|
+
validate: (options) => !!options.componentName && !!options.svgContent
|
|
35
|
+
});
|
|
36
|
+
// React Class Component (legacy support)
|
|
37
|
+
this.registerTemplate({
|
|
38
|
+
name: 'react-class',
|
|
39
|
+
generate: (options) => this.generateReactClass(options),
|
|
40
|
+
validate: (options) => !!options.componentName && !!options.svgContent
|
|
41
|
+
});
|
|
42
|
+
// Styled Components Template
|
|
43
|
+
this.registerTemplate({
|
|
44
|
+
name: 'styled-components',
|
|
45
|
+
generate: (options) => this.generateStyledComponents(options),
|
|
46
|
+
validate: (options) => !!options.componentName && !!options.svgContent
|
|
47
|
+
});
|
|
48
|
+
// TypeScript Native (no React)
|
|
49
|
+
this.registerTemplate({
|
|
50
|
+
name: 'typescript-native',
|
|
51
|
+
generate: (options) => this.generateTypeScriptNative(options),
|
|
52
|
+
validate: (options) => !!options.componentName && !!options.svgContent
|
|
53
|
+
});
|
|
54
|
+
// Enhanced Styled Template
|
|
55
|
+
this.registerTemplate({
|
|
56
|
+
name: 'enhanced-styled',
|
|
57
|
+
generate: (options) => this.generateEnhancedStyled(options),
|
|
58
|
+
validate: (options) => !!options.componentName && !!options.svgContent
|
|
59
|
+
});
|
|
60
|
+
logger.debug('Built-in templates loaded');
|
|
98
61
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
const templateContent = await FileSystem.readFile(resolvedPath, 'utf-8');
|
|
115
|
-
|
|
116
|
-
// Parse template (assuming it's a JavaScript module)
|
|
117
|
-
const templateName = path.basename(templatePath, path.extname(templatePath));
|
|
118
|
-
|
|
119
|
-
// For now, we'll treat it as a simple string template
|
|
120
|
-
this.registerTemplate({
|
|
121
|
-
name: templateName,
|
|
122
|
-
generate: (options: ComponentGenerationOptions) => {
|
|
123
|
-
return this.processStringTemplate(templateContent, options);
|
|
62
|
+
/**
|
|
63
|
+
* Register a new template
|
|
64
|
+
*/
|
|
65
|
+
registerTemplate(template) {
|
|
66
|
+
this.templates.set(template.name, template);
|
|
67
|
+
logger.debug(`Template registered: ${template.name}`);
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Generate component using specified template
|
|
71
|
+
*/
|
|
72
|
+
generateComponent(templateName, options) {
|
|
73
|
+
const template = this.templates.get(templateName);
|
|
74
|
+
if (!template) {
|
|
75
|
+
logger.warn(`Template not found: ${templateName}, using default`);
|
|
76
|
+
return this.generateComponent(this.defaultTemplate, options);
|
|
124
77
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
logger.error(`Failed to load template from ${templatePath}:`, error);
|
|
130
|
-
throw error;
|
|
78
|
+
if (template.validate && !template.validate(options)) {
|
|
79
|
+
throw new Error(`Invalid options for template: ${templateName}`);
|
|
80
|
+
}
|
|
81
|
+
return template.generate(options);
|
|
131
82
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
83
|
+
/**
|
|
84
|
+
* Load custom template from file
|
|
85
|
+
*/
|
|
86
|
+
async loadCustomTemplate(templatePath) {
|
|
87
|
+
try {
|
|
88
|
+
const resolvedPath = path.resolve(templatePath);
|
|
89
|
+
if (!(await FileSystem.exists(resolvedPath))) {
|
|
90
|
+
throw new Error(`Template file not found: ${resolvedPath}`);
|
|
91
|
+
}
|
|
92
|
+
const templateContent = await FileSystem.readFile(resolvedPath, 'utf-8');
|
|
93
|
+
// Parse template (assuming it's a JavaScript module)
|
|
94
|
+
const templateName = path.basename(templatePath, path.extname(templatePath));
|
|
95
|
+
// For now, we'll treat it as a simple string template
|
|
96
|
+
this.registerTemplate({
|
|
97
|
+
name: templateName,
|
|
98
|
+
generate: (options) => {
|
|
99
|
+
return this.processStringTemplate(templateContent, options);
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
logger.info(`Custom template loaded: ${templateName}`);
|
|
103
|
+
}
|
|
104
|
+
catch (error) {
|
|
105
|
+
logger.error(`Failed to load template from ${templatePath}:`, error);
|
|
106
|
+
throw error;
|
|
107
|
+
}
|
|
147
108
|
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
109
|
+
/**
|
|
110
|
+
* Get list of available templates
|
|
111
|
+
*/
|
|
112
|
+
getAvailableTemplates() {
|
|
113
|
+
return Array.from(this.templates.keys());
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Set default template
|
|
117
|
+
*/
|
|
118
|
+
setDefaultTemplate(templateName) {
|
|
119
|
+
if (!this.templates.has(templateName)) {
|
|
120
|
+
throw new Error(`Template not found: ${templateName}`);
|
|
121
|
+
}
|
|
122
|
+
this.defaultTemplate = templateName;
|
|
123
|
+
logger.info(`Default template set to: ${templateName}`);
|
|
124
|
+
}
|
|
125
|
+
// ---- Built-in Template Generators ----
|
|
126
|
+
/**
|
|
127
|
+
* Standard React Functional Component
|
|
128
|
+
*/
|
|
129
|
+
generateReactFunctional(options) {
|
|
130
|
+
const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
|
|
131
|
+
return `import React from "react";
|
|
167
132
|
import type { SVGProps } from "react";
|
|
168
133
|
|
|
169
134
|
export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
|
|
@@ -203,21 +168,13 @@ ${componentName}.displayName = "${componentName}";
|
|
|
203
168
|
|
|
204
169
|
export default ${componentName};
|
|
205
170
|
`;
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
componentName,
|
|
214
|
-
svgContent,
|
|
215
|
-
defaultWidth = 24,
|
|
216
|
-
defaultHeight = 24,
|
|
217
|
-
defaultFill = 'currentColor'
|
|
218
|
-
} = options;
|
|
219
|
-
|
|
220
|
-
return `import { forwardRef } from "react";
|
|
171
|
+
}
|
|
172
|
+
/**
|
|
173
|
+
* React Functional Component with forwardRef
|
|
174
|
+
*/
|
|
175
|
+
generateReactForwardRef(options) {
|
|
176
|
+
const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
|
|
177
|
+
return `import { forwardRef } from "react";
|
|
221
178
|
import type { SVGProps } from "react";
|
|
222
179
|
|
|
223
180
|
/**
|
|
@@ -246,21 +203,13 @@ ${componentName}.displayName = "${componentName}";
|
|
|
246
203
|
|
|
247
204
|
export default ${componentName};
|
|
248
205
|
`;
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
componentName,
|
|
257
|
-
svgContent,
|
|
258
|
-
defaultWidth = 24,
|
|
259
|
-
defaultHeight = 24,
|
|
260
|
-
defaultFill = 'currentColor'
|
|
261
|
-
} = options;
|
|
262
|
-
|
|
263
|
-
return `import { Component } from "react";
|
|
206
|
+
}
|
|
207
|
+
/**
|
|
208
|
+
* React Class Component (legacy)
|
|
209
|
+
*/
|
|
210
|
+
generateReactClass(options) {
|
|
211
|
+
const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
|
|
212
|
+
return `import { Component } from "react";
|
|
264
213
|
import type { SVGProps } from "react";
|
|
265
214
|
|
|
266
215
|
/**
|
|
@@ -288,21 +237,13 @@ class ${componentName} extends Component<SVGProps<SVGSVGElement>> {
|
|
|
288
237
|
|
|
289
238
|
export default ${componentName};
|
|
290
239
|
`;
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
componentName,
|
|
299
|
-
svgContent,
|
|
300
|
-
defaultWidth = 24,
|
|
301
|
-
defaultHeight = 24,
|
|
302
|
-
defaultFill = 'currentColor'
|
|
303
|
-
} = options;
|
|
304
|
-
|
|
305
|
-
return `import styled from "styled-components";
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* Styled Components Template
|
|
243
|
+
*/
|
|
244
|
+
generateStyledComponents(options) {
|
|
245
|
+
const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
|
|
246
|
+
return `import styled from "styled-components";
|
|
306
247
|
import type { SVGProps } from "react";
|
|
307
248
|
|
|
308
249
|
/**
|
|
@@ -329,21 +270,13 @@ ${componentName}.displayName = "${componentName}";
|
|
|
329
270
|
|
|
330
271
|
export default ${componentName};
|
|
331
272
|
`;
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
componentName,
|
|
340
|
-
svgContent,
|
|
341
|
-
defaultWidth = 24,
|
|
342
|
-
defaultHeight = 24,
|
|
343
|
-
defaultFill = 'currentColor'
|
|
344
|
-
} = options;
|
|
345
|
-
|
|
346
|
-
return `/**
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* TypeScript Native (no React dependencies)
|
|
276
|
+
*/
|
|
277
|
+
generateTypeScriptNative(options) {
|
|
278
|
+
const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
|
|
279
|
+
return `/**
|
|
347
280
|
* ${componentName} SVG Icon (Native TypeScript)
|
|
348
281
|
* Generated by svger-cli
|
|
349
282
|
*/
|
|
@@ -386,46 +319,31 @@ export function ${componentName}(options: ${componentName}Options = {}): string
|
|
|
386
319
|
|
|
387
320
|
export default ${componentName};
|
|
388
321
|
`;
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
/**
|
|
392
|
-
* Process string template with variable substitution
|
|
393
|
-
*/
|
|
394
|
-
private processStringTemplate(
|
|
395
|
-
template: string,
|
|
396
|
-
options: ComponentGenerationOptions
|
|
397
|
-
): string {
|
|
398
|
-
const variables = {
|
|
399
|
-
...options,
|
|
400
|
-
defaultWidth: options.defaultWidth || 24,
|
|
401
|
-
defaultHeight: options.defaultHeight || 24,
|
|
402
|
-
defaultFill: options.defaultFill || 'currentColor'
|
|
403
|
-
};
|
|
404
|
-
|
|
405
|
-
let processed = template;
|
|
406
|
-
|
|
407
|
-
// Replace variables in the format {{variableName}}
|
|
408
|
-
for (const [key, value] of Object.entries(variables)) {
|
|
409
|
-
const regex = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, 'g');
|
|
410
|
-
processed = processed.replace(regex, String(value));
|
|
411
322
|
}
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
323
|
+
/**
|
|
324
|
+
* Process string template with variable substitution
|
|
325
|
+
*/
|
|
326
|
+
processStringTemplate(template, options) {
|
|
327
|
+
const variables = {
|
|
328
|
+
...options,
|
|
329
|
+
defaultWidth: options.defaultWidth || 24,
|
|
330
|
+
defaultHeight: options.defaultHeight || 24,
|
|
331
|
+
defaultFill: options.defaultFill || 'currentColor'
|
|
332
|
+
};
|
|
333
|
+
let processed = template;
|
|
334
|
+
// Replace variables in the format {{variableName}}
|
|
335
|
+
for (const [key, value] of Object.entries(variables)) {
|
|
336
|
+
const regex = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, 'g');
|
|
337
|
+
processed = processed.replace(regex, String(value));
|
|
338
|
+
}
|
|
339
|
+
return processed;
|
|
340
|
+
}
|
|
341
|
+
/**
|
|
342
|
+
* Enhanced Styled Template with comprehensive styling support
|
|
343
|
+
*/
|
|
344
|
+
generateEnhancedStyled(options) {
|
|
345
|
+
const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
|
|
346
|
+
return `import React from "react";
|
|
429
347
|
import type { SVGProps } from "react";
|
|
430
348
|
|
|
431
349
|
/**
|
|
@@ -612,8 +530,7 @@ ${componentName}.displayName = "${componentName}";
|
|
|
612
530
|
|
|
613
531
|
export default ${componentName};
|
|
614
532
|
`;
|
|
615
|
-
|
|
533
|
+
}
|
|
616
534
|
}
|
|
617
|
-
|
|
618
535
|
// Export singleton instance
|
|
619
|
-
export const templateManager = TemplateManager.getInstance();
|
|
536
|
+
export const templateManager = TemplateManager.getInstance();
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* SVGER-CLI - Zero-Dependency SVG to React Component Generator
|
|
3
|
+
*
|
|
4
|
+
* A high-performance, framework-agnostic SVG processing toolkit with enterprise-grade
|
|
5
|
+
* architecture and comprehensive styling capabilities.
|
|
6
|
+
*
|
|
7
|
+
* @version 2.0.0
|
|
8
|
+
* @author SVGER-CLI Development Team
|
|
9
|
+
* @license MIT
|
|
10
|
+
*/
|
|
11
|
+
/**
|
|
12
|
+
* Logger Service - Professional logging with configurable levels and color formatting
|
|
13
|
+
* Provides: debug, info, warn, error, success methods with timestamp and context
|
|
14
|
+
*/
|
|
15
|
+
export { LoggerService, logger } from './core/logger.js';
|
|
16
|
+
/**
|
|
17
|
+
* Configuration Management Service - Centralized configuration with validation and caching
|
|
18
|
+
* Provides: config loading, validation, defaults, and file-based persistence
|
|
19
|
+
*/
|
|
20
|
+
export { ConfigService, configService } from './services/config.js';
|
|
21
|
+
/**
|
|
22
|
+
* Error Handler - Comprehensive error management with recovery strategies
|
|
23
|
+
* Provides: structured error handling, recovery mechanisms, and user-friendly messages
|
|
24
|
+
*/
|
|
25
|
+
export { SVGErrorHandler, errorHandler, withErrorHandling, handleErrors } from './core/error-handler.js';
|
|
26
|
+
/**
|
|
27
|
+
* SVG Processor - Core SVG content processing and React component generation
|
|
28
|
+
* Provides: SVG parsing, optimization, React component generation, and batch processing
|
|
29
|
+
*/
|
|
30
|
+
export { SVGProcessor, svgProcessor } from './processors/svg-processor.js';
|
|
31
|
+
/**
|
|
32
|
+
* Performance Engine - Advanced optimization for batch processing and parallel execution
|
|
33
|
+
* Provides: batch processing, caching, memory optimization, and performance monitoring
|
|
34
|
+
*/
|
|
35
|
+
export { PerformanceEngine, performanceEngine } from './core/performance-engine.js';
|
|
36
|
+
/**
|
|
37
|
+
* Style Compiler - Comprehensive styling system with responsive design and theming
|
|
38
|
+
* Provides: CSS generation, theme management, responsive values, and style optimization
|
|
39
|
+
*/
|
|
40
|
+
export { SVGStyleCompiler, styleCompiler } from './core/style-compiler.js';
|
|
41
|
+
/**
|
|
42
|
+
* Template Manager - Extensible template system for React component generation
|
|
43
|
+
* Provides: multiple component patterns (functional, class, forwardRef, styled-components)
|
|
44
|
+
*/
|
|
45
|
+
export { TemplateManager, templateManager } from './core/template-manager.js';
|
|
46
|
+
/**
|
|
47
|
+
* Framework Template Engine - Universal template generator supporting multiple UI frameworks
|
|
48
|
+
* Provides: React, Vue, Svelte, Angular, Solid, Preact, Lit, and Vanilla JS components
|
|
49
|
+
*/
|
|
50
|
+
export { FrameworkTemplateEngine, frameworkTemplateEngine, type FrameworkType, type FrameworkOptions } from './core/framework-templates.js';
|
|
51
|
+
/**
|
|
52
|
+
* Plugin Manager - Extensible plugin system for SVG processing enhancements
|
|
53
|
+
* Provides: plugin registration, lifecycle management, and content processing pipeline
|
|
54
|
+
*/
|
|
55
|
+
export { PluginManager, pluginManager } from './core/plugin-manager.js';
|
|
56
|
+
/**
|
|
57
|
+
* Native Node.js Utilities - Zero-dependency replacements for external libraries
|
|
58
|
+
* Provides: file operations, string manipulation, CLI parsing, and file watching
|
|
59
|
+
*/
|
|
60
|
+
export { toPascalCase, FileSystem, CLI, FileWatcher } from './utils/native.js';
|
|
61
|
+
/**
|
|
62
|
+
* File System Lock Functions - Concurrent file operation safety with advisory locking
|
|
63
|
+
* Provides: file locking, unlocking, and lock status checking for safe concurrent access
|
|
64
|
+
*/
|
|
65
|
+
export { lockFiles, unlockFiles, isLocked } from './lock.js';
|
|
66
|
+
/**
|
|
67
|
+
* File System Watcher - Real-time file system monitoring with change detection
|
|
68
|
+
* Provides: directory watching, file change detection, and event-driven processing
|
|
69
|
+
*/
|
|
70
|
+
export { watchSVGs } from './watch.js';
|
|
71
|
+
/**
|
|
72
|
+
* Project Builder - Automated project structure creation and dependency management
|
|
73
|
+
* Provides: project scaffolding, dependency resolution, and build automation
|
|
74
|
+
*/
|
|
75
|
+
export { buildAll, generateSVG } from './builder.js';
|
|
76
|
+
/**
|
|
77
|
+
* Content Cleaner - SVG content optimization and sanitization utilities
|
|
78
|
+
* Provides: SVG cleaning, attribute normalization, and content optimization
|
|
79
|
+
*/
|
|
80
|
+
export { clean } from './clean.js';
|
|
81
|
+
/**
|
|
82
|
+
* TypeScript Type Definitions - Comprehensive type system for all interfaces and configurations
|
|
83
|
+
* Provides: complete type safety for all operations, configurations, and data structures
|
|
84
|
+
*/
|
|
85
|
+
export type { SVGConfig, ComponentGenerationOptions, SVGProcessorResult, ProcessingJob, ProcessingStatus, Plugin, PluginConfig, Template, TemplateConfig, WatchOptions } from './types/index.js';
|
|
86
|
+
/**
|
|
87
|
+
* Error handling types - Available from core error handler
|
|
88
|
+
*/
|
|
89
|
+
export type { SVGError, ErrorRecoveryStrategy } from './core/error-handler.js';
|
|
90
|
+
/**
|
|
91
|
+
* Component Templates - Pre-built component templates for various use cases
|
|
92
|
+
* Provides: functional React component template with TypeScript support
|
|
93
|
+
*/
|
|
94
|
+
export { reactTemplate } from './templates/ComponentTemplate.js';
|
|
95
|
+
import { svgProcessor } from './processors/svg-processor.js';
|
|
96
|
+
import { watchSVGs } from './watch.js';
|
|
97
|
+
import { clean } from './clean.js';
|
|
98
|
+
import { buildAll } from './builder.js';
|
|
99
|
+
/**
|
|
100
|
+
* Quick Start API - Simplified API for common operations
|
|
101
|
+
* High-level functions for typical SVG processing workflows
|
|
102
|
+
*/
|
|
103
|
+
export declare const SVGER: {
|
|
104
|
+
/**
|
|
105
|
+
* Process single SVG file to React component
|
|
106
|
+
*/
|
|
107
|
+
readonly processFile: (svgFilePath: string, outputDir: string, options?: Partial<import("./types/index.js").ComponentGenerationOptions>) => Promise<import("./types/index.js").SVGProcessorResult>;
|
|
108
|
+
/**
|
|
109
|
+
* Process multiple SVG files in batch
|
|
110
|
+
*/
|
|
111
|
+
readonly processBatch: (files: Array<{
|
|
112
|
+
path: string;
|
|
113
|
+
outputDir: string;
|
|
114
|
+
options?: Partial<import("./types/index.js").ComponentGenerationOptions>;
|
|
115
|
+
}>, config?: {
|
|
116
|
+
batchSize?: number;
|
|
117
|
+
parallel?: boolean;
|
|
118
|
+
maxConcurrency?: number;
|
|
119
|
+
}) => Promise<Array<{
|
|
120
|
+
success: boolean;
|
|
121
|
+
filePath: string;
|
|
122
|
+
error?: Error;
|
|
123
|
+
duration: number;
|
|
124
|
+
}>>;
|
|
125
|
+
/**
|
|
126
|
+
* Generate framework-agnostic component
|
|
127
|
+
*/
|
|
128
|
+
readonly generateFrameworkComponent: (componentName: string, svgContent: string, options: import("./types/index.js").ComponentGenerationOptions) => Promise<string>;
|
|
129
|
+
/**
|
|
130
|
+
* Watch directory for changes
|
|
131
|
+
*/
|
|
132
|
+
readonly watch: typeof watchSVGs;
|
|
133
|
+
/**
|
|
134
|
+
* Clean and optimize directory
|
|
135
|
+
*/
|
|
136
|
+
readonly clean: typeof clean;
|
|
137
|
+
/**
|
|
138
|
+
* Build all SVG files in directory
|
|
139
|
+
*/
|
|
140
|
+
readonly build: typeof buildAll;
|
|
141
|
+
};
|
|
142
|
+
/**
|
|
143
|
+
* Package Version Information
|
|
144
|
+
*/
|
|
145
|
+
export declare const VERSION = "2.0.0";
|
|
146
|
+
export declare const PACKAGE_NAME = "svger-cli";
|
|
147
|
+
/**
|
|
148
|
+
* Default export - Primary SVG processor instance for quick access
|
|
149
|
+
* Most common entry point for programmatic usage
|
|
150
|
+
*/
|
|
151
|
+
export default svgProcessor;
|