Skip to content

Polymer (ES6) external (or internal) library loader component

License

Notifications You must be signed in to change notification settings

LasaleFamine/polymer-lib-loader

Repository files navigation

<lib-loader> Polymer (ES6)

Build status Bower version JavaScript Style Guide Dependency Status

Library loader WebComponent for external (or internal) library. Written in Polymer 1.0 in ES6 syntax.

Why

A simple component for delegate the task to import an external library.
If you need to wrap a functionality of a library and load it only inside a component.
Example:

<link rel="import" href="[your_bower_folder]/polymer-lib-loader/lib-loader.html">

<lib-loader
lib="https://cdnjs.cloudflare.com/ajax/libs/[lib]/[version]/[lib].js"
lib-unique-id="uniqueIdHere"
 on-lib-loaded="yourCallbackOnLoad"></lib-loader>

[...]

yourCallbackOnLoad: function () {
  console.log('loaded')
  yourLib.doingSomenthing('yo')
},

[...]

See the demo folder for more details.

Install

$ bower install polymer-lib-loader

Default Properties

{
  /** Instance link **/
  lib: {
    type: String
  },
  /** <script id=""> */
  libUniqueId: {
    type: String
  },
  /** True when the lib is ready */
  libReady: {
    type: Boolean,
    value: false
  }
}

Note on library load

The ability of the component to load the library and not reload it again and again is related to the libUniqueId.
The <script id="yourId" src="yourLibLink"> will be attached as a child of the body and removed when the component is detached (or when a wrapper of it is detached).

API

.removeLib()

Remove the library from the page


Events

on-lib-loaded

When the initialization of the library is complete

Develop

Clone the repository inside a folder (ex: sandbox-polymer-lib-loader/polymer-lib-loader) and inside the polymer-lib-loader folder:

$ npm install && bower install

Developing mode: watch on base files and Babel that transpiles (http://localhost:8080/polymer-lib-loader/demo)

$ npm start

Build: only the Babel action simply run

$ npm run build

Test

Standard for coding style and WCT for unit test:

$ npm test

License

MIT © LasaleFamine