diff --git a/packages/cli/src/init/application/application.ts b/packages/cli/src/init/application/application.ts index d2b898c42..117de6fea 100644 --- 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 index 86b5207d1..b818c890a 100644 --- 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 index f50399f58..a3288a872 100644 --- 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 index 90bbe42e3..26905f5af 100644 --- 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 new file mode 100644 index 000000000..07e6e472c --- /dev/null +++ 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 new file mode 100644 index 000000000..6bf6cb962 --- /dev/null +++ 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 new file mode 100644 index 000000000..9c1a98c1a --- /dev/null +++ b/packages/cli/templates/application/polymer-3.x/index.html @@ -0,0 +1,22 @@ + + + + + + + <%= name %> + + + + + + + + + + + <<%= elementName %>>> + + diff --git a/packages/cli/templates/application/polymer-3.x/manifest.json b/packages/cli/templates/application/polymer-3.x/manifest.json new file mode 100644 index 000000000..409e19b24 --- /dev/null +++ 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 new file mode 100644 index 000000000..0b3135c2b --- /dev/null +++ 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 new file mode 100644 index 000000000..8c4ea5ef6 --- /dev/null +++ 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 new file mode 100644 index 000000000..eeab2082f --- /dev/null +++ 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 ` + +

Hello [[prop1]]!

+ `; + } + 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 new file mode 100644 index 000000000..72ea23087 --- /dev/null +++ b/packages/cli/templates/application/polymer-3.x/test/_element/_element_test.html @@ -0,0 +1,53 @@ + + + + + + + <%= elementName %> test + + + + + + + + + + + + + + + + + + + + +