vk-typescript-cli 1.0.0

package/license

@@ -0,0 +1,13 @@
+Syncfusion® License
+
+Copyright (c) Syncfusion®, Inc. All rights reserved.
+
+Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
+
+To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions.
+
+If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
+
+You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
+
+The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "vk-typescript-cli",
+  "version": "1.0.0",
+  "description": "CLI for creating Syncfusion starter projects",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "type": "module",
+  "readme": "README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-react-ui-components.git"
+  },
+  "homepage": "https://www.syncfusion.com/react-components",
+  "bin": {
+    "sf": "./bin/sf.js"
+  },
+  "scripts": {
+    "start": "node ./bin/sf.js",
+    "dev": "node ./bin/sf.js",
+    "publish": "gulp syncfusion-cli-publish",
+    "ci-report": "gulp ci-report",
+    "test": "gulp test"
+  },
+  "keywords": [
+    "syncfusion",
+    "ej2",
+    "cli",
+    "react",
+    "vite",
+    "angular",
+    "vue"
+  ],
+  "devDependencies": {
+    "@babel/eslint-parser": "7.29.7",
+    "@eslint/js": "9.39.5",
+    "eslint": "9.39.5",
+    "gulp": "5.0.1",
+    "shelljs": "0.10.0"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  }
+}

package/smoke-test.mjs

@@ -0,0 +1,38 @@
+// Smoke test - verify the typescript framework integration is wired up correctly.
+import { TEMPLATES, TEMPLATE_PACKAGES } from './src/constants.js';
+
+const components = [
+  'grid', 'chart', 'scheduler', 'gantt', 'file-manager',
+  'diagram', 'rich-text-editor', 'pdf-viewer',
+  'docx-editor', 'spreadsheet-editor'
+];
+
+let pass = 0, fail = 0;
+const errors = [];
+
+for (const c of components) {
+  const ts = TEMPLATE_PACKAGES[c]?.typescript;
+  if (!ts || !Array.isArray(ts) || ts.length === 0) {
+    fail++;
+    errors.push(`✗ ${c}: no typescript package mapping`);
+  } else {
+    pass++;
+    console.log(`✓ ${c}: ${ts.join(', ')}`);
+  }
+}
+
+// Verify empty template
+const empty = TEMPLATE_PACKAGES.empty?.typescript;
+if (empty) {
+  console.log(`✓ empty: ${empty.join(', ')}`);
+  pass++;
+} else {
+  fail++;
+  errors.push('✗ empty: no typescript package mapping');
+}
+
+console.log(`\nResults: ${pass} pass, ${fail} fail`);
+if (fail) {
+  console.error(errors.join('\n'));
+  process.exit(1);
+}

package/src/commands/add.js

