Adds a Polymer 3 application template to init. (#134)

* Copy `polymer-2.x` template to `polymer-3.x`. * Update `init` and associated polymer-3.x template. * Update `README.md`. * Format, excluding broken changes due to templating. * Move templates to a folder in the package root so that they aren't checked by depcheck. * copy templates/application/polymer-2.x -> templates/application/polymer-3.x; add a stub option * Update Polymer 3 application template. * Add pass-through functions for Yeoman bug. * Add an integration test for the Polymer 3 application template. * Remove unused `static get is()` from the default app element. * Remove `main` field from `package.json`. * Add `polymer lint` to Polymer 3 application template `polymer.json` and integration test. * Fix Polymer 3 application template `.gitignore`. * Use CLI for installation instead of `npm` directly. * Fix comment typos.
Polymer · Apr 17, 2018 · 1eeb3d0 · 1eeb3d0
1 parent 2848c4e
commit 1eeb3d0
Show file tree

Hide file tree

Showing 12 changed files with 248 additions and 5 deletions.
diff --git a/packages/cli/src/init/application/application.ts b/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 function is 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 function is 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 function is 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;
+  }
 }
diff --git a/packages/cli/src/init/element/element.ts b/packages/cli/src/init/element/element.ts
@@ -121,14 +121,14 @@ export function createElementGenerator(templateName: string):
   };
 
   class Polymer3ElementGenerator extends ElementGenerator {
-    // TODO(yeoman/generator#1065): This is function not a no-op: Yeoman only
+    // TODO(yeoman/generator#1065): This function is 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
+    // TODO(yeoman/generator#1065): This function is 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() {
@@ -167,7 +167,7 @@ export function createElementGenerator(templateName: string):
       });
     }
 
-    // TODO(yeoman/generator#1065): This is function not a no-op: Yeoman only
+    // TODO(yeoman/generator#1065): This function is 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() {

diff --git a/packages/cli/src/init/init.ts b/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',

diff --git a/packages/cli/src/test/integration/integration_test.ts b/packages/cli/src/test/integration/integration_test.ts
@@ -40,12 +40,23 @@ suite('integration tests', function() {
               .withPrompts({name: 'my-element'})  // Mock the prompt answers
               .toPromise();
       await runCommand(binPath, ['install'], {cwd: dir});
-
       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 3.x application template', async () => {
+      const dir =
+          await runGenerator(createApplicationGenerator('polymer-3.x'))
+              .withPrompts({name: 'my-app'})  // Mock the prompt answers
+              .toPromise();
+      await runCommand(binPath, ['install'], {cwd: dir});
+      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 () => {

diff --git a/packages/cli/templates/application/polymer-3.x/.gitignore b/packages/cli/templates/application/polymer-3.x/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/packages/cli/templates/application/polymer-3.x/README.md b/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.
diff --git a/packages/cli/templates/application/polymer-3.x/index.html b/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>
diff --git a/packages/cli/templates/application/polymer-3.x/manifest.json b/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"
+}
diff --git a/packages/cli/templates/application/polymer-3.x/package.json b/packages/cli/templates/application/polymer-3.x/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "<%= name %>",
+<% if (description) { -%>  "description": "<%= description %>",
+<% } -%>
+  "dependencies": {
+    "@polymer/polymer": "^3.0.0-pre.12"
+  },
+  "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^1.0.0",
+    "wct-browser-legacy": "^0.0.1-pre.11"
+  }
+}
diff --git a/packages/cli/templates/application/polymer-3.x/polymer.json b/packages/cli/templates/application/polymer-3.x/polymer.json
@@ -0,0 +1,9 @@
+{
+  "npm": true,
+  "moduleResolution": "node",
+  "lint": {
+    "rules": [
+      "polymer-3"
+    ]
+  }
+}
diff --git a/packages/cli/templates/application/polymer-3.x/src/_element/_element.js b/packages/cli/templates/application/polymer-3.x/src/_element/_element.js
@@ -0,0 +1,28 @@
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+
+/**
+ * @customElement
+ * @polymer
+ */
+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: '<%= elementName %>'
+      }
+    };
+  }
+}
+
+window.customElements.define('<%= elementName %>', <%= elementClassName %>);
diff --git a/packages/cli/templates/application/polymer-3.x/test/_element/_element_test.html b/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>