diff --git a/schematics/collection.json b/schematics/collection.json index 5f482db720b..e6cca6f317a 100644 --- a/schematics/collection.json +++ b/schematics/collection.json @@ -2,6 +2,13 @@ { "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json", "schematics": { + // Creates toolbar and navigation components + "materialNav": { + "description": "Create a responsive navigation component", + "factory": "./nav/index", + "schema": "./nav/schema.json", + "aliases": [ "material-nav" ] + }, // Adds Angular Material to an application without changing any templates "materialShell": { "description": "Create a Material shell", diff --git a/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ b/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ new file mode 100644 index 00000000000..acf02cabde0 --- /dev/null +++ b/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ @@ -0,0 +1,8 @@ +.sidenav-container { + height: 100%; +} + +.sidenav { + width: 200px; + box-shadow: 3px 0 6px rgba(0,0,0,.24); +} diff --git a/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html new file mode 100644 index 00000000000..c0bd9312648 --- /dev/null +++ b/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html @@ -0,0 +1,29 @@ + + + Menu + + Link 1 + Link 2 + Link 3 + + + + + + Application Title + + + diff --git a/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts b/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts new file mode 100644 index 00000000000..ad38814c940 --- /dev/null +++ b/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts @@ -0,0 +1,24 @@ + +import { fakeAsync, 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(fakeAsync(() => { + TestBed.configureTestingModule({ + declarations: [ <%= classify(name) %>Component ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(<%= classify(name) %>Component); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should compile', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts new file mode 100644 index 00000000000..45e53f5f9d2 --- /dev/null +++ b/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -0,0 +1,58 @@ +import { Component, <% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; +import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout'; +import { Observable } from 'rxjs/Observable'; + +@Component({ + selector: '<%= selector %>',<% if(inlineTemplate) { %> + template: ` + + + Menu + + Link 1 + Link 2 + Link 3 + + + + + + Application Title + + + + `,<% } else { %> + templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %> + styles: [ + ` + .sidenav-container { + height: 100%; + } + + .sidenav { + width: 200px; + box-shadow: 3px 0 6px rgba(0,0,0,.24); + } + ` + ]<% } else { %> + styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>, + encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, + changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> +}) +export class <%= classify(name) %>Component { + isHandset: Observable = this.breakpointObserver.observe(Breakpoints.Handset); + constructor(private breakpointObserver: BreakpointObserver) {} +} diff --git a/schematics/nav/index.ts b/schematics/nav/index.ts new file mode 100644 index 00000000000..b9a5712d0da --- /dev/null +++ b/schematics/nav/index.ts @@ -0,0 +1,32 @@ +import {chain, Rule, noop, Tree, SchematicContext} from '@angular-devkit/schematics'; +import {Schema} from './schema'; +import {addModuleImportToModule} from '../utils/ast'; +import {findModuleFromOptions} from '../utils/devkit-utils/find-module'; +import {buildComponent} from '../utils/devkit-utils/component'; + +/** + * Scaffolds a new navigation component. + * Internally it bootstraps the base component schematic + */ +export default function(options: Schema): Rule { + return chain([ + buildComponent({ ...options }), + options.skipImport ? noop() : addNavModulesToModule(options) + ]); +} + +/** + * Adds the required modules to the relative module. + */ +function addNavModulesToModule(options: Schema) { + return (host: Tree) => { + const modulePath = findModuleFromOptions(host, options); + addModuleImportToModule(host, modulePath, 'LayoutModule', '@angular/cdk/layout'); + addModuleImportToModule(host, modulePath, 'MatToolbarModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'MatSidenavModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'MatListModule', '@angular/material'); + return host; + }; +} diff --git a/schematics/nav/index_spec.ts b/schematics/nav/index_spec.ts new file mode 100644 index 00000000000..9e11631b4bd --- /dev/null +++ b/schematics/nav/index_spec.ts @@ -0,0 +1,61 @@ +import {SchematicTestRunner} from '@angular-devkit/schematics/testing'; +import {join} from 'path'; +import {Tree} from '@angular-devkit/schematics'; +import {createTestApp} from '../utils/testing'; +import {getFileContent} from '@schematics/angular/utility/test'; + +const collectionPath = join(__dirname, '../collection.json'); + +describe('material-nav-schematic', () => { + let runner: SchematicTestRunner; + const options = { + name: 'foo', + path: 'app', + sourceDir: 'src', + inlineStyle: false, + inlineTemplate: false, + changeDetection: 'Default', + styleext: 'css', + spec: true, + module: undefined, + export: false, + prefix: undefined, + viewEncapsulation: undefined, + }; + + beforeEach(() => { + runner = new SchematicTestRunner('schematics', collectionPath); + }); + + it('should create nav files and add them to module', () => { + const tree = runner.runSchematic('materialNav', { ...options }, createTestApp()); + const files = tree.files; + + expect(files).toContain('/src/app/foo/foo.component.css'); + expect(files).toContain('/src/app/foo/foo.component.html'); + expect(files).toContain('/src/app/foo/foo.component.spec.ts'); + expect(files).toContain('/src/app/foo/foo.component.ts'); + + const moduleContent = getFileContent(tree, '/src/app/app.module.ts'); + expect(moduleContent).toMatch(/import.*Foo.*from '.\/foo\/foo.component'/); + expect(moduleContent).toMatch(/declarations:\s*\[[^\]]+?,\r?\n\s+FooComponent\r?\n/m); + }); + + it('should add nav imports to module', () => { + const tree = runner.runSchematic('materialNav', { ...options }, createTestApp()); + const moduleContent = getFileContent(tree, '/src/app/app.module.ts'); + + expect(moduleContent).toContain('LayoutModule'); + expect(moduleContent).toContain('MatToolbarModule'); + expect(moduleContent).toContain('MatButtonModule'); + expect(moduleContent).toContain('MatSidenavModule'); + expect(moduleContent).toContain('MatIconModule'); + expect(moduleContent).toContain('MatListModule'); + + expect(moduleContent).toContain(`import { LayoutModule } from '@angular/cdk/layout';`); + expect(moduleContent).toContain( + // tslint:disable-next-line + `import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';`); + }); + +}); diff --git a/schematics/nav/schema.d.ts b/schematics/nav/schema.d.ts new file mode 100644 index 00000000000..49a799dd153 --- /dev/null +++ b/schematics/nav/schema.d.ts @@ -0,0 +1,3 @@ +import {Schema as ComponentSchema} from '@schematics/angular/component/schema'; + +export interface Schema extends ComponentSchema {} diff --git a/schematics/nav/schema.json b/schematics/nav/schema.json new file mode 100644 index 00000000000..54081987d47 --- /dev/null +++ b/schematics/nav/schema.json @@ -0,0 +1,99 @@ +{ + "$schema": "http://json-schema.org/schema", + "id": "SchematicsMaterialNav", + "title": "Material Nav Options Schema", + "type": "object", + "properties": { + "path": { + "type": "string", + "description": "The path to create the component.", + "default": "app", + "visible": false + }, + "sourceDir": { + "type": "string", + "description": "The path of the source directory.", + "default": "src", + "alias": "sd", + "visible": false + }, + "appRoot": { + "type": "string", + "description": "The root of the application.", + "visible": false + }, + "name": { + "type": "string", + "description": "The name of the component." + }, + "inlineStyle": { + "description": "Specifies if the style will be in the ts file.", + "type": "boolean", + "default": false, + "alias": "is" + }, + "inlineTemplate": { + "description": "Specifies if the template will be in the ts file.", + "type": "boolean", + "default": false, + "alias": "it" + }, + "viewEncapsulation": { + "description": "Specifies the view encapsulation strategy.", + "enum": ["Emulated", "Native", "None"], + "type": "string", + "default": "Emulated", + "alias": "ve" + }, + "changeDetection": { + "description": "Specifies the change detection strategy.", + "enum": ["Default", "OnPush"], + "type": "string", + "default": "Default", + "alias": "cd" + }, + "prefix": { + "type": "string", + "description": "The prefix to apply to generated selectors.", + "default": "app", + "alias": "p" + }, + "styleext": { + "description": "The file extension to be used for style files.", + "type": "string", + "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 + }, + "skipImport": { + "type": "boolean", + "description": "Flag to skip the module import.", + "default": false + }, + "selector": { + "type": "string", + "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": "Specifies if declaring module exports the component." + } + }, + "required": [ + "name" + ] +} diff --git a/schematics/tsconfig.json b/schematics/tsconfig.json index c27cde63131..21bb42adccf 100644 --- a/schematics/tsconfig.json +++ b/schematics/tsconfig.json @@ -17,5 +17,8 @@ "jasmine", "node" ] - } + }, + "exclude": [ + "*/files/**/*" + ] }