<lib-loader> Polymer Element

Library loader WebComponent for external (or internal) library. Written on top of Polymer 3.0.

Why

A simple component for delegate the task to import an external library. If you need to attach a library to the window object from within a module-component.

NOTE:

I'm using a modified version of @polymer/polymer which I forked, removing the flat (useless and problematic) property for yarn.

Install

$ yarn add polymer-lib-loader

Usage

You may want to load it using Webpack.

awesome-component.js

import 'polymer-lib-loader';
 
// Your awesome component logic...
 
...
 
static get template() {
  return `
  <lib-loader
    lib="https://cdnjs.cloudflare.com/ajax/libs/[lib]/[version]/[lib].js"
    lib-unique-id="uniqueIdHere"
    on-lib-loaded="yourCallbackOnLoad"></lib-loader>
  `
}
 
...

The demo uses a bundled element. You can check the webpack.config.js for more details.

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

$ yarn

Compile and start a web server (http://localhost:8080/polymer-lib-loader/demo)

$ yarn start

Build: only the Webpack action simply run

$ yarn build

Test

XO for coding style and WCT for unit test:

$ yarn test

License

MIT © LasaleFamine