Polymer Starter Kit and Polymer's indentation

Question

I installed the Polymer Starter Kit Light and am writing my first Polymer application. I noticed that under bower_componets/polymer I have polymer.html, but the file has no indentation at all. I would love to follow the code and see what's going on, but the lack of indentation makes it less than ideal.

Running a simple bower install polymer gives you the same files.

In the GitHb project, https://github.com/Polymer/polymer , I cannot even find polymer.html. So:

• How is Polymer's code structured? How is the polymer.html generated?
• How can I get a debug and tinker-friendly version of Polymer?

Answer 1

Polymer has development branches and releases.

If you bower install Polymer/polymer#master you get the master branch, which is very much like what you see in the GitHub repository.

If you bower install Polymer/polymer you get the latest release, which has been minified (only necessary files, and those files are combined and compressed) for your production benefit.

Answer 2

I'm afraid Polymers a bit complicated because it loads parts of itself dynamically, using the this._addFeatures function.

If you track back starting at Polymer.html, you will see it imports Polymer-mini.html which in turns imports Polymer-micro.html, which I think then loads something from the library.

Answer 3

polymer.html is imported in almost all the components. So even if you change the path in your element, it will be attempted to be imported from bower_components in some other element.

From what I understand, the HTML imports system keeps track of already imported items to ensure same code is not run twice. If you have polymer.html in two different path, it might attempt to run it twice and might lead to some issues.

So it is better to leave it in bower_components.

You can also try polygit (http://polygit.org/), if you are just playing around with polymer. Below is the sample plunker with polygit

http://plnkr.co/edit/QkxrrFHYZRnlHuZVNIgy

e.g.

<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">