yeoman / generator-polymer

Scaffold out a Polymer project

Welcome, Friend!

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

Website   Getting Started   Submit Issue

Code of Conduct

Everyone in this community (from core members to random committers and volunteers) are asked to please act in accordance with the Yeoman Community Contributor Code of Conduct. We encourage you to follow these social rules which help guide our interactions with each other, and ensure we provide a safe environment for everyone. We aim to make Yeoman a positive, welcoming, open and inclusive project and community.

Code of Conduct

Issue Submission

Make sure you've read the issue submission guidelines before you open a new issue.

Yeoman is composed of a number of different sub-projects, most of which have their own dedicated repository. If you are looking for a repo for a particular piece, you'll find it on the organization page.

Feature requests

Feature requests should be submitted to the repo it concerns. Submit to yeoman/yeoman if you're unsure, otherwise the repositories for our officially maintained generators can be found here.

Contribute

See the contributing docs

Support

Need help or have a question?

• Stack Overflow
• Gitter chat

Please don't use the issue trackers for support/questions.

Links

• Website
• Development discussions
• Twitter
• Media kit
• Discover Bower packages

Team

Yeoman is beautifully crafted by these people and a bunch of awesome contributors

Addy Osmani	Sindre Sorhus	Pascal Hartig	Stephen Sawchuk	Simon Boudrias

Brian Ford	Eddie Monge	Paul Irish	Hemanth.HM	Revath S Kumar

Jimmy Moon	Frederick Ros	Mickael Daniel	Eric Bidelman	Matija Marohnić

Kevin Mårtensson	Arthur Verschaeve	Michael Kühnel	Mehdy Dara	Ulises Gascon

Backers

Love Yeoman work and community? Help us keep it alive by donating funds to cover project expenses!
[Become a backer]

License

BSD license Copyright (c) Google

generator-polymer's Issues

yo polymer only creates a polymer-element, not application

I installed the generator as usual npm install -g generator-polymer. What did I miss ? Does not create Gruntfile.js file or app directory for instance.

index.html template should auto fill 'title'

Not critical, but a very simple fix that would be nice...
The index.html yeoman template could auto fill 'title' in the same way that it the package.json "name" value is filled, rather than being set to Polymer WebApp out of the box. This could be derived from the repo name (possibly using ._.humanize or something...):
yeoman/generator-angular#765

Replace static page with Web Component

The standard "Allo" should be replaced with a template that uses the repeat directive. It should be simple and I might be send over the PR.

'dist/build.html' missing for vulcanize task?

$ yo polymer:element x
[?] What more would you like? 
[?] Import local elements into this one? (e.g "a.html b.html" or leave blank) 
[?] Import installed Bower elements? (e.g "polymer-ajax" or leave blank) 
   create app/elements/time.html

$ grunt
Running "jshint:all" (jshint) task

✔ No problems


Running "clean:dist" (clean) task

Running "vulcanize:default" (vulcanize) task
Warning: ENOENT, no such file or directory 'dist/build.html' Use --force to continue.
Error: ENOENT, no such file or directory 'dist/build.html'
    at Object.fs.openSync (fs.js:427:18)
    at Object.fs.writeFileSync (fs.js:966:15)
    at Object.handleMainDocument [as processDocument] (/Users/hemanth/labs/x-time/node_modules/grunt-vulcanize/node_modules/vulcanize/lib/vulcan.js:336:6)
    at /Users/hemanth/labs/x/node_modules/grunt-vulcanize/tasks/vulcanize.js:46:19
    at Array.forEach (native)
    at Object.<anonymous> (/Users/hemanth/labs/x-time/node_modules/grunt-vulcanize/tasks/vulcanize.js:29:16)
    at Object.<anonymous> (/Users/hemanth/labs/x-time/node_modules/grunt/lib/grunt/task.js:264:15)
    at Object.thisTask.fn (/Users/hemanth/labs/x-time/node_modules/grunt/lib/grunt/task.js:82:16)
    at Object.<anonymous> (/Users/hemanth/labs/x-time/node_modules/grunt/lib/util/task.js:296:30)
    at Task.runTaskFn (/Users/hemanth/labs/x-time/node_modules/grunt/lib/util/task.js:246:24)

