A(nother) javascript framework
Last updated a year ago by lluz55 .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @lluz55/lightframework 
SYNC missed versions from official npm registry.


LightFramework is not a javascript framework per se. It's a collection of tools to help us build html element that can be updated without touching the dom unnecessarily.

LF is based on the virtual dom concept but it differs in many ways. First, it doesn't have diff or any automatic update.
Updates are based on user's events and observable changes. There are two functions to handle dom elements when data change. observable for element or attribute change and observableKeyedArray for building lists and help with keyed elements


yarn add @lluz55/lightframework


npm i @lluz55/lightframework

Basic Usage

<!DOCTYPE html>
<html lang="en">
  <title>Say Hello</title>
  <script src="https://unpkg.com/@lluz55/lightframework@latest"></script>
    var App = function() {
    var msg = lf.observable('me');
    function SayHello(){
    return lf('div', {}, 
      lf('h1', {}, 'Hello ', msg),
      lf('button', {onclick: SayHello}, 'Say to world')
ES5 - using bundler (webpack, rollup, parcel, ...)
import { lf, observable } from '@lluz55/lightframework'

const App = function() {
  var msg = observable('me');

  function SayHello(){

  return lf('div', {}, 
    lf('h1', {}, 'Hello ', msg),
    lf('button', {onclick: SayHello}, 'Say to world')

JSX + ES6 - using babel plugin with pragma: lf
import { lf, observable } from '@lluz55/lightframework'

const App = () => {
    let msg = observable('me')
    const SayHello = () => {
    return (
            <h1> Hello {msg}</h1>
            <button onclick={SayHello}> Say to world </button> 



TodoApp - by LLuz
jsfiddle - by LLuz



Creates a HTML element passing one tag and optional attributes and/or children

lf(tag:string, attrs: IAttrs, ...children:any[]):HTMLElement

IAttrs Handle all possible attributes, including custom ones

interface IAttrs extends ILifeCycle {

ILifeCycle Handle life cycle attributes

interface ILifeCycle {
  oncreate?: (el: HTMLElement) => void
  onupdate?: (e: CustomEvent) => void
  onbeforeupdate?: (e: CustomEvent) => void

OBS: the e customEvent has an object detail with newValue and oldValue

e: CustomEvent<{
    oldVal: any;
    newVal: any;

Life Cycle

oncreate Triggers when any element is created with LF function

oncreate: (e: HTMLElement) => void

onupdate Triggers when observable or observableKeyedArray update it's value

onupdate: (e: CustomEvent) => void

onbeforeremove Triggers when observable or observableKeyedArray will be removed

onbeforeremove: (e: CustomEvent) => void


Return an object that can be used to mutate the dom

var msg = observable(item:any)

getValue get current value from observable object


subscribe get notified when observable object changes

msg.subscribe(callback: (newValue:any) => void) // will fire the callback once observable value has change

setValue set new value observable object

msg.setValue(newValue:any) // subscribe function will be called


Return an object that contains an observable array

var todos = observableKeyedArray(array:any)

subscribe get notified when observable array lose and gain some item

todos.subscribe(callback: (key:string|number, item:any, action: 'push'|'remove') => void)

push Add new item with unique key to observable array

todos.push(key:string|number, item:any)

getLength Return observable array length


getValue Return whole array observable object


remove Remove item by key from observable array


Current Tags

  • 1.0.0-alpha.31                                ...           latest (a year ago)

30 Versions

  • 1.0.0-alpha.31                                ...           a year ago
  • 1.0.0-alpha.30                                ...           a year ago
  • 1.0.0-alpha.29                                ...           a year ago
  • 1.0.0-alpha.28                                ...           a year ago
  • 1.0.0-alpha.27                                ...           a year ago
  • 1.0.0-alpha.26                                ...           a year ago
  • 1.0.0-alpha.25                                ...           a year ago
  • 1.0.0-alpha.24                                ...           a year ago
  • 1.0.0-alpha.23                                ...           a year ago
  • 1.0.0-alpha.22                                ...           a year ago
  • 1.0.0-alpha.21                                ...           a year ago
  • 1.0.0-alpha.20                                ...           a year ago
  • 1.0.0-alpha.19                                ...           a year ago
  • 1.0.0-alpha.18                                ...           a year ago
  • 1.0.0-alpha.17                                ...           a year ago
  • 1.0.0-alpha.16                                ...           a year ago
  • 1.0.0-alpha.15                                ...           a year ago
  • 1.0.0-alpha.14                                ...           a year ago
  • 1.0.0-alpha.13                                ...           a year ago
  • 1.0.0-alpha.12                                ...           a year ago
  • 1.0.0-alpha.11                                ...           a year ago
  • 1.0.0-alpha.10                                ...           a year ago
  • 1.0.0-alpha.9                                ...           a year ago
  • 1.0.0-alpha.8                                ...           a year ago
  • 1.0.0-alpha.7                                ...           a year ago
  • 1.0.0-alpha.6                                ...           a year ago
  • 1.0.0-alpha.5                                ...           a year ago
  • 1.0.0-alpha.3                                ...           a year ago
  • 1.0.0-alpha.2                                ...           a year ago
  • 1.0.0-alpha.1                                ...           a year ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
Dev Dependencies (138)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |