vk-typescript-cli 1.0.0

package/src/commands/upgrade.js

@@ -0,0 +1,219 @@
+import { rm, readFile } from 'node:fs/promises';
+import path from 'node:path';
+import readline from 'node:readline/promises';
+import { stdin as input, stdout as output } from 'node:process';
+import { logger } from '../utils/logger.js';
+import { requireSyncfusionProject } from '../utils/project-detector.js';
+import { updateSyncfusionConfig } from '../utils/config-generator.js';
+import {
+  addPackagesToJson,
+  getSyncfusionPackages,
+  detectPackageManager,
+  getUpgradeCommand
+} from '../utils/package-manager.js';
+import { runCommand } from '../utils/run-command.js';
+import { pathExists } from '../utils/common.js';
+
+export const DEFAULT_SYNCFUSION_VERSION = '34.2.2';
+
+function normalizeUpgradeVersion(versionArg) {
+  if (!versionArg) return DEFAULT_SYNCFUSION_VERSION;
+
+  const version = String(versionArg)
+    .trim()
+    .replace(/^--/, '')
+    .replace(/^~/, '');
+
+  if (!/^\d{1,2}\.\d\.\d{1,2}(?:[-+][0-9A-Za-z.-]+)?$/.test(version)) {
+    logger.error(`❌ Invalid Syncfusion version: ${versionArg}`);
+    logger.info('Please specify a Main Release or Service Pack (SP) version to install a Syncfusion package.');
+    process.exit(1);
+  }
+
+  return version;
+}
+
+
+function normalizePackageVersion(version) {
+  return String(version || '')
+    .trim()
+    .replace(/^[~^]/, '');
+}
+
+function isSameSyncfusionVersion(currentVersion, targetVersion) {
+  return normalizePackageVersion(currentVersion) === normalizePackageVersion(targetVersion);
+}
+
+function getMajorVersion(version) {
+  const normalizedVersion = normalizePackageVersion(version);
+  const major = Number.parseInt(normalizedVersion.split('.')[0], 10);
+  return Number.isNaN(major) ? null : major;
+}
+
+function hasScssStyling(styling) {
+  if (!styling) return false;
+  if (typeof styling === 'string') {
+    return styling.trim().toLowerCase() === 'scss';
+  }
+  if (Array.isArray(styling)) {
+    return styling.some((item) => hasScssStyling(item));
+  }
+  if (typeof styling === 'object') {
+    return Object.values(styling).some((value) => hasScssStyling(value));
+  }
+
+  return false;
+}
+
+async function getSyncfusionConfig(projectRoot) {
+  const configPath = path.join(projectRoot, 'syncfusion.config.json');
+  if (!(await pathExists(configPath))) {
+    return null;
+  }
+  try {
+    return JSON.parse(await readFile(configPath, 'utf8'));
+  } catch (error) {
+    logger.warning(`⚠️  Unable to read syncfusion.config.json: ${error.message}`);
+    return null;
+  }
+}
+
+async function isScssThemePackageUnsupported(projectRoot, version) {
+  const majorVersion = getMajorVersion(version);
+  if (majorVersion === null || majorVersion >= 34) {
+    return false;
+  }
+  const syncfusionConfig = await getSyncfusionConfig(projectRoot);
+  return hasScssStyling(syncfusionConfig?.styling);
+}
+
+function getPackagesDifferentFromVersion(syncfusionPackages, packageVersion) {
+  return Object.entries(syncfusionPackages)
+    .filter(([, currentVersion]) => !isSameSyncfusionVersion(currentVersion, packageVersion))
+    .map(([name]) => name);
+}
+
+async function askYesNo(question, defaultValue = true) {
+  const suffix = defaultValue ? 'Y/n' : 'y/N';
+  const rl = readline.createInterface({ input, output });
+
+  try {
+    const answer = (await rl.question(`${question} (${suffix}) `)).trim().toLowerCase();
+    if (!answer) return defaultValue;
+    return ['y', 'yes', 'true', '1'].includes(answer);
+  } finally {
+    rl.close();
+  }
+}
+
+function printManualSteps() {
+  logger.info('\nManual steps to reinstall Syncfusion packages:');
+  logger.info('  1. Delete Syncfusion packages from node_modules:');
+  logger.info('  2. Reinstall the updated Syncfusion packages: npm install');
+  logger.info('  3. Start/rebuild your application to verify the upgrade.\n');
+}
+
+async function removeInstalledSyncfusionPackages(projectRoot) {
+  const syncfusionNodeModulesPath = path.join(projectRoot, 'node_modules', '@syncfusion');
+
+  if (await pathExists(syncfusionNodeModulesPath)) {
+    await rm(syncfusionNodeModulesPath, { recursive: true, force: true });
+    logger.success('✅ Deleted node_modules/@syncfusion');
+  } else {
+    logger.info('ℹ️  node_modules/@syncfusion was not found, skipping delete step.');
+  }
+}
+
+/**
+ * `sf upgrade` — upgrade every installed @syncfusion/* package in the current
+ * project to the requested version. The package.json version is written with a
+ * tilde range, e.g. ~34.2.2.
+ */
+export async function upgradeCommand(options = {}) {
+  const project = await requireSyncfusionProject(process.cwd());
+  if (!project) process.exit(1);
+
+  const versionArg = options.version;
+  const hasExplicitVersion = Boolean(versionArg);
+  const version = normalizeUpgradeVersion(versionArg);
+  if (hasExplicitVersion) {
+    logger.info('\nPlease ensure that the entered Syncfusion version is a Main Release or Service Pack (SP) version. The patch release versions may cause issues during the upgrade process.');
+  }
+  if (await isScssThemePackageUnsupported(project.root, version)) {
+    logger.warning(
+      '\n⚠️  SCSS theme not supported in theme package less than 34 version, you can use Component packages for this version SCSS.'
+    );
+    return;
+  }
+
+  const packageVersion = `~${version}`;
+
+  const syncfusionPackages = await getSyncfusionPackages(project.root);
+  const packageNames = Object.keys(syncfusionPackages);
+
+  if (!packageNames.length) {
+    logger.warning('\n⚠️  No @syncfusion/* packages found in package.json.\n');
+    return;
+  }
+
+  const packagesToUpgrade = getPackagesDifferentFromVersion(syncfusionPackages, packageVersion);
+
+  if (!packagesToUpgrade.length) {
+    logger.success(`✅ Syncfusion packages are already updated with latest version ${packageVersion}.`);
+    logger.info('\nPlease specify a Service Pack (SP) or Main Release version to install a different Syncfusion version.');
+    logger.info('Example: sf upgrade 33.1.44');
+    return;
+  }
+
+  if (!hasExplicitVersion) {
+    const shouldUpgradeToLatest = await askYesNo(
+      `\nThe latest Syncfusion packages version is ${version}. Do you want to upgrade?`,
+      true
+    );
+
+    if (!shouldUpgradeToLatest) {
+      logger.warning('\n⚠️  Upgrade cancelled.\n');
+      return;
+    }
+  }
+
+  logger.info(`
+🔄 Upgrading ${packagesToUpgrade.length} Syncfusion package(s) to ${packageVersion}:
+`);
+  packagesToUpgrade.forEach((name) => logger.info(`   • ${name} (${syncfusionPackages[name]} -> ${packageVersion})`));
+
+  const pkgManager = await detectPackageManager(project.root);
+  const { command, args } = getUpgradeCommand(pkgManager, packagesToUpgrade, version);
+
+  try {
+    await addPackagesToJson(
+      project.root,
+      packagesToUpgrade.map((name) => `${name}@${packageVersion}`)
+    );
+    await updateSyncfusionConfig(project.root, { syncfusionVersion: packageVersion });
+
+    let shouldReinstall = options.reinstallSyncfusionPackages;
+    if (typeof shouldReinstall !== 'boolean') {
+      shouldReinstall = await askYesNo(
+        '\nDelete node_modules/@syncfusion packages and reinstall updated packages now?',
+        true
+      );
+    }
+
+    if (!shouldReinstall) {
+      logger.warning('\n⚠️  package.json was updated, but packages were not reinstalled.');
+      printManualSteps();
+      return;
+    }
+
+    await removeInstalledSyncfusionPackages(project.root);
+
+    logger.info(`\n▶ Running: ${command} ${args.join(' ')}\n`);
+    await runCommand(command, args, { cwd: project.root });
+
+    logger.success(`\n✅ Syncfusion packages upgraded successfully to ${packageVersion}!\n`);
+  } catch (error) {
+    logger.error(`❌ Upgrade failed: ${error.message}`);
+    process.exit(1);
+  }
+}

