feat(schematics): ng-add basic integration

xidedix · xidedix · commit 5d5d93ba3c3d · 2024-07-25T16:31:37.000+02:00
(cherry picked from commit b176cbe)
diff --git a/package.json b/package.json
@@ -9,27 +9,30 @@
     "lib": "ng",
     "watch:lib:dev": "ng build coreui-angular --watch --configuration production",
     "build:lib:prod": "ng build coreui-angular",
+    "postbuild:lib:prod": "npm run build --prefix projects/coreui-angular",
     "test:lib:dev": "ng test coreui-angular",
     "test:lib:prod": "ng test coreui-angular --karma-config=projects/coreui-angular/karma.conf.github.js",
-    "prepublish:lib": "npm run prepublish:icons && ng lint coreui-angular && ng test coreui-angular --watch=false && ng build coreui-angular",
+    "prepublish:lib": "npm run prepublish:icons && ng lint coreui-angular && ng test coreui-angular --watch=false && npm run build:lib:prod",
     "publish:lib": "cd dist/coreui-angular/ && npm publish --tag v5-ng17 --dry-run",
     "lint:lib": "ng lint coreui-angular",
     "link:lib": "cd dist/coreui-angular/ && npm link",
     "chartjs": "ng",
     "watch:chartjs:dev": "ng build coreui-angular-chartjs --watch --configuration development",
     "build:chartjs:prod": "ng build coreui-angular-chartjs",
+    "postbuild:chartjs:prod": "npm run build --prefix projects/coreui-angular-chartjs",
     "test:chartjs:dev": "ng test coreui-angular-chartjs",
     "test:chartjs:prod": "ng test coreui-angular-chartjs --karma-config=projects/coreui-angular-chartjs/karma.conf.github.js",
-    "prepublish:chartjs": "ng lint coreui-angular-chartjs && ng test coreui-angular-chartjs --watch=false && ng build coreui-angular-chartjs",
+    "prepublish:chartjs": "ng lint coreui-angular-chartjs && ng test coreui-angular-chartjs --watch=false && npm run build:chartjs:prod",
     "publish:chartjs": "cd dist/coreui-angular-chartjs/ && npm publish --tag v5-ng17 --dry-run",
     "lint:chartjs": "ng lint coreui-angular-chartjs",
     "link:chartjs": "cd dist/coreui-angular-chartjs/ && npm link",
     "icons": "ng",
     "watch:icons:dev": "ng build coreui-icons-angular --watch --configuration production",
     "build:icons:prod": "ng build coreui-icons-angular",
+    "postbuild:icons:prod": "npm run build --prefix projects/coreui-icons-angular",
     "test:icons:dev": "ng test coreui-icons-angular",
     "test:icons:prod": "ng test coreui-icons-angular --karma-config=projects/coreui-icons-angular/karma.conf.github.js",
-    "prepublish:icons": "ng lint coreui-icons-angular && ng test coreui-icons-angular --watch=false && ng build coreui-icons-angular",
+    "prepublish:icons": "ng lint coreui-icons-angular && ng test coreui-icons-angular --watch=false && npm run build:icons:prod",
     "publish:icons": "cd dist/coreui-icons-angular/ && npm publish --tag v5-ng17 --dry-run",
     "lint:icons": "ng lint coreui-icons-angular",
     "link:icons": "cd dist/coreui-icons-angular/ && npm link"
@@ -57,6 +60,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.3.8",
+    "@angular-devkit/schematics": "^17.3.8",
     "@angular-eslint/builder": "^17.5.2",
     "@angular-eslint/eslint-plugin": "^17.5.2",
     "@angular-eslint/eslint-plugin-template": "^17.5.2",
@@ -67,11 +71,12 @@
     "@angular/language-service": "^17.3.12",
     "@types/jasmine": "^5.1.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.11",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@types/node": "^20.14.12",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
-    "jasmine-core": "^5.1.2",
+    "jasmine-core": "^5.2.0",
     "karma": "^6.4.3",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
diff --git a/projects/coreui-angular-chartjs/package.json b/projects/coreui-angular-chartjs/package.json
@@ -41,5 +41,17 @@
     "component",
     "chartjs",
     "angular"
-  ]
+  ],
+  "devDependencies": {
+    "copyfiles": "file:../../node_modules/copyfiles",
+    "typescript": "file:../../node_modules/typescript"
+  },
+  "schematics": "./schematics/collection.json",
+  "scripts": {
+    "build": "tsc -p tsconfig.schematics.json",
+    "postbuild": "copyfiles schematics/*/files/** schematics/collection.json ../../dist/coreui-angular-chartjs/"
+  },
+  "ng-add": {
+    "save": true
+  }
 }
