diff --git a/README.md b/README.md index b6193c3..edd8f0b 100644 --- a/README.md +++ b/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: diff --git a/package.json b/package.json index d6eb652..c394665 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,9 @@ "author": "", "license": "MIT", "schematics": "./collection.json", + "ng-add": { + "save": "devDependencies" + }, "builders": "./builders.json", "dependencies": { "@angular-devkit/core": "^10.1.6", diff --git a/src/collection.json b/src/collection.json index dccef64..6124e9c 100644 --- a/src/collection.json +++ b/src/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"] } } } diff --git a/src/ng-add/index.spec.ts b/src/ng-add/index.spec.ts index bc5be25..3d7b01c 100644 --- a/src/ng-add/index.spec.ts +++ b/src/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 runner = new SchematicTestRunner('schematics', collectionPath); - 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'); + } }); }); diff --git a/src/ng-add/index.ts b/src/ng-add/index.ts index f7ea8d5..7ac05c1 100644 --- a/src/ng-add/index.ts +++ b/src/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; + }, {}); +}