Lighty NPM | npm.io

Table of Contents

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.

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.