add new polymer 2.0 element and application templates

CHANGELOG.md

@@ -5,6 +5,7 @@
 - **New `build` Behavior**: New build options have been added to give you more control over the generated build. These options can be defined in your project's `polymer.json`, or via CLI flags. Run `polymer build --help` to see a list of new supported CLI flags.
   - Multiple builds can now be defined in your project's `polymer.json`.
   - **Previously default behaviors (minifying JavaScript, generating service workers, etc) are now turned off by default.**
+  - `init`: Add new 2.0 polymer element & application templates.
 
 ## v0.18.0-alpha.9
 

src/init/application/application.ts

@@ -15,90 +15,99 @@ import * as chalk from 'chalk';
 import * as path from 'path';
 import Generator = require('yeoman-generator');
 
-export class ApplicationGenerator extends Generator {
-  props: any;
+/**
+ * Returns a Yeoman Generator constructor that can be passed to yeoman to be
+ * run. A "template name" argument is required to choose the correct
+ * `/templates` directory name to generate from.
+ * (Ex: "polymer-2.x" to generate the `templates/polymer-2x` template directory)
+ */
+export function createApplicationGenerator(templateName: string):
+    (typeof Generator) {
+  return class ApplicationGenerator extends Generator {
+    props: any;
 
-  constructor(args: string|string[], options: any) {
-    super(args, options);
-    this.sourceRoot(path.join(__dirname, 'templates'));
-  }
+    constructor(args: string|string[], options: any) {
+      super(args, options);
+      this.sourceRoot(path.join(__dirname, 'templates', templateName));
+    }
 
-  // This is necessary to prevent an exception in Yeoman when creating
-  // storage for generators registered as a stub and used in a folder
-  // with a package.json but with no name property.
-  // https://github.com/Polymer/polymer-cli/issues/186
-  rootGeneratorName(): string {
-    return 'ApplicationGenerator';
-  }
+    // This is necessary to prevent an exception in Yeoman when creating
+    // storage for generators registered as a stub and used in a folder
+    // with a package.json but with no name property.
+    // https://github.com/Polymer/polymer-cli/issues/186
+    rootGeneratorName(): string {
+      return 'ApplicationGenerator';
+    }
 
-  initializing() {
-    // Yeoman replaces dashes with spaces. We want dashes.
-    this.appname = this.appname.replace(/\s+/g, '-');
-  }
+    initializing() {
+      // Yeoman replaces dashes with spaces. We want dashes.
+      this.appname = this.appname.replace(/\s+/g, '-');
+    }
 
-  async prompting(): Promise<void> {
-    const prompts = [
-      {
-        name: 'name',
-        type: 'input',
-        message: `Application name`,
-        default: this.appname,
-      },
-      {
-        type: 'input',
-        name: 'elementName',
-        message: `Main element name`,
-        default: (answers: any) => `${answers.name}-app`,
-        validate: (name: string) => {
-          let nameContainsHyphen = name.includes('-');
-          if (!nameContainsHyphen) {
-            this.log(
-                '\nUh oh, custom elements must include a hyphen in ' +
-                'their name. Please try again.');
-          }
-          return nameContainsHyphen;
+    async prompting(): Promise<void> {
+      const prompts = [
+        {
+          name: 'name',
+          type: 'input',
+          message: `Application name`,
+          default: this.appname,
+        },
+        {
+          type: 'input',
+          name: 'elementName',
+          message: `Main element name`,
+          default: (answers: any) => `${answers.name}-app`,
+          validate: (name: string) => {
+            let nameContainsHyphen = name.includes('-');
+            if (!nameContainsHyphen) {
+              this.log(
+                  '\nUh oh, custom elements must include a hyphen in ' +
+                  'their name. Please try again.');
+            }
+            return nameContainsHyphen;
+          },
+        },
+        {
+          type: 'input',
+          name: 'description',
+          message: 'Brief description of the application',
         },
-      },
-      {
-        type: 'input',
-        name: 'description',
-        message: 'Brief description of the application',
-      },
-    ];
+      ];
 
-    this.props = await this.prompt(prompts);
-  }
+      this.props = await this.prompt(prompts);
+    }
 
-  writing() {
-    const elementName = this.props.elementName;
+    writing() {
+      const elementName = this.props.elementName;
 
-    this.fs.copyTpl(
-        `${this.templatePath()}/**/?(.)!(_)*`,
-        this.destinationPath(),
-        this.props);
+      this.fs.copyTpl(
+          `${this.templatePath()}/**/?(.)!(_)*`,
+          this.destinationPath(),
+          this.props);
 
-    this.fs.copyTpl(
-        this.templatePath('src/_element/_element.html'),
-        `src/${elementName}/${elementName}.html`,
-        this.props);
+      this.fs.copyTpl(
+          this.templatePath('src/_element/_element.html'),
+          `src/${elementName}/${elementName}.html`,
+          this.props);
 
-    this.fs.copyTpl(
-        this.templatePath('test/_element/_element_test.html'),
-        `test/${elementName}/${elementName}_test.html`,
-        this.props);
-  }
+      this.fs.copyTpl(
+          this.templatePath('test/_element/_element_test.html'),
+          `test/${elementName}/${elementName}_test.html`,
+          this.props);
+    }
 
-  install() {
-    this.log(chalk.bold('\nProject generated!'));
-    this.log('Installing dependencies...');
-    this.installDependencies({
-      npm: false,
-    });
-  }
+    install() {
+      this.log(chalk.bold('\nProject generated!'));
+      this.log('Installing dependencies...');
+      this.installDependencies({
+        npm: false,
+      });
+    }
 
-  end() {
-    this.log(chalk.bold('\nSetup Complete!'));
-    this.log(
-        'Check out your new project README for information about what to do next.\n');
-  }
-}
+    end() {
+      this.log(chalk.bold('\nSetup Complete!'));
+      this.log(
+          'Check out your new project README for information about what to do next.\n');
+    }
+  };
+}

src/init/application/templates/polymer-2.x/bower.json

@@ -0,0 +1,15 @@
+{
+  "name": "<%= name %>",
+<% if (description) { -%>  "description": "<%= description %>",
+<% } -%>
+  "main": "index.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#2.0-preview"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview",
+    "web-component-tester": "v6.0.0-prerelease.5",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#v1"
+  }
+}

src/init/application/templates/polymer-2.x/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title><%= name %></title>
+    <meta name="description" content="<%= name %> description">
+
+    <!-- See https://goo.gl/OOhYW5 -->
+    <link rel="manifest" href="/manifest.json">
+
+    <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="/src/<%= elementName %>/<%= elementName %>.html">
+  </head>
+  <body>
+    <<%= elementName %>></<%= elementName %>>
+  </body>
+</html>

src/init/application/templates/polymer-2.x/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "<%= name %>",
+  "short_name": "<%= name %>",
+<% if (description) { -%>  "description": "<%= description %>",
+<% } -%>
+  "start_url": "/",
+  "display": "standalone"
+}

src/init/application/templates/polymer-2.x/src/_element/_element.html

@@ -0,0 +1,30 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<dom-module id="<%= elementName %>">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <h2>Hello [[prop1]]</h2>
+  </template>
+
+  <script>
+    class MyApplication extends Polymer.Element {
+      static get is() { return '<%= elementName %>'; }
+      static get config() {
+        return {
+          properties: {
+            prop1: {
+              type: String,
+              value: '<%= elementName %>'
+            }
+          }
+        };
+      }
+    }
+
+    window.customElements.define(MyApplication.is, MyApplication);
+  </script>
+</dom-module>

src/init/application/templates/polymer-2.x/test/_element/_element_test.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title><%= elementName %> test</title>
+
+    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../../src/<%= elementName %>/<%= elementName %>.html">
+  </head>
+  <body>
+    <test-fixture id="basic">
+      <template>
+        <<%= elementName %>></<%= elementName %>>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('<%= elementName %>', function() {
+        test('instantiating the element works', function() {
+          var element = fixture('basic');
+          assert.equal(element.is, '<%= elementName %>');
+        });
+      });
+    </script>
+  </body>
+</html>