diff --git a/projects/coreui-angular-chartjs/schematics/collection.json b/projects/coreui-angular-chartjs/schematics/collection.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add @coreui/angular-chartjs library to the project.",
+      "factory": "./ng-add/index#ngAdd"
+    }
+  }
+}
diff --git a/projects/coreui-angular-chartjs/schematics/ng-add/index.ts b/projects/coreui-angular-chartjs/schematics/ng-add/index.ts
@@ -0,0 +1,39 @@
+import { chain, Rule, SchematicContext, SchematicsException, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { addPackageToPackageJson, getPackageVersionFromPackageJson, PackageJson } from './package-config';
+import * as pkgJson from '../../package.json';
+
+export function addCoreUIAngularChartJs(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info('Installing @coreui/angular-chartjs ...');
+    context.addTask(new NodePackageInstallTask());
+    return tree;
+  };
+}
+
+export function ngAdd(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info(``);
+    context.logger.info('Installing @coreui/angular-chartjs dependencies...');
+    const ngCoreVersionTag = getPackageVersionFromPackageJson(tree, '@angular/core');
+    context.logger.info(`@angular/core version ${ngCoreVersionTag}`);
+    if (!ngCoreVersionTag) {
+      throw new SchematicsException('@angular/core version not found');
+    }
+    const pkg = pkgJson as PackageJson;
+    const libPeerDeps: string[] = ['@coreui/chartjs', 'chart.js'];
+    libPeerDeps.forEach((dep: string) => {
+      const version = pkg.peerDependencies[dep];
+      context.logger.info(`Including ${dep} version ${version}`);
+      addPackageToPackageJson(tree, dep, version);
+    });
+    const libDeps: string[] = ['lodash-es'];
+    libDeps.forEach((dep: string) => {
+      const version = pkg.dependencies[dep];
+      context.logger.info(`Including ${dep} version ${version}`);
+      addPackageToPackageJson(tree, dep, version);
+    });
+
+    return chain([addCoreUIAngularChartJs()]);
+  };
+}
diff --git a/projects/coreui-angular-chartjs/schematics/ng-add/package-config.ts b/projects/coreui-angular-chartjs/schematics/ng-add/package-config.ts
@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { Tree } from '@angular-devkit/schematics';
+
+export interface PackageJson {
+  dependencies: Record<string, string>;
+  peerDependencies: Record<string, string>;
+}
+
+/**
+ * Sorts the keys of the given object.
+ * @returns A new object instance with sorted keys
+ */
+function sortObjectByKeys(obj: Record<string, string>) {
+  return Object.keys(obj)
+    .sort()
+    .reduce(
+      (result, key) => {
+        result[key] = obj[key];
+        return result;
+      },
+      {} as Record<string, string>
+    );
+}
+
+/** Adds a package to the package.json in the given host tree. */
+export function addPackageToPackageJson(host: Tree, pkg: string, version: string): Tree {
+  if (host.exists('package.json')) {
+    const sourceText = host.read('package.json')!.toString('utf-8');
+    const json = JSON.parse(sourceText) as PackageJson;
+
+    if (!json.dependencies) {
+      json.dependencies = {};
+    }
+
+    if (!json.dependencies[pkg]) {
+      json.dependencies[pkg] = version;
+      json.dependencies = sortObjectByKeys(json.dependencies);
+    }
+
+    host.overwrite('package.json', JSON.stringify(json, null, 2));
+  }
+
+  return host;
+}
+
+/** Gets the version of the specified package by looking at the package.json in the given tree. */
+export function getPackageVersionFromPackageJson(tree: Tree, name: string): string | null {
+  if (!tree.exists('package.json')) {
+    return null;
+  }
+
+  const packageJson = JSON.parse(tree.read('package.json')!.toString('utf8')) as PackageJson;
+
+  if (packageJson.dependencies && packageJson.dependencies[name]) {
+    return packageJson.dependencies[name];
+  }
+
+  return null;
+}
diff --git a/projects/coreui-angular-chartjs/tsconfig.schematics.json b/projects/coreui-angular-chartjs/tsconfig.schematics.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": [
+      "ES2022",
+      "dom"
+    ],
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "rootDir": "schematics",
+    "outDir": "../../dist/coreui-angular-chartjs/schematics",
+    "resolveJsonModule": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "ES2022",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "include": [
+    "schematics/**/*"
+  ],
+  "exclude": [
+    "schematics/*/files/**/*"
+  ]
+}
diff --git a/projects/coreui-angular/package.json b/projects/coreui-angular/package.json
@@ -28,8 +28,8 @@
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0",
     "@angular/router": "^17.3.0",
-    "@coreui/coreui": "~5.0.0 || ~5.1.0",
-    "@coreui/icons-angular": "~5.0.0 || ~5.1.0",
+    "@coreui/coreui": "^5.1.0",
+    "@coreui/icons-angular": "~5.1.0",
     "rxjs": "^7.8.1"
   },
   "repository": {
@@ -49,5 +49,17 @@
     "component",
     "components"
   ],
-  "eslintConfig": {}
+  "eslintConfig": {},
+  "devDependencies": {
+    "copyfiles": "file:../../node_modules/copyfiles",
+    "typescript": "file:../../node_modules/typescript"
+  },
+  "schematics": "./schematics/collection.json",
+  "scripts": {
+    "build": "tsc -p tsconfig.schematics.json",
+    "postbuild": "copyfiles schematics/*/files/** schematics/collection.json ../../dist/coreui-angular/"
+  },
+  "ng-add": {
+    "save": true
+  }
 }
