Ali Bassam Ali Bassam - 3 months ago 18
Git Question

Publishing on GitHub a Polymer component with multiple sub components

I have a created a web component, let's call it

a-1.html
, this is the main web component that I would like to publish, but this component also depends on another component that I created,
b-2.html
, and
b-2.html
also depends on a third component that I created
c-3.html
.

I have followed Polymer's Create reusable elements guide in order to publish my element on GitHub, everything worked fine in terms of development (they were already developed), and I made the documentation, and I published on GitHub, but I'm facing 1 problem.

The guide deals as if you have a single component to be published, and it mentions that if there's any dependencies, I should place them, but what if my dependencies are still local dependencies? I can't put
b-2.html
and
c-3.html
in bower.json, because they are not yet online.

So later on, when I'm installing my element using
bower install <username>/element
, the element is not working because it's missing
b-2.html
and
c-3.html
, also the online demo (Github page using gp.sh) is not working.

For this situation, where should I place these files in order to have a complete working repo on GitHub, and also a working demo.

Directory:

bower_components
--- lots of compoenents
--- including b-2 and c-3 added manually by me
---- in order for the demo to work locally, but since they
----- aren't in bower.json, this won't work eventually
bower.json
demo
---index.html
index.html
README.md
test
---basic-test.html
---index.html
a-1.html


THANKS!

Answer

Publishing multiple elements in a GitHub repository is exactly the same as publishing a single one. The b-2.html and c-3.html elements in your case should be placed besides a-1.html in the directory:

bower.json
a-1.html
b-2.html
c-3.html

Unless specified in an ignore section of the bower.json file, these should be installed by bower.

In my point of view, the main section of the bower.json file is here subtle. Multiple elements should be considered as individual which could be used independently. Here could be a main section for your situation:

"main": [
  "a-1.html",
  "b-2.html",
  "c-3.html"
]

However, if you wish to document your elements with an iron-component-page component, according to the Polymer 1.0 documentation all elements should be imported in a single html page. The recommended way of setting up the components would be a subdirectory for each component in order to write a demo page per component. I did that in a personal project including several elements to define an UML model: polymeria-uml.