vk-typescript-cli 1.0.0

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.
Files changed (119) hide show
  1. package/Jenkinsfile +48 -0
  2. package/README.md +300 -0
  3. package/bin/sf.js +438 -0
  4. package/eslint.config.js +90 -0
  5. package/gulpfile.js +157 -0
  6. package/lib/commander.js +3370 -0
  7. package/lib/inquirer-prompts.js +2038 -0
  8. package/license +13 -0
  9. package/package.json +43 -0
  10. package/smoke-test.mjs +38 -0
  11. package/src/commands/add.js +276 -0
  12. package/src/commands/info.js +82 -0
  13. package/src/commands/interactive.js +493 -0
  14. package/src/commands/mcp.js +135 -0
  15. package/src/commands/new.js +264 -0
  16. package/src/commands/skills.js +42 -0
  17. package/src/commands/theme.js +200 -0
  18. package/src/commands/upgrade.js +219 -0
  19. package/src/constants.js +161 -0
  20. package/src/generators/angular.js +878 -0
  21. package/src/generators/nextjs.js +817 -0
  22. package/src/generators/react.js +769 -0
  23. package/src/generators/typescript.js +258 -0
  24. package/src/generators/vue.js +800 -0
  25. package/src/templates/angular/chart.component.html +23 -0
  26. package/src/templates/angular/chart.component.ts +172 -0
  27. package/src/templates/angular/diagram.component.html +13 -0
  28. package/src/templates/angular/diagram.component.ts +224 -0
  29. package/src/templates/angular/docx-editor.component.html +18 -0
  30. package/src/templates/angular/docx-editor.component.ts +37 -0
  31. package/src/templates/angular/filemanager.component.html +4 -0
  32. package/src/templates/angular/filemanager.component.ts +47 -0
  33. package/src/templates/angular/gantt.component.html +32 -0
  34. package/src/templates/angular/gantt.component.ts +95 -0
  35. package/src/templates/angular/grid.component.html +12 -0
  36. package/src/templates/angular/grid.component.ts +58 -0
  37. package/src/templates/angular/pdf-viewer.component.html +9 -0
  38. package/src/templates/angular/pdf-viewer.component.ts +48 -0
  39. package/src/templates/angular/rte.component.html +7 -0
  40. package/src/templates/angular/rte.component.ts +13 -0
  41. package/src/templates/angular/scheduler.component.html +17 -0
  42. package/src/templates/angular/scheduler.component.ts +75 -0
  43. package/src/templates/angular/spreadsheet-editor.component.html +42 -0
  44. package/src/templates/angular/spreadsheet-editor.component.ts +61 -0
  45. package/src/templates/chart-template.js +20 -0
  46. package/src/templates/diagram-template.js +26 -0
  47. package/src/templates/docx-template.js +20 -0
  48. package/src/templates/filemanager-template.js +20 -0
  49. package/src/templates/gantt-template.js +20 -0
  50. package/src/templates/grid-template.js +20 -0
  51. package/src/templates/pdfviewer-template.js +20 -0
  52. package/src/templates/react/Chart.jsx +81 -0
  53. package/src/templates/react/Chart.tsx +81 -0
  54. package/src/templates/react/DOCXEditor.jsx +37 -0
  55. package/src/templates/react/DOCXEditor.tsx +37 -0
  56. package/src/templates/react/Diagram.jsx +192 -0
  57. package/src/templates/react/Diagram.tsx +195 -0
  58. package/src/templates/react/FileManager.jsx +13 -0
  59. package/src/templates/react/FileManager.tsx +13 -0
  60. package/src/templates/react/Gantt.jsx +89 -0
  61. package/src/templates/react/Gantt.tsx +89 -0
  62. package/src/templates/react/Grid.jsx +45 -0
  63. package/src/templates/react/Grid.tsx +45 -0
  64. package/src/templates/react/PDFViewer.jsx +16 -0
  65. package/src/templates/react/PDFViewer.tsx +16 -0
  66. package/src/templates/react/RTE.jsx +14 -0
  67. package/src/templates/react/RTE.tsx +14 -0
  68. package/src/templates/react/Scheduler.jsx +55 -0
  69. package/src/templates/react/Scheduler.tsx +55 -0
  70. package/src/templates/react/SpreadsheetEditor.jsx +96 -0
  71. package/src/templates/react/SpreadsheetEditor.tsx +98 -0
  72. package/src/templates/rte-template.js +26 -0
  73. package/src/templates/scheduler-template.js +20 -0
  74. package/src/templates/spreadheet-template.js +20 -0
  75. package/src/templates/typescript/RTE.ts +33 -0
  76. package/src/templates/typescript/SpreadsheetEditor.ts +39 -0
  77. package/src/templates/typescript/chart.ts +37 -0
  78. package/src/templates/typescript/diagram.ts +30 -0
  79. package/src/templates/typescript/docxeditor.ts +30 -0
  80. package/src/templates/typescript/filemanager.ts +41 -0
  81. package/src/templates/typescript/gantt.ts +88 -0
  82. package/src/templates/typescript/grid.ts +30 -0
  83. package/src/templates/typescript/pdfviewer.ts +8 -0
  84. package/src/templates/typescript/scheduler.ts +39 -0
  85. package/src/templates/vue/Chart.vue +257 -0
  86. package/src/templates/vue/ChartView.vue +7 -0
  87. package/src/templates/vue/DOCXEditor.vue +61 -0
  88. package/src/templates/vue/DOCXEditorView.vue +7 -0
  89. package/src/templates/vue/Diagram.vue +245 -0
  90. package/src/templates/vue/DiagramView.vue +7 -0
  91. package/src/templates/vue/FileManager.vue +58 -0
  92. package/src/templates/vue/FileManagerView.vue +7 -0
  93. package/src/templates/vue/Gantt.vue +129 -0
  94. package/src/templates/vue/GanttView.vue +7 -0
  95. package/src/templates/vue/Grid.vue +141 -0
  96. package/src/templates/vue/GridView.vue +7 -0
  97. package/src/templates/vue/PDFViewer.vue +58 -0
  98. package/src/templates/vue/PDFViewerView.vue +7 -0
  99. package/src/templates/vue/RTE.vue +27 -0
  100. package/src/templates/vue/RTEView.vue +7 -0
  101. package/src/templates/vue/Scheduler.vue +94 -0
  102. package/src/templates/vue/SchedulerView.vue +7 -0
  103. package/src/templates/vue/SpreadsheetEditor.vue +115 -0
  104. package/src/templates/vue/SpreadsheetEditorView.vue +7 -0
  105. package/src/utils/ansi-colors.js +38 -0
  106. package/src/utils/banner.js +179 -0
  107. package/src/utils/common.js +64 -0
  108. package/src/utils/config-generator.js +73 -0
  109. package/src/utils/folder-structure.js +26 -0
  110. package/src/utils/logger.js +19 -0
  111. package/src/utils/mcp-generator.js +122 -0
  112. package/src/utils/package-manager.js +128 -0
  113. package/src/utils/project-bootstrap.js +98 -0
  114. package/src/utils/project-detector.js +195 -0
  115. package/src/utils/prompt-utils.js +29 -0
  116. package/src/utils/run-command.js +110 -0
  117. package/src/utils/skills-installer.js +69 -0
  118. package/src/utils/template-file.js +35 -0
  119. package/src/utils/theme-loader.js +47 -0
