lean-web-components v0.3.0

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

Example

// injects file if needed and returns DOMNode  <todo-widget></todo-widget>
 var name = lean.inject('./widgets/todo-widget.html');
 var todoWidget = document.createElement(name);
 var anotherWayTodoWidget = document.createElement('todo-widget');

require(file) ⇒ DOMElement

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.

Example

// injects file and returns DOMNode  <todo-widget></todo-widget>
 var todoWidget = lean.require('./widgets/todo-widget.html');
// won't inject file since injected above, and just create new element and require
 var todoWidgetAgain = lean.require('./widgets/todo-widget.html');

Requirements

• This module will only test evergreen browsers (latest versions).
• This project does not require Polymer, but does require Web Components to be enabled. See webcomponents-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

1. Extremely Simple API
2. Keep it small.
3. Keep it fast.
4. Properly tested.

Design decisions to achieve goals

• Use simple injection techniques. (Simple script loads) 2
• Allow instant usage of web component if desired. 2
• Support only evergreen browsers 2

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