feat(schematics): add shell schematic

schematics/README.md

@@ -0,0 +1,5 @@
+# Angular Material Schematics
+A collection of Schemaatics for Angular Material.
+
+## Collection
+- [Shell](shell/README.md)

schematics/collection.json

@@ -1,5 +1,12 @@
 // This is the root config file where the schematics are defined.
 {
   "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
-  "schematics": {}
+  "schematics": {
+    "materialShell": {
+      "description": "Create a Material shell",
+      "factory": "./shell/index",
+      "schema": "./shell/schema.json",
+      "aliases": [ "material-shell" ]
+    }
+  }
 }

schematics/shell/README.md

@@ -0,0 +1,12 @@
+# Material Shell
+Adds Angular Material and its depedencies and pre-configures the application. 
+
+It does the following:
+
+- Adds Material and CDK to `package.json`
+- Adds Material Icons Stylesheet to `index.html`
+- Adds Roboto Font to `index.html`
+- Ensure `BrowserAnimationsModule` is installed and included in root module
+- Adds pre-configured theme to `.angular-cli.json` file
+
+Command: `ng generate material-shell --collection=material-schematics`

schematics/shell/index.ts

@@ -0,0 +1,91 @@
+import {
+  Rule,
+  SchematicContext,
+  Tree,
+  chain,
+  noop,
+  SchematicsException
+} from '@angular-devkit/schematics';
+import {Schema} from './schema';
+import {materialVersion, cdkVersion, angularVersion} from '../utils/lib-versions';
+import {getConfig} from '../utils/devkit-utils/config';
+import {addModuleImportToRootModule} from '../utils/ast';
+import {addHeadLink} from '../utils/html';
+import {addPackageToPackageJson} from '../utils/package';
+
+/**
+ * Scaffolds the basics of a Angular Material application, this includes:
+ *  - Add Packages to package.json
+ *  - Adds pre-built themes to styles.ext
+ *  - Adds Browser Animation to app.momdule
+ */
+export default function(options: Schema): Rule {
+  return chain([
+    options && options.skipPackageJson ? noop() : addMaterialToPackageJson(options),
+    addImportToStyles(options),
+    addAnimationRootConfig(),
+    addFontsToIndex()
+  ]);
+}
+
+/**
+ * Add material, cdk, annimations to package.json
+ */
+function addMaterialToPackageJson(options: Schema) {
+  return (host: Tree) => {
+    addPackageToPackageJson(host, 'dependencies', '@angular/cdk', cdkVersion);
+    addPackageToPackageJson(host, 'dependencies', '@angular/material', materialVersion);
+    addPackageToPackageJson(host, 'dependencies', '@angular/animations', angularVersion);
+    return host;
+  };
+}
+
+/**
+ * Add pre-built styles to style.ext file
+ */
+function addImportToStyles(options: Schema) {
+  return (host: Tree) => {
+    const config = getConfig(host);
+    config.apps.forEach(app => {
+      const themeName = options && options.theme ? options.theme : 'indigo-pink';
+      const themeSrc = `../node_modules/@angular/material/prebuilt-themes/${themeName}.css`;
+      const hasCurrentTheme = app.styles.find((s: string) => s.indexOf(themeSrc) > -1);
+      const hasOtherTheme = app.styles.find((s: string) =>
+        s.indexOf('@angular/material/prebuilt-themes') > -1);
+
+      if (!hasCurrentTheme && !hasOtherTheme) {
+        app.styles.splice(0, 0, themeSrc);
+      }
+
+      if (hasOtherTheme) {
+        throw new SchematicsException(`Another theme is already defined.`);
+      }
+    });
+    host.overwrite('.angular-cli.json', JSON.stringify(config, null, 2));
+    return host;
+  };
+}
+
+/**
+ * Add browser animation module to app.module
+ */
+function addAnimationRootConfig() {
+  return (host: Tree) => {
+    addModuleImportToRootModule(host,
+      'BrowserAnimationsModule', '@angular/platform-browser/animations');
+    return host;
+  };
+}
+
+/**
+ * Adds fonts to the index.ext file
+ */
+function addFontsToIndex() {
+  return (host: Tree) => {
+    addHeadLink(host,
+      `<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">`);
+    addHeadLink(host,
+      `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`);
+    return host;
+  };
+}

schematics/shell/index_spec.ts

@@ -0,0 +1,44 @@
+import {Tree} from '@angular-devkit/schematics';
+import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
+import {join} from 'path';
+import {getFileContent} from '@schematics/angular/utility/test';
+import {createTestApp} from '../utils/testing';
+import {getConfig} from '@schematics/angular/utility/config';
+import {getIndexHtmlPath} from '../utils/ast';
+
+const collectionPath = join(__dirname, '../collection.json');
+
+describe('material-shell-schematic', () => {
+  let runner: SchematicTestRunner;
+  let appTree: Tree;
+
+  beforeEach(() => {
+    appTree = createTestApp();
+    runner = new SchematicTestRunner('schematics', collectionPath);
+  });
+
+  it('should update package.json', () => {
+    const tree = runner.runSchematic('materialShell', {}, appTree);
+    const packageJson = JSON.parse(getFileContent(tree, '/package.json'));
+
+    expect(packageJson.dependencies['@angular/material']).toBeDefined();
+    expect(packageJson.dependencies['@angular/cdk']).toBeDefined();
+  });
+
+  it('should add default theme', () => {
+    const tree = runner.runSchematic('materialShell', {}, appTree);
+    const config = getConfig(tree);
+    config.apps.forEach(app => {
+      expect(app.styles).toContain(
+        '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css');
+    });
+  });
+
+  it('should add font links', () => {
+    const tree = runner.runSchematic('materialShell', {}, appTree);
+    const indexPath = getIndexHtmlPath(tree);
+    const buffer = tree.read(indexPath);
+    const indexSrc = buffer.toString();
+    expect(indexSrc.indexOf('fonts.googleapis.com')).toBeGreaterThan(-1);
+  });
+});