lean.js (0.3.0)
A micro-library (2kb) to lazy load and import Web Components.
Features
- Synchronous module injection
- HTML Support
Usage
npm install lean-js
Functions
- inject(file) ⇒
string
- require(file) ⇒
DOMElement
string
**Kind**: global function
**Returns**: string
- - returns name of html file as a document create consumable name.
Param | Type | Description |
---|---|---|
file | string |
a http file path. |
Example
// injects file if needed and returns DOMNode <todo-widget></todo-widget> var name = lean; var todoWidget = document; var anotherWayTodoWidget = document;
DOMElement
require(file) ⇒ Kind: global function
Returns: DOMElement
- - HTML Imports return a createdDOM Element the import. This will execute the 'createdCallback' or 'created' function in the Web Component.
Param | Type | Description |
---|---|---|
file | string |
a http file path. |
Example
// injects file and returns DOMNode <todo-widget></todo-widget> var todoWidget = lean;// won't inject file since injected above, and just create new element and require var todoWidgetAgain = lean;
Requirements
- This module will only test evergreen browsers (latest versions).
- This project does not require
Polymer
, but does require Web Components to be enabled. Seewebcomponents-js
for a shim. - Dynamic names not support yet.
Possible Use Cases
Lazy Loading for:
- Conditional builds: inject files based on any conditions, whether browser type or user event.
- Large Scale Ecosystem apps: Lazy load modules like widgets as you need them.
Design Goals
Primary Goals
- Extremely Simple API
- Keep it small.
- Keep it fast.
- Properly tested.
Design decisions to achieve goals
- Use simple injection techniques. (Simple script loads) [2] [3]
- Allow instant usage of web component if desired. [2] [1]
- Support only evergreen browsers [2] [3]
Roadmap
1.0.0 [production release]
- Write tests
- Hook into OSS devops services
1.1.0
- Emit events on module loads for loading screen integration.
Backlog
- Async stream loading