Aborted due to warnings.

After grunt -f the rest of the grunt runs went well.

Bower overwriting the component directory

Following the discussion here I have started using the suggested structure and used ../ as bower installation directory. But now I have two components, A and B, where B has A as bower dependency. So now every time I run bower install in B, bower overwrites A directory, as also discussed in bower forum (but the issue was abandoned for a while). Am I doing anything wrong? How everybody else using generator-polymer is dealing with this problem?

Remove `ncp`

We should figure out the actual problem instead.

#30 (comment)

@SBoudrias @addyosmani

0.4.0 pre-release

@ragingwind @trevordmiller @addyosmani @ebidel would you mind taking https://github.com/yeoman/generator-polymer/releases/tag/v0.4.0-1 for a test drive and let me know if any issues occur? thanks!

`grunt serve:dist` yields broken page

Just after using yo polymer to generate a project, running grunt serve:dist to view the generated output fails with:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/bower_components/platform/platform.js

Either not enough is getting copied, or the default vulcanize options aren't inlining enough.

box-sizing: border-box

To keep the generator-polymer in sync with the Google Web Starter Kit, and to follow best practices, would it be good to add the box-sizing: border-box setup to the general stylesheet (CSS/Sass) and/or to the yo polymer:el template in place of display: block as is currently being used?

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

`polymer:gh` does not include webcomponents in the devDependencies

After running yo polymer:gh, webcomponents in the devDependencies are not included.

I configure 3rd-party webcomponents(ex. github-ribbon) in bower devDependencies for using it in my documentation page.

$ bower install github-ribbon --save-dev

<!-- demo.html -->
<link rel="import" href="../github-ribbon/src/github-ribbon.html">
...
<github-ribbon user="ragiragi" repo="my-polymer-rating" color="orange" position="right"></github-ribbon>

then when I run polymer generator to seed github-pages, I can't find any dev-deps in the gh-pages branch.

How can I fix it?

polymer:element generator produces invalid element names

Following the instructions in the README, the button and panel elements get created without -element, which apparently breaks polymer.

Results in the following error:
Uncaught Error: document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was 'button'.

EDIT: this is in Chrome Version 34.0.1847.116

Failed to execute error

The generator works as expected until yeoman runs bower install where it throws an error:

I have tried manually running bower install and the same error occurs. All of my other yeoman generators are working so it seems to be an issue with this generator or with the repo's listed in the bower dependencies of this generator. Any thoughts or solutions?

Also, how do generator-polymer, and generator-element relate to each other? Should I use generator-polymer to scaffold out the initial project and then generator-element to create individual elements inside it? Does generator-polymer setup a recommended structure for how and where web components should be placed and how they should be used?

Sorry for so many questions; I am new to web components / Polymer and would like to make sure that I am following the most recent best practices for project setup.

Thank you.

Bring Mocha/testing in-line with latest generator-webapp

generator-mocha step fails during Polymer project initialize

yo 1.0.5
node 10.22
npm 1.3.14

