lighty

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 - .

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.

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.

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 - .

OnStartFn ⇒ any

Callback which will be called on engine start.

Kind: global typedef
Returns: any - .

License

Released under the MIT license.

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

0.8.0 (20 December 2016)

• Add TypeScript annotations
• Add FlowType annotations
• Remove source maps for ES, CommonJS, and not minified UMD
• Use named exports (module.exports = now instead of module.exports['default'] =)
• Recommend use createEngine name instead of create

0.7.0 (19 December 2016)

• Not existing version. It has been created by mistake early then 0.6.0 by mistake, and unpublished. NPM policy doesn't let publish this version anymore.

0.6.0 (19 December 2016)

• Fully incompatible version
• Change library concept from framework to framework engine

0.5.0 (17 November 2016)

• Rewrite build script. Use named modules in UMD build
• Add API documentation based on JSDoc
• Use element instead node for naming inside library
• Application.component not return this anymore
• querySelector uses Element instead HTMLElement as base class for checks
• querySelector returns empty array when type of tree is incorrect
• querySelector filter tree for Element instances if tree is NodeList or Array
• Rename create to createApplication
• Rename plugin to createPlugin

0.4.2 (11 November 2016)

• Add workaround for document.readyState bug in IE

0.4.1 (10 November 2016)

• Export querySelector

0.4.0 (10 November 2016)

• Remove default application
• Remove application names
• Remove application instances cache
• Remove Application.use
• Remove Application.run
• Add options for application creating
• Add custom querySelector option
• Application automatically started after creating

0.3.0 (14 October 2016)

• Throw error when use method called after run
• Add Microsoft Edge 14 to CI
• Fix specs

0.2.3 (14 October 2016)

• Remove for loops, use forEach/map instead
• Remove np from development dependencies
• Remove sinon from development dependencies
• Refactor specs

0.2.2 (1 October 2016)

• Add test coverage for library source code

0.2.1 (1 October 2016)

• Add compiled files to release process

0.2.0 (1 October 2016)

• Add creating few named application instances
• Add prebuilded files to Git
• Refactor npm scripts

0.1.0 (25 August 2016)

• Initial release