0

I have the following Polymer element with the following dependencies:

  • box-el and player-el other Polymer elements
  • GameController and KeyboardInputManager classes that are defined in external files, game_controller.js.

The question is, how do I package and publish this element as stand-alone, so it is legitimate for customelements.io.

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="soko-ban">
  <template>
    <link rel="stylesheet" href="soko-ban.css">
    <template repeat="{{box in boxes}}">
      <box-el model="{{box}}"></box-el>
    </template>
    <player-el model="{{player}}" id="character"></player-el>
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
       ready: function() {

         var controller = new GameController();

         this.player = model.player;
         this.boxes = model.boxes;

         var inputManager = new KeyboardInputManager();
       });

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

Note that, I know how to publish this element, I am asking how to include the listed dependencies, namely the other Polymer elements, that I have written, and the external script files.

user3995789
  • 3,452
  • 1
  • 19
  • 35

1 Answers1

1

It's actually not that hard but you need to follow a few steps in a particular order.

There are two issues I see here that need to be solved:

  1. Dependency resolution & management
  2. Publishing to bower & customelements.io

Use webcomponents.org solutions

If this is your only file so far use Git to grab the generator-element or polymer-boilerplate. These are quickly becoming the standard for polymer element repository structure. Replace the html file for the main element in either if these with yours.

References

distribution article building & publishing article Bower & Polymer video

Manage Dependencies

You will need to install your dependency element and reference them in your component. Use a .bowerrc to determine where your dependencies will install to and use bower install --save <dep1> <dep2> to install them. reference them after your polymer import like this -

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="relative/path/to/my/first/bower/dependency">
<link rel="import" href="relative/path/to/my/second/bower/dependency">

Verify your dependencies get resolved and that your element works then pu. blish with the keyword 'web-components' in your bower.json (should already be there if you used generator-element or polymer-boilerplate)

Community
  • 1
  • 1
Erik Isaksen
  • 226
  • 2
  • 12
  • thanks for the through explanation, two things I want to ask about. How to include an external script file, can I just use `script` tag to include just like `link rel="stylesheet"` for css? I use [generator-polymer](https://github.com/yeoman/generator-polymer), It is more in an application structure rather than one custom element, can I publish from that generator as well? Finally note that, I have three custom elements that depend on each other I can have nested imports and publish all in one package as well right? @ErikIsaksen – user3995789 Sep 22 '14 at 13:31
  • All 3 depend on each other or do you have one that uses the other 2. Interop & composition are integral to Web Components so I would consider decoupling dependencies. Each should do something on its own. Also, You can add `script' tags in outside the polymer-element declaration but still in the HTML import. You can create apps with generator. It doesn't allow publishing of the apps to my knowledge - not sure. – Erik Isaksen Sep 22 '14 at 18:17