chore(schematics): basic Nebular schematic for components development (…

…#477)

.gitignore

@@ -46,3 +46,5 @@ testem.log
 Thumbs.db
 debug.log
 local.log
+
+/schematics/dist

package.json

@@ -38,6 +38,7 @@
     "build:inline-resources": "gulp inline-resources",
     "build:bundle": "gulp bundle",
     "build:rename:dev": "gulp bundle:rename-dev",
+    "build:schematics": "rimraf ./schematics/dist && tsc -p ./schematics/tsconfig.json && gulp copy-schematics",
     "test": "ng test",
     "test:wp": "npm run test -- playground-wp",
     "test:watch": "ng test playground-wp --watch",
@@ -150,6 +151,9 @@
     "tslint": "5.7.0",
     "tslint-language-service": "0.9.6",
     "typedoc": "0.7.1",
-    "typescript": "2.7.2"
-  }
+    "typescript": "2.7.2",
+    "@angular-devkit/core": "^0.6.5",
+    "@angular-devkit/schematics": "^0.6.5"
+  },
+  "schematics": "./schematics/dist/collection.json"
 }

schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "new-component": {
+      "description": "A new Nebular component schematic.",
+      "factory": "./new-component/index#newComponent",
+      "schema": "./new-component/schema.json"
+    }
+  }
+}

schematics/new-component/files/__path__/__name@dasherize__/__name@dasherize__.component.__styleext__

@@ -0,0 +1,3 @@
+:host {
+  color: red;
+}

schematics/new-component/files/__path__/__name@dasherize__/__name@dasherize__.component.html

@@ -0,0 +1 @@
+<strong>Hello <%= classify(className) %>Component</strong>

schematics/new-component/files/__path__/__name@dasherize__/__name@dasherize__.component.spec.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(className) %>Component } from './<%= dasherize(name) %>.component';
+
+describe('<%= classify(className) %>Component', () => {
+  let component: <%= classify(className) %>Component;
+  let fixture: ComponentFixture<<%= classify(className) %>Component>;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ <%= classify(className) %>Component ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(<%= classify(className) %>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

schematics/new-component/files/__path__/__name@dasherize__/__name@dasherize__.component.theme.__styleext__

@@ -0,0 +1,9 @@
+@mixin <%= selector %>-theme() {
+  <%= selector %> {
+    font-family: nb-theme(<%= dasherize(name) %>-font-family);
+    font-size: nb-theme(<%= dasherize(name) %>-font-size);
+    font-weight: nb-theme(<%= dasherize(name) %>-font-weight);
+    background: nb-theme(<%= dasherize(name) %>-bg);
+    color: nb-theme(<%= dasherize(name) %>-fg);
+  }
+}

schematics/new-component/files/__path__/__name@dasherize__/__name@dasherize__.component.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: '<%= selector %>',
+  templateUrl: './<%= dasherize(name) %>.component.html',
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class <%= classify(className) %>Component {
+}

schematics/new-component/files/__path__/__name@dasherize__/__name@dasherize__.module.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, NgModule } from '@angular/core';
+import { <%= classify(className) %>Component } from './<%= dasherize(name) %>.component';
+
+@NgModule({
+  exports: [ <%= classify(className) %>Component ],
+  declarations: [ <%= classify(className) %>Component ],
+})
+export class <%= classify(className) %>Module { }

schematics/new-component/index.ts

@@ -0,0 +1,69 @@
+import {
+  apply,
+  branchAndMerge,
+  chain,
+  mergeWith,
+  Rule,
+  SchematicContext,
+  template,
+  Tree,
+  url,
+} from '@angular-devkit/schematics';
+import { basename, dirname, normalize, Path, strings } from '@angular-devkit/core';
+
+// You don't have to export the function as default. You can also have more than one rule factory
+// per file.
+export function newComponent(options: any): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+
+    options.path = '/src/framework/theme/components/';
+    options.prefix = 'nb';
+    options.selector = options.selector || buildSelector(options);
+
+    const parsedPath = parseName(options.path, options.name);
+    options.name = parsedPath.name;
+    options.path = parsedPath.path;
+
+    options.className = buildClassName(options);
+
+    const templateSource = apply(url('./files'), [
+      template({
+        ...strings,
+        ...options,
+      }),
+    ]);
+
+    return chain([
+      branchAndMerge(chain([
+        mergeWith(templateSource),
+      ])),
+    ])(tree, context);
+  };
+}
+
+export function parseName(path: string, name: string): { name: string, path: Path } {
+  const nameWithoutPath = basename(name as Path);
+  const namePath = dirname((path + '/' + name) as Path);
+
+  return {
+    name: nameWithoutPath,
+    path: normalize('/' + namePath),
+  };
+}
+
+function buildSelector(options: any) {
+  let selector = strings.dasherize(options.name);
+  if (options.prefix) {
+    selector = `${options.prefix}-${selector}`;
+  }
+
+  return selector;
+}
+
+function buildClassName(options: any) {
+  return capitalize(options.prefix) + options.name;
+}
+
+function capitalize(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}

schematics/new-component/index_spec.ts

@@ -0,0 +1,16 @@
+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('new-component', () => {
+  it('works', () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = runner.runSchematic('new-component', {}, Tree.empty());
+
+    expect(tree.files).toEqual([]);
+  });
+});

schematics/new-component/schema.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "new-component",
+  "title": "New Nebular Component Schema",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "prefix": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p"
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "scss"
+    }
+  },
+  "required": [
+    "name"
+  ]
+}

schematics/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": "tsconfig",
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "rootDir": "./",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "es6",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "include": [
+    "./**/*"
+  ],
+  "exclude": [
+    "./*/files/**/*",
+    "dist"
+  ]
+}

scripts/gulp/tasks/copy-sources.ts

@@ -11,6 +11,15 @@ task('copy-sources', () => {
     .on('end', replaceScssWithCss);
 });
 
+task('copy-schematics', () => {
+  src([
+    './schematics/**/*.json',
+    './schematics/**/files/**/*',
+    '!./schematics/dist/**/*',
+  ])
+    .pipe(dest('./schematics/dist/'));
+});
+
 function replaceScssWithCss() {
   src(`${BUILD_DIR}/**/*.ts`)
     .pipe(replace('.scss', '.css'))