<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
;// Your awesome component logic......static {return `<lib-loaderlib="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: Booleanvalue: 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