feat: 🎸 add scheamtics to generate an icon library

Author: nivekcode

package-lock.json

@@ -34,7 +34,8 @@
  },
  "dependencies": {
  "@angular-devkit/core": "^10.1.6",
- "@angular-devkit/schematics": "^10.1.6",
+ "@angular-devkit/schematics": "^10.2.1",
+ "@schematics/angular": "^11.0.6",
  "svg-to-ts": "^5.7.0",
  "typescript": "~4.0.2"
  },

package.json

@@ -5,6 +5,11 @@
  "description": "Add svg-to-ts to a project",
  "factory": "./ng-add/index#ngAdd",
  "aliases": ["install"]
+ },
+ "ng-generate-icon-lib": {
+ "description": "Scaffold Angular icon library code in your project",
+ "factory": "./ng-generate-icon-lib/index#generateIconLibrary",
+ "schema": "./ng-generate-icon-lib/schema.json"
  }
  }
 }

schematics/collection.json

@@ -0,0 +1,38 @@
+import {<%= capitalize(camelize(name)) %>Registry} from './<%= dasherize(name) %>-registry.service';
+
+describe('<%= capitalize(camelize(name)) %>Registry', () => {
+ let sut: <%=capitalize(camelize(name)) %>Registry;
+
+ beforeEach(() => (sut = new <%=capitalize(camelize(name)) %>Registry()));
+
+ it('should add icons to the registry', () => {
+ const iconName = 'someicon' as any;
+ const iconData = 'some data' as any;
+ const someIcon = { name: iconName, data: iconData };
+
+ sut.registerIcons([someIcon]);
+ expect(sut.getIcon(iconName)).toEqual(iconData);
+ });
+
+ it('should add multiple icons to the registry', () => {
+ const iconOneName = 'barIcon' as any;
+ const iconTwoName = 'fooIcon' as any;
+ const iconOneData = 'iconOneData';
+ const iconTwoData = 'iconTwoData';
+ const iconOne = { name: iconOneName, data: iconOneData };
+ const iconTwo = { name: iconTwoName, data: iconTwoData };
+
+ sut.registerIcons([iconOne, iconTwo]);
+ expect(sut.getIcon(iconOneName)).toEqual(iconOneData);
+ expect(sut.getIcon(iconTwoName)).toEqual(iconTwoData);
+ });
+
+ it('should print a warning if an icon is not in the registry', () => {
+ spyOn(console, 'warn');
+ const iconName = 'someIcon' as any;
+ sut.getIcon(iconName);
+ expect(console.warn).toHaveBeenCalledWith(
+ `👀 we could not find the Icon with the name ${iconName}, did you add it to the Icon registry?`
+ );
+ });
+});

schematics/ng-generate-icon-lib/files/__name@dasherize__/__name@dasherize__-registry.service.spec.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+import { <%= iconType %>, <%= iconInterface %>} from '<%= iconImportPath %>';
+
+@Injectable({
+ providedIn: 'any'
+})
+export class <%= capitalize(camelize(name)) %>Registry {
+ private registry = new Map<<%= iconType %>, string>();
+
+ public registerIcons(icons: <%= iconInterface %>[]): void {
+ icons.forEach((icon: any) => this.registry.set(icon.name, icon.data));
+ }
+
+ public getIcon(iconName: <%= iconType %>): string | undefined {
+ if (!this.registry.has(iconName)) {
+ console.warn(
+ `👀 we could not find the Icon with the name ${iconName}, did you add it to the Icon registry?`
+ );
+ }
+ return this.registry.get(iconName);
+ }
+}

schematics/ng-generate-icon-lib/files/__name@dasherize__/__name@dasherize__-registry.service.ts

