lighty

lighty

:spaghetti:  +  :zap:  =  :rocket:

Converts spaghetti to code.
The 2kb engine for your handy microframework.

_{Built with ❤︎ by demiazz. Sponsored by Evil Martians.}

Installation

npm

You can install lighty from npm.

$ npm install --save lighty

And use it as CommonJS module:

const createEngine = require('lighty');

Or as ES module:

import createEngine from 'lighty';

Browser

Additionally, we provide full and minified UMD versions. Bundles included to npm package, or you can download them from unpkg.io. After just include them to your HTML:

<script src="lighty.min.js"></script>

Example

Let's write simple application:

<div class="awesome-component">
  Not awesome yet.
</div>

import createEngine from 'lighty';

const engine = createEngine((element, fn) => fn(element));

engine.component('.awesome-component', element => {
  element.innerText = "It's awesome now.";
});

console.log(document.querySelector('.awesome-component').innerText);
# => "It's awesome now."

Philosophy

Modern frontend focused on developing RIA-applications. Most popular frameworks and libraries created for this purpose.

There are still content websites at this time. This websites usually use simple unstructured jQuery code which becomes difficult to maintain with the growth of the project.

The primary objective of this project is a providing tool for structuring code using the component model. Also, the objectives are:

• must have a small size, minimal API and no external dependencies;
• support for old browsers and modern trends (such as modules and types);
• users to decide how to implement the components.

Concepts

Engine

Core of any lighty application which launches an application, register and vitalize components.

See also Engine.

Application launch

An application launched when DOM will be ready. Engine checks document.readyState property and uses DOMContentLoaded event for this purpose.

Engine vitalize all registered components on launch. And will vitalize all newly registered components immediately.

Component registration

Component registration is a linking of a valid CSS selector with arguments list. Selector will be used for select elements in DOM. Arguments list will be applied to a builder.

See also component.

Component vitalize

Vitalize is a process from two steps:

• search all elements which matched by the selector;
• call builder for each element with linked arguments.

Only one component's instance will be created for each element at application's lifecycle.

See also vitalize.

Builder

User function which creates component's instance and binds then with DOM element.

See also Builder.

API

Classes

Engine

Application's engine. Controls application's lifecycle, register and vitalize components.

Functions

createEngine(builder, [onStart]) ⇒ Engine

Creates engine's instance with given builder.

Typedefs

CSSSelector : String

A valid CSS selector.

Trees : Element | NodeList | Array.<Element> | CSSSelector

One or many DOM elements for search.

BuilderFn ⇒ any

Creates component's instance with linked arguments for given element.

OnStartFn ⇒ any

Callback which will be called on engine start.

Engine

Application's engine. Controls application's lifecycle, register and vitalize components.

Kind: global class

• Engine
  • .component(selector, ...args) ⇒ undefined
  • .vitalize([trees]) ⇒ undefined

Engine.component(selector, ...args) ⇒ undefined

Register component with given selector and builder's args list.

Vitalize component if an application is already running.

Kind: static method of Engine
Returns: undefined - .

Param	Type	Description
selector	CSSSelector	linked selector.
...args	any	linked builder's arguments list.

Engine.vitalize([trees]) ⇒ undefined

Vitalize all registered components inside given trees.

Recommended use this method inside components. Components always created after application launch, so vitalize don't be called before start.

If you update HTML inside some element, then use them as tree root for performance purposes.

Kind: static method of Engine
Returns: undefined - .
Throws:

• Error when an application is not launched yet.
• TypeError when trees have not acceptable type.

Param	Type	Default	Description
[trees]	Trees	document.body	roots of search trees.

Example

element.innerHTML = `...`;

engine.vitalize(element);

createEngine(builder, [onStart]) ⇒ Engine

Creates engine's instance with given builder.

Kind: global function
Returns: Engine - engine's instance.
Throws:

• TypeError when builder is not a function.

Param	Type	Description
builder	BuilderFn	user defined builder of components.
[onStart]	OnStartFn	callback which will be called on application launch.

CSSSelector : String

A valid CSS selector.

Kind: global typedef

Trees : Element | NodeList | Array.<Element> | CSSSelector

One or many DOM elements for search.

Kind: global typedef

BuilderFn ⇒ any

Creates component's instance with linked arguments for given element.

Kind: global typedef
Returns: any - .

Param	Type	Description
element	Element	an element for which a component's instance will be created.
...args	any	linked arguments list for builder.

OnStartFn ⇒ any

Callback which will be called on engine start.

Kind: global typedef
Returns: any - .

License

Released under the MIT license.

Changelog

0.9.0 (27 April 2017)

• Migrate from Buble to Babel
• Use Flow for type annotations inside source code
• Rewrite build, and change packed package scheme
• Upgrade code quality tools configuration