feat(@angular/cli): Update generate & new to use schematics

This feature is related to #6593

Author: Brocco

package-lock.json

@@ -40,7 +40,9 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
-    "@angular-devkit/build-optimizer": "0.0.10",
+    "@angular-devkit/build-optimizer": "0.0.11",
+    "@angular-devkit/schematics": "0.0.13",
+    "@schematics/angular": "0.0.13",
     "autoprefixer": "^6.5.3",
     "chalk": "^2.0.1",
     "circular-dependency-plugin": "^3.0.0",

package.json

@@ -1,28 +1,61 @@
-import * as chalk from 'chalk';
-import * as fs from 'fs';
-import * as os from 'os';
-import * as path from 'path';
+import { cyan, yellow } from 'chalk';
+const stringUtils = require('ember-cli-string-utils');
 import { oneLine } from 'common-tags';
 import { CliConfig } from '../models/config';
 
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/ignoreElements';
+import {
+  SchematicOutput,
+  getCollection,
+  getEngineHost,
+  getSchematic,
+  runSchematic,
+} from '../utilities/schematics';
+import { DynamicPathOptions, dynamicPathParser } from '../utilities/dynamic-path-parser';
+import { getAppFromConfig } from '../utilities/app-utils';
+import * as path from 'path';
+
 const Command = require('../ember-cli/lib/models/command');
-const Blueprint = require('../ember-cli/lib/models/blueprint');
-const parseOptions = require('../ember-cli/lib/utilities/parse-options');
 const SilentError = require('silent-error');
 
