ngx-devkit-builders 1.3.3 → 2.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 - 2024 Celtian
+Copyright (c) 2022 - 2026 Celtian
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -13,7 +13,7 @@
 
 This package contains Architect builders used to build and test Angular applications and libraries.
 
-> ✓ _Angular 18 compatible_
+> ✓ _Angular 21 compatible_
 
 ## 🚀 Builders
 
@@ -22,6 +22,7 @@ This package contains Architect builders used to build and test Angular applicat
 | [version](./src/version/README.md)                   | Create build information file     |
 | [robots](./src/robots/README.md)                     | Create simplified robots.txt file |
 | [copy-environment](./src/copy-environment/README.md) | Copy environment file             |
+| [sort-imports](./src/sort-imports/README.md)         | Sort imports of components        |
 
 _More builders can be added in the future._
 
@@ -29,12 +30,13 @@ _More builders can be added in the future._
 
 | Angular | ngx-devkit-builders | Install                          |
 | ------- | ------------------- | -------------------------------- |
-| >= 17   | 1.x                 | `yarn add ngx-devkit-builders`   |
+| >= 21   | 2.x                 | `yarn add ngx-devkit-builders`   |
+| >= 17   | 1.x                 | `yarn add ngx-devkit-builders@1` |
 | >= 16   | 0.x                 | `yarn add ngx-devkit-builders@0` |
 
 ## 🪪 License
 
-Copyright © 2022 - 2024 [Dominik Hladik](https://github.com/Celtian)
+Copyright © 2022 - 2026 [Dominik Hladik](https://github.com/Celtian)
 
 All contents are licensed under the [MIT license].
 

package/builders.json

@@ -14,6 +14,11 @@
       "description": "Create build information file",
       "implementation": "./version",
       "schema": "./version/schema.json"
+    },
+    "sort-imports": {
+      "description": "Sorts imports in Angular components and directives using AST analysis",
+      "implementation": "./dist/sort-imports",
+      "schema": "./dist/sort-imports/schema.json"
     }
   }
 }

