Fix migration tool dependencies and small refactor

Author: ajivanyandev

packages/devextreme-cli/src/applications/application.angular.js

@@ -53,24 +53,48 @@ async function runNgCommand(commandArguments, commandOptions, commandConfig) {
 }
 
 function localPackageExists(packageName) {
-    // Check local node_modules first
     const nodeModulesPath = path.join(process.cwd(), 'node_modules');
     if(fs.existsSync(nodeModulesPath)) {
         const packageJsonPath = path.join(nodeModulesPath, packageName, 'package.json');
         if(fs.existsSync(packageJsonPath)) {
             return true;
         }
     }
+    return false;
+}
+
+function getLocalCollectionPath(packageName) {
+    const nodeModulesPath = path.join(process.cwd(), 'node_modules', packageName, 'src', 'collection.json');
+    if(fs.existsSync(nodeModulesPath)) {
+        return nodeModulesPath;
+    }
+    return null;
+}
+
+function getCollectionPath(packageName) {
+    const localPath = getLocalCollectionPath(packageName);
+    if(localPath) {
+        return localPath;
+    }
 
-    // Check if globally installed by trying to resolve the package
     try {
-        require.resolve(`${packageName}/package.json`);
+        const packageJsonPath = require.resolve(`${packageName}/package.json`);
+        const collectionPath = path.join(path.dirname(packageJsonPath), 'src', 'collection.json');
+        if(fs.existsSync(collectionPath)) {
+            return collectionPath;
+        }
+    } catch(e) {}
+
+    return null;
+}
+
+function schematicsCliExists() {
+    try {
+        require.resolve('@angular-devkit/schematics-cli/package.json');
         return true;
     } catch(e) {
-        // Package not found globally
+        return false;
     }
-
-    return false;
 }
 
 const hasSutableNgCli = async() => {
@@ -165,33 +189,22 @@ const addView = (viewName, options) => {
 
 const migrateConfigComponents = async(options = {}) => {
     const collectionName = 'devextreme-schematics';
+    const collectionPath = getCollectionPath(collectionName);
 
-    // Check if devextreme-schematics is installed
-    if(!localPackageExists(collectionName)) {
+    if(!collectionPath) {
         const prompts = require('prompts');
 
         console.log(`\nThe '${collectionName}' package is required to run this command.`);
 
         const response = await prompts({
             type: 'confirm',
             name: 'install',
-            message: `Would you like to install '${collectionName}' now?`,
+            message: `Download '${collectionName}@${schematicsVersion}' temporarily to run the migration?`,
             initial: true
         });
 
         if(!response.install) {
-            console.log('Migration cancelled. Please install devextreme-schematics manually:');
-            console.log(`npm install -g ${collectionName}@${schematicsVersion}`);
-            process.exit(1);
-        }
-
-        console.log(`Installing ${collectionName}@${schematicsVersion}...`);
-        try {
-            await runCommand('npm', ['install', '-g', `${collectionName}@${schematicsVersion}`], { stdio: 'inherit' });
-            console.log('Installation completed successfully.');
-        } catch(error) {
-            console.error('Failed to install devextreme-schematics. Please install manually:');
-            console.error(`npm install -g ${collectionName}@${schematicsVersion}`);
+            console.log('Migration cancelled. You can install devextreme-schematics locally or globally and rerun the command.');
             process.exit(1);
         }
     }
@@ -200,14 +213,22 @@ const migrateConfigComponents = async(options = {}) => {
         ...options
     };
 
-    if(schematicOptions.include && typeof schematicOptions.include === 'string') {
-        schematicOptions.include = schematicOptions.include.split(',').map(s => s.trim());
+    const hasSchematicsCli = schematicsCliExists();
+    const commandArguments = ['--yes'];
+
+    if(!hasSchematicsCli) {
+        commandArguments.push('-p', '@angular-devkit/schematics-cli');
     }
-    if(schematicOptions.scriptInclude && typeof schematicOptions.scriptInclude === 'string') {
-        schematicOptions.scriptInclude = schematicOptions.scriptInclude.split(',').map(s => s.trim());
+
+    if(!collectionPath) {
+        commandArguments.push('-p', `${collectionName}@${schematicsVersion}`);
     }
 
-    const commandArguments = ['schematics', `${collectionName}:migrate-config-components`];
+    const collectionSpecifier = collectionPath
+        ? `${collectionPath.replace(/\\/g, '/')}:migrate-config-components`
+        : `${collectionName}:migrate-config-components`;
+
+    commandArguments.push('schematics', collectionSpecifier);
 
     const { [depsVersionTagOptionName]: _, ...optionsToArguments } = schematicOptions; // eslint-disable-line no-unused-vars
     for(let option in optionsToArguments) {

packages/devextreme-schematics/package.json

@@ -26,7 +26,8 @@
     "@angular-devkit/schematics": "^17.3.17",
     "@schematics/angular": "^17.3.17",
     "parse5": "^7.3.0",
-    "picomatch": "^4.0.3"
+    "picomatch": "^4.0.3",
+    "typescript": "~5.2.1"
   },
   "devDependencies": {
     "@types/jasmine": "~3.10.18",
@@ -35,7 +36,6 @@
     "@types/semver": "^7.7.1",
     "jasmine": "^2.99.0",
     "rxjs": "^6.6.7",
-    "tslint": "^5.20.1",
-    "typescript": "~5.2.1"
+    "tslint": "^5.20.1"
   }
 }

packages/devextreme-schematics/src/migrate-config-components/index.ts

@@ -4,45 +4,15 @@ import { applyHostAwareTemplateMigrations, applyInlineComponentTemplateMigration
 import mapping from './mappings/deprecated-config-map.json';
 
 export interface Options {
-  include?: string[];
-  dry?: boolean;
-  scriptInclude?: string[];
+  include?: string | string[];
+  dry?: boolean | string;
+  scriptInclude?: string | string[];
 }
 
 export function migrateConfigComponents(options: Options = {}): Rule {
-  // Accept --include as array or comma-separated string
-  let include: string[] = ['**/*.html'];
-  const rawInclude = options.include;
-  if (Array.isArray(rawInclude) && rawInclude.length) {
-    include = rawInclude;
-  } else if (typeof rawInclude === 'string' && rawInclude) {
-    let str = (rawInclude as string).trim();
-    if (str.startsWith('[') && str.endsWith(']')) {
-      str = str.slice(1, -1);
-    }
-    include = str.split(',').map((s: string) => s.trim()).filter((s: string) => !!s);
-  }
-
-  // Coerce string 'true'/'false' to boolean for dry option
-  let dryFlag: boolean = false;
-  if (typeof options.dry === 'string') {
-    dryFlag = options.dry === 'true';
-  } else {
-    dryFlag = !!options.dry;
-  }
-
-  // Accept --script-include as array or comma-separated string
-  let scriptGlobs: string[] = ['**/*.ts', '**/*.js'];
-  const rawScriptInclude = options.scriptInclude;
-  if (Array.isArray(rawScriptInclude) && rawScriptInclude.length) {
-    scriptGlobs = rawScriptInclude;
-  } else if (typeof rawScriptInclude === 'string' && rawScriptInclude) {
-    let str = (rawScriptInclude as string).trim();
-    if (str.startsWith('[') && str.endsWith(']')) {
-      str = str.slice(1, -1);
-    }
-    scriptGlobs = str.split(',').map((s: string) => s.trim()).filter((s: string) => !!s);
-  }
+  const include = normalizeGlobOption(options.include, ['**/*.html']);
+  const dryFlag = normalizeBoolean(options.dry);
+  const scriptGlobs = normalizeGlobOption(options.scriptInclude, ['**/*.ts', '**/*.js']);
 
   return async (tree: Tree, ctx: SchematicContext): Promise<void> => {
     ctx.logger.info(`[config-migrator] Starting…`);
@@ -78,3 +48,30 @@ function componentToSelectorGuess(componentName: string): string {
   const core = componentName.replace(/Component$/, '').replace(/^Dx/, 'dx-');
   return core.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
+
+function normalizeGlobOption(
+  value: Options['include'] | Options['scriptInclude'],
+  fallback: string[]
+): string[] {
+  if (Array.isArray(value)) {
+    return value.filter(Boolean);
+  }
+  if (typeof value === 'string' && value.trim()) {
+    const trimmed = value.trim();
+    const inner = trimmed.startsWith('[') && trimmed.endsWith(']')
+      ? trimmed.slice(1, -1)
+      : trimmed;
+    return inner
+      .split(',')
+      .map(segment => segment.trim())
+      .filter(Boolean);
+  }
+  return fallback.slice();
+}
+
+function normalizeBoolean(value: Options['dry']): boolean {
+  if (typeof value === 'string') {
+    return value.toLowerCase() === 'true';
+  }
+  return !!value;
+}

packages/devextreme-schematics/src/migrate-config-components/template-migrator.ts

@@ -1,32 +1,15 @@
 import { Tree } from '@angular-devkit/schematics';
 import * as parse5 from 'parse5';
-import * as path from 'path';
 import picomatch from 'picomatch';
 
 // Dynamically require TypeScript if available; skip inline template migration if not.
 let ts: any = null;
-const tsResolutionErrors: string[] = [];
-const tsResolutionPaths = [
-  __dirname,
-  process.cwd(),
-  path.dirname(require.main?.filename || ''),
-];
-for (const p of tsResolutionPaths) {
-  try {
-    // tslint:disable-next-line:no-var-requires
-    ts = require(require.resolve('typescript', { paths: [p] }));
-    break;
-  } catch (err) {
-    tsResolutionErrors.push(`Failed to import TypeScript from ${p}: ${err?.message || err}`);
-  }
-}
-if (!ts) {
-  try {
-    // tslint:disable-next-line:no-var-requires
-    ts = require('typescript');
-  } catch (err) {
-    tsResolutionErrors.push(`Failed to import TypeScript: ${err?.message || err}`);
-  }
+let tsResolutionError: string | null = null;
+try {
+  // tslint:disable-next-line:no-var-requires
+  ts = require('typescript');
+} catch (err) {
+  tsResolutionError = err?.message || String(err);
 }
 
 // Minimal parse5 types for our usage
@@ -99,12 +82,8 @@ export async function applyInlineComponentTemplateMigrations(
   if (!ts) {
       exec.logger.warn(
         '[config-migrator] Failed to import TypeScript. Skipping inline template migration.\n' +
-        'Resolution attempts and errors:\n' +
-        tsResolutionErrors.map(e => '  - ' + e).join('\n') + '\n' +
-        'To resolve this issue, perform one of the following steps:\n' +
-        '  1. Install the "typescript" package in your project root: `npm install typescript --save-dev`\n' +
-        '  2. Install the "typescript" package globally on your machine: `npm install -g typescript`\n' +
-        'Refer to the README for further troubleshooting information.'
+        (tsResolutionError ? `Error: ${tsResolutionError}\n` : '') +
+        'Ensure the "typescript" package is installed in your project or reinstall DevExtreme Schematics.'
       );
       return;
   }