-function loadBlueprints(): Array<any> {
-  const blueprintList = fs.readdirSync(path.join(__dirname, '..', 'blueprints'));
-  const blueprints = blueprintList
-    .filter(bp => bp.indexOf('-test') === -1)
-    .filter(bp => bp !== 'ng')
-    .map(bp => Blueprint.load(path.join(__dirname, '..', 'blueprints', bp)));
-
-  return blueprints;
+function mapSchematicOptions(schematic: any): any[] {
+  const properties = schematic.description.schemaJson.properties;
+  const keys = Object.keys(properties);
+  const options = keys
+    .map(key => ({...properties[key], ...{name: stringUtils.dasherize(key)}}))
+    .map(opt => {
+      let type;
+      switch (opt.type) {
+        case 'string':
+          type = String;
+          break;
+        case 'boolean':
+          type = Boolean;
+          break;
+      }
+      let aliases: string[] = [];
+      if (opt.alias) {
+        aliases = [...aliases, opt.alias];
+      }
+      if (opt.aliases) {
+        aliases = [...aliases, ...opt.aliases];
+      }
+
+      return {
+        ...opt,
+        aliases,
+        type,
+        default: undefined // do not carry over schematics defaults
+      };
+    });
+
+  return options;
 }
 
 export default Command.extend({
   name: 'generate',
-  description: 'Generates and/or modifies files based on a blueprint.',
+  description: 'Generates and/or modifies files based on a schematic.',
   aliases: ['g'],
 
   availableOptions: [
@@ -34,117 +67,145 @@ export default Command.extend({
       description: 'Run through without making any changes.'
     },
     {
-      name: 'lint-fix',
+      name: 'force',
       type: Boolean,
-      aliases: ['lf'],
-      description: 'Use lint to fix files after generation.'
+      default: false,
+      aliases: ['f'],
+      description: 'Forces overwriting of files.'
+    },
+    {
+      name: 'app',
+      type: String,
+      aliases: ['a'],
+      description: 'Specifies app name to use.'
+    },
+    {
+      name: 'collection',
+      type: String,
+      aliases: ['c'],
+      description: 'Schematics collection to use.'
     },
     {
-      name: 'verbose',
+      name: 'lint-fix',
       type: Boolean,
-      default: false,
-      aliases: ['v'],
-      description: 'Adds more details to output logging.'
+      aliases: ['lf'],
+      description: 'Use lint to fix files after generation.'
     }
   ],
 
   anonymousOptions: [
-    '<blueprint>'
+    '<schemtatic>'
   ],
 
-  beforeRun: function (rawArgs: string[]) {
-    if (!rawArgs.length) {
-      return;
+  getCollectionName(rawArgs: string[]) {
+    let collectionName = CliConfig.getValue('defaults.schematics.collection');
+    if (rawArgs) {
+      const parsedArgs = this.parseArgs(rawArgs, false);
+      if (parsedArgs.options.collection) {
+        collectionName = parsedArgs.options.collection;
+      }
     }
+    return collectionName;
+  },
+
+  beforeRun: function(rawArgs: string[]) {
+    const collection = getCollection(this.getCollectionName(rawArgs));
 
     const isHelp = ['--help', '-h'].includes(rawArgs[0]);
     if (isHelp) {
       return;
     }
 
-    this.blueprints = loadBlueprints();
-
-    const name = rawArgs[0];
-    const blueprint = this.blueprints.find((bp: any) => bp.name === name
-      || (bp.aliases && bp.aliases.includes(name)));
-
-    if (!blueprint) {
-      SilentError.debugOrThrow('@angular/cli/commands/generate',
-        `Invalid blueprint: ${name}`);
-    }
-
-    if (!rawArgs[1]) {
-      SilentError.debugOrThrow('@angular/cli/commands/generate',
-        `The \`ng generate ${name}\` command requires a name to be specified.`);
+    const schematicName = rawArgs[0];
+    if (!schematicName) {
+      return Promise.reject(new SilentError(oneLine`
+          The "ng generate" command requires a
+          schematic name to be specified.
+          For more details, use "ng help".
+      `));
     }
 
     if (/^\d/.test(rawArgs[1])) {
       SilentError.debugOrThrow('@angular/cli/commands/generate',
-          `The \`ng generate ${name} ${rawArgs[1]}\` file name cannot begin with a digit.`);
+        `The \`ng generate ${schematicName} ${rawArgs[1]}\` file name cannot begin with a digit.`);
     }
 
-    rawArgs[0] = blueprint.name;
-    this.registerOptions(blueprint);
-  },
+    this.schematic = getSchematic(collection, schematicName);
 
-  printDetailedHelp: function () {
-    if (!this.blueprints) {
-      this.blueprints = loadBlueprints();
-    }
-    this.ui.writeLine(chalk.cyan('  Available blueprints'));
-    this.ui.writeLine(this.blueprints.map((bp: any) => bp.printBasicHelp(false)).join(os.EOL));
+    const schematicOptions = mapSchematicOptions(this.schematic);
+
+    this.registerOptions({availableOptions: schematicOptions});
   },
 
   run: function (commandOptions: any, rawArgs: string[]) {
-    const name = rawArgs[0];
-    if (!name) {
-      return Promise.reject(new SilentError(oneLine`
-          The "ng generate" command requires a
-          blueprint name to be specified.
-          For more details, use "ng help".
-      `));
-    }
+    const entityName = rawArgs[1];
+    commandOptions.name = stringUtils.dasherize(entityName.split(path.sep).pop());
 
-    const blueprint = this.blueprints.find((bp: any) => bp.name === name
-      || (bp.aliases && bp.aliases.includes(name)));
-
-    const projectName = CliConfig.getValue('project.name');
-    const blueprintOptions = {
-      target: this.project.root,
-      entity: {
-        name: rawArgs[1],
-        options: parseOptions(rawArgs.slice(2))
-      },
-      projectName,
-      ui: this.ui,
+    const appConfig = getAppFromConfig(commandOptions.app);
+    const dynamicPathOptions: DynamicPathOptions = {
       project: this.project,
-      settings: this.settings,
-      testing: this.testing,
-      args: rawArgs,
-      ...commandOptions
+      entityName: entityName,
+      appConfig: appConfig,
+      dryRun: commandOptions.dryRun
     };
+    const parsedPath = dynamicPathParser(dynamicPathOptions);
+    commandOptions.sourceDir = appConfig.root;
+    commandOptions.path = parsedPath.dir.replace(appConfig.root + path.sep, '');
+
+    const cwd = this.project.root;
+    let dir = cwd;
+    const sourceRoot = path.join(this.project.root, appConfig.root);
+    const appRoot = path.join(sourceRoot, 'app');
+    if (cwd.indexOf(appRoot) === 0) {
+      dir = cwd;
+    } else if (cwd.indexOf(sourceRoot) === 0) {
+      dir = path.join(sourceRoot, 'app');
+    } else {
+      dir = path.join(this.project.root, appConfig.root, 'app');
+    }
 
-    return blueprint.install(blueprintOptions)
-      .then(() => {
+    const collectionName = this.getCollectionName(rawArgs);
+    const collection = getCollection(collectionName);
+    const schematicName = rawArgs[0];
+    const schematic = getSchematic(collection, schematicName);
+    return runSchematic(schematic, cwd, dir, commandOptions, this.project.root)
+      .then((output: SchematicOutput) => {
+        const modifiedFiles = output.modifiedFiles;
         const lintFix = commandOptions.lintFix !== undefined ?
           commandOptions.lintFix : CliConfig.getValue('defaults.lintFix');
 
-        if (lintFix && blueprint.modifiedFiles) {
-            const LintTask = require('../tasks/lint').default;
-            const lintTask = new LintTask({
-              ui: this.ui,
-              project: this.project
-            });
-
-            return lintTask.run({
-              fix: true,
-              force: true,
-              silent: true,
-              configs: [{
-                files: blueprint.modifiedFiles.filter((file: string) => /.ts$/.test(file))
-              }]
-            });
+        if (lintFix && modifiedFiles) {
+          const LintTask = require('../tasks/lint').default;
+          const lintTask = new LintTask({
+            ui: this.ui,
+            project: this.project
+          });
+
+          return lintTask.run({
+            fix: true,
+            force: true,
+            silent: true,
+            configs: [{
+              files: modifiedFiles
+                .filter((file: string) => /.ts$/.test(file))
+                .map((file: string) => path.join(this.project.root, file))
+            }]
+          });
         }
       });
+
+
+  },
+
+  printDetailedHelp: function () {
+    const engineHost = getEngineHost();
+    const collectionName = this.getCollectionName();
+    const collection = getCollection(collectionName);
+    const schematicNames: string[] = engineHost.listSchematics(collection);
+    this.ui.writeLine(cyan('Available schematics:'));
+    schematicNames.forEach(schematicName => {
+      this.ui.writeLine(yellow(`    ${schematicName}`));
+    });
+    this.ui.writeLine('');
   }
 });

packages/@angular/cli/commands/generate.ts

@@ -1,7 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as chalk from 'chalk';
-import denodeify = require('denodeify');
 
 import InitCommand from './init';
 import { CliConfig } from '../models/config';
@@ -12,10 +11,6 @@ const Command = require('../ember-cli/lib/models/command');
 const Project = require('../ember-cli/lib/models/project');
 const SilentError = require('silent-error');
 
-// There's some problem with the generic typings for fs.makedir.
-// Couldn't find matching types for the callbacks so leaving it as any for now.
-const mkdir = denodeify<string, void>(fs.mkdir as any);
-
 const configFile = '.angular-cli.json';
 const changeLater = (path: string) => `You can later change the value in "${configFile}" (${path})`;
 
@@ -159,42 +154,22 @@ const NewCommand = Command.extend({
       commandOptions.skipGit = true;
     }
 
-    const directoryName = path.join(process.cwd(),
-      commandOptions.directory ? commandOptions.directory : packageName);
-
+    commandOptions.directory = commandOptions.directory || packageName;
+    const directoryName = path.join(process.cwd(), commandOptions.directory);
     const initCommand = new InitCommand({
       ui: this.ui,
       tasks: this.tasks,
       project: Project.nullProject(this.ui, this.cli)
     });
 
-    let createDirectory;
-    if (commandOptions.dryRun) {
-      createDirectory = Promise.resolve()
-        .then(() => {
-          if (fs.existsSync(directoryName) && this.isProject(directoryName)) {
-            throw new SilentError(oneLine`
-              Directory ${directoryName} exists and is already an Angular CLI project.
-            `);
-          }
-        });
-    } else {
-      createDirectory = mkdir(directoryName)
-        .catch((err) => {
-          if (err.code === 'EEXIST') {
-            if (this.isProject(directoryName)) {
-              throw new SilentError(oneLine`
-                Directory ${directoryName} exists and is already an Angular CLI project.
-              `);
-            }
-          } else {
-            throw err;
-          }
-        })
-        .then(() => process.chdir(directoryName));
+
+    if (fs.existsSync(directoryName) && this.isProject(directoryName)) {
+      throw new SilentError(oneLine`
+        Directory ${directoryName} exists and is already an Angular CLI project.
+      `);
     }
 
-    return createDirectory
+    return Promise.resolve()
       .then(initCommand.run.bind(initCommand, commandOptions, rawArgs));
   }
 });

packages/@angular/cli/commands/new.ts

@@ -496,7 +496,7 @@ let Command = CoreObject.extend({
     @param {Object} commandArgs
     @return {Object|null}
   */
-  parseArgs(commandArgs) {
+  parseArgs(commandArgs, showErrors = true) {
     let knownOpts = {}; // Parse options
     let commandOptions = {};
     let parsedOptions;
@@ -507,7 +507,7 @@ let Command = CoreObject.extend({
 
     let validateParsed = function(key) {
       // ignore 'argv', 'h', and 'help'
-      if (!commandOptions.hasOwnProperty(key) && key !== 'argv' && key !== 'h' && key !== 'help') {
+      if (!commandOptions.hasOwnProperty(key) && key !== 'argv' && key !== 'h' && key !== 'help' && showErrors) {
         this.ui.writeLine(chalk.yellow(`The option '--${key}' is not registered with the ${this.name} command. ` +
           `Run \`ng ${this.name} --help\` for a list of supported options.`));
       }