package/src/constants.js

@@ -0,0 +1,161 @@
+export const TEMPLATES = {
+  EMPTY: 'empty',
+  GRID: 'grid',
+  CHART: 'chart',
+  SCHEDULER: 'scheduler',
+  GANTT: 'gantt',
+  FILEMANAGER: 'file-manager',
+  DIAGRAM: 'diagram',
+  RICHTEXTEDITOR: 'rich-text-editor',
+  PDFVIEWER: 'pdf-viewer',
+  DOCXEDITOR: 'docx-editor',
+  SPREADSHEETEDITOR: 'spreadsheet-editor'
+};
+
+export const THEMES = {
+  'FLUENT2': 'fluent2',
+  'BOOTSTRAP5.3': 'bootstrap5.3',
+  'TAILWIND3': 'tailwind3',
+  'MATERIAL3': 'material3'
+};
+
+const COMPONENT_PACKAGES = {
+  grid: {
+    react: ['@syncfusion/ej2-react-grids'],
+    nextjs: ['@syncfusion/ej2-react-grids'],
+    angular: ['@syncfusion/ej2-angular-grids'],
+    vue: ['@syncfusion/ej2-vue-grids'],
+    typescript: ['@syncfusion/ej2-grids']
+  },
+  chart: {
+    react: ['@syncfusion/ej2-react-charts'],
+    nextjs: ['@syncfusion/ej2-react-charts'],
+    angular: ['@syncfusion/ej2-angular-charts'],
+    vue: ['@syncfusion/ej2-vue-charts'],
+    typescript: ['@syncfusion/ej2-charts']
+  },
+  scheduler: {
+    react: ['@syncfusion/ej2-react-schedule'],
+    nextjs: ['@syncfusion/ej2-react-schedule'],
+    angular: ['@syncfusion/ej2-angular-schedule'],
+    vue: ['@syncfusion/ej2-vue-schedule'],
+    typescript: ['@syncfusion/ej2-schedule']
+  },
+  gantt: {
+    react: ['@syncfusion/ej2-react-gantt'],
+    nextjs: ['@syncfusion/ej2-react-gantt'],
+    angular: ['@syncfusion/ej2-angular-gantt'],
+    vue: ['@syncfusion/ej2-vue-gantt'],
+    typescript: ['@syncfusion/ej2-gantt']
+  },
+  'file-manager': {
+    react: ['@syncfusion/ej2-react-filemanager'],
+    nextjs: ['@syncfusion/ej2-react-filemanager'],
+    angular: ['@syncfusion/ej2-angular-filemanager'],
+    vue: ['@syncfusion/ej2-vue-filemanager'],
+    typescript: ['@syncfusion/ej2-filemanager']
+  },
+  diagram: {
+    react: ['@syncfusion/ej2-react-diagrams'],
+    nextjs: ['@syncfusion/ej2-react-diagrams'],
+    angular: ['@syncfusion/ej2-angular-diagrams'],
+    vue: ['@syncfusion/ej2-vue-diagrams'],
+    typescript: ['@syncfusion/ej2-diagrams']
+  },
+  'rich-text-editor': {
+    react: ['@syncfusion/ej2-react-richtexteditor'],
+    nextjs: ['@syncfusion/ej2-react-richtexteditor'],
+    angular: ['@syncfusion/ej2-angular-richtexteditor'],
+    vue: ['@syncfusion/ej2-vue-richtexteditor'],
+    typescript: ['@syncfusion/ej2-richtexteditor']
+  },
+  'pdf-viewer': {
+    react: ['@syncfusion/ej2-react-pdfviewer'],
+    nextjs: ['@syncfusion/ej2-react-pdfviewer'],
+    angular: ['@syncfusion/ej2-angular-pdfviewer'],
+    vue: ['@syncfusion/ej2-vue-pdfviewer'],
+    typescript: ['@syncfusion/ej2-pdfviewer']
+  },
+  'docx-editor': {
+    react: ['@syncfusion/ej2-react-documenteditor'],
+    nextjs: ['@syncfusion/ej2-react-documenteditor'],
+    angular: ['@syncfusion/ej2-angular-documenteditor'],
+    vue: ['@syncfusion/ej2-vue-documenteditor'],
+    typescript: ['@syncfusion/ej2-documenteditor']
+  },
+  'spreadsheet-editor': {
+    react: ['@syncfusion/ej2-react-spreadsheet'],
+    nextjs: ['@syncfusion/ej2-react-spreadsheet'],
+    angular: ['@syncfusion/ej2-angular-spreadsheet'],
+    vue: ['@syncfusion/ej2-vue-spreadsheet'],
+    typescript: ['@syncfusion/ej2-spreadsheet']
+  }
+};
+
+export const TEMPLATE_PACKAGES = {
+  empty: {
+    react: ['react-router@8.3.0'],
+    nextjs: [],
+    angular: [],
+    vue: ['vue-router@^4.0.0'],
+    typescript: ['typescript@^5.0.0', 'vite@^5.0.0']
+  },
+  grid: COMPONENT_PACKAGES.grid,
+  chart: COMPONENT_PACKAGES.chart,
+  scheduler: COMPONENT_PACKAGES.scheduler,
+  gantt: COMPONENT_PACKAGES.gantt,
+  'file-manager': COMPONENT_PACKAGES['file-manager'],
+  diagram: COMPONENT_PACKAGES.diagram,
+  'rich-text-editor': COMPONENT_PACKAGES['rich-text-editor'],
+  'pdf-viewer': COMPONENT_PACKAGES['pdf-viewer'],
+  'docx-editor': COMPONENT_PACKAGES['docx-editor'],
+  'spreadsheet-editor': COMPONENT_PACKAGES['spreadsheet-editor']
+};
+
+export const TEMPLATE_ROUTES = {
+  grid: { label: 'Grid', route: '/grid', file: 'Grid' },
+  chart: { label: 'Chart', route: '/chart', file: 'Chart' },
+  scheduler: { label: 'Scheduler', route: '/scheduler', file: 'Scheduler' },
+  gantt: { label: 'Gantt', route: '/gantt', file: 'Gantt' },
+  'file-manager': { label: 'File Manager', route: '/file-manager', file: 'FileManager' },
+  diagram: { label: 'Diagram', route: '/diagram', file: 'Diagram' },
+  'rich-text-editor': { label: 'Rich Text Editor', route: '/rich-text-editor', file: 'RTE' },
+  'pdf-viewer': { label: 'PDF Viewer', route: '/pdf-viewer', file: 'PDFViewer' },
+  'docx-editor': { label: 'DOCX Editor', route: '/docx-editor', file: 'DOCXEditor' },
+  'spreadsheet-editor': { label: 'Spreadsheet Editor', route: '/spreadsheet-editor', file: 'SpreadsheetEditor' }
+};
+
+// Components that can be added on-demand to an existing project via `sf add <component>`
+export const ADDABLE_COMPONENTS = ['grid', 'chart', 'scheduler', 'gantt', 'file-manager', 'diagram', 'rich-text-editor', 'pdf-viewer', 'docx-editor', 'spreadsheet-editor'];
+
+// -----------------------------------------------------------------------------
+// MCP (Model Context Protocol) server integration
+// -----------------------------------------------------------------------------
+// Per-framework Syncfusion AI-assistant MCP server package.
+export const MCP_ASSISTANT_PACKAGES = {
+  react: '@syncfusion/react-mcp',
+  angular: '@syncfusion/angular-mcp',
+  vue: '@syncfusion/vue-mcp',
+  typescript: '@syncfusion/typescript-mcp'
+};
+
+// Editors supported for MCP configuration generation.
+export const EDITORS = {
+  vscode: { label: 'VS Code', configDir: '.vscode', configFile: 'mcp.json', rootKey: 'servers' },
+  cursor: { label: 'Cursor', configDir: '.cursor', configFile: 'mcp.json', rootKey: 'mcpServers' },
+  codestudio: { label: 'Code Studio', configDir: '.codestudio', configFile: 'mcp.json', rootKey: 'servers' },
+  jetbrains: { label: 'JetBrains (AI Assistant)', configDir: null, configFile: null, rootKey: 'mcpServers' }
+};
+
+// -----------------------------------------------------------------------------
+// Syncfusion component skills (npx skills add ...)
+// -----------------------------------------------------------------------------
+export const SKILLS_PACKAGES = {
+  react: 'syncfusion/react-ui-components-skills',
+  angular: 'syncfusion/angular-ui-components-skills',
+  vue: 'syncfusion/vue-ui-components-skills',
+  typescript: 'syncfusion/typescript-ui-components-skills'
+};
+
+// Valid themes accepted across commands like `syncfusion theme switch`.
+export const VALID_THEMES = ['material3', 'tailwind3', 'bootstrap5.3', 'fluent2'];