lighty

🍝  +  :zap:  =  :rocket:

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

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

---

Table of Contents

• Installation
  • npm
  • Browser
• Usage
• Philosophy
• Concepts
  • Engine
  • Application launch
  • Component registration
  • Component vitalize
  • Builder
• API
• License

Installation

npm

You can install lighty from npm.

$ npm install --save lighty

And use it as CommonJS module:

const createApplication = require('lighty');

Or as ES module:

import createApplicaion from 'lighty';

Package provides CommonJS and ES6 module styles through main and module fields in package.json. It useful if your build system supports this (for example Webpack 3 and Rollup successfully support both fields).

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>

Usage

Let's write simple application:

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

Import lighty first:

import createApplication from 'lighty';

Then create simple component factory:

function factory(element, component) {
  constructor(element);
}

And create application instance:

const application = createApplication(factory);

Ok. Let's create our first component:

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

And check result:

console.log(document.querySelector('.awesome-component').innerText);

We should see next output:

It's awesome now.

Yeah! Now you can use component oriented structure in your project.

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

Builder

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

See also BuilderFn.

API

License

Released under the MIT license.