@addyosmani assigning this to you, but not sure who will ultimately tweak the guide

Hi,

First of all, thank you very much for this seed. It is wonderful and very useful.

I am new with polymer and I am trying to setup a good environment to develop a web app.
Firstly, I want to develop a reusable login-form component. It will depend on paper-material, paper-input and paper-button elements. I used this seed to create it.

Very quickly, I have noticed that developing in this seed-element project was not easy. There are no files watchers for polyserve reloading and no watchers to trigger wct tests (I hope a watch mode will be added to wct soon: Polymer/web-component-tester#32).

What is the best practice to develop a reusable component ? Should I include a git submodule directly in my webapp and use the webapp files watchers ? Should we add a watcher mode into polyserve ? Anything else ?

Thanks in advance.

Related: Polymer/polymer#533

I've been asking this question several times on slack @Polymer without an answer, maybe the maintainers of PSE have informations.

What would be the recommended way to use DSL (Eg Jade, HAML, Coffee etc), and even ES2015 within a seed-element based repository, allowing Polyserve to correctly run, while publishing the correct transpiled files when other people use the element? Would that require the integration of a proper Gulpfile? Or is there anything already recommended regarding that?

The current <seed-element> example tests don't show how to assert that the composed dom is as expected. They show how to test the API, but custom elements are about appearance as much as they're about APIs.

Line 20, errant coma. Ponder a pre commit lint hook.

https://github.com/PolymerLabs/seed-element/blob/master/bower.json

When you hit /tests/ you run the suite.

I am using the seed for create some components, right now I am not comfortable with that text there all the time. Is there any possibility of removed from the seed? It's fine for me if you put it inside LICENSE but not inside every single file and inside of some production code

Moved from yeoman/generator-polymer#246

When using yo Polymer:seed my-element I would have expected the generated seed-element to have been placed inside a test-fixture element for testing in the same way as when using yo Polymer:el my-element

So people don't have to remember the syntax.

The method here seems fragile and intrusive (installing all deps in the parent of the dev directory). Are there any ideas for a better practice?

I know it's common to have all dependencies as siblings to the component directory and that adds a layer of difficulty when you have to rely on relative paths for inclusion.

What about something like the following directory structure?

my-element
|-- sandbox
|    |-- src
|         |-- my-element.html
+-- .bowerrc
+-- bower.json

With the dependency installation occurring in the sandbox/ dir (only an example) so that dependencies look like this after installation

my-element
|-- sandbox
|    |-- src
|    |    |-- my-element.html
|    +-- polymer
|    |    |-- polymer.html
|    +-- platform
|         |-- platform.js
+-- .bowerrc
+-- bower.json

The built component (assuming a build process that optimizes and compresses) could then be located at the root of the directory to accommodate the same pattern of accessing deps via the relative sibling directory in a consuming project.

A checkout with the built component would look like this.

my-element
|-- sandbox
|    |-- src
|    |    |-- my-element.html
+-- .bowerrc
+-- bower.json
+-- my-element.html

I'm not saying this is the best solution, just opening the topic for discussion.

/cc @addyosmani @robdodson @jstrimpel

Probably we should deprecate it and redirect to Polymer CLI?

cc @FredKSchott @justinfagnani

Hi,

I think the unit test should be upgrade. I have this errors :

$ wct
Starting Selenium server for local browsers
Selenium server running on port 48531
Web server running on port 52922 and serving from /home/ystreibel/projects/Polymer
404 GET /webcomponentsjs/webcomponents-lite.js
chrome 42                Beginning tests via http://localhost:52922/seed-element/test/index.html?cli_browser_id=0
404 GET /webcomponentsjs/webcomponents-lite.js
404 GET /polymer/polymer.html
chrome 42                ✖ basic-test.html » <seed-element> » defines the "author" property

  Cannot read property 'name' of undefined
    <unknown> at   Context.<anonymous> at /seed-element/test/basic-test.html:33:0

chrome 42                ✖ basic-test.html » <seed-element> » says hello

  myEl.sayHello is not a function
    <unknown> at   Context.<anonymous> at /seed-element/test/basic-test.html:38:0

chrome 42                ✖ basic-test.html » <seed-element> » fires lasers

  myEl.fireLasers is not a function
    <unknown> at   Context.<anonymous> at /seed-element/test/basic-test.html:49:0

chrome 42                Tests failed: 3 failed tests
404 GET /webcomponentsjs/webcomponents-lite.js
firefox 37               Beginning tests via http://localhost:52922/seed-element/test/index.html?cli_browser_id=1
404 GET /webcomponentsjs/webcomponents-lite.js
firefox 37               ✖ basic-test.html » <seed-element> » defines the "author" property

  myEl.author is undefined
    <unknown> at   <unknown> at /seed-element/test/basic-test.html:33:0

firefox 37               ✖ basic-test.html » <seed-element> » says hello

  myEl.sayHello is not a function
    <unknown> at   <unknown> at /seed-element/test/basic-test.html:38:0

firefox 37               ✖ basic-test.html » <seed-element> » fires lasers

  myEl.fireLasers is not a function
    <unknown> at   <unknown> at /seed-element/test/basic-test.html:49:0

firefox 37               Tests failed: 3 failed tests
Test run ended in failure: 3 failed tests

chrome 42 (0/0/3)                       firefox 37 (0/0/3)                    



┌────────────────────────────────────────────────────┐
│ Update available: 3.1.3 (current: 2.2.6)           │
│ Run npm install -g web-component-tester to update. │
└────────────────────────────────────────────────────┘


3 failed tests

What is the correct way to have extra dependencies for the demo file? For my element itself, I don't need voice-elements but for the demo I do. Currently, I have it as a dependency no matter what.

Is there anyway to publish to a private bower registry and Github Enterprise pages instead of the public ones? Is there a project you recomend for hosting private docs and modules for polymer? I saw el.io but not sure if there is a better one. Thanks.

I've found myself wanting to write a test suite that contains multiple tests for asynchronous events. The sample test suite illustrates how to test that a single event is fired, with done() called as part of the event handler, terminating the test suite.

It's not clear what the best practice is for ensuring that multiple event handlers are invoked before terminating the test suite. Poking around a bit I've found, e.g., chai-as-promised, or maybe this is something that either Mocha or Chai supports natively.

It would be great if someone more comfortable with testing best practices could modify the example test suite to provide an example of testing that multiple events have been fired.

On the page https://www.polymer-project.org/1.0/docs/start/reusableelements.html#local-dependencies

search for this sentence:

"You can check out the live version of this page for the seed-element project."

"live" is a link to github pages, which is broken:
http://polymerlabs.github.io/seed-element/components/seed-element/

Polymer/polymer#3282 (comment)

How to reproduce: Download any zip, (I tried 1.0.0 and 1.0.6), unzip, bower install, polyserve.
The 'Docs' and 'Demo' buttons are no longer in the top right arranged horizontally, they are now behind the <iron-doc-viewer>.
This problem appeared sometime in the last 3 hours. Before that everything was ok in this regard.

Would it be useful to have a simple grunt/gulp file to server the files for testing the element locally ?

Per a discussion with @robdodson, if this is going to be the canonical element we suggest developers build from would it be sensible to rename it something clearer like seed-element?.

Using polylint on the index.html brings the following errors:

../iron-doc-viewer/iron-doc-viewer.html:67:5
    Property '_properties' bound to attribute 'hidden$' not found in 'properties' for element 'iron-doc-viewer'
../iron-doc-viewer/iron-doc-viewer.html:69:7
    Property '_properties' bound to attribute 'items' not found in 'properties' for element 'iron-doc-viewer'
../iron-doc-viewer/iron-doc-viewer.html:69:7
    Property '_properties' bound to attribute 'hidden$' not found in 'properties' for element 'iron-doc-viewer'
../iron-doc-viewer/iron-doc-viewer.html:74:5
    Property '_methods' bound to attribute 'hidden$' not found in 'properties' for element 'iron-doc-viewer'
../iron-doc-viewer/iron-doc-viewer.html:76:7
    Property '_methods' bound to attribute 'items' not found in 'properties' for element 'iron-doc-viewer'
../iron-doc-viewer/iron-doc-viewer.html:81:5
    Property '_events' bound to attribute 'hidden$' not found in 'properties' for element 'iron-doc-viewer'
../iron-doc-viewer/iron-doc-viewer.html:83:7
    Property '_events' bound to attribute 'items' not found in 'properties' for element 'iron-doc-viewer'
../iron-doc-viewer/iron-doc-viewer.html:88:5
    Property '_behaviors' bound to attribute 'hidden$' not found in 'properties' for element 'iron-doc-viewer'
../iron-doc-viewer/iron-doc-viewer.html:90:7
    Property '_behaviors' bound to attribute 'items' not found in 'properties' for element 'iron-doc-viewer'
../iron-ajax/iron-ajax.html:38:1
    Property UNKNOWN not found in 'properties' for element 'iron-ajax'
../iron-doc-viewer/iron-doc-property.html:34:9
    Property 'return' bound to attribute 'hidden$' not found in 'properties' for element 'iron-doc-property'
../iron-doc-viewer/iron-doc-property.html:26:82
    Property _paramText not found in 'properties' for element 'iron-doc-property'
../paper-ripple/paper-ripple.html:163:1
    Property isAttached not found in 'properties' for element 'paper-ripple'

Hey Scott. Thanks for putting this together! I had a few quick questions whenever time allows:

• Does this boilerplate use the script your previously mentioned for publishing a deployment (gh-pages) branch from master? If so, is it worth sharing that or including a sample of it somewhere visible?
• Bower.json currently targets Polymer master rather than locking in to a specific version. This appears to be how Polymer eng prefer to develop their own elements. Will we be suggesting other devs do the same?

Hi,
I think it would be worth to add a small section explaining how to use polylint to lint your element even before trying to use polyserve, e.g. calling polylint -i seed-element.html in the element directory.

Out of the box, if a user runs bower install the current unit testing setup doesn't run correctly when you navigate to tests in the test directory. I'll get this fixed.

I think we should consider duplicating some of the information on the creating reusable elements guide in the readme of this repo. Would be good to keep them roughly in sync (maybe build part of the guide from the readme here)

I'd like to see a gulpfile added to the seed element which featured some of the following.

gulp demo - Opens iron-component-page to the demos.
gulp docs - Opens iron-component-page to the docs.
gulp test - Runs wct
gulp vulcanize - Flattens the element and all it's dependencies into .dist directory.
gulp build - Runs Polybuild
gulp lint - Lints the element.
gulp weight - Opens chrome to a polydev report
gulp serve - polyserve

Placeholder to remind us to update to webcomponents.js after the next release is made.

See, e.g. the @return statement in sayHello's comment block -- no corresponding text in the generated doc.

In general, it would be great to have clearer documentation around which JSDoc annotations are supported, and if there are any restrictions (e.g. @param annotations may not be multiple lines.)

The bower.json is depending on Polymer/polymer#master but this should probably point at our latest stable release.

I noticed we're not passing the element name to the Polymer constructor.
https://github.com/PolymerLabs/untitled-element/blob/master/untitled-element.html#L27

Is that a supported way of doing things? +1 if we can omit the redundant element name, I've always found it a bit annoying.

From: googlearchive/core-doc-viewer#3

my project is in github.com/large-screen-only/large-screen-only, and it runs on large-screen-only.github.io

I simply put a div inside my demo page, but it doesn't shown. the src in iframe i saw in devtool is still about:blank. i've already added @demo demo/index.html inside the element.

the default value of properties also can't be shown and i don't know why.

Please help me.

Add these to the ignore:

"test",
"tests",

We're potentially blowing up a user's environment when they naively do a git clone followed by bower install.

It's not clear why gulpfile is here because basically we can't do anything with it. Firstly, package.json file with dependencies is missing. Secondly, after installing gulp and web-component-tester as dependencies, running gulp is failing due to initGulp method. Changing the line to the following starts working:

require('web-component-tester').gulp.init(gulp);

However, the question is why do we need the gulpfile there on the first place?

Some of the core-* use @homepage, but this is using @url