LEO

LEO is a lightweight JS library that helps you build modern front-end applications.

LEO Provides 3 simple tools (List, Element, Object) to help you build and grow you JS application without defining any specific architecture for you.

• List: A list (Array) of Objects
• Element: A web-components based solution with reactive bindings.
• Object: A object with key-value bindings and customs events.

About

As an intent of reunite the best in class JS paradigms that are spread over the different ways of building modern javascript applications, LEO extracts different patterns from different frameworks and puts them together for you:

• From Backbone: LEO uses the same idea behind Backbone models (Object) and collections (Lists) with a simpler interface that doesn't need any .get or .set methods.
• From React: LEO Element class provides a render method that is called whenever the element data or attrs properties are changed.
• From Web-Components: Style and behaviour encapsulation. Any LEO Element can be registered as a web-component with it's custom tag name.

LEO doesn't provides any architecture or specific design decisions for you and it's built entirely with the new ES6 features

Install

npm install --save @basiclines/leo

Webpack and Babel configuration

Use the sample configuration from /examples, you will find:

• package.json
• .babelrc
• webpack.config.js

Object usage

import {LEOObject} from 'leo'
class Star extends LEOObject {}

let bowie = new Star({ name: 'David' })
bowie.on('change:name', (name) => { console.log(name) })

bowie.name = 'Ziggy'

Element usage

import {LEOElement} from 'leo'

class StarElement extends LEOElement {
  render() {
    this.innerHTML = this.attrs.title
  }
}

customElements.define('star-element', StarElement)

<star-element title="David Bowie"></star-element>

List usage

import {LEOList} from 'leo'

let Constellation = new LEOList([
    { name: 'Polaris', declination: 'N 89°' },
    { name: 'Kochab', declination: 'N 74°' }
])

Constellation.on('add', (obj) => {
    console.log('Added obj', obj)
})

Constellation.on('change', (obj) => {
    console.log('changed obj', obj)
})

Constellation.push({ name: 'Schedar', declination: 'N 56°' })
Constellation.push({ name: 'Alkaid', declination: 'N 49°' })

Constellation.map(item => { item.name = `Star ${item.name}` })

Examples

Inside /examples you can find common code examples.

API

LEOObject

A object with key-value bindings and customs events.

| Method/Property | Params | Description | | :----------- | :----------- | :------------ | | .on() | event <string>, handler <function> | Binds a handler function to the Object for an specific event. | | .off() | event <string>, handler <function> | Unbinds the handler function from the Object for an specific event. | | .trigger() | event <string>, value <any> | Triggers an event with a custom value. | | .listenTo() | entity <object>, event <string>, handler <function> | Binds an Object to listen for events from another Object. | | .stopListening() | entity <object>, event <string>, handler <function> | Unbinds an Object from listening to events from another Object. | | .clear() | | Removes all enumerable properties from the Object and it's references from .attributes | | .clone() | | Returns a copy of the Object with all their properties. Listeners are not copied. | | .has() | property <string> | Checks whenever an Object has an specific property | | .isEmpty | | Checks whenever an Object has enumberable properties |

LEOElement

A web-components based solution with reactive bindings.

| Method/Property | Params | Description | | :----------- | :----------- | :------------ | | .attrs | | Map of live attributes of the element | | .data | | A handy place to put any data structure needed for rendering | | .beforeMount() | | Fired when the element is about to be added in to the DOM. Triggered before the 1st render. | | .mount() | | Fired when the element is added in to the DOM | | .dismount() | | Fired when the element is removed from the DOM | | .shouldRender() | property <string>, value <any> | Override this method to prevent unwanted renders | | .renderStrategy() | content <string> | The render strategy, you can override it with yout own function. | | .render() | | Fired when any of .data or .attrs properties are modified. | | .find() | | Shorcut for querySelector | | .findAll() | | Shorcut for querySelectorAll | | .bind() | | Fired before mount() to allow proper event binding |

LEOList (extends LEOObject)

A list (Array) of objects that inherits all event based behaviour from LEOObject.

| Method/Property | Params | Description | | :----------- | :----------- | :------------ | | .map() | callback <function> | Shortcut for Array.map | | .forEach() | callback <function> | Shortcut for Array.forEach | | .reduce() | callback <function>, initalValue <any> | Shortcut for Array.reduce | | .find() | callback <function> | Shortcut for Array.find | | .filter() | callback <function> | Shortcut for Array.filter | | .every() | callback <function> | Shortcut for Array.every | | .pluck() | attribute <string> | Plucks an attribute from each object in the list | | .toJSON() | | Returns an array containing the enumerable properties of each object | | .unshift() | objects <array> | Shortcut for Array.unshift | | .push() | objects <array> | Shortcut for Array.push | | .isEmpty | | Checks the collection lenght to know if it's empty | | .length | | Shorcut for Array.length |

Disclaimer

LEOJS project is still under development and it's not recommended for production use.

License

MIT