package/src/generators/typescript.js ADDED
@@ -0,0 +1,258 @@
1
+ import path from 'node:path';
2
+ import { mkdir, rm, writeFile } from 'node:fs/promises';
3
+ import { runCommand } from '../utils/run-command.js';
4
+ import { logger } from '../utils/logger.js';
5
+ import {
6
+ createProjectFolderStructure
7
+ } from '../utils/folder-structure.js';
8
+ import { getThemePackages, generateMainThemeImportStatement } from '../utils/theme-loader.js';
9
+ import { addPackagesToJson } from '../utils/package-manager.js';
10
+ import { generateGridTemplate } from '../templates/grid-template.js';
11
+ import { generateChartTemplate } from '../templates/chart-template.js';
12
+ import { generateSchedulerTemplate } from '../templates/scheduler-template.js';
13
+ import { generateGanttTemplate } from '../templates/gantt-template.js';
14
+ import { generateFileManagerTemplate } from '../templates/filemanager-template.js';
15
+ import { generateDiagramTemplate } from '../templates/diagram-template.js';
16
+ import { generateRteTemplate } from '../templates/rte-template.js';
17
+ import { generatePDFTemplate } from '../templates/pdfviewer-template.js';
18
+ import { generateDOCXTemplate } from '../templates/docx-template.js';
19
+ import { generateSpreadsheetTemplate } from '../templates/spreadheet-template.js';
20
+ import { TEMPLATES } from '../constants.js';
21
+ import { generateSyncfusionConfig } from '../utils/config-generator.js';
22
+ import { addTemplatePackages } from '../utils/common.js';
23
+
24
+ const TYPESCRIPT_INDEX_HTML = (componentName) => `<!DOCTYPE html>
25
+ <html lang="en">
26
+ <head>
27
+ <meta charset="UTF-8" />
28
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
29
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
30
+ <title>Syncfusion TypeScript App</title>
31
+ </head>
32
+ <body>
33
+ <div id="${componentName}"></div>
34
+ <script type="module" src="/src/main.ts"></script>
35
+ </body>
36
+ </html>
37
+ `;
38
+
39
+ const TYPESCRIPT_MAIN = (theme) => `import "./style.css";
40
+ import "@syncfusion/ej2-base/styles/${theme}.css";
41
+ import { Grid, Page, Sort, Filter, Edit, Toolbar, Inject } from '@syncfusion/ej2-grids';
42
+
43
+ // Defines the data to be displayed in the Data Grid.
44
+ const data: object[] = [
45
+ { OrderID: 10248, CustomerName: 'Ana Trujillo', OrderDate: new Date(2025, 0, 12), ShipCountry: 'France', Freight: 32.38 },
46
+ { OrderID: 10249, CustomerName: 'Martin Sommer', OrderDate: new Date(2025, 0, 15), ShipCountry: 'Germany', Freight: 11.61 },
47
+ { OrderID: 10250, CustomerName: 'Thomas Hardy', OrderDate: new Date(2025, 1, 5), ShipCountry: 'Brazil', Freight: 65.83 },
48
+ { OrderID: 10251, CustomerName: 'Elizabeth Lincoln', OrderDate: new Date(2025, 1, 18), ShipCountry: 'France', Freight: 41.34 },
49
+ { OrderID: 10252, CustomerName: 'Victoria Ashworth', OrderDate: new Date(2025, 2, 10), ShipCountry: 'Belgium', Freight: 51.30 },
50
+ { OrderID: 10253, CustomerName: 'Martine Rance', OrderDate: new Date(2025, 2, 22), ShipCountry: 'Brazil', Freight: 58.17 },
51
+ ];
52
+
53
+ let grid: Grid = new Grid({
54
+ dataSource: data,
55
+ allowPaging: true,
56
+ allowSorting: true,
57
+ allowFiltering: true,
58
+ pageSettings: { pageSize: 5 },
59
+ toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
60
+ editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
61
+ columns: [
62
+ { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', type: 'number', isPrimaryKey: true },
63
+ { field: 'CustomerName', headerText: 'Customer Name', width: 140, type: 'string' },
64
+ { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd', textAlign: 'Right' },
65
+ { field: 'Freight', headerText: 'Freight', width: 120, textAlign: 'Right', format: 'C' },
66
+ { field: 'ShipCountry', headerText: 'Ship Country', width: 140, type: 'string' },
67
+ ]
68
+ });
69
+
70
+ grid.appendTo('#Grid');
71
+ `;
72
+
73
+ const TYPESCRIPT_STYLE = `html, body {
74
+ width: 100%;
75
+ height: 100%;
76
+ margin: 0;
77
+ padding: 0;
78
+ font-family: 'Hanken Grotesk', sans-serif;
79
+ }
80
+
81
+ #app {
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ min-height: 100vh;
86
+ padding: 20px;
87
+ box-sizing: border-box;
88
+ }
89
+ `;
90
+
91
+ const TYPESCRIPT_MAIN_FOR_TEMPLATE = (componentName, theme) => {
92
+ // The actual per-component main.ts is provided by the template files
93
+ // themselves (Grid.ts, Chart.ts, etc.). We only need to make sure the
94
+ // matching import is present in main.ts and that the index.html container
95
+ // is wired up correctly.
96
+ return `import "./style.css";
97
+ import "@syncfusion/ej2-base/styles/${theme}.css";
98
+ import "./components/${componentName}";
99
+ `;
100
+ };
101
+
102
+ /**
103
+ * Create a new Vite + TypeScript project for the vanilla Syncfusion EJ2
104
+ * platform. This is the "typescript" framework option in `sf new`.
105
+ */
106
+ export async function createTypeScriptProject(appName, appPath, options) {
107
+ // Scaffold a fresh Vite TypeScript project.
108
+ await runCommand('npm', [
109
+ 'create',
110
+ 'vite@latest',
111
+ appName,
112
+ '--',
113
+ '--template',
114
+ 'vanilla-ts',
115
+ '--no-interactive'
116
+ ]);
117
+
118
+ // Clean up the default Vite assets.
119
+ const counterJs = path.join(appPath, 'src', 'counter.ts');
120
+ const publicVite = path.join(appPath, 'public', 'vite.svg');
121
+ await rm(counterJs, { force: true });
122
+ await rm(publicVite, { force: true });
123
+
124
+ // Add base TypeScript/Vite type packages (always needed for the platform).
125
+ await addPackagesToJson(appPath, [
126
+ 'vite@^5.0.0',
127
+ 'typescript@^5.0.0'
128
+ ]);
129
+
130
+ const selectedTemplate = options.template || TEMPLATES.EMPTY;
131
+ const theme = options.theme || 'material3';
132
+ const themePackageInfo = await getThemePackages(theme);
133
+
134
+ if (options.styling === 'scss') {
135
+ await addPackagesToJson(appPath, ['sass']);
136
+ }
137
+
138
+ // Always add the theme base package and base EJ2 styles.
139
+ await addPackagesToJson(appPath, [themePackageInfo.base]);
140
+ await addPackagesToJson(appPath, ['@syncfusion/ej2-base']);
141
+
142
+ // Create the standard project folder structure (src/components).
143
+ await createProjectFolderStructure(appPath, 'with-components');
144
+
145
+ // Compute the target component file (e.g. "Grid", "Chart") so the index.html
146
+ // container ID matches the template's appendTo() call.
147
+ const TEMPLATE_COMPONENT_FILE = {
148
+ grid: 'Grid',
149
+ chart: 'Chart',
150
+ scheduler: 'Scheduler',
151
+ gantt: 'Gantt',
152
+ 'file-manager': 'FileManager',
153
+ diagram: 'Diagram',
154
+ 'rich-text-editor': 'RTE',
155
+ 'pdf-viewer': 'PDFViewer',
156
+ 'docx-editor': 'DOCXEditor',
157
+ 'spreadsheet-editor': 'SpreadsheetEditor'
158
+ };
159
+
160
+ // Add the per-template component packages.
161
+ await addTemplatePackages(appPath, selectedTemplate, 'typescript');
162
+
163
+ // Replace index.html with our Syncfusion version.
164
+ const componentFile = TEMPLATE_COMPONENT_FILE[selectedTemplate] || 'Grid';
165
+ const indexHtmlPath = path.join(appPath, 'index.html');
166
+ await writeFile(indexHtmlPath, TYPESCRIPT_INDEX_HTML(componentFile));
167
+
168
+ // Write the styles file (CSS or SCSS).
169
+ const styleExt = options.styling === 'scss' ? 'scss' : 'css';
170
+ const stylePath = path.join(appPath, 'src', `style.${styleExt}`);
171
+ await writeFile(stylePath, TYPESCRIPT_STYLE);
172
+
173
+ // Write main.ts depending on the selected template.
174
+ const mainPath = path.join(appPath, 'src', 'main.ts');
175
+ if (selectedTemplate === TEMPLATES.EMPTY) {
176
+ await writeFile(mainPath, TYPESCRIPT_MAIN(theme));
177
+ } else {
178
+ await writeFile(mainPath, TYPESCRIPT_MAIN_FOR_TEMPLATE(componentFile, theme));
179
+
180
+ // Generate the component file from the typescript templates folder.
181
+ switch (selectedTemplate) {
182
+ case TEMPLATES.GRID:
183
+ await generateGridTemplate(appPath, 'typescript', true);
184
+ break;
185
+ case TEMPLATES.CHART:
186
+ await generateChartTemplate(appPath, 'typescript', true);
187
+ break;
188
+ case TEMPLATES.SCHEDULER:
189
+ await generateSchedulerTemplate(appPath, 'typescript', true);
190
+ break;
191
+ case TEMPLATES.GANTT:
192
+ await generateGanttTemplate(appPath, 'typescript', true);
193
+ break;
194
+ case TEMPLATES.FILEMANAGER:
195
+ await generateFileManagerTemplate(appPath, 'typescript', true);
196
+ break;
197
+ case TEMPLATES.DIAGRAM:
198
+ await generateDiagramTemplate(appPath, 'typescript', true);
199
+ break;
200
+ case TEMPLATES.RICHTEXTEDITOR:
201
+ await generateRteTemplate(appPath, 'typescript', true);
202
+ break;
203
+ case TEMPLATES.PDFVIEWER:
204
+ await generatePDFTemplate(appPath, 'typescript', true);
205
+ break;
206
+ case TEMPLATES.DOCXEDITOR:
207
+ await generateDOCXTemplate(appPath, 'typescript', true);
208
+ break;
209
+ case TEMPLATES.SPREADSHEETEDITOR:
210
+ await generateSpreadsheetTemplate(appPath, 'typescript', true);
211
+ break;
212
+ }
213
+ }
214
+
215
+ // Generate syncfusion.config.json for the project.
216
+ try {
217
+ await generateSyncfusionConfig(appPath, {
218
+ ...options,
219
+ framework: 'typescript',
220
+ type: 'typescript',
221
+ buildTool: null
222
+ });
223
+ } catch {
224
+ logger.warning('Syncfusion config generation skipped');
225
+ }
226
+ }
227
+
228
+ /**
229
+ * Add a component sample to an existing TypeScript project.
230
+ * Mirrors the behavior of `addToReact/Vue/Angular` in add.js.
231
+ */
232
+ export async function addToTypeScript(root, isTypeScript, theme, updatedComponents, wasEmpty) {
233
+ // Make sure src/components exists.
234
+ await mkdir(path.join(root, 'src', 'components'), { recursive: true });
235
+
236
+ // Re-write main.ts to import the new component (and theme if needed).
237
+ const mainPath = path.join(root, 'src', 'main.ts');
238
+ const componentFile = updatedComponents[updatedComponents.length - 1];
239
+ const TEMPLATE_COMPONENT_FILE = {
240
+ grid: 'Grid',
241
+ chart: 'Chart',
242
+ scheduler: 'Scheduler',
243
+ gantt: 'Gantt',
244
+ 'file-manager': 'FileManager',
245
+ diagram: 'Diagram',
246
+ 'rich-text-editor': 'RTE',
247
+ 'pdf-viewer': 'PDFViewer',
248
+ 'docx-editor': 'DOCXEditor',
249
+ 'spreadsheet-editor': 'SpreadsheetEditor'
250
+ };
251
+ const fileName = TEMPLATE_COMPONENT_FILE[componentFile] || 'Grid';
252
+
253
+ const mainContent = `import "./style.css";
254
+ import "@syncfusion/ej2-base/styles/${theme}.css";
255
+ ${updatedComponents.map((c) => `import "./components/${TEMPLATE_COMPONENT_FILE[c] || c}";`).join('\n')}
256
+ `;
257
+ await writeFile(mainPath, mainContent);
258
+ }