Polymer element with javascript dependencies

by

Private resources should be installed in your component folder and used directly. But shared resources, those resources that other components my also want to use (like marked), should be handled as dependencies.

We suggest two conventions for handling shared dependencies:

  1. always use the canonical path which is ../<package-name> (you did this already). Polymer by convention expects a flat-dependency folder (as supported by Bower), so any resource you need must always be on this path.
  2. refer to an import for the shared resource.

In this case,

<script src="https://stackoverflow.com/questions/22135095/marked/lib/marked.js">

meets the first convention. Your component can depend on marked package and expect it to exist at ../.

The second convention supports sharing. If more than one component in a project uses a script tag to load a library, the library will load multiple times. Imports, on the other hand, are de-duplicated, so you don’t have this problem.

For example, if all components load marked the standard way:

<link rel="import" href="https://stackoverflow.com/questions/22135095/marked-import/marked-import.html">

then you will only ever have one copy of the script loaded.

Additionally, imports allow you to indirect the actual resource. For example, normally marked-import would depend on marked and use a script tag to load the JavaScript. But in fact, any particular project author can modify the local marked-import.html to load the main code from a CDN or from any other location. By indirecting all access through the import, we create a single point of control.

Today, marked and other libraries do not include import files, so we have to fill in those gaps. Additionally, it will require coordination with other components (to have agreement on what the standard import name will be for any particular shared resource). As (and if) these conventions are adopted, such questions will lessen over time.

So, your component installed would look something like this:

/components
  /mark-down - depends on marked-import
  /marked-import - (controlled by user, can just depend on `../marked`)
  /marked

More Related Contents:

  1. Do Custom Elements require a dash in their name?
  2. Polymer 1.0: How to pass an argument to a Polymer function from an attribute?
  3. Serving Polymer App to a /path not at root
  4. How to automate shadow DOM elements using selenium?
  5. How to use dom-repeat with objects instead of arrays in Polymer 1.0?
  6. How to inject HTML into a template with polymer
  7. Registering a custom element from a chrome extension
  8. How to read text that is under #shadow-root (user-agent)
  9. What is the difference between Polymer elements and AngularJS directives?
  10. Polymer 1.0 Global Variables
  11. Polymer share styles across elements
  12. Where should I place my Vaadin 10+ static files?

Leave a Comment