feat(schematics): enhance component generator (#3265)

schematics/collection.json

@@ -23,6 +23,12 @@
       "factory": "./ng-add/setup-project/add-icon-assets#addIconToAssets",
       "schema": "./ng-generate/boot-page/schema.json",
       "aliases": ["fix-icon"]
+    },
+    "component": {
+      "aliases": [ "c" ],
+      "factory": "./ng-component",
+      "description": "Create an Angular component.",
+      "schema": "./ng-component/schema.json"
     }
   }
 }

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
+
+@Component({
+  selector: '<%= selector %>',<% if(inlineTemplate) { %>
+  template: `
+    <p>
+      <%= dasherize(name) %> works!
+    </p>
+  `,<% } else { %>
+  templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
+  styles: []<% } else { %>
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
+})
+export class <%= classify(name) %>Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

schematics/ng-component/index.ts

@@ -0,0 +1,15 @@
+import {
+  chain,
+  Rule
+} from '@angular-devkit/schematics';
+import { buildComponent } from '../utils/build-component';
+
+import { Schema } from './schema';
+
+export default function(options: Schema): Rule {
+  return chain([
+    buildComponent(
+      { ...options }
+    )
+  ]);
+}

schematics/ng-component/schema.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "PLACEHOLDER_SCHEMATICS_ID",
+  "title": "PLACEHOLDER_SCHEMATICS_TITLE",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What should be the name of the component?"
+    },
+    "inlineStyle": {
+      "description": "When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "When true, includes template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "The view encapsulation strategy to use in the new component.",
+      "enum": ["Emulated", "Native", "None", "ShadowDom"],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": ["Default", "OnPush"],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to the generated component selector.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to use for style files.",
+      "type": "string",
+      "default": "css",
+      "x-deprecated": "Use \"style\" instead."
+    },
+    "style": {
+      "description": "The file extension or preprocessor to use for style files.",
+      "type": "string",
+      "default": "css",
+      "enum": [
+        "css",
+        "scss",
+        "sass",
+        "less",
+        "styl"
+      ]
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "When true (the default), generates a  \"spec.ts\" test file for the new component.",
+      "default": true,
+      "x-deprecated": "Use \"skipTests\" instead."
+    },
+    "skipTests": {
+      "type": "boolean",
+      "description": "When true, does not create \"spec.ts\" test files for the new component."
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "When true, does not import this component into the owning NgModule."
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "When true, the declaring NgModule exports this component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "When true, the new component is the entry component of the declaring NgModule."
+    },
+    "classnameWithModule": {
+      "type": "boolean",
+      "description": "When true, Use module class name as additional prefix for the component classname.",
+      "default": false
+    }
+  },
+  "required": [
+    "name"
+  ]
+}

schematics/ng-component/schema.ts

@@ -0,0 +1,5 @@
+import { ZorroComponentOptions } from '../utils/build-component';
+
+export interface Schema extends ZorroComponentOptions {
+  [key: string]: string | boolean;
+}