Add angular nested components migration command

Author: ajivanyandev

packages/devextreme-cli/index.js

@@ -39,6 +39,8 @@ if(args.help) {
 const run = async(commands, options) => {
     if(application.isApplicationCommand(commands[0])) {
         await application.run(commands, options, devextremeConfig.read());
+    } else if(application.isMigrationCommand(commands[0])) {
+        await application.run(commands, options, { applicationEngine: 'angular' });
     } else if(themeBuilder.isThemeBuilderCommand(commands[0])) {
         options.command = commands[0];
         themeBuilder.run(options);

packages/devextreme-cli/src/application.js

@@ -9,6 +9,10 @@ const isApplicationCommand = (command) => {
     return [ 'new', 'add' ].includes(command);
 };
 
+const isMigrationCommand = (command) => {
+    return command === 'migrate-nested-components';
+};
+
 const handleWrongAppType = (appType, command) => {
     console.error(`The '${appType}' application type is not valid`);
     printHelp(command);
@@ -30,6 +34,11 @@ const createReact = async(appName, options, command) => {
 };
 
 const run = async(commands, options, devextremeConfig) => {
+    if(commands[0] === 'migrate-nested-components') {
+        await angularApplication.migrateNestedComponents(options);
+        return;
+    }
+
     if(!commands[1]) {
         console.error('Command is incomplete. Please specify parameters.');
         printHelp(commands[0]);
@@ -104,5 +113,6 @@ const run = async(commands, options, devextremeConfig) => {
 
 module.exports = {
     isApplicationCommand,
+    isMigrationCommand,
     run
 };

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

@@ -53,13 +53,24 @@ 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)) {
-        return;
+    if(fs.existsSync(nodeModulesPath)) {
+        const packageJsonPath = path.join(nodeModulesPath, packageName, 'package.json');
+        if(fs.existsSync(packageJsonPath)) {
+            return true;
+        }
     }
 
-    const packageJsonPath = path.join(nodeModulesPath, packageName, 'package.json');
-    return fs.existsSync(packageJsonPath);
+    // Check if globally installed by trying to resolve the package
+    try {
+        require.resolve(`${packageName}/package.json`);
+        return true;
+    } catch(e) {
+        // Package not found globally
+    }
+
+    return false;
 }
 
 const hasSutableNgCli = async() => {
@@ -152,6 +163,70 @@ const addView = (viewName, options) => {
     runSchematicCommand('add-view', schematicOptions);
 };
 
+const migrateNestedComponents = async(options = {}) => {
+    const collectionName = 'devextreme-schematics';
+
+    // Check if devextreme-schematics is installed
+    if(!localPackageExists(collectionName)) {
+        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?`,
+            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 it manually:');
+            console.error(`npm install -g ${collectionName}@${schematicsVersion}`);
+            process.exit(1);
+        }
+    }
+
+    const schematicOptions = {
+        ...options
+    };
+
+    if(schematicOptions.include && typeof schematicOptions.include === 'string') {
+        schematicOptions.include = schematicOptions.include.split(',').map(s => s.trim());
+    }
+    if(schematicOptions.scriptInclude && typeof schematicOptions.scriptInclude === 'string') {
+        schematicOptions.scriptInclude = schematicOptions.scriptInclude.split(',').map(s => s.trim());
+    }
+
+    const commandArguments = ['schematics', `${collectionName}:migrate-nested-components`];
+
+    const { [depsVersionTagOptionName]: _, ...optionsToArguments } = schematicOptions; // eslint-disable-line no-unused-vars
+    for(let option in optionsToArguments) {
+        const value = optionsToArguments[option];
+        if(value !== undefined && value !== null && value !== '') {
+            if(Array.isArray(value)) {
+                if(value.length > 0) {
+                    commandArguments.push(`--${dasherize(option)}=${value.join(',')}`);
+                }
+            } else {
+                commandArguments.push(`--${dasherize(option)}=${value}`);
+            }
+        }
+    }
+
+    // Use runCommand directly with npx to work outside Angular workspace
+    return runCommand('npx', commandArguments, { stdio: 'inherit' });
+};
+
 const changeMainTs = (appPath) => {
     const filePath = path.join(appPath, 'src', 'main.ts');
 
@@ -174,5 +249,6 @@ module.exports = {
     install,
     create,
     addTemplate,
-    addView
+    addView,
+    migrateNestedComponents
 };

packages/devextreme-cli/src/commands.json

@@ -48,6 +48,20 @@
             "name": "devextreme-angular",
             "description": "Add DevExtreme to an Angular application"
         }]
+    }, {
+        "name": "migrate-nested-components",
+        "description": "Migrate deprecated nested DevExtreme components to new ones",
+        "usage": "devextreme migrate-nested-components [options]",
+        "options": [{
+            "name": "--include",
+            "description": "Glob patterns of template files to include (default: **/*.html). Separate multiple patterns with commas."
+        }, {
+            "name": "--script-include",
+            "description": "Glob patterns for TypeScript/JavaScript files to scan for inline @Component({ template }) (default: **/*.ts,**/*.js). Set to empty to disable."
+        }, {
+            "name": "--dry",
+            "description": "Run in dry mode to preview changes without applying them (default: false)"
+        }]
     }, {
         "name": "build-theme",
         "description": "Build a custom color scheme",

packages/devextreme-schematics/package-lock.json

@@ -24,7 +24,9 @@
   "dependencies": {
     "@angular-devkit/core": "^17.3.17",
     "@angular-devkit/schematics": "^17.3.17",
-    "@schematics/angular": "^17.3.17"
+    "@schematics/angular": "^17.3.17",
+    "parse5": "^7.1.2",
+    "picomatch": "^4.0.2"
   },
   "devDependencies": {
     "@types/jasmine": "~3.10.18",

packages/devextreme-schematics/package.json

@@ -24,6 +24,11 @@
       "description": "Add a new view to app-template.",
       "factory": "./add-view/index",
       "schema": "./add-view/schema.json"
+    },
+    "migrate-nested-components": {
+      "description": "Migrate nested DevExtreme components to the latest version.",
+      "factory": "./migrate-nested-components/index#migrateNestedComponents",
+      "schema": "./migrate-nested-components/schema.json"
     }
   }
 }

packages/devextreme-schematics/src/collection.json

@@ -0,0 +1,83 @@
+# migrate-nested-components
+
+A schematic that migrates deprecated nested DevExtreme components to the new structure.
+
+## Description
+
+This schematic automatically migrates your Angular application to use the latest DevExtreme component structure by replacing deprecated nested components with their new equivalents. The migration command is available as a top-level DevExtreme CLI command and can be run from any directory.
+
+## Usage
+
+### Via DevExtreme CLI (Recommended)
+
+The migration command can be run from any directory and will work both inside and outside Angular workspaces:
+
+```bash
+devextreme migrate-nested-components
+```
+
+### Options (All Optional)
+
+- `--include`: Glob patterns of template files to include (default: `**/*.html`). Separate multiple patterns with commas.
+- `--script-include`: Glob patterns for TypeScript/JavaScript files to scan for inline `@Component({ template })` (default: `**/*.ts,**/*.js`). Set to empty to disable.
+- `--dry`: Run in dry mode to preview changes without applying them (default: `false`)
+
+### Examples
+
+```bash
+# Migrate all HTML templates and inline templates (using defaults)
+devextreme migrate-nested-components
+
+# Migrate only specific files
+devextreme migrate-nested-components --include="src/app/**/*.html,src/shared/**/*.html"
+
+# Preview changes without applying them
+devextreme migrate-nested-components --dry
+
+# Migrate only HTML templates, skip inline templates
+devextreme migrate-nested-components --script-include=""
+
+# Combine multiple options
+devextreme migrate-nested-components --include="*.html,*.ts" --dry
+```
+
+### Via Angular CLI
+
+Alternatively, you can run the schematic directly with Angular CLI:
+
+```bash
+ng g devextreme-schematics:migrate-nested-components
+```
+
+## What it does
+
+This schematic automatically updates your templates to replace deprecated nested components with the new component structure. For example:
+
+**Before:**
+```html
+<dx-data-grid>
+  <dxi-column field="name"></dxi-column>
+  <dxi-column field="age"></dxi-column>
+</dx-data-grid>
+```
+
+**After:**
+```html
+<dx-data-grid>
+  <dxi-data-grid-column field="name"></dxi-data-grid-column>
+  <dxi-data-grid-column field="age"></dxi-data-grid-column>
+</dx-data-grid>
+```
+
+## Requirements
+
+- Node.js and npm/yarn installed
+- Angular application with DevExtreme components (when running inside a workspace)
+- DevExtreme Angular version that supports the new component structure
+
+## Notes
+
+- The command can be run from any directory, not just Angular workspaces
+- When run outside an Angular workspace, the underlying Angular CLI will show appropriate error messages
+- All options are optional and have sensible defaults
+- The command uses the latest version of `devextreme-schematics` automatically