fix(schematics): explicit def of pkgs to be added to app's deps, #7285

Author: ViktorSlavov

projects/igniteui-angular/schematics/ng-add/add-normalize.ts

@@ -3,6 +3,7 @@ import * as path from 'path';
 import { Tree } from '@angular-devkit/schematics';
 import { getWorkspace, getWorkspacePath } from '@schematics/angular/utility/config';
 import { WorkspaceProject, ProjectType } from '@schematics/angular/utility/workspace-models';
+import { addPackageToPkgJson } from '../utils/dependency-handler';
 
 const resetPackage = { 'minireset.css': '~0.0.4' };
 
@@ -56,13 +57,8 @@ export function addResetCss(host: Tree): boolean {
     }
 
     if (addPackage) {
-        const targetFile = 'package.json';
-        if (host.exists(targetFile)) {
-            const pkgJson = JSON.parse(host.read(targetFile).toString());
-            pkgJson.dependencies = Object.assign({}, addPackage, pkgJson.dependencies);
-            host.overwrite(targetFile, JSON.stringify(pkgJson, null, 2) + '\n');
-            return true;
-        }
+        const name = Object.keys(resetPackage)[0];
+        return addPackageToPkgJson(host, name, resetPackage[name], 'dependencies');
     }
     return false;
 }

projects/igniteui-angular/schematics/ng-add/index.spec.ts

@@ -4,6 +4,7 @@ import * as path from 'path';
 import { getWorkspace } from '@schematics/angular/utility/config';
 import { scssImport, cssImport } from './add-normalize';
 import { ProjectType } from '@schematics/angular/utility/workspace-models';
