feat(schematics): add custom component schematic

Author: mhartington

collection.json

@@ -12,7 +12,9 @@
     },
     "component": {
       "aliases": ["c"],
-      "extends": "@schematics/angular:component"
+      "factory": "./schematics/component",
+      "description": "Create an Angular component.",
+      "schema": "./schematics/component/schema.json"
     },
     "directive": {
       "aliases": ["d"],

package.json

@@ -37,8 +37,8 @@
   "devDependencies": {
     "@angular-devkit/architect": "^0.12.3",
     "@angular-devkit/build-angular": "^0.12.3",
-    "@angular-devkit/core": "^7.1.3",
-    "@angular-devkit/schematics": "^7.1.3",
+    "@angular-devkit/core": "~7.2.0",
+    "@angular-devkit/schematics": "~7.2.0",
     "@semantic-release/changelog": "^3.0.0",
     "@semantic-release/git": "^7.0.4",
     "@semantic-release/github": "^5.0.6",

schematics/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__

@@ -0,0 +1,3 @@
+<p>
+  <%= dasherize(name) %> works!
+</p>

schematics/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %>Page } from './<%= dasherize(name) %>.page';
+
+describe('<%= classify(name) %>Page', () => {
+  let component: <%= classify(name) %>Page;
+  let fixture: ComponentFixture<<%= classify(name) %>Page>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ <%= classify(name) %>Page ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%= classify(name) %>Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

schematics/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: '<%= selector %>',
+  templateUrl: './<%= dasherize(name) %>.component.html',
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],
+})
+export class <%= classify(name) %>Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

schematics/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
+
+@NgModule({
+  imports: [ CommonModule, FormsModule,IonicModule,],
+  declarations: [<%= classify(name) %>Component],
+  exports: [<%= classify(name) %>Component]
+})
+export class <%= classify(name) %>ComponentModule {}

schematics/component/files/__name@dasherize@if-flat__/__name@dasherize__.module.ts

@@ -0,0 +1,101 @@
+import { strings } from '@angular-devkit/core';
+import { Rule, SchematicsException, Tree, apply, branchAndMerge, chain, filter, mergeWith, move, noop, template, url } from '@angular-devkit/schematics';
+import { addSymbolToNgModuleMetadata } from '@schematics/angular/utility/ast-utils';
+import { InsertChange } from '@schematics/angular/utility/change';
+import { buildRelativePath } from '@schematics/angular/utility/find-module';
+import { parseName } from '@schematics/angular/utility/parse-name';
+import { buildDefaultPath, getProject } from '@schematics/angular/utility/project';
+import { validateHtmlSelector, validateName } from '@schematics/angular/utility/validation';
+import * as ts from 'typescript';
+
+import { Schema as ComponentOptions } from './schema';
+
+function buildSelector(options: ComponentOptions, projectPrefix: string) {
+  let selector = strings.dasherize(options.name);
+
+  if (options.prefix) {
+    selector = `${options.prefix}-${selector}`;
+  } else if (options.prefix === undefined && projectPrefix) {
+    selector = `${projectPrefix}-${selector}`;
+  }
+
+  return selector;
+}
+
+function readIntoSourceFile(host: Tree, modulePath: string): ts.SourceFile {
+  const text = host.read(modulePath);
+  if (text === null) {
+    throw new SchematicsException(`File ${modulePath} does not exist.`);
+  }
+  const sourceText = text.toString('utf-8');
+
+  return ts.createSourceFile(modulePath, sourceText, ts.ScriptTarget.Latest, true);
+}
+
+function addImportToNgModule(options: ComponentOptions): Rule {
+  return (host: Tree) => {
+    if (!options.module) {
+      return host;
+    }
+
+    const modulePath = options.module;
+    const moduleSource = readIntoSourceFile(host, modulePath);
+
+    const componentModulePath = `/${options.path}/`
+                          + (options.flat ? '' : strings.dasherize(options.name) + '/')
+                          + strings.dasherize(options.name)
+                          + '.module';
+
+    const relativePath = buildRelativePath(modulePath, componentModulePath);
+    const classifiedName = strings.classify(`${options.name}ComponentModule`);
+    const importChanges = addSymbolToNgModuleMetadata(moduleSource, modulePath, 'imports', classifiedName, relativePath);
+
+    const importRecorder = host.beginUpdate(modulePath);
+    for (const change of importChanges) {
+      if (change instanceof InsertChange) {
+        importRecorder.insertLeft(change.pos, change.toAdd);
+      }
+    }
+    host.commitUpdate(importRecorder);
+    return host;
+  };
+}
+
+export default function(options: ComponentOptions): Rule {
+  return (host, context) => {
+    if (!options.project) {
+      throw new SchematicsException('Option (project) is required.');
+    }
+
+    const project = getProject(host, options.project);
+
+    if (options.path === undefined) {
+      options.path = buildDefaultPath(project);
+    }
+
+    const parsedPath = parseName(options.path, options.name);
+    options.name = parsedPath.name;
+    options.path = parsedPath.path;
+    options.selector = options.selector ? options.selector : buildSelector(options, project.prefix);
+
+    validateName(options.name);
+    validateHtmlSelector(options.selector);
+
+    const templateSource = apply(url('./files'), [
+      options.spec ? noop() : filter(p => !p.endsWith('.spec.ts')),
+      template({
+        ...strings,
+        'if-flat': (s: string) => options.flat ? '' : s,
+        ...options,
+      }),
+      move(parsedPath.path),
+    ]);
+
+    return chain([
+      branchAndMerge(chain([
+        addImportToNgModule(options),
+        mergeWith(templateSource),
+      ])),
+    ])(host, context);
+  };
+}

schematics/component/index.ts

@@ -0,0 +1,11 @@
+export interface Schema {
+  path?: string;
+  project?: string;
+  name: string;
+  prefix?: string;
+  styleext?: string;
+  spec?: boolean;
+  flat?: boolean;
+  selector?: string;
+  module?: string;
+}

schematics/component/schema.d.ts

@@ -0,0 +1,69 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "SchematicsIonicAngularComponent",
+  "title": "@ionic/angular Component Options Schema",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the page",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the page",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "type": "string",
+      "description": "The file extension of the style file for the page",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the page"
+    },
+    "module":  {
+      "type": "string",
+      "description": "Allows specification of the declaring module",
+      "alias": "m"
+    }
+  },
+  "required": []
+}