@@ -0,0 +1,46 @@
+import {<%= capitalize(camelize(name)) %>Component} from './<%= dasherize(name) %>.component';
+
+describe('<%= capitalize(camelize(name)) %>Component', () => {
+
+ let sut;
+
+ const elementMock = {
+ nativeElement: {
+ removeChild: jasmine.createSpy(),
+ appendChild: jasmine.createSpy()
+ }
+ };
+
+ const iconRegistryMock = {
+ getIcon: jasmine.createSpy()
+ } as any;
+
+ beforeEach(() => sut = new <%= capitalize(camelize(name)) %>Component(elementMock, iconRegistryMock, document));
+
+ it('should append an SVG element to the ElementRef', () => {
+ const iconName = 'my-awesome-icon';
+ const svgData = '<svg>some svg content</svg>';
+ const div = document.createElement('DIV');
+ div.innerHTML = svgData;
+
+ iconRegistryMock.getIcon.and.callFake((name) => name === iconName ? svgData : null);
+
+ sut.name = iconName;
+ expect(elementMock.nativeElement.appendChild).toHaveBeenCalledWith(div.querySelector('svg'));
+ });
+
+ it('should remove the previous element if we want to append a new one', () => {
+ const iconName = 'my-awesome-icon';
+ const svgData = '<svg>some svg content</svg>';
+ const div = document.createElement('DIV');
+ div.innerHTML = svgData;
+
+ iconRegistryMock.getIcon.and.callFake((name) => name === iconName ? svgData : null);
+
+ sut.name = iconName;
+ expect(elementMock.nativeElement.appendChild).toHaveBeenCalledWith(div.querySelector('svg'));
+
+ sut.name = 'anotherIcon';
+ expect(elementMock.nativeElement.removeChild).toHaveBeenCalled();
+ });
+});

schematics/ng-generate-icon-lib/files/__name@dasherize__/__name@dasherize__.component.spec.ts

@@ -0,0 +1,37 @@
+import {ChangeDetectionStrategy, Component, ElementRef, Inject, Input, Optional} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {<%= iconInterface %>} from '<%= iconImportPath %>';
+
+import {<%= capitalize(camelize(name)) %>Registry} from './<%= dasherize(name) %>-registry.service';
+
+@Component({
+ selector: '<%= dasherize(name) %>',
+ template: `
+ <ng-content></ng-content>
+ `,
+ styles: [':host::ng-deep svg{width: <%= defaultIconSize %>px; height: <%= defaultIconSize %>px}'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= capitalize(camelize(name)) %>Component {
+ private svgIcon: SVGElement;
+
+ @Input()
+ set name(iconName: <%= iconInterface %>) {
+ if (this.svgIcon) {
+ this.element.nativeElement.removeChild(this.svgIcon);
+ }
+ const svgData = this.<%= camelize(name) %>Registry.getIcon(iconName);
+ this.svgIcon = this.svgElementFromString(svgData);
+ this.element.nativeElement.appendChild(this.svgIcon);
+ }
+
+ constructor(private element: ElementRef, private <%= camelize(name) %>Registry: <%= capitalize(camelize(name)) %>Registry,
+ @Optional() @Inject(DOCUMENT) private document: any) {
+ }
+
+ private svgElementFromString(svgContent: string): SVGElement {
+ const div = this.document.createElement('DIV');
+ div.innerHTML = svgContent;
+ return div.querySelector('svg') || this.document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ }
+}

schematics/ng-generate-icon-lib/files/__name@dasherize__/__name@dasherize__.component.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { <%= capitalize(camelize(name)) %>Component } from './<%= dasherize(name) %>.component';
+
+@NgModule({
+ declarations: [<%= capitalize(camelize(name)) %>Component],
+ exports: [<%= capitalize(camelize(name)) %>Component],
+ imports: [CommonModule]
+})
+export class <%= capitalize(camelize(name)) %>Module {}

schematics/ng-generate-icon-lib/files/__name@dasherize__/__name@dasherize__.module.ts

@@ -0,0 +1,14 @@
+import { Tree } from '@angular-devkit/schematics';
+import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+import * as path from 'path';
+
+const collectionPath = path.join(__dirname, '../collection.json');
+
+describe('ng-icon-lib', () => {
+ it('works', async () => {
+ const runner = new SchematicTestRunner('schematics', collectionPath);
+ const tree = await runner.runSchematicAsync('ng-icon-lib', {}, Tree.empty()).toPromise();
+
+ expect(tree.files).toEqual([]);
+ });
+});