@lluz55/lightframework
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

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

Instalation

yarn add @lluz55/lightframework

or

npm i @lluz55/lightframework

Basic Usage

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

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

  function SayHello(){
    msg.setValue('world');
  }

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

document.body.appendChild(App())
JSX + ES6 - using babel plugin with pragma: lf
import { lf, observable } from '@lluz55/lightframework'

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

document.body.appendChild(App())

Examples

TodoApp - by LLuz
jsfiddle - by LLuz

API

lf

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

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

IAttrs Handle all possible attributes, including custom ones

interface IAttrs extends ILifeCycle {
  [key:string]:any
}

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

observable

Return an object that can be used to mutate the dom

var msg = observable(item:any)
Methods

getValue get current value from observable object

msg.getValue():any

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

observableKeyedArray

Return an object that contains an observable array

var todos = observableKeyedArray(array:any)
Methods

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

todos.getLength():number

getValue Return whole array observable object

todos.getValue():any[]

remove Remove item by key from observable array

todos.remove(key:string|number)

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)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dev Dependencies (138)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |