From bec6d55899d75c197d264517a35f958d6080624b Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Fri, 3 Feb 2017 11:08:19 -0800 Subject: [PATCH 1/2] add new polymer 2.0 element and application templates --- CHANGELOG.md | 1 + src/init/application/application.ts | 153 +++++++++--------- .../templates/{ => polymer-1.x}/.gitignore | 0 .../templates/{ => polymer-1.x}/README.md | 0 .../templates/{ => polymer-1.x}/bower.json | 0 .../templates/{ => polymer-1.x}/index.html | 0 .../templates/{ => polymer-1.x}/manifest.json | 0 .../src/_element/_element.html | 0 .../test/_element/_element_test.html | 0 .../templates/polymer-2.x}/.gitignore | 0 .../templates/polymer-2.x}/README.md | 0 .../templates/polymer-2.x/bower.json | 15 ++ .../templates/polymer-2.x/index.html | 20 +++ .../templates/polymer-2.x/manifest.json | 8 + .../polymer-2.x/src/_element/_element.html | 30 ++++ .../test/_element/_element_test.html | 30 ++++ src/init/element/element.ts | 138 ++++++++-------- .../element/templates/polymer-1.x/.gitignore | 1 + .../element/templates/polymer-1.x/README.md | 38 +++++ .../templates/{ => polymer-1.x}/_element.html | 0 .../templates/{ => polymer-1.x}/bower.json | 0 .../{ => polymer-1.x}/demo/index.html | 0 .../templates/{ => polymer-1.x}/index.html | 0 .../{ => polymer-1.x}/test/_element_test.html | 0 .../element/templates/polymer-2.x/.gitignore | 1 + .../element/templates/polymer-2.x/README.md | 38 +++++ .../templates/polymer-2.x/_element.html | 37 +++++ .../element/templates/polymer-2.x/bower.json | 15 ++ .../templates/polymer-2.x/demo/index.html | 28 ++++ .../element/templates/polymer-2.x/index.html | 16 ++ .../polymer-2.x/test/_element_test.html | 30 ++++ src/init/init.ts | 96 +++++++---- test/unit/init/application_test.js | 44 +++-- test/unit/init/element_test.js | 44 +++-- 34 files changed, 583 insertions(+), 200 deletions(-) rename src/init/application/templates/{ => polymer-1.x}/.gitignore (100%) rename src/init/application/templates/{ => polymer-1.x}/README.md (100%) rename src/init/application/templates/{ => polymer-1.x}/bower.json (100%) rename src/init/application/templates/{ => polymer-1.x}/index.html (100%) rename src/init/application/templates/{ => polymer-1.x}/manifest.json (100%) rename src/init/application/templates/{ => polymer-1.x}/src/_element/_element.html (100%) rename src/init/application/templates/{ => polymer-1.x}/test/_element/_element_test.html (100%) rename src/init/{element/templates => application/templates/polymer-2.x}/.gitignore (100%) rename src/init/{element/templates => application/templates/polymer-2.x}/README.md (100%) create mode 100644 src/init/application/templates/polymer-2.x/bower.json create mode 100644 src/init/application/templates/polymer-2.x/index.html create mode 100644 src/init/application/templates/polymer-2.x/manifest.json create mode 100644 src/init/application/templates/polymer-2.x/src/_element/_element.html create mode 100644 src/init/application/templates/polymer-2.x/test/_element/_element_test.html create mode 100644 src/init/element/templates/polymer-1.x/.gitignore create mode 100644 src/init/element/templates/polymer-1.x/README.md rename src/init/element/templates/{ => polymer-1.x}/_element.html (100%) rename src/init/element/templates/{ => polymer-1.x}/bower.json (100%) rename src/init/element/templates/{ => polymer-1.x}/demo/index.html (100%) rename src/init/element/templates/{ => polymer-1.x}/index.html (100%) rename src/init/element/templates/{ => polymer-1.x}/test/_element_test.html (100%) create mode 100644 src/init/element/templates/polymer-2.x/.gitignore create mode 100644 src/init/element/templates/polymer-2.x/README.md create mode 100644 src/init/element/templates/polymer-2.x/_element.html create mode 100644 src/init/element/templates/polymer-2.x/bower.json create mode 100644 src/init/element/templates/polymer-2.x/demo/index.html create mode 100644 src/init/element/templates/polymer-2.x/index.html create mode 100644 src/init/element/templates/polymer-2.x/test/_element_test.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 07362382..30c0f329 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/init/application/application.ts b/src/init/application/application.ts index 075fd7c7..226c186d 100644 --- a/src/init/application/application.ts +++ b/src/init/application/application.ts @@ -15,90 +15,93 @@ import * as chalk from 'chalk'; import * as path from 'path'; import Generator = require('yeoman-generator'); -export class ApplicationGenerator extends Generator { - props: any; +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 { - 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 { + const prompts = [ + { + name: 'name', + type: 'input', + message: `Application name`, + default: this.appname, }, - }, - { - type: 'input', - name: 'description', - message: 'Brief description of the application', - }, - ]; + { + 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', + }, + ]; - 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'); + } + }; +} \ No newline at end of file diff --git a/src/init/application/templates/.gitignore b/src/init/application/templates/polymer-1.x/.gitignore similarity index 100% rename from src/init/application/templates/.gitignore rename to src/init/application/templates/polymer-1.x/.gitignore diff --git a/src/init/application/templates/README.md b/src/init/application/templates/polymer-1.x/README.md similarity index 100% rename from src/init/application/templates/README.md rename to src/init/application/templates/polymer-1.x/README.md diff --git a/src/init/application/templates/bower.json b/src/init/application/templates/polymer-1.x/bower.json similarity index 100% rename from src/init/application/templates/bower.json rename to src/init/application/templates/polymer-1.x/bower.json diff --git a/src/init/application/templates/index.html b/src/init/application/templates/polymer-1.x/index.html similarity index 100% rename from src/init/application/templates/index.html rename to src/init/application/templates/polymer-1.x/index.html diff --git a/src/init/application/templates/manifest.json b/src/init/application/templates/polymer-1.x/manifest.json similarity index 100% rename from src/init/application/templates/manifest.json rename to src/init/application/templates/polymer-1.x/manifest.json diff --git a/src/init/application/templates/src/_element/_element.html b/src/init/application/templates/polymer-1.x/src/_element/_element.html similarity index 100% rename from src/init/application/templates/src/_element/_element.html rename to src/init/application/templates/polymer-1.x/src/_element/_element.html diff --git a/src/init/application/templates/test/_element/_element_test.html b/src/init/application/templates/polymer-1.x/test/_element/_element_test.html similarity index 100% rename from src/init/application/templates/test/_element/_element_test.html rename to src/init/application/templates/polymer-1.x/test/_element/_element_test.html diff --git a/src/init/element/templates/.gitignore b/src/init/application/templates/polymer-2.x/.gitignore similarity index 100% rename from src/init/element/templates/.gitignore rename to src/init/application/templates/polymer-2.x/.gitignore diff --git a/src/init/element/templates/README.md b/src/init/application/templates/polymer-2.x/README.md similarity index 100% rename from src/init/element/templates/README.md rename to src/init/application/templates/polymer-2.x/README.md diff --git a/src/init/application/templates/polymer-2.x/bower.json b/src/init/application/templates/polymer-2.x/bower.json new file mode 100644 index 00000000..0a5b62fb --- /dev/null +++ b/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" + } +} diff --git a/src/init/application/templates/polymer-2.x/index.html b/src/init/application/templates/polymer-2.x/index.html new file mode 100644 index 00000000..7d33987f --- /dev/null +++ b/src/init/application/templates/polymer-2.x/index.html @@ -0,0 +1,20 @@ + + + + + + + <%= name %> + + + + + + + + + + + <<%= elementName %>>> + + diff --git a/src/init/application/templates/polymer-2.x/manifest.json b/src/init/application/templates/polymer-2.x/manifest.json new file mode 100644 index 00000000..409e19b2 --- /dev/null +++ b/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" +} diff --git a/src/init/application/templates/polymer-2.x/src/_element/_element.html b/src/init/application/templates/polymer-2.x/src/_element/_element.html new file mode 100644 index 00000000..a82862e9 --- /dev/null +++ b/src/init/application/templates/polymer-2.x/src/_element/_element.html @@ -0,0 +1,30 @@ + + + + + + + diff --git a/src/init/application/templates/polymer-2.x/test/_element/_element_test.html b/src/init/application/templates/polymer-2.x/test/_element/_element_test.html new file mode 100644 index 00000000..4f3a3763 --- /dev/null +++ b/src/init/application/templates/polymer-2.x/test/_element/_element_test.html @@ -0,0 +1,30 @@ + + + + + + + <%= elementName %> test + + + + + + + + + + + + + + diff --git a/src/init/element/element.ts b/src/init/element/element.ts index 8ee88010..4d7dc2c6 100644 --- a/src/init/element/element.ts +++ b/src/init/element/element.ts @@ -15,82 +15,86 @@ import * as chalk from 'chalk'; import * as path from 'path'; import Generator = require('yeoman-generator'); -export class ElementGenerator extends Generator { - props: any; +export function createElementGenerator(templateName: string): + (typeof Generator) { + return class ElementGenerator 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 'ElementGenerator'; - } + // 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 'ElementGenerator'; + } - 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 { - const prompts = [ - { - name: 'name', - type: 'input', - message: `Element name`, - default: this.appname + (this.appname.includes('-') ? '' : '-element'), - 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 { + const prompts = [ + { + name: 'name', + type: 'input', + message: `Element name`, + default: + this.appname + (this.appname.includes('-') ? '' : '-element'), + 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 element', - }, - ]; + { + type: 'input', + name: 'description', + message: 'Brief description of the element', + }, + ]; - this.props = await this.prompt(prompts); - } + this.props = await this.prompt(prompts); + } - writing() { - const name = this.props.name; + writing() { + const name = this.props.name; - this.fs.copyTpl( - `${this.templatePath()}/**/?(.)!(_)*`, - this.destinationPath(), - this.props); + this.fs.copyTpl( + `${this.templatePath()}/**/?(.)!(_)*`, + this.destinationPath(), + this.props); - this.fs.copyTpl( - this.templatePath('_element.html'), `${name}.html`, this.props); + this.fs.copyTpl( + this.templatePath('_element.html'), `${name}.html`, this.props); - this.fs.copyTpl( - this.templatePath('test/_element_test.html'), - `test/${name}_test.html`, - this.props); - } + this.fs.copyTpl( + this.templatePath('test/_element_test.html'), + `test/${name}_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'); + } + }; +} \ No newline at end of file diff --git a/src/init/element/templates/polymer-1.x/.gitignore b/src/init/element/templates/polymer-1.x/.gitignore new file mode 100644 index 00000000..fbe05fc9 --- /dev/null +++ b/src/init/element/templates/polymer-1.x/.gitignore @@ -0,0 +1 @@ +bower_components/ diff --git a/src/init/element/templates/polymer-1.x/README.md b/src/init/element/templates/polymer-1.x/README.md new file mode 100644 index 00000000..4532a1e7 --- /dev/null +++ b/src/init/element/templates/polymer-1.x/README.md @@ -0,0 +1,38 @@ +# \<<%= 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 a `build/` folder with `bundled/` and `unbundled/` sub-folders +containing a bundled (Vulcanized) and unbundled builds, both run through HTML, +CSS, and JS optimizers. + +You can serve the built versions by giving `polymer serve` a folder to serve +from: + +``` +$ polymer serve build/bundled +``` + +## 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/src/init/element/templates/_element.html b/src/init/element/templates/polymer-1.x/_element.html similarity index 100% rename from src/init/element/templates/_element.html rename to src/init/element/templates/polymer-1.x/_element.html diff --git a/src/init/element/templates/bower.json b/src/init/element/templates/polymer-1.x/bower.json similarity index 100% rename from src/init/element/templates/bower.json rename to src/init/element/templates/polymer-1.x/bower.json diff --git a/src/init/element/templates/demo/index.html b/src/init/element/templates/polymer-1.x/demo/index.html similarity index 100% rename from src/init/element/templates/demo/index.html rename to src/init/element/templates/polymer-1.x/demo/index.html diff --git a/src/init/element/templates/index.html b/src/init/element/templates/polymer-1.x/index.html similarity index 100% rename from src/init/element/templates/index.html rename to src/init/element/templates/polymer-1.x/index.html diff --git a/src/init/element/templates/test/_element_test.html b/src/init/element/templates/polymer-1.x/test/_element_test.html similarity index 100% rename from src/init/element/templates/test/_element_test.html rename to src/init/element/templates/polymer-1.x/test/_element_test.html diff --git a/src/init/element/templates/polymer-2.x/.gitignore b/src/init/element/templates/polymer-2.x/.gitignore new file mode 100644 index 00000000..fbe05fc9 --- /dev/null +++ b/src/init/element/templates/polymer-2.x/.gitignore @@ -0,0 +1 @@ +bower_components/ diff --git a/src/init/element/templates/polymer-2.x/README.md b/src/init/element/templates/polymer-2.x/README.md new file mode 100644 index 00000000..4532a1e7 --- /dev/null +++ b/src/init/element/templates/polymer-2.x/README.md @@ -0,0 +1,38 @@ +# \<<%= 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 a `build/` folder with `bundled/` and `unbundled/` sub-folders +containing a bundled (Vulcanized) and unbundled builds, both run through HTML, +CSS, and JS optimizers. + +You can serve the built versions by giving `polymer serve` a folder to serve +from: + +``` +$ polymer serve build/bundled +``` + +## 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/src/init/element/templates/polymer-2.x/_element.html b/src/init/element/templates/polymer-2.x/_element.html new file mode 100644 index 00000000..82195371 --- /dev/null +++ b/src/init/element/templates/polymer-2.x/_element.html @@ -0,0 +1,37 @@ + + + + + + + + + diff --git a/src/init/element/templates/polymer-2.x/bower.json b/src/init/element/templates/polymer-2.x/bower.json new file mode 100644 index 00000000..38671fc4 --- /dev/null +++ b/src/init/element/templates/polymer-2.x/bower.json @@ -0,0 +1,15 @@ +{ + "name": "<%= name %>", +<% if (description) { -%> "description": "<%= description %>", +<% } -%> + "main": "<%= name %>.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" + } +} diff --git a/src/init/element/templates/polymer-2.x/demo/index.html b/src/init/element/templates/polymer-2.x/demo/index.html new file mode 100644 index 00000000..2eadbe8a --- /dev/null +++ b/src/init/element/templates/polymer-2.x/demo/index.html @@ -0,0 +1,28 @@ + + + + + + + <%= name %> demo + + + + + + + + + + +
+

Basic <%= name %> demo

+ + + +
+ + diff --git a/src/init/element/templates/polymer-2.x/index.html b/src/init/element/templates/polymer-2.x/index.html new file mode 100644 index 00000000..b91e3457 --- /dev/null +++ b/src/init/element/templates/polymer-2.x/index.html @@ -0,0 +1,16 @@ + + + + + + + <%= name %> + + + + + + + + + diff --git a/src/init/element/templates/polymer-2.x/test/_element_test.html b/src/init/element/templates/polymer-2.x/test/_element_test.html new file mode 100644 index 00000000..26fb639c --- /dev/null +++ b/src/init/element/templates/polymer-2.x/test/_element_test.html @@ -0,0 +1,30 @@ + + + + + + + <%= name %> test + + + + + + + + + + + + + + diff --git a/src/init/init.ts b/src/init/init.ts index 097d52c5..f0c61651 100644 --- a/src/init/init.ts +++ b/src/init/init.ts @@ -18,14 +18,12 @@ import * as fs from 'fs'; import * as logging from 'plylog'; import findup = require('findup-sync'); -import {ApplicationGenerator} from '../init/application/application'; -import {ElementGenerator} from '../init/element/element'; import * as YeomanEnvironment from 'yeoman-environment'; import {prompt, Question as InquirerQuestion} from 'inquirer'; +import {createApplicationGenerator} from '../init/application/application'; +import {createElementGenerator} from '../init/element/element'; import {createGithubGenerator} from '../init/github'; - -// import {Base} from 'yeoman-generator'; - +import Generator = require('yeoman-generator'); const logger = logging.getLogger('init'); @@ -35,23 +33,55 @@ interface GeneratorDescription { short: string; } -const templateDescriptions: {[name: string]: string} = { - 'element': 'A blank element template', - 'application': 'A blank application template', - 'starter-kit': - 'A starter application template, with navigation and "PRPL pattern" loading', - 'shop': 'The "Shop" Progressive Web App demo', -}; - -let shopGenerator = createGithubGenerator({ - owner: 'Polymer', - repo: 'shop', -}); +interface GeneratorInfo { + id: string; + description: string; + generator: typeof Generator; +} -let pskGenerator = createGithubGenerator({ - owner: 'PolymerElements', - repo: 'polymer-starter-kit', -}); +const localGenerators: {[name: string]: GeneratorInfo} = { + 'polymer-1-element': { + id: 'polymer-init-polymer-1-element:app', + description: 'A simple Polymer 1.0 element template', + generator: createElementGenerator('polymer-1.x'), + }, + 'polymer-2-element': { + id: 'polymer-init-polymer-2-element:app', + description: 'A simple Polymer 2.0 element template', + generator: createElementGenerator('polymer-2.x'), + }, + 'polymer-1-application': { + id: 'polymer-init-polymer-1-application:app', + description: 'A simple Polymer 1.0 application template', + generator: createApplicationGenerator('polymer-1.x'), + }, + 'polymer-2-application': { + id: 'polymer-init-polymer-2-application:app', + description: 'A simple Polymer 2.0 application', + generator: createApplicationGenerator('polymer-2.x'), + }, + // TODO: Add Shop "^2.0.0" generator once Polymer 2.0 Shop template is + // released. + 'starter-kit': { + id: 'polymer-init-starter-kit:app', + description: + 'A starter application template, with navigation and "PRPL pattern" loading', + generator: createGithubGenerator({ + owner: 'PolymerElements', + repo: 'polymer-starter-kit', + }), + }, + // TODO: Add Shop "^3.0.0" generator once Polymer 2.0 PSK template is + // released. + 'shop': { + id: 'polymer-init-shop:app', + description: 'The "Shop" Progressive Web App demo', + generator: createGithubGenerator({ + owner: 'Polymer', + repo: 'shop', + }), + }, +}; /** * Check if the current shell environment is MinGW. MinGW can't handle some @@ -86,8 +116,8 @@ function getGeneratorDescription( const displayName = getDisplayName(meta.name); let description = meta.description; - if (templateDescriptions.hasOwnProperty(displayName)) { - description = templateDescriptions[displayName]; + if (localGenerators.hasOwnProperty(displayName)) { + description = localGenerators[displayName].description; } // If a description exists, format it properly for the command-line @@ -108,9 +138,8 @@ function getGeneratorDescription( * Get the metadata of a generator from its package.json */ function getGeneratorMeta( - rootDir: string, - defaultName: string, - defaultDescription: string): {name: string, description: string} { + rootDir: string, defaultName: string, defaultDescription: string): + {name: string, description: string} { let name = defaultName; let description = defaultDescription; @@ -159,8 +188,7 @@ function getDisplayName(generatorName: string) { // ([^:]+) | Grp 3; Match one or more characters != ":" // (:.*)? | Grp 4; Match ":" followed by anything; Optional return generatorName.replace( - /(generator-)?(polymer-init-)?([^:]+)(:.*)?/g, - '$3'); + /(generator-)?(polymer-init-)?([^:]+)(:.*)?/g, '$3'); } /** @@ -169,10 +197,10 @@ function getDisplayName(generatorName: string) { function createYeomanEnvironment(): Promise { return new Promise((resolve, reject) => { const env = new YeomanEnvironment(); - env.registerStub(ElementGenerator, 'polymer-init-element:app'); - env.registerStub(ApplicationGenerator, 'polymer-init-application:app'); - env.registerStub(shopGenerator, 'polymer-init-shop:app'); - env.registerStub(pskGenerator, 'polymer-init-starter-kit:app'); + Object.keys(localGenerators).forEach((generatorName) => { + const generatorInfo = localGenerators[generatorName]; + env.registerStub(generatorInfo.generator, generatorInfo.id); + }); env.lookup((error?: Error) => { if (error) { reject(error); @@ -190,10 +218,10 @@ function createYeomanEnvironment(): Promise { */ function createSelectPrompt(env: YeomanEnvironment): InquirerQuestion { const generators = env.getGeneratorsMeta(); - const polymerInitGenerators = Object.keys(generators).filter((k) => { + const allGeneratorNames = Object.keys(generators).filter((k) => { return k.startsWith('polymer-init') && k !== 'polymer-init:app'; }); - const choices = polymerInitGenerators.map((generatorName: string) => { + const choices = allGeneratorNames.map((generatorName: string) => { const generator = generators[generatorName]; return getGeneratorDescription(generator, generatorName); }); diff --git a/test/unit/init/application_test.js b/test/unit/init/application_test.js index 5d5e6947..9a93716a 100644 --- a/test/unit/init/application_test.js +++ b/test/unit/init/application_test.js @@ -14,32 +14,52 @@ const fs = require('fs-extra'); const path = require('path'); const yoAssert = require('yeoman-assert'); const helpers = require('yeoman-test'); -const ApplicationGenerator - = require('../../../lib/init/application/application').ApplicationGenerator; + +const createApplicationGenerator + = require('../../../lib/init/application/application').createApplicationGenerator; suite('init/application', () => { - test('creates expected files while ignoring filenames with dangling underscores', (done) => { + test('creates expected 1.x files while passed the 1.x template name', (done) => { + const TestGenerator = createApplicationGenerator('polymer-1.x'); + helpers + .run(TestGenerator) + .withPrompts({name: 'foobar'}) + .on('end', (a) => { + yoAssert.file(['bower.json']); + yoAssert.fileContent('src/foobar-app/foobar-app.html', 'Polymer({'); + done(); + }); + }); + test('creates expected 2.x files while passed the 2.x template name', (done) => { + const TestGenerator = createApplicationGenerator('polymer-2.x'); helpers - .run(ApplicationGenerator) + .run(TestGenerator) + .withPrompts({name: 'foobar'}) .on('end', (a) => { yoAssert.file(['bower.json']); - yoAssert.noFile(['src/_element/_element.html']); + yoAssert.fileContent('src/foobar-app/foobar-app.html', 'class MyApplication extends Polymer.Element'); done(); }); + }); + test('ignoring filenames with dangling underscores when generating templates', (done) => { + const TestGenerator = createApplicationGenerator('polymer-1.x'); + helpers + .run(TestGenerator) + .on('end', (a) => { + yoAssert.noFile(['src/_element/_element.html']); + done(); + }); }); test('works when package.json with no name is present', (done) => { - + const TestGenerator = createApplicationGenerator('polymer-1.x'); helpers - .run(ApplicationGenerator) - .inTmpDir((dir) => { - fs.copySync( - path.join(__dirname, 'github-test-data/package.json'), - path.join(dir, 'package.json') - ); + .run(TestGenerator) + .inTmpDir((tempDir) => { + fs.writeFileSync(path.join(tempDir, 'package.json'), '{}'); }) .on('error', (error) => { assert.fail(); diff --git a/test/unit/init/element_test.js b/test/unit/init/element_test.js index d2dc0433..98be78a1 100644 --- a/test/unit/init/element_test.js +++ b/test/unit/init/element_test.js @@ -14,32 +14,52 @@ const fs = require('fs-extra'); const path = require('path'); const yoAssert = require('yeoman-assert'); const helpers = require('yeoman-test'); -const ElementGenerator - = require('../../../lib/init/element/element').ElementGenerator; + +const createElementGenerator + = require('../../../lib/init/element/element').createElementGenerator; suite('init/element', () => { - test('creates expected files while ignoring filenames with dangling underscores', (done) => { + test('creates expected 1.x files while passed the 1.x template name', (done) => { + const TestGenerator = createElementGenerator('polymer-1.x'); + helpers + .run(TestGenerator) + .withPrompts({name: 'foobar-element'}) + .on('end', (a) => { + yoAssert.file(['bower.json']); + yoAssert.fileContent('foobar-element.html', 'Polymer({'); + done(); + }); + }); + test('creates expected 2.x files while passed the 2.x template name', (done) => { + const TestGenerator = createElementGenerator('polymer-2.x'); helpers - .run(ElementGenerator) + .run(TestGenerator) + .withPrompts({name: 'foobar-element'}) .on('end', (a) => { yoAssert.file(['bower.json']); - yoAssert.noFile(['_element.html']); + yoAssert.fileContent('foobar-element.html', 'class MyElement extends Polymer.Element'); done(); }); + }); + test('ignoring filenames with dangling underscores when generating templates', (done) => { + const TestGenerator = createElementGenerator('polymer-1.x'); + helpers + .run(TestGenerator) + .on('end', (a) => { + yoAssert.noFile(['_element.html']); + done(); + }); }); test('works when package.json with no name is present', (done) => { - + const TestGenerator = createElementGenerator('polymer-1.x'); helpers - .run(ElementGenerator) - .inTmpDir((dir) => { - fs.copySync( - path.join(__dirname, 'github-test-data/package.json'), - path.join(dir, 'package.json') - ); + .run(TestGenerator) + .inTmpDir((tempDir) => { + fs.writeFileSync(path.join(tempDir, 'package.json'), '{}'); }) .on('error', (error) => { assert.fail(); From a07896a88fdcd5e517d9cf7ca559498c93564d3a Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Fri, 3 Feb 2017 14:28:48 -0800 Subject: [PATCH 2/2] add docs --- src/init/application/application.ts | 6 ++++++ src/init/element/element.ts | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/init/application/application.ts b/src/init/application/application.ts index 226c186d..17df34c2 100644 --- a/src/init/application/application.ts +++ b/src/init/application/application.ts @@ -15,6 +15,12 @@ import * as chalk from 'chalk'; import * as path from 'path'; import Generator = require('yeoman-generator'); +/** + * 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 { diff --git a/src/init/element/element.ts b/src/init/element/element.ts index 4d7dc2c6..d8a7c2ea 100644 --- a/src/init/element/element.ts +++ b/src/init/element/element.ts @@ -15,6 +15,12 @@ import * as chalk from 'chalk'; import * as path from 'path'; import Generator = require('yeoman-generator'); +/** + * 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 createElementGenerator(templateName: string): (typeof Generator) { return class ElementGenerator extends Generator {