/usr/local/lib/node_modules/generator-mocha/app/index.js:7
  this.option('assert-framework', {
       ^
TypeError: Object [object Object] has no method 'option'
    at new module.exports (/usr/local/lib/node_modules/generator-mocha/app/index.js:7:8)
    at Environment.create (/usr/local/lib/node_modules/yo/node_modules/yeoman-generator/lib/env/index.js:325:10)
    at Generator.invoke (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/lib/actions/invoke.js:18:28)
    at /usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/lib/base.js:351:12
    at /usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:548:21
    at /usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:224:13
    at iterate (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:131:13)
    at async.eachSeries (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:147:9)
    at _asyncMap (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:223:9)
    at Object.mapSeries (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:213:23)

Should the initial view include/be a custom element?

Two custom elements are brought in, but not used (as far as I can tell) - should this intial 'Allo 'Allo page make use of a custom element as a nice introduction to using Polymer?

Add support for grunt-vulcanize

This was recently pushed to npm by Daniel and should be supported https://npmjs.org/package/grunt-vulcanize. Could just add it to https://github.com/yeoman/generator-polymer/blob/master/app/templates/Gruntfile.js#L262.

Deploy on Github pages not working

When I run yo polymer:gh I get two errors during the script execution:
gp.sh: 16: gp.sh: pushd: not found at the beginning
and

gp.sh: 34: gp.sh: popd: not found

child process exited with code 127

at the end.

I'm on Ubuntu 14.04, I usually use zsh as default but I've tryed bash as well without success.

If I run e.g. pushd . directly, the command works.

Cut a new release

@robdodson Thanks for all your awesome work updating the generator. I think one thing we should do next is work towards tagging and pushing a new release. Could you check to make sure there are no further changes you feel need to be made to the readme before we go ahead?

Default vulcanize output in `dist` includes relative paths back to `app`.

With the default yo polymer output, after mkdir dist (to work around #24) and grunt, dist/build.html contains:

<script src="../app/bower_components/platform/platform.js"></script>

which means the dist directory isn't a standalone build output.

Ready for npm publish?

I think the version that's up is still 0.1.1. Are we ready to roll out 0.2 to folks?

Out of the box, Polymer doesn't install correctly

Rather, we don't install the correct package since they updated and the minified build we used to get is no longer there. This needs to be fixed otherwise scaffolding won't actually get you what you need.

A couple of small changes

• class="no-js" on tag. Since the class is not actually being used, can it be removed?
• In the .jshintrc, indent is set to 4; however, in the .editorconfig, the indent is set to 2. Should these be the same? Matching the .jshintrc in the Web Starter Kit might make sense, in my opinion...
• In .jshintrc, strict is set to true; however, strict mode is not being used in the example yo-list.html and yo-greeting.html, so my linters are throwing errors. Should use strict; be added to the examples and el subgenerator?
• In .jshintrc, the only global variable listed is "wrap", so the instances of Polymer are showing up as errors in my linter. Should Polymer be added to the list of variables in .jshintrc? Or does this mean that "newcap": false should be used?

"bower install" hangs when run inside projects generated with generator-polymer

Steps to reproduce:

1. Run "yo polymer" and generate a Polymer app with default settings.
2. Try to install a new component with Bower (e.g. bower install --save Polymer/core-firebase). This will hang forever.
3. Stop the process, cd to the parent directory and try Step 2 again. This time it will work.

(npm v1.4.9, bower v1.3.3, Mac OS X 10.9.3)

Sass support

• External CSS/SCSS files for :app generator
• External CSS/SCSS files for :el generator
• Watch/Serve should preview SCSS properly
• Watch/Serve should preview CSS properly
  • Waiting on mklabs/tiny-lr#53

Autoprefixer added to build tool

To further match Google's Web Starter Kit (and because it is freakin' awesome), would it make sense to add Autoprefixer to the Grunt/Gulp tasks, with Polymer's supported browsers listed in options.browsers?

Upgrade bootstrap-sass to version 3.0.0

Currently, generator-polymer is using bootstrap-sass version ~2.3.0 (see app/templates/_bower.json at line 5).

That would be great to upgrade to bootstrap-sass version 3.0.0, which is based on Bootstrap 3.0.0. It ships with new features which would be appreciated.

Another option, instead of having to maintain the sass-bootstrap version, would be to use "latest" as version number. But that would raise new issues on the generator-polymer project side, as it would eventually require some modifications in the HTML code on every major updates of bootstrap-sass.

P.S.: I'm using latest Yo as per guidelines for contributing document.

`concat` and `uglify` listed as tasks, but are not being used.

In the Gruntfile.js, concat and uglify listed as tasks, but are not being used. I guess they aren't really needed with Vulcanize, but can Vulcanize concatenate and uglify scripts and CSS for performance? If not, should these be added as part of the serve/watch and build tasks in the Gruntfile?

Update to use the latest cat and hat selectors

http://robdodson.me/blog/2013/11/15/the-cat-and-the-hat-css-selectors/

prepend '-element'

Hi folks,

the generator today creates something like mytag + '-element'

I get why as people might try to create a button element and elements need the '-' as part of the tag. In my case this behaviour would be kind of annoying as all my components are prefixed with my companies/projects shorthand e.g. xyz-button. Which now results in xyz-button-element.

Are there any opinions about prepending vs appending an element in general?
Should that be an option - prepend: 'xyz', append: ''

Regards

Create a readme during scaffolding

Should we pop out a readme when the user yo polymers? @addyosmani, I see your repos tend to use a similar format (ex: https://github.com/addyosmani/video-player) Should we adapt that?

Make auto-import stuff optional

Not every element needs to be imported in elements.html. For example, if I make a chat-app element, it may import all of its children, so including those imports again in elements.html is redundant.

Running yo polymer:el should ask if the user would like an import generated for them

Generated htmlmin task produces confusing, redundant index.html

The default output of yo polymer includes a vulcanize task that generates build.html, and an htmlmin task that copies over index.html. The compiled application definitely doesn't need both, and I was confused when I redirected the vulcanize output to index.html and it got overwritten by the htmlmin output.

`grunt test` task not working out of the box

After running yo polymer, the default grunt test task does not work. It outputs the following error:

Running "mocha:all" (mocha) task
Testing: http://localhost:9000/index.html

Warning: PhantomJS timed out, possibly due to a missing Mocha run() call. Use --force to continue.

Aborted due to warnings.

htmlmin not working

The htmlmin task in the Gruntfile.js only produces expanded html by default, which is essentially not minified. I would imagine that this was a mistake and that the htmlmin task should be set to expand: false and the options that have been commented out should be added back in?

.jshintrc `newcap` option is not working out of the box

newcap is set to true, but the default Polymer({}) blocks do not follow this rule, so linters bark right after the initial scaffold. Either newcap should not be set, or the default script template that Yeoman generates from should follow the newcap rules:
http://www.jshint.com/docs/options/#newcap

Generated package.json requires bower that's too old to install Polymer

https://github.com/yeoman/generator-polymer/blob/master/app/templates/_package.json#L20 requires "grunt-bower-requirejs": "~0.4.1", which has a peerDependency of bower@~0.x, which fails to check out polymer-ui-action-icons#0.2.2. It takes a while to figure out what's broken in that dependency chain, which kinda negates the benefit of using yeoman.

Use twbs/bootstrap-sass instead of sass-bootstrap

As sass-bootstrap has been superceeded by an official Bootstrap Sass port, sass-bootstrap is no longer up-to-date with the latest Bootstrap releases.

The @import needs to be changed to @import "bootstrap-sass/vendor/assets/stylesheets/bootstrap";.

yo polymer:el creates wrong import path to Polymer

The html files that are created with yo polymer:el have the wrong path listed on the HTML import for polymer.html. They need to point up one more directory (ie ../).

They currently use:
<link rel="import" href="../bower_components/polymer/polymer.html">
But they should be the following with the new folder-per-component structure:
<link rel="import" href="../../bower_components/polymer/polymer.html">

class="no-js"

Is class="no-js" needed on the html tag in index.html? I don't see it being used anywhere...

idea: create css file for template and link it

create a css file with host and scope rules named something like style/my-element.css

and in the created template include a link to css file

<template>
  <link rel="stylesheet" href="styles/my-element.css" />
...

maybe as an option also create sass file?

Sync with Web Starter Kit

From Rob Dodson's request to create a ticket on a recent Twitter conversation:

---

To match/sync with the setup of Google's Web Starter Kit and with what Addy Osmani has been talking about (creating a "flavor" of the Web Starter Kit with Polymer/Web Components baked in), I would love to see/help with a few changes with this generator:

Recommended updates to generator-polymer

• Sass support / examples of using shared variables/mixins/placeholders inside of this new web component culture. Maybe also needed external links for JavaScript files and CSS files inside of each element-name.html file generated with yo polymer:el element-name?
• BrowserSync rather than LiveReload.
• Automatic living style guide / pattern library.
• PageSpeed insights.
• Consistent config files/settings, like: .jshintrc, .editorconfig etc.

---

P.S.

I just want to let the Polymer team know that you are amazing! Me and a few other developers at my company are working hard to adopt and push Web Components and Polymer to our fellow developers; all of your trainings/talks, hard work, updates, tools, and kindness is much appreciated. You are doing amazing work that is changing the development world.

Please let me know if you need my help with anything. I don't mean to just bring up issues here, but would like to contribute and evangelize Polymer and Web Components with my fellow developers ;)

Install Polymer from Bower

Currently uses static versions

Ubuntu: Generator is exiting with Node error var cwd = process.cwd();

I am working on Ubuntu 14.04LTS with Node v0.10.25, npm v1.3.10, yeoman v1.1.2, and generator-polymer v0.2.2.

Running the generator-polymer after the yo command exits with the following Node error:

node.js:811
    var cwd = process.cwd();
                      ^
Error: ENOENT, no such file or directory
    at Function.startup.resolveArgv0 (node.js:811:23)
    at startup (node.js:58:13)
    at node.js:902:3

Googling the error will get you here:
foreversd/forever#200

Here is a dump of my console:

stat30fbliss@rob-UbuntuPad:~/Dropbox/Workbench$ mkdir polymer && cd polymer
stat30fbliss@rob-UbuntuPad:~/Dropbox/Workbench/polymer$ yo
[?] What would you like to do? Run the Polymer generator (0.2.2)

Make sure you're in the directory you want to scaffold into.
This generator can also be run with: yo polymer

     _-----_
    |       |    .--------------------------.
    |--(o)--|    | Out of the box I include |
   `---------´   |        the Polymer       |
    ( _´U`_ )    |       seed-element.      |
    /___A___\    '--------------------------'
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

[?] What is your GitHub username? stat30fbliss
[?] What is your element's name: polymer
   create .gitignore
   create .gitattributes
   create .bowerrc
   create bower.json
   create .jshintrc
   create .editorconfig
   create polymer.css
   create polymer.html
   create index.html
   create demo.html
   create README.md


I'm all done. Running bower install for you to install the required dependencies. If this fails, try running the command yourself.


bower cached        git://github.com/Polymer/polymer.git#0.3.3
bower validate      0.3.3 against git://github.com/Polymer/polymer.git#~0.3.1
bower cached        git://github.com/Polymer/polymer.git#0.3.3
bower validate      0.3.3 against git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0
bower install       polymer#0.3.3

polymer#0.3.3 
├── core-component-page#0.3.3
└── platform#0.3.3

Bye from us! Chat soon.

            Addy Osmani
          Sindre Sorhus
        Brian Ford
     Eric Bidelman
              Paul Irish
     Mickael Daniel
          Pasca1 Hartig
      Stephen S.wchuk
    Frederick R0s

stat30fbliss@rob-UbuntuPad:~/Dropbox/Workbench/polymer$ 
node.js:811
    var cwd = process.cwd();
                      ^
Error: ENOENT, no such file or directory
    at Function.startup.resolveArgv0 (node.js:811:23)
    at startup (node.js:58:13)
    at node.js:902:3

Here is a screenshot of my directory after the generator fails:

All of the files are populated. The only listing in bower.json is polymer:

{
  "name": "polymer",
  "version": "0.0.0",
  "keywords": "seed, polymer, web-components",
  "main": "polymer.html",
  "dependencies": {
    "polymer": "Polymer/polymer#~0.3.1"
  }
}

Let me know if I can provide any more details.

running yo polymer creates directories outside of the directory you ran the command

I am not entirely sure what this generator is supposed to do, because according to the article at http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/ the next thing to do after running yo polymer is to run grunt server.

HOWEVER, there is no gruntfile, and no directories within the directory I ran yo polymer in.

.bowerrc has a ../ as its directory, which causes bower to install components in the level above the directory I have just entered.

Implement workflow from design doc

PROPOSED WORKFLOW

$ yo polymer

$ > What prefixed name would you like to call your new element?
Carousel

(we should normalize the name and lowercase it accordingly)

$ > Would you like some extra boilerplate code included? Y/N
Y

<polymer-element name="carousel-element">
  <template>
    <span>I'm <b>carousel-element</b>. This is my Shadow DOM.</span>
  </template>
  <script>
    Polymer('carousel-element');
  </script>
</polymer-element>

We then automatically scaffold out your element, write an index.html file including it via HTML imports and pull in Polymer (and any related files) using Bower. That's the start.

If you want to go create another element using the same project (e.g a calendar), you can just run:

$ yo polymer:element calendar

<polymer-element name="calendar-element" constructor="CalendarElement" attributes="">
  <template>
    <style>
      @host { :scope {display: block;} }
    </style>
    <span>I'm <b>calendar-element</b>. This is my Shadow DOM.</span>
  </template>
  <script>
    Polymer('calendar-element', {

      //applyAuthorStyles: true,
      ready: function() { },
      inserted: function() { },
      removed: function() { },
      attributeChanged: function() { }

    });
  </script>
</polymer-element>

$ > What prefixed name would you like to call your new element?
etc.

$ > Would you like to include Polymer() has an external script rather than inlining it?
Y

Additional prompts

$ > List public methods/property names you would like to publish on the element?
Y

$ > Would you like to include constructor=””?
Y

Constructor-like setup with ready

<polymer-element name="my-element" constructor="MyElement">
  <template>
    This is a <b>my-element</b> with a ready() method.
    <span id="readyEl">Not ready...</span>
  </template>
  <script>
    Polymer('my-element', {
      owner: "Daniel",
      ready: function() {
        this.$.readyEl.innerText = this.owner + " is ready!";
      }
    });
  </script>
</polymer-element>

$ > Would you like to include any other elements in this element?
Y

$ > Which elements would you like to include? (space separate with paths)
polymer-list polymer-button

<link rel="import" href="polymer-list.html">
<link rel="import" href="polymer-button.html">

Build support

If we are interested in building, testing and LiveReload we might also want to implement support for

grunt server
grunt test
grunt / grunt build

Bug when creating elements with multiple dashes

At present gangnam-style when passed as a name for an element to a prompt will cause the elements to be created correctly, but will name the component 'gangnameStyle' within the import for some strange reason. Probably CCing where it should not.

We need to fix this otherwise naming will have constraints.

Validate element name

I think this generator could benefit from element name validation. So to make sure users are using a valid name.

This means both validating that it's a valid element name and that it's not already taken.

See generator-element for example: https://github.com/webcomponents/generator-element/blob/cec6fa0a02a0c428ca46b496233ed965aaabd24f/app/validator.js

Blocked by #30

@zenorocha @robdodson

Add PageSpeed Insights

From the #52 umbrella issue

generator-polymer scaffolding process seems to be broken

I just intalled generator-polymer in Ubuntu 13 (npm install -g generator-polymer) and when I try to generate a new project (yo polymer) it throws an error: You don't seem to have a generator with the name polymer installed. I also reinstall yeoman but it does not solve the problem. In fact the generator does not appear in the list of installed generators when i run yo --help.

gp.sh nukes the gh-pages branch history

gp.sh is really destructive — it essentially clones the master branch, does some manipulations, creates a brand-new orphan gh-pages branch and then force-pushes it back up. This prevents gh-pages from ever having a commit history.

It may be worth reevaluating how it does this at some point.