A set of utilities for building UIs with React
Demo
v1.2.0
npm i 0ui
See an example of how everything is used together in example/src/index.js
UMD build
< script src = " https://unpkg.com/0ui/dist/0ui.umd.js " > < / script >
core lib
lib/core.js
Random utilities
Stupid pattern matching
More like a shorthand for switch/case
import { match } from " 0ui/lib/core " ;
match ( " loading " ) ( {
loading : ( ) => console . log ( " Loading " ) ,
error : ( ) => console . log ( " Error " )
} ) ;
imtbl
Immutable style data manipulation for plain JavaScript objects, see imtbl lib.
State
lib/state.js
State object
Independent state object
import State from " 0ui/lib/state " ;
const state = State . create ( 0 ) ;
state . addWatch ( " key " , ( key , state , prevVal , nextVal ) => {
console . log ( prevVal , nextVal ) ;
} ) ;
state . swap ( val => val + 1 ) ;
Derived state
lib/derived-state.js
Derives state -> state' with a function and propagates updates from state -> state'
import State from " 0ui/lib/state " ;
import DerivedState from " 0ui/lib/derived-state " ;
const bucket = State . create ( {
items : [
{
price : 104 . 5
} ,
{
price : 78 . 2
}
]
} ) ;
const bucketPrice = DerivedState . create ( bucket , ( { items } ) =>
items . reduce ( ( sum , { price } ) => sum + price , 0 )
) ;
bucketPrice . state ;
bucket . swap ( removeFirstItem ) ;
bucketPrice . state ;
Multimethod
lib/multimethod.js
Multiple dispatch or multimethods is a feature of some programming languages in which a function or method can be dynamically dispatched based on the run-time (dynamic) type or, in the more general case some other attribute, of more than one of its arguments. Wikipedia
import MultiMethod from " 0ui/lib/multimethod " ;
const toJSON = MultiMethod . create ( v => {
if ( Array . isArray ( v ) ) {
return " array " ;
} else {
return typeof v ;
}
} ) ;
toJSON . addMethod ( " string " , v => JSON . stringify ( v ) ) ;
toJSON . addMethod ( " number " , v => v . toString ( ) ) ;
toJSON . addMethod ( " array " , arr => {
const jsonArr = arr . map ( v => toJSON . dispatch ( v ) ) . join ( " , " ) ;
return ` [ ${ jsonArr } ] ` ;
} ) ;
toJSON . addMethod ( " object " , o => {
const jsonObj = Object . entries ( o )
. map ( ( [ k , v ] ) => toJSON . dispatch ( k ) + " : " + toJSON . dispatch ( v ) )
. join ( " , " ) ;
return ` { ${ jsonObj } } ` ;
} ) ;
toJSON . dispatch ( {
items : [ 1 , " two " ]
} ) ;
UI
lib/ui.js
React Component API wrapper. Subscribes to multiple State objects.
import { createComponent } from " 0ui/lib/ui " ;
import State from " 0ui/lib/state " ;
const Counter = createComponent ( {
states : {
count : State . create ( 0 )
} ,
render ( states , props ) {
const { count } = states ;
return (
< div >
< button onClick = { ( ) => count . swap ( v => v - 1 ) } > - < / button >
< span > { count . state } < / span >
< button onClick = { ( ) => count . swap ( v => v + 1 ) } > + < / button >
< / div >
) ;
}
} ) ;