Adds a Polymer 3 element template to init.

packages/cli/gulpfile.js

@@ -81,6 +81,9 @@ gulp.task('depcheck', ['build'], () => {
              'babel-plugin-external-helpers',
              'polymer-bundler',
             ],
+           ignoreDirs: [
+             'templates',
+           ],
          })
       .then((result) => {
         let invalidFiles = Object.keys(result.invalidFiles) || [];

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

@@ -28,7 +28,7 @@ export function createApplicationGenerator(templateName: string):
 
     constructor(args: string|string[], options: any) {
       super(args, options);
-      this.sourceRoot(path.join(__dirname, 'templates', templateName));
+      this.sourceRoot(path.join(__dirname, '../../../templates/application', templateName));
     }
 
     // This is necessary to prevent an exception in Yeoman when creating
@@ -116,4 +116,4 @@ export function createApplicationGenerator(templateName: string):
           'Check out your new project README for information about what to do next.\n');
     }
   };
-}
+}

packages/cli/src/init/element/element.ts

@@ -27,12 +27,12 @@ const logger = logging.getLogger('init');
  */
 export function createElementGenerator(templateName: string):
     (typeof Generator) {
-  return class ElementGenerator extends Generator {
+  class ElementGenerator extends Generator {
     props: any;
 
     constructor(args: string|string[], options: any) {
       super(args, options);
-      this.sourceRoot(path.join(__dirname, 'templates', templateName));
+      this.sourceRoot(path.join(__dirname, '../../../templates/element', templateName));
     }
 
     // This is necessary to prevent an exception in Yeoman when creating
@@ -119,4 +119,63 @@ export function createElementGenerator(templateName: string):
           'Check out your new project README for information about what to do next.\n');
     }
   };
+
+  class Polymer3ElementGenerator extends ElementGenerator {
+    // This is not a no-op: Yeoman only checks the object's prototype's own
+    // properties for methods.
+    initializing() {
+      return super.initializing();
+    }
+
+    // This is not a no-op: Yeoman only checks the object's prototype's own
+    // properties for methods.
+    async prompting() {
+      return super.prompting();
+    }
+
+    writing() {
+      const name = this.props.name;
+
+      this.fs.copyTpl(
+          `${this.templatePath()}/**/?(.)!(_)*`,
+          this.destinationPath(),
+          this.props);
+
+      this.fs.copyTpl(
+          this.templatePath('_element.js'), `${name}.js`, this.props);
+
+      this.fs.copyTpl(
+          this.templatePath('test/_element_test.html'),
+          `test/${name}_test.html`,
+          this.props);
+
+      this.fs.copyTpl(
+          this.templatePath('test/index.html'), `test/index.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,
+      });
+    }
+
+    // This is not a no-op: Yeoman only checks the object's prototype's own
+    // properties for methods.
+    end() {
+      return super.end();
+    }
+  }
+
+  switch (templateName) {
+    case 'polymer-3.x':
+      return Polymer3ElementGenerator;
+    default:
+      return ElementGenerator;
+  }
 }

packages/cli/src/init/init.ts

@@ -39,6 +39,11 @@ interface GeneratorInfo {
 }
 
 const localGenerators: {[name: string]: GeneratorInfo} = {
+  'polymer-3-element': {
+    id: 'polymer-init-polymer-3-element:app',
+    description: 'A simple Polymer 3.0 element template',
+    generator: createElementGenerator('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

@@ -16,6 +16,9 @@ import {createApplicationGenerator} from '../../init/application/application';
 import {runCommand} from './run-command';
 import {createElementGenerator} from '../../init/element/element';
 import {createGithubGenerator} from '../../init/github';
+import * as child_process from 'child_process';
+import * as util from 'util';
+const exec = util.promisify(child_process.exec);
 
 // A zero priveledge github token of a nonce account, used for quota.
 const githubToken = '8d8622bf09bb1d85cb411b5e475a35e742a7ce35';
@@ -34,6 +37,24 @@ suite('integration tests', function() {
 
   suite('init templates', () => {
 
+    skipOnWindows('test the Polymer 3.x element template', async () => {
+      const dir =
+          await runGenerator(createElementGenerator('polymer-3.x'))
+              .withPrompts({name: 'my-element'})  // 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});
+    });
+
     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/element/polymer-3.x/.gitignore

@@ -0,0 +1 @@
+/node_modules/

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

@@ -0,0 +1,21 @@
+# \<<%= name %>\>
+
+<%= description %>
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## 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/element/polymer-3.x/_element.js

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

packages/cli/templates/element/polymer-3.x/demo/index.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><%= name %> demo</title>
+
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+
+    <script type="module" src="../node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
+    <script type="module" src="../node_modules/@polymer/iron-demo-helpers/demo-snippet.js"></script>
+    <script type="module" src="../<%= name %>.js"></script>
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Basic <%= name %> demo</h3>
+      <demo-snippet>
+        <template>
+          <<%= name %>></<%= name %>>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>

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

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title><%= name %></title>
+  </head>
+  <body>
+    <!--
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
+</html>

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

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

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

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

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

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

packages/cli/templates/element/polymer-3.x/test/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../node_modules/wct-browser-legacy/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        '<%= name %>_test.html'
+      ]);
+    </script>
+  </body>
+</html>