diff --git a/projects/coreui-angular/schematics/collection.json b/projects/coreui-angular/schematics/collection.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add @coreui/angular library to the project.",
+      "factory": "./ng-add/index#ngAdd"
+    }
+  }
+}
diff --git a/projects/coreui-angular/schematics/ng-add/index.ts b/projects/coreui-angular/schematics/ng-add/index.ts
@@ -0,0 +1,52 @@
+import { chain, Rule, SchematicContext, SchematicsException, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { addPackageToPackageJson, getPackageVersionFromPackageJson, PackageJson } from './package-config';
+import * as pkgJson from '../../package.json';
+
+const addCoreUIIconsAngular = (): Rule => {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info(`Installing @coreui/icons-angular as dependency`);
+    context.addTask(new NodePackageInstallTask({ packageName: '@coreui/icons-angular' }));
+    return tree;
+  };
+};
+
+const addCoreUIAngular = (): Rule => {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info(`Installing @coreui/angular as dependency`);
+    context.addTask(new NodePackageInstallTask());
+    return tree;
+  };
+};
+
+export function ngAdd(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info(``);
+    context.logger.info('Installing @coreui/angular dependencies...');
+    const ngCoreVersionTag = getPackageVersionFromPackageJson(tree, '@angular/core');
+    context.logger.info(`@angular/core version ${ngCoreVersionTag}`);
+    if (!ngCoreVersionTag) {
+      throw new SchematicsException('@angular/core version not found');
+    }
+    const projDeps = ['@angular/animations', '@angular/common', '@angular/core', '@angular/router'];
+    projDeps.forEach((dep) => {
+      addPackageToPackageJson(tree, dep, ngCoreVersionTag);
+    });
+
+    const pkg = pkgJson as PackageJson;
+    const libPeerDeps: string[] = ['@angular/cdk', '@coreui/coreui'];
+    libPeerDeps.forEach((dep: string) => {
+      const version = pkg.peerDependencies[dep];
+      context.logger.info(`Including ${dep} version ${version}`);
+      addPackageToPackageJson(tree, dep, version);
+    });
+    const libDeps: string[] = ['@popperjs/core'];
+    libDeps.forEach((dep: string) => {
+      const version = pkg.dependencies[dep];
+      context.logger.info(`Including ${dep} version ${version}`);
+      addPackageToPackageJson(tree, dep, version);
+    });
+
+    return chain([addCoreUIIconsAngular(), addCoreUIAngular()]);
+  };
+}
diff --git a/projects/coreui-angular/schematics/ng-add/package-config.ts b/projects/coreui-angular/schematics/ng-add/package-config.ts
@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { Tree } from '@angular-devkit/schematics';
+
+export interface PackageJson {
+  dependencies: Record<string, string>;
+  peerDependencies: Record<string, string>;
+}
+
+/**
+ * Sorts the keys of the given object.
+ * @returns A new object instance with sorted keys
+ */
+function sortObjectByKeys(obj: Record<string, string>) {
+  return Object.keys(obj)
+    .sort()
+    .reduce(
+      (result, key) => {
+        result[key] = obj[key];
+        return result;
+      },
+      {} as Record<string, string>
+    );
+}
+
+/** Adds a package to the package.json in the given host tree. */
+export function addPackageToPackageJson(host: Tree, pkg: string, version: string): Tree {
+  if (host.exists('package.json')) {
+    const sourceText = host.read('package.json')!.toString('utf-8');
+    const json = JSON.parse(sourceText) as PackageJson;
+
+    if (!json.dependencies) {
+      json.dependencies = {};
+    }
+
+    if (!json.dependencies[pkg]) {
+      json.dependencies[pkg] = version;
+      json.dependencies = sortObjectByKeys(json.dependencies);
+    }
+
+    host.overwrite('package.json', JSON.stringify(json, null, 2));
+  }
+
+  return host;
+}
+
+/** Gets the version of the specified package by looking at the package.json in the given tree. */
+export function getPackageVersionFromPackageJson(tree: Tree, name: string): string | null {
+  if (!tree.exists('package.json')) {
+    return null;
+  }
+
+  const packageJson = JSON.parse(tree.read('package.json')!.toString('utf8')) as PackageJson;
+
+  if (packageJson.dependencies && packageJson.dependencies[name]) {
+    return packageJson.dependencies[name];
+  }
+
+  return null;
+}
diff --git a/projects/coreui-angular/tsconfig.schematics.json b/projects/coreui-angular/tsconfig.schematics.json
diff --git a/projects/coreui-icons-angular/package.json b/projects/coreui-icons-angular/package.json
diff --git a/projects/coreui-icons-angular/schematics/collection.json b/projects/coreui-icons-angular/schematics/collection.json
diff --git a/projects/coreui-icons-angular/schematics/ng-add/index.ts b/projects/coreui-icons-angular/schematics/ng-add/index.ts
diff --git a/projects/coreui-icons-angular/tsconfig.schematics.json b/projects/coreui-icons-angular/tsconfig.schematics.json