package/copy-environment/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
   "type": "object",
   "properties": {
     "source": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-devkit-builders",
-  "version": "1.3.3",
+  "version": "2.0.0",
   "author": {
     "name": "Dominik Hladík",
     "email": "dominik.hladik@seznam.cz",
@@ -12,9 +12,10 @@
   "builders": "builders.json",
   "scripts": {},
   "dependencies": {
-    "@angular-devkit/architect": "^0.1802.9",
-    "@angular-devkit/core": "^18.2.9",
-    "fs-extra": "^11.2.0"
+    "@angular-devkit/architect": "^0.2100.4",
+    "@angular-devkit/core": "^21.0.4",
+    "@schematics/angular": "^21.0.4",
+    "fs-extra": "^11.3.3"
   },
   "devDependencies": {},
   "homepage": "https://github.com/Celtian/ngx-devkit-builders#readme",
@@ -32,14 +33,14 @@
     "url": "https://github.com/Celtian/ngx-devkit-builders/issues"
   },
   "engines": {
-    "node": ">=12",
+    "node": ">=20",
     "npm": "please-use-yarn"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "peerDependencies": {
-    "@angular/core": ">=12",
-    "@angular/cli": ">=12"
+    "@angular/core": ">=21",
+    "@angular/cli": ">=21"
   }
 }

package/robots/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
   "type": "object",
   "properties": {
     "allow": {

package/sort-imports/index.js

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const architect_1 = require("@angular-devkit/architect");
+const ast_utils_1 = require("@schematics/angular/utility/ast-utils");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const ts = require("typescript");
+// ANSI color codes for terminal output
+const colors = {
+    reset: '\x1b[0m',
+    bright: '\x1b[1m',
+    dim: '\x1b[2m',
+    red: '\x1b[31m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    blue: '\x1b[34m',
+    magenta: '\x1b[35m',
+    cyan: '\x1b[36m',
+    white: '\x1b[37m',
+    gray: '\x1b[90m',
+};
+const walkDirectory = (dir, files = []) => {
+    const items = (0, fs_1.readdirSync)(dir, { withFileTypes: true });
+    for (const item of items) {
+        const fullPath = (0, path_1.join)(dir, item.name);
+        if (item.isDirectory()) {
+            walkDirectory(fullPath, files);
+        }
+        else if (item.isFile() &&
+            item.name.endsWith('.ts') &&
+            !item.name.endsWith('.spec.ts') &&
+            !item.name.endsWith('.d.ts')) {
+            files.push(fullPath);
+        }
+    }
+    return files;
+};
+const isAngularComponentOrDirective = (filePath, includeDirectives) => {
+    try {
+        const content = (0, fs_1.readFileSync)(filePath, 'utf8');
+        const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
+        const componentDecorators = (0, ast_utils_1.getDecoratorMetadata)(sourceFile, 'Component', '@angular/core');
+        if (componentDecorators.length > 0) {
+            return true;
+        }
+        if (includeDirectives) {
+            const directiveDecorators = (0, ast_utils_1.getDecoratorMetadata)(sourceFile, 'Directive', '@angular/core');
+            return directiveDecorators.length > 0;
+        }
+        return false;
+    }
+    catch {
+        return false;
+    }
+};
+const analyzeComponentImports = (sourceFile) => {
+    const componentImports = [];
+    const visitNode = (node) => {
+        if (ts.isDecorator(node) && ts.isCallExpression(node.expression)) {
+            const callExpr = node.expression;
+            // Check if this is a @Component decorator
+            if (ts.isIdentifier(callExpr.expression) && callExpr.expression.text === 'Component') {
+                if (callExpr.arguments.length > 0) {
+                    const arg = callExpr.arguments[0];
+                    if (ts.isObjectLiteralExpression(arg)) {
+                        // Look for the imports property
+                        for (const property of arg.properties) {
+                            if (ts.isPropertyAssignment(property) &&
+                                ts.isIdentifier(property.name) &&
+                                property.name.text === 'imports') {
+                                if (ts.isArrayLiteralExpression(property.initializer)) {
+                                    // Extract import names from the array
+                                    for (const element of property.initializer.elements) {
+                                        if (ts.isIdentifier(element)) {
+                                            componentImports.push(element.text);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        ts.forEachChild(node, visitNode);
+    };
+    visitNode(sourceFile);
+    return componentImports;
+};
+const sortComponentImports = (imports) => {
+    // Sort imports alphabetically
+    return [...imports].sort();
+};
+const processFile = (filePath, options) => {
+    const content = (0, fs_1.readFileSync)(filePath, 'utf8');
+    const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
+    const componentName = (0, path_1.basename)(filePath, '.ts');
+    const importsArray = analyzeComponentImports(sourceFile);
+    const sortedImports = sortComponentImports(importsArray);
+    // Check if imports need to be reordered
+    const hasChanges = JSON.stringify(importsArray) !== JSON.stringify(sortedImports);
+    if (hasChanges && !options.dryRun) {
+        // Find and replace the imports array in the component decorator
+        const updatedContent = updateComponentImports(content, sortedImports);
+        (0, fs_1.writeFileSync)(filePath, updatedContent, 'utf8');
+    }
+    return {
+        filePath,
+        componentName,
+        importsArray,
+        sortedImports,
+        hasChanges,
+    };
+};
+const updateComponentImports = (content, sortedImports) => {
+    const sourceFile = ts.createSourceFile('temp.ts', content, ts.ScriptTarget.Latest, true);
+    let updatedContent = content;
+    const visitNode = (node) => {
+        if (ts.isDecorator(node) && ts.isCallExpression(node.expression)) {
+            const callExpr = node.expression;
+            if (ts.isIdentifier(callExpr.expression) && callExpr.expression.text === 'Component') {
+                if (callExpr.arguments.length > 0) {
+                    const arg = callExpr.arguments[0];
+                    if (ts.isObjectLiteralExpression(arg)) {
+                        for (const property of arg.properties) {
+                            if (ts.isPropertyAssignment(property) &&
+                                ts.isIdentifier(property.name) &&
+                                property.name.text === 'imports') {
+                                if (ts.isArrayLiteralExpression(property.initializer)) {
+                                    // Replace the array content
+                                    const start = property.initializer.getStart(sourceFile);
+                                    const end = property.initializer.getEnd();
+                                    const newImportsArray = `[${sortedImports.join(', ')}]`;
+                                    updatedContent = content.substring(0, start) + newImportsArray + content.substring(end);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        ts.forEachChild(node, visitNode);
+    };
+    visitNode(sourceFile);
+    return updatedContent;
+};
+const outputResults = (analyses, options) => {
+    const changedFiles = analyses.filter((a) => a.hasChanges);
+    const unchangedFiles = analyses.filter((a) => !a.hasChanges);
+    console.log('\n📋 COMPONENT IMPORTS SORTING ANALYSIS');
+    console.log('━'.repeat(80));
+    if (options.dryRun) {
+        console.log('🔍 DRY RUN MODE - No files were modified');
+        console.log('');
+    }
+    console.log(`📊 Summary: ${analyses.length} files analyzed`);
+    console.log(`✅ ${unchangedFiles.length} files already have sorted imports`);
+    console.log(`🔄 ${changedFiles.length} files ${options.dryRun ? 'would be' : 'were'} updated`);
+    if (options.verbose && changedFiles.length > 0) {
+        console.log('');
+        console.log(`📝 Files ${options.dryRun ? 'that would be' : 'that were'} updated:`);
+        console.log('─'.repeat(80));
+        console.log('Component Name'.padEnd(35) + 'Sorted Imports');
+        console.log('─'.repeat(80));
+        changedFiles.forEach((analysis) => {
+            const componentName = analysis.componentName.length > 32 ? analysis.componentName.substring(0, 29) + '...' : analysis.componentName;
+            const sortedImports = `[${analysis.sortedImports.join(', ')}]`;
+            // Use cyan color for sorted imports to match the existing imports color
+            console.log(componentName.padEnd(35) + colors.cyan + sortedImports + colors.reset);
+        });
+        console.log('─'.repeat(80));
+    }
+    if (options.verbose && unchangedFiles.length > 0) {
+        console.log('');
+        console.log('✨ Files with already sorted imports:');
+        console.log('─'.repeat(80));
+        console.log('Component Name'.padEnd(35) + 'Current Imports');
+        console.log('─'.repeat(80));
+        unchangedFiles.forEach((analysis) => {
+            const componentName = analysis.componentName.length > 32 ? analysis.componentName.substring(0, 29) + '...' : analysis.componentName;
+            if (analysis.importsArray.length > 0) {
+                const imports = `[${analysis.importsArray.join(', ')}]`;
+                // Use cyan color for components with existing sorted imports
+                console.log(componentName.padEnd(35) + colors.cyan + imports + colors.reset);
+            }
+            else {
+                // Use gray/dim color for components without imports
+                const noImportsText = 'No imports array found';
+                console.log(componentName.padEnd(35) + colors.gray + colors.dim + noImportsText + colors.reset);
+            }
+        });
+        console.log('─'.repeat(80));
+    }
+    console.log('━'.repeat(80));
+};
+exports.default = (0, architect_1.createBuilder)((options, context) => {
+    return new Promise((resolve) => {
+        try {
+            const projectRoot = context.target?.project
+                ? (0, path_1.join)(context.workspaceRoot, 'projects', context.target.project)
+                : context.workspaceRoot;
+            const srcDir = (0, path_1.join)(projectRoot, 'src');
+            if (!(0, fs_1.statSync)(srcDir).isDirectory()) {
+                context.logger.error(`Source directory not found: ${srcDir}`);
+                resolve({ success: false });
+                return;
+            }
+            // Find all TypeScript files recursively
+            const allTsFiles = walkDirectory(srcDir);
+            // Filter to only component and directive files
+            const targetFiles = allTsFiles.filter((file) => isAngularComponentOrDirective(file, options.includeDirectives));
+            if (targetFiles.length === 0) {
+                console.log('No Angular components or directives found.');
+                resolve({ success: true });
+                return;
+            }
+            // Process each file
+            const analyses = [];
+            for (const filePath of targetFiles) {
+                try {
+                    const analysis = processFile(filePath, options);
+                    analyses.push(analysis);
+                }
+                catch (error) {
+                    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                    context.logger.warn(`Failed to process ${filePath}: ${errorMessage}`);
+                }
+            }
+            // Output results
+            outputResults(analyses, options);
+            resolve({ success: true });
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            context.logger.error('Error sorting imports: ' + errorMessage);
+            resolve({ success: false });
+        }
+    });
+});

package/sort-imports/schema.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "dryRun": {
+      "description": "Run the builder without making any changes to files",
+      "type": "boolean",
+      "default": false
+    },
+    "verbose": {
+      "description": "Extended logging output",
+      "type": "boolean",
+      "default": false
+    },
+    "includeDirectives": {
+      "description": "Include Angular directives in addition to components",
+      "type": "boolean",
+      "default": true
+    }
+  }
+}

package/version/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
   "type": "object",
   "properties": {
     "outputFile": {