@@ -0,0 +1,276 @@
+import { mkdir, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { runCommand } from '../utils/run-command.js';
+import { select } from '../../lib/inquirer-prompts.js';
+import { logger } from '../utils/logger.js';
+import { safePrompt } from '../utils/prompt-utils.js';
+import { requireSyncfusionProject } from '../utils/project-detector.js';
+import { updateSyncfusionConfig } from '../utils/config-generator.js';
+import { addPackagesToJson } from '../utils/package-manager.js';
+import { createProjectFolderStructure } from '../utils/folder-structure.js';
+import { ADDABLE_COMPONENTS, TEMPLATE_PACKAGES, TEMPLATE_ROUTES } from '../constants.js';
+import { updateVersions } from '../utils/common.js';
+import { generateGridTemplate } from '../templates/grid-template.js';
+import { generateChartTemplate } from '../templates/chart-template.js';
+import { generateSchedulerTemplate } from '../templates/scheduler-template.js';
+import { generateGanttTemplate } from '../templates/gantt-template.js';
+import { generateFileManagerTemplate } from '../templates/filemanager-template.js';
+import { generateDiagramTemplate } from '../templates/diagram-template.js';
+import { generateRteTemplate } from '../templates/rte-template.js';
+import { generatePDFTemplate } from '../templates/pdfviewer-template.js';
+import { generateDOCXTemplate } from '../templates/docx-template.js';
+import { generateSpreadsheetTemplate } from '../templates/spreadheet-template.js';
+
+import {
+  generateHomePage as generateReactHomePage,
+  generateAppWithRouting as generateReactAppWithRouting
+} from '../generators/react.js';
+
+import {
+  generateAppComponentForRouting as generateAngularAppComponentForRouting,
+  generateAppConfig as generateAngularAppConfig,
+  generateAppRoutes as generateAngularAppRoutes,
+  generateHomeComponentStandalone as generateAngularHomeComponent,
+  generateGlobalStyles as generateAngularGlobalStyles
+} from '../generators/angular.js';
+
+import {
+  generateHomePage as generateVueHomePage,
+  generateAppWithRouting as generateVueAppWithRouting,
+  generateVueRouter
+} from '../generators/vue.js';
+
+import {
+  generateNextJsHomePage,
+  generateNextJsLayout,
+  generateNextJsRoutes,
+  generateNextJsAppPage
+} from '../generators/nextjs.js';
+
+import { addToTypeScript } from '../generators/typescript.js';
+
+const TEMPLATE_GENERATORS = {
+  grid: generateGridTemplate,
+  chart: generateChartTemplate,
+  scheduler: generateSchedulerTemplate,
+  gantt: generateGanttTemplate,
+  'file-manager': generateFileManagerTemplate,
+  diagram: generateDiagramTemplate,
+  'rich-text-editor': generateRteTemplate,
+  'pdf-viewer': generatePDFTemplate,
+  'docx-editor': generateDOCXTemplate,
+  'spreadsheet-editor': generateSpreadsheetTemplate
+};
+
+function componentLabel(key) {
+  return TEMPLATE_ROUTES[key]?.label || key;
+}
+
+async function promptForSyncfusionCleanInstall() {
+  const answer = await safePrompt(select, {
+    message: 'This project already has Syncfusion components. Do you want to delete node_modules/@syncfusion and package-lock.json, then install packages again?',
+    choices: [
+      { name: 'Yes', value: true },
+      { name: 'No', value: false }
+    ]
+  });
+
+  return answer === true;
+}
+
+async function cleanSyncfusionPackages(root) {
+  logger.info('\n🧹 Cleaning node_modules/@syncfusion and package-lock.json...');
+  await rm(path.join(root, 'node_modules', '@syncfusion'), { recursive: true, force: true });
+  await rm(path.join(root, 'package-lock.json'), { force: true });
+}
+
+/**
+ * `sf add <component>` — adds a Grid/Chart/Scheduler/Gantt/File Manager/Diagram/Rich Text Editor/PDF Viewer/DOCX Editor/Spreadsheet Editor
+ * sample into the current project, converting an "empty" project into a
+ * routed one on first use, or extending the existing routing on subsequent
+ * calls. Auto-detects framework/type/styling/theme from syncfusion.config.json
+ * (falling back to package.json / tsconfig.json heuristics).
+ */
+export async function addComponentCommand(componentArg) {
+  let component = (componentArg || '').toLowerCase();
+
+  const project = await requireSyncfusionProject(process.cwd());
+  if (!project) {
+    process.exit(1);
+  }
+
+  if (!component) {
+    const selected = await safePrompt(select, {
+      message: 'Which component do you want to add?',
+      choices: ADDABLE_COMPONENTS.map((c) => ({ name: componentLabel(c), value: c }))
+    });
+    if (!selected) {
+      logger.warning('\n⚠️  Cancelled.\n');
+      return;
+    }
+    component = selected;
+  }
+
+  if (!ADDABLE_COMPONENTS.includes(component)) {
+    logger.error(`❌ Unknown component: ${component}`);
+    logger.info(`   Supported components: ${ADDABLE_COMPONENTS.join(', ')}`);
+    process.exit(1);
+  }
+
+  const { root, framework, type, styling = 'css', theme = 'material3', buildTool } = project;
+  const isTypeScript = type === 'ts' || framework === 'typescript';
+  const existingComponents = project.components || [];
+
+  if (existingComponents.includes(component)) {
+    logger.warning(`\n⚠️  "${componentLabel(component)}" is already part of this project (src/components).`);
+    logger.info('   Nothing to do.\n');
+    return;
+  }
+
+  const wasEmpty = existingComponents.length === 0;
+  const updatedComponents = [...existingComponents, component];
+
+  logger.info(`🚀 Adding ${componentLabel(component)} to the project...\n`);
+
+  // Install packages required for this component (Syncfusion packages + router if applicable).
+  const packageFrameworkKey = framework === 'typescript'
+    ? 'typescript'
+    : (framework === 'react' ? (buildTool === 'nextjs' ? 'nextjs' : 'react') : framework);
+  const packages = TEMPLATE_PACKAGES[component]?.[packageFrameworkKey] || [];
+  if (packages.length) {
+    const versionedPackages = await updateVersions(root, packages);
+    if (wasEmpty) {
+      logger.info(`📦 Installing ${packages.join(', ')}...`);
+      await installPackages(root, versionedPackages);
+    } else {
+      const shouldCleanInstall = await promptForSyncfusionCleanInstall();
+      if (shouldCleanInstall) {
+        await cleanSyncfusionPackages(root);
+        logger.info(`📦 Installing ${versionedPackages}...`);
+        await installPackages(root, versionedPackages);
+      } else {
+        await addPackagesToJson(root, versionedPackages);
+        logger.warning(`\n⚠️  ${componentLabel(component)} component and dependencies added to package.json.`);
+        logger.warning('   Please delete node_modules and run npm install to update the installed packages.\n');
+      }
+    }
+  }
+
+  try {
+    if (framework === 'angular') {
+      await addToAngular(root, styling, updatedComponents, wasEmpty, theme);
+    } else if (framework === 'vue') {
+      await addToVue(root, isTypeScript, styling, theme, updatedComponents, wasEmpty);
+    } else if (framework === 'typescript') {
+      await addToTypeScript(root, isTypeScript, theme, updatedComponents, wasEmpty);
+    } else if (buildTool === 'nextjs') {
+      await addToNextJs(root, isTypeScript, styling, theme, updatedComponents, wasEmpty);
+    } else {
+      await addToReact(root, isTypeScript, styling, theme, updatedComponents, wasEmpty);
+    }
+
+    // Generate the component's own template files (Grid.tsx, grid.component.ts, etc.)
+    const generatorFrameworkKey = framework === 'angular'
+      ? 'angular'
+      : framework === 'vue'
+        ? 'vue'
+        : framework === 'typescript'
+          ? 'typescript'
+          : 'react';
+    await TEMPLATE_GENERATORS[component](root, generatorFrameworkKey, isTypeScript);
+
+    try {
+      await updateSyncfusionConfig(root, {
+        template: updatedComponents.length === 1 ? updatedComponents[0] : 'multi',
+        components: updatedComponents
+      });
+    } catch (error) {
+      logger.warning(
+        `⚠️ Failed to update syncfusion.config.json: ${error.message}`
+      );
+    }
+
+    logger.success(`\n✅ ${componentLabel(component)} added successfully!`);
+  } catch (error) {
+    logger.error(`❌ Failed to add ${component}: ${error.message}`);
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+async function addToReact(root, isTypeScript, styling, theme, updatedComponents, wasEmpty) {
+
+  if (wasEmpty) {
+    await createProjectFolderStructure(root, 'with-components');
+    await addPackagesToJson(root, ['react-router@8.3.0']);
+    await generateReactHomePage(root, isTypeScript, theme, styling);
+  }
+  await generateReactHomePage(root, isTypeScript, theme, styling, updatedComponents);
+  await generateReactAppWithRouting(root, isTypeScript, updatedComponents, styling);
+}
+
+async function addToVue(root, isTypeScript, styling, theme, updatedComponents, wasEmpty) {
+  if (wasEmpty) {
+    await addPackagesToJson(root, ['vue-router@^4.3.0']);
+    await mkdir(path.join(root, 'src', 'views'), { recursive: true });
+    await mkdir(path.join(root, 'src', 'components'), { recursive: true });
+    await mkdir(path.join(root, 'src', 'router'), { recursive: true });
+    await rm(path.join(root, 'src', 'Home.vue'), { force: true });
+    // Rewrite main.js/ts to use the router.
+    const mainFileName = isTypeScript ? 'main.ts' : 'main.js';
+    const mainFilePath = path.join(root, 'src', mainFileName);
+    const styleFileName = styling === 'scss' ? 'style.scss' : 'style.css';
+    const mainContent = `import './${styleFileName}'
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router/index'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+`;
+    await writeFile(mainFilePath, mainContent);
+  }
+
+  await generateVueHomePage(root, isTypeScript, theme, styling, updatedComponents);
+  await generateVueAppWithRouting(root, isTypeScript, updatedComponents, styling);
+  await generateVueRouter(root, isTypeScript, updatedComponents);
+}
+
+async function addToAngular(root, styling, updatedComponents, wasEmpty, theme) {
+  if (wasEmpty) {
+    await createProjectFolderStructure(root, 'with-components');
+    await generateAngularAppConfig(root);
+  }
+
+  await generateAngularHomeComponent(root, styling, updatedComponents);
+  await generateAngularAppComponentForRouting(root, styling, updatedComponents);
+  await generateAngularAppRoutes(root, updatedComponents);
+
+  if (wasEmpty) {
+    await generateAngularGlobalStyles(root, theme, styling);
+  }
+}
+
+async function addToNextJs(root, isTypeScript, styling, theme, updatedComponents, wasEmpty) {
+  const ext = isTypeScript ? '.tsx' : '.js';
+
+  if (wasEmpty) {
+    await createProjectFolderStructure(root, 'with-components');
+    await rm(path.join(root, 'src', 'app', `Home${ext}`), { force: true });
+    await generateNextJsHomePage(root, isTypeScript, theme, styling);
+    await generateNextJsAppPage(root, isTypeScript);
+  }
+
+  await generateNextJsHomePage(root, isTypeScript, theme, styling, updatedComponents);
+  await generateNextJsLayout(root, isTypeScript, theme, updatedComponents, styling);
+  await generateNextJsRoutes(root, isTypeScript, updatedComponents);
+}
+
+async function installPackages(root, packages) {
+  if (!packages.length) {
+    return;
+  }
+
+  await runCommand('npm', ['install', ...packages], { cwd: root });
+}

package/src/commands/info.js

@@ -0,0 +1,82 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+import { detectProject } from '../utils/project-detector.js';
+import { getSyncfusionPackages } from '../utils/package-manager.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const execFileAsync = promisify(execFile);
+
+async function getCliVersion() {
+  try {
+    const pkg = JSON.parse(await readFile(path.join(__dirname, '..', '..', 'package.json'), 'utf8'));
+    return pkg.version;
+  } catch {
+    return 'unknown';
+  }
+}
+
+async function getNpmVersion() {
+  const commands = process.platform === 'win32'
+    ? [
+      ['cmd.exe', ['/d', '/s', '/c', 'npm --version']]
+    ]
+    : [
+      ['npm', ['--version']]
+    ];
+
+  for (const [command, args] of commands) {
+    try {
+      const { stdout } = await execFileAsync(command, args);
+      const version = stdout.trim();
+      if (version) {
+        return version;
+      }
+    } catch (error) {
+      console.warn(`Failed to run command "${command}":`, error.message);
+    }
+  }
+
+  return 'not found';
+}
+
+/**
+ * `sf info` — print environment + current project information.
+ */
+export async function infoCommand() {
+  const cliVersion = await getCliVersion();
+  const npmVersion = await getNpmVersion();
+
+  console.log('\n💻 Environment\n');
+  console.log(`  Syncfusion CLI   : v${cliVersion}`);
+  console.log(`  Node.js          : ${process.version}`);
+  console.log(`  npm              : v${npmVersion}`);
+
+  const project = await detectProject(process.cwd());
+
+  console.log('\n📁 Project\n');
+  if (!project || !project.framework) {
+    console.log('  No Syncfusion project detected in the current directory.\n');
+    return;
+  }
+
+  console.log(`  Name             : ${project.appName}`);
+  console.log(`  Framework        : ${project.framework}${project.buildTool ? ` (${project.buildTool})` : ''}`);
+  console.log(`  Type             : ${project.type}`);
+  console.log(`  Theme            : ${project.theme}`);
+  console.log(`  Styling          : ${project.styling}`);
+  console.log(`  Template         : ${project.template}`);
+  console.log(`  Components       : ${(project.components || []).join(', ') || 'none (empty template)'}`);
+  console.log(`  Config source    : ${project.fromConfig ? 'syncfusion.config.json' : 'auto-detected (no config file)'}`);
+
+  const syncfusionPackages = await getSyncfusionPackages(project.root);
+  const pkgEntries = Object.entries(syncfusionPackages);
+  console.log(`\n📦 @syncfusion packages (${pkgEntries.length})\n`);
+  pkgEntries.slice(0, 15).forEach(([name, version]) => console.log(`  ${name.padEnd(45)} ${version}`));
+  if (pkgEntries.length > 15) {
+    console.log(`  ...and ${pkgEntries.length - 15} more`);
+  }
+  console.log('');
+}