feat(ng-add): integrate with ng-add

Usage:
`npm install @angular-extensions/svg-icons-builder` or
`ng add @angular-extensions/svg-icons-builder`

- adds `svg-to-ts` as a dev dependency

README.md

@@ -11,6 +11,12 @@ Find out more on the official [svg-to-ts docs](https://github.com/kreuzerk/svg-t
 
 ## Usage
 
+### Installation
+
+NPM: `npm install @angular-extensions/svg-icons-builder`
+
+Angular CLI: `ng add @angular-extensions/svg-icons-builder`
+
 ### Configuring the builder
 
 To use the builder you need to add a new entry to your `architect` object inside your `angular.json`. In our example we call it `generate-icons`. You then need to specify the following properties:

package.json

@@ -15,7 +15,10 @@
   ],
   "author": "",
   "license": "MIT",
-  "schematics": "./collection.json",
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "devDependencies"
+  },
   "builders": "./builders.json",
   "dependencies": {
     "@angular-devkit/core": "^10.1.6",

schematics/collection.json

@@ -2,8 +2,9 @@
   "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
     "ng-add": {
-      "description": "A blank schematic.",
-      "factory": "./ng-add/index#ngAdd"
+      "description": "Add svg-to-ts to a project",
+      "factory": "./ng-add/index#ngAdd",
+      "aliases": ["install"]
     }
   }
 }

schematics/ng-add/index.spec.ts

@@ -1,14 +1,32 @@
 import { Tree } from '@angular-devkit/schematics';
-import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import * as path from 'path';
 
 const collectionPath = path.join(__dirname, '../collection.json');
 const runner = new SchematicTestRunner('schematics', collectionPath);
 
 describe('ng-add', () => {
-  it('works', async () => {
-    const tree = await runner.runSchematicAsync('ng-add', {}, Tree.empty()).toPromise();
+  let appTree: UnitTestTree;
 
-    expect(tree.files).toEqual([]);
+  beforeEach(() => {
+    appTree = new UnitTestTree(Tree.empty());
+    appTree.create('/package.json', JSON.stringify({ devDependencies: {} }));
+  });
+
+  it('should update package.json', async () => {
+    const tree = await runner.runSchematicAsync('ng-add', { preserveAngularCLILayout: true }, appTree).toPromise();
+
+    const result = JSON.parse(tree.readContent('/package.json')).devDependencies;
+    expect(result['svg-to-ts']).toBeDefined();
+  });
+
+  it('should error if no package.json is present', async () => {
+    appTree.delete('package.json');
+    try {
+      await runner.runSchematicAsync('ng-add', { name: 'myApp' }, appTree).toPromise();
+      fail('should throw');
+    } catch (e) {
+      expect(e.message).toContain('Cannot find package.json');
+    }
   });
 });

schematics/ng-add/index.ts

@@ -1,9 +1,44 @@
 import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+
+const svgToTsVersion = '^5.7.0';
 
-// You don't have to export the function as default. You can also have more than one rule factory
-// per file.
 export function ngAdd(_options: any): Rule {
   return (tree: Tree, _context: SchematicContext) => {
+    addPackageToPackageJson(tree, 'svg-to-ts', `${svgToTsVersion}`);
+    _context.logger.log('info', `Installing added packages...`);
+    _context.addTask(new NodePackageInstallTask());
     return 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);
+
+    if (!json.devDependencies) {
+      json.devDependencies = {};
+    }
+
+    if (!json.devDependencies[pkg]) {
+      json.devDependencies[pkg] = version;
+      json.devDependencies = sortObjectByKeys(json.devDependencies);
+    }
+
+    host.overwrite('package.json', JSON.stringify(json, null, 2));
+  } else {
+    throw new Error(`Cannot find package.json`);
+  }
+
+  return host;
+}
+
+function sortObjectByKeys(obj: any) {
+  return Object.keys(obj)
+    .sort()
+    .reduce((result: any, key) => {
+      result[key] = obj[key];
+      return result;
+    }, {});
+}