+import { DEPENDENCIES_MAP, PackageTarget, PackageEntry } from '../utils/dependency-handler';
 
 describe('ng-add schematics', () => {
   const collectionPath = path.join(__dirname, '../collection.json');
@@ -57,11 +58,34 @@ describe('ng-add schematics', () => {
     expect(Object.keys(pkgJsonData).length).toBeGreaterThan(0);
   });
 
+  it('should include ALL dependencies in map', () => {
+    const pkgJson = require('../../package.json');
+    const allDependencies = Object.assign({}, pkgJson.dependencies, pkgJson.peerDependencies, pkgJson.igxDevDependencies);
+    for (const key of Object.keys(allDependencies)) {
+      const expectedPackages: PackageEntry = {
+        name: key,
+        target: jasmine.anything() as any
+      };
+      expect(DEPENDENCIES_MAP).toContain(expectedPackages, `Dependency ${key} missing in dependencies map!`);
+    }
+  });
+
   it('should add packages to package.json dependencies', () => {
+    const expectedDeps = DEPENDENCIES_MAP.filter(dep => dep.target === PackageTarget.REGULAR).map(dep => dep.name);
+    const expectedDevDeps = DEPENDENCIES_MAP.filter(dep => dep.target === PackageTarget.DEV).map(dep => dep.name);
     runner.runSchematic('ng-add', { normalizeCss: false }, tree);
     const pkgJsonData = JSON.parse(tree.readContent('/package.json'));
     expect(pkgJsonData.dependencies).toBeTruthy();
     expect(pkgJsonData.devDependencies).toBeTruthy();
+    // Check for explicit dependencies
+    expect(Object.keys(pkgJsonData.dependencies).length).toEqual(expectedDeps.length, `Different number of added dependencies!`);
+    expect(Object.keys(pkgJsonData.devDependencies).length).toEqual(expectedDevDeps.length, `Different number of added devDependencies!`);
+    for (const dependency of expectedDeps) {
+      expect(pkgJsonData.dependencies.hasOwnProperty(dependency)).toEqual(true, `Dependency ${dependency} is missing from output!`);
+    }
+    for (const dependency of expectedDevDeps) {
+      expect(pkgJsonData.devDependencies.hasOwnProperty(dependency)).toEqual(true, `DevDependency ${dependency} is missing from output!`);
+    }
   });
 
   it('should add the correct igniteui-angular packages to package.json dependencies', () => {

projects/igniteui-angular/schematics/ng-add/index.ts

@@ -5,7 +5,7 @@ import { logSuccess, addDependencies, overwriteJsonFile,
     getPropertyFromWorkspace, getConfigFile } from '../utils/dependency-handler';
 
 import { addResetCss } from './add-normalize';
-import { getWorkspace, getConfig } from '@schematics/angular/utility/config';
+import { getWorkspace } from '@schematics/angular/utility/config';
 import { WorkspaceSchema } from '@schematics/angular/utility/workspace-models';
 
 

projects/igniteui-angular/schematics/utils/dependency-handler.ts

@@ -2,9 +2,41 @@ import { SchematicContext, Rule, SchematicsException } from '@angular-devkit/sch
 import { Tree } from '@angular-devkit/schematics/src/tree/interface';
 import { getWorkspace } from '@schematics/angular/utility/config';
 import { Options } from '../interfaces/options';
-import { WorkspaceProject, ProjectType, WorkspaceSchema } from '@schematics/angular/utility/workspace-models';
+import { WorkspaceProject, ProjectType } from '@schematics/angular/utility/workspace-models';
+
+
+export enum PackageTarget {
+    DEV = 'devDependencies',
+    REGULAR = 'dependencies',
+    NONE = 'none'
+}
+export interface PackageEntry {
+    name: string;
+    target: PackageTarget;
+}
+
 
 const schematicsPackage = '@igniteui/angular-schematics';
+/**
+ * Dependencies are explicitly defined here, so we avoid adding
+ * unnecessary packages to the consuming project's deps
+ */
+export const DEPENDENCIES_MAP: PackageEntry[] = [
+        // dependencies
+        { name: 'hammerjs', target: PackageTarget.REGULAR },
+        { name: 'jszip', target: PackageTarget.REGULAR },
+        { name: 'resize-observer-polyfill', target: PackageTarget.REGULAR },
+        { name: '@types/hammerjs', target: PackageTarget.DEV },
+        { name: '@types/jszip', target: PackageTarget.DEV },
+        // peerDependencies
+        { name: '@angular/forms', target: PackageTarget.NONE },
+        { name: '@angular/common', target: PackageTarget.NONE },
+        { name: '@angular/core', target: PackageTarget.NONE },
+        { name: '@angular/animations', target: PackageTarget.NONE },
+        { name: 'web-animations-js', target: PackageTarget.REGULAR },
+        // igxDevDependencies
+        { name: '@igniteui/angular-schematics', target: PackageTarget.DEV }
+];
 
 function logIncludingDependency(context: SchematicContext, pkg: string, version: string): void {
     context.logger.info(`Including ${pkg} - Version: ${version}`);
@@ -52,22 +84,20 @@ export function logSuccess(options: Options): Rule {
 export function addDependencies(options: Options): Rule {
     return (tree: Tree, context: SchematicContext) => {
         const pkgJson = require('../../package.json');
-        const dependencies = 'dependencies';
-        const devDependencies = 'devDependencies';
 
-        includeDependencies(pkgJson, context, tree, dependencies);
+        includeDependencies(pkgJson, context, tree);
 
         // Add web-animations-js to dependencies
         Object.keys(pkgJson.peerDependencies).forEach(pkg => {
-            const version = pkgJson.peerDependencies[pkg];
             if (pkg.includes('web-animations')) {
-                addPackageToPkgJson(tree, pkg, version, dependencies);
+                const version = pkgJson.peerDependencies[pkg];
+                addPackageToPkgJson(tree, pkg, version, PackageTarget.REGULAR);
                 logIncludingDependency(context, pkg, version);
                 return;
             }
         });
 
-        addPackageToPkgJson(tree, schematicsPackage, pkgJson.igxDevDependencies[schematicsPackage], devDependencies);
+        addPackageToPkgJson(tree, schematicsPackage, pkgJson.igxDevDependencies[schematicsPackage], PackageTarget.DEV);
         return tree;
     };
 }
@@ -102,13 +132,17 @@ export function getPropertyFromWorkspace(targetProp: string, workspace: any, cur
     return null;
 }
 
-function includeDependencies(pkgJson: any, context: SchematicContext, tree: Tree, dependenciesKey: string) {
+function includeDependencies(pkgJson: any, context: SchematicContext, tree: Tree) {
     Object.keys(pkgJson.dependencies).forEach(pkg => {
         const version = pkgJson.dependencies[pkg];
+        const entry = DEPENDENCIES_MAP.find(e => e.name === pkg);
+        if (!entry || entry.target === PackageTarget.NONE) {
+            return;
+        }
         switch (pkg) {
             case 'hammerjs':
                 logIncludingDependency(context, pkg, version);
-                addPackageToPkgJson(tree, pkg, version, dependenciesKey);
+                addPackageToPkgJson(tree, pkg, version, entry.target);
 
                 const workspace = getWorkspace(tree);
                 const project = workspace.projects[workspace.defaultProject];
@@ -126,42 +160,13 @@ function includeDependencies(pkgJson: any, context: SchematicContext, tree: Tree
                 break;
             default:
                 logIncludingDependency(context, pkg, version);
-                addPackageToPkgJson(tree, pkg, version, dependenciesKey);
+                addPackageToPkgJson(tree, pkg, version, entry.target);
                 break;
         }
     });
 }
 
-/**
- * Add an item to an angular.json section, within the architect
- * @param workspace Angular Workspace Schema (angular.json)
- * @param key Architect tool key to add option to
- */
-function addItemToAngularWorkspace(workspace: WorkspaceSchema, key: string, item: string): boolean {
-    const currentProjectName = workspace.defaultProject;
-    if (currentProjectName) {
-        if (!workspace.projects[currentProjectName].architect) {
-            workspace.projects[currentProjectName].architect = {};
-        }
-        if (!workspace.projects[currentProjectName].architect[key]) {
-            workspace.projects[currentProjectName].architect[key] = {};
-        }
-        if (!workspace.projects[currentProjectName].architect[key].options) {
-            workspace.projects[currentProjectName].architect[key].options = {};
-        }
-        if (!workspace.projects[currentProjectName].architect[key].options.scripts) {
-            workspace.projects[currentProjectName].architect[key].options.scripts = [];
-        }
-        if (!workspace.projects[currentProjectName].architect[key].options.scripts.includes(item)) {
-            workspace.projects[currentProjectName].architect[key].options.scripts.push(item);
-            return true;
-        }
-
-        return false;
-    }
-}
-
-function addPackageToPkgJson(tree: Tree, pkg: string, version: string, target: string): Tree {
+export function addPackageToPkgJson(tree: Tree, pkg: string, version: string, target: string): boolean {
     const targetFile = 'package.json';
     if (tree.exists(targetFile)) {
         const sourceText = tree.read(targetFile).toString();
@@ -179,7 +184,9 @@ function addPackageToPkgJson(tree: Tree, pkg: string, version: string, target: s
                     .reduce((result, key) => (result[key] = json[target][key]) && result, {});
             tree.overwrite(targetFile, JSON.stringify(json, null, 2) + '\n');
         }
+
+        return true;
     }
 
-    return tree;
+    return false;
 }