lfmk v1.0.0-alpha-vd.3
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 lfmkor
npm i lfmkBasic Usage
Browser
<!DOCTYPE html>
<html lang="en">
<head>
<title>Say Hello</title>
</head>
<body>
<script src="https://unpkg.com/lfmk@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 'lfmk'
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 'lfmk'
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[]):HTMLElementInterfaces
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) => voidonupdate Triggers when observable or observableKeyedArray update it's value
onupdate: (e: CustomEvent) => voidonbeforeremove Triggers when observable or observableKeyedArray will be removed
onbeforeremove: (e: CustomEvent) => voidobservable
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():anysubscribe get notified when observable object changes
msg.subscribe(callback: (newValue:any) => void) // will fire the callback once observable value has changesetValue set new value observable object
msg.setValue(newValue:any) // subscribe function will be calledobservableKeyedArray
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'|'replace') => 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():numbergetValue Return whole array observable object
todos.getValue():any[]remove Remove item by key from observable array
todos.remove(key:string|number)5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago