Adds a Polymer 3 application template to init.

packages/cli/src/init/application/application.ts

@@ -23,7 +23,7 @@ import Generator = require('yeoman-generator');
  */
 export function createApplicationGenerator(templateName: string):
     (typeof Generator) {
-  return class ApplicationGenerator extends Generator {
+  class ApplicationGenerator extends Generator {
     props: any;
 
     constructor(args: string|string[], options: any) {
@@ -116,4 +116,65 @@ export function createApplicationGenerator(templateName: string):
           'Check out your new project README for information about what to do next.\n');
     }
   };
+
+  class Polymer3ApplicationGenerator extends ApplicationGenerator {
+    // TODO(yeoman/generator#1065): This is function not a no-op: Yeoman only
+    // checks the object's prototype's own properties for generator task
+    // methods. http://yeoman.io/authoring/running-context.html
+    initializing() {
+      return super.initializing();
+    }
+
+    // TODO(yeoman/generator#1065): This is function not a no-op: Yeoman only
+    // checks the object's prototype's own properties for generator task
+    // methods. http://yeoman.io/authoring/running-context.html
+    async prompting() {
+      return super.prompting();
+    }
+
+    writing() {
+      const elementName = this.props.elementName;
+
+      this.fs.copyTpl(
+          `${this.templatePath()}/**/?(.)!(_)*`,
+          this.destinationPath(),
+          this.props);
+
+      this.fs.copyTpl(
+          this.templatePath('src/_element/_element.js'),
+          `src/${elementName}/${elementName}.js`,
+          this.props);
+
+      this.fs.copyTpl(
+          this.templatePath('test/_element/_element_test.html'),
+          `test/${elementName}/${elementName}_test.html`,
+          this.props);
+
+      this.fs.copyTpl(
+          this.templatePath('.gitignore'), '.gitignore', this.props);
+    }
+
+    install() {
+      this.log(chalk.bold('\nProject generated!'));
+      this.log('Installing dependencies...');
+      this.installDependencies({
+        bower: false,
+        npm: true,
+      });
+    }
+
+    // TODO(yeoman/generator#1065): This is function not a no-op: Yeoman only
+    // checks the object's prototype's own properties for generator task
+    // methods. http://yeoman.io/authoring/running-context.html
+    end() {
+      return super.end();
+    }
+  }
+
+  switch (templateName) {
+    case 'polymer-3.x':
+      return Polymer3ApplicationGenerator;
+    default:
+      return ApplicationGenerator;
+  }
 }

packages/cli/src/init/init.ts

@@ -44,6 +44,11 @@ const localGenerators: {[name: string]: GeneratorInfo} = {
     description: 'A simple Polymer 3.0 element template',
     generator: createElementGenerator('polymer-3.x'),
   },
+  'polymer-3-application': {
+    id: 'polymer-init-polymer-3-application:app',
+    description: 'A simple Polymer 3.0 application',
+    generator: createApplicationGenerator('polymer-3.x'),
+  },
   'polymer-2-element': {
     id: 'polymer-init-polymer-2-element:app',
     description: 'A simple Polymer 2.0 element template',

packages/cli/src/test/integration/integration_test.ts

@@ -55,6 +55,26 @@ suite('integration tests', function() {
       await runCommand(binPath, ['test', '--module-resolution=node'], {cwd: dir});
     });
 
+    skipOnWindows('test the Polymer 3.x application template', async () => {
+      const dir =
+          await runGenerator(createApplicationGenerator('polymer-3.x'))
+              .withPrompts({name: 'my-app'})  // Mock the prompt answers
+              .toPromise();
+      // TODO(#118): Use `polymer install` once it supports installing npm
+      // packages.
+      await exec('npm install', {cwd: dir});
+
+      // TODO(#130): Add this back in when `polymer lint` has a Polymer 3
+      // option.
+      // await runCommand(binPath, ['lint'], {cwd: dir});
+
+      // TODO(#113): Remove the `--module-resolution=node` argument once
+      // `polymer test` passes them in correctly
+      await runCommand(binPath, ['test', '--module-resolution=node'], {cwd: dir});
+
+      await runCommand(binPath, ['build'], {cwd: dir});
+    });
+
     skipOnWindows('test the Polymer 1.x application template', async () => {
       const dir = await runGenerator(createApplicationGenerator('polymer-1.x'))
                       .withPrompts({name: 'my-app'})  // Mock the prompt answers

packages/cli/templates/application/polymer-3.x/.gitignore

@@ -0,0 +1 @@
+bower_components/

packages/cli/templates/application/polymer-3.x/README.md

@@ -0,0 +1,33 @@
+# \<<%= name %>\>
+
+<%= description %>
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
+
+## Viewing Your Application
+
+```
+$ polymer serve
+```
+
+## Building Your Application
+
+```
+$ polymer build
+```
+
+This will create builds of your application in the `build/` directory, optimized to be served in production. You can then serve the built versions by giving `polymer serve` a folder to serve from:
+
+```
+$ polymer serve build/default
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

packages/cli/templates/application/polymer-3.x/index.html

@@ -0,0 +1,22 @@
+<!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="<%
+      if (description) { -%><%= description %><% } else { -%><%= name %> description<% }
+    -%>">
+
+    <!-- See https://goo.gl/OOhYW5 -->
+    <link rel="manifest" href="/manifest.json">
+
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+
+    <script type="module" src="/src/<%= elementName %>/<%= elementName %>.js"></script>
+  </head>
+  <body>
+    <<%= elementName %>></<%= elementName %>>
+  </body>
+</html>

packages/cli/templates/application/polymer-3.x/manifest.json

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

packages/cli/templates/application/polymer-3.x/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "<%= name %>",
+<% if (description) { -%>  "description": "<%= description %>",
+<% } -%>
+  "main": "<%= name %>.js",
+  "dependencies": {
+    "@polymer/polymer": "^3.0.0-pre.12"
+  },
+  "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^1.0.0",
+    "wct-browser-legacy": "^0.0.1-pre.11"
+  }
+}

packages/cli/templates/application/polymer-3.x/polymer.json

@@ -0,0 +1,4 @@
+{
+  "npm": true,
+  "moduleResolution": "node"
+}

packages/cli/templates/application/polymer-3.x/src/_element/_element.js

@@ -0,0 +1,29 @@
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+
+/**
+ * @customElement
+ * @polymer
+ */
+class <%= elementClassName %> extends PolymerElement {
+  static get is() { return '<%= elementName %>'; }
+  static get template() {
+    return `
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <h2>Hello [[prop1]]!</h2>
+    `;
+  }
+  static get properties() {
+    return {
+      prop1: {
+        type: String,
+        value: '<%= elementName %>'
+      }
+    };
+  }
+}
+
+window.customElements.define(<%= elementClassName %>.is, <%= elementClassName %>);

packages/cli/templates/application/polymer-3.x/test/_element/_element_test.html

@@ -0,0 +1,53 @@
+<!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="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
+
+    <script type="module" src="../../src/<%= elementName %>/<%= elementName %>.js"></script>
+  </head>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <<%= elementName %>></<%= elementName %>>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <<%= elementName %> prop1="new-prop1"></<%= elementName %>>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('<%= elementName %>', function() {
+
+        test('instantiating the element with default properties works', function() {
+          var element = fixture('BasicTestFixture');
+          assert.equal(element.prop1, '<%= elementName %>');
+          var elementShadowRoot = element.shadowRoot;
+          var elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello <%= elementName %>!');
+        });
+
+        test('setting a property on the element works', function() {
+          // Create a test fixture
+          var element = fixture('ChangedPropertyTestFixture');
+          assert.equal(element.prop1, 'new-prop1');
+          var elementShadowRoot = element.shadowRoot;
+          var elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        });
+
+      });
+    </script>
+
+
+  </body>
+</html>