README
T
ObscureState
- ::backup_model_beforeunloadRespoApp::backup_model_beforeunload
- ::render_loopRespoApp::render_loop
- ::cast_branchRespoStatesTree::cast_branch
- ::local_pairRespoStatesTree::local_pair
- ::pathRespoStatesTree::path
- ::pickRespoStatesTree::pick
- ::set_in_mutRespoStatesTree::set_in_mut
T
RespoUpdateState
V
code_fonts
V
default_fonts
V
fancy_fonts
V
mark_need_rerender
V
memo_once1
V
memo_once2
V
memo_once3
V
memo_once4
V
memo_once5
V
memoize1
V
memoize2
V
memoize3
V
memoize4
V
memoize5
V
normal_fonts
V
preset
V
render_node
V
show_obscure_state
V
try_load_storage
V
ui_button
V
ui_button_danger
V
ui_button_primary
V
ui_center
V
ui_column
V
ui_column_dispersive
V
ui_column_evenly
V
ui_column_parted
V
ui_expand
V
ui_font_code
V
ui_font_fancy
V
ui_font_normal
V
ui_fullscreen
V
ui_global
V
ui_input
V
ui_link
V
ui_row
V
ui_row_center
V
ui_row_dispersive
V
ui_row_evenly
V
ui_row_middle
V
ui_row_parted
V
ui_textarea

respo

A tiny virtual DOM library

virtual-dom

Download zip

Author

tiye

Version

0.1.2

License

Apache-2.0

Repository

github.com/Respo/respo.mbt

Last updated

10 months ago

Downloads

#Respo in MoonBit

A tiny virtual DOM library ported from Respo.rs.

Home https://mbt.respo-mvc.org/
Types https://mooncakes.io/docs/#/tiye/respo/
Demo https://repo.respo-mvc.org/respo.mbt

Core ideas:

Hot reload friendly for better dev experience
Embraces types and autocompletion
States are stored in a single atom, which is a tree structure with a concept like cursor
Uni-directional data flow, dispatching is only allowed when user events occur
Effects are for DOM updates, rather than dispatching actions

This project is in beta stage. APIs and structure are relatively stable.

Areas that need further exploration:

Working with MoonBit immutable data structures

#Usage

moon add tiye/respo

To use Respo, start with the boilerplate at https://github.com/Respo/respo-moonbit-workflow

#License

Apache-2.0

ObscureState

source

type ObscureState

MoonBit does not allow trait object with Selfs, use ffi js value to bypass.

RespoApp

source

pub(all) struct RespoApp[Model] {
  store : Ref[Model]
  storage_key : String
  mount_target : @tiye/dom-ffi.Node
Node
}

get basic App structure

RespoApp::backup_model_beforeunload

source

fn[Model : ToJson] RespoApp::backup_model_beforeunload(self : RespoApp[Model]) -> Unit

backup store to local storage before unload

RespoApp::render_loop

source

fn[Model, ActionOp] RespoApp::render_loop(self : RespoApp[Model], renderer : () -> @tiye/respo/node.RespoNode
RespoNode[ActionOp] raise @tiye/respo/node.RespoCommonError
RespoCommonError, dispatch_action : (ActionOp) -> Unit raise @tiye/respo/node.RespoCommonError
RespoCommonError) -> Unit

RespoStatesTree

source

pub(all) struct RespoStatesTree {
  backup : Json?
  cursor : Array[String]
  branches : Map[String, RespoStatesTree]
  // private fields
}

Respo maintains states in a tree structure, where the keys are strings, each child component "picks" a key to attach its own state to the tree, and it dispatches events to global store to update the state.

impl Default for RespoStatesTree

impl Eq for RespoStatesTree

impl ToJson for RespoStatesTree

impl FromJson for RespoStatesTree

RespoStatesTree::cast_branch

source

fn[T : Default + @moonbitlang/core/json.FromJson
FromJson + ToJson] RespoStatesTree::cast_branch(self : RespoStatesTree) -> T

RespoStatesTree::local_pair

source

fn[T : Default + @moonbitlang/core/json.FromJson
FromJson + ToJson] RespoStatesTree::local_pair(self : RespoStatesTree) -> (T, @tiye/respo/node.RespoCursor
RespoCursor[T])

local state in component could be None according to the tree structure

let (state, cursor): (LocalState, _) = states.local_pair();

RespoStatesTree::path

source

fn[T] RespoStatesTree::path(self : RespoStatesTree) -> @tiye/respo/node.RespoCursor
RespoCursor[T]

RespoStatesTree::pick

source

fn RespoStatesTree::pick(self : RespoStatesTree, name : String) -> RespoStatesTree

RespoStatesTree::set_in_mut

source

fn RespoStatesTree::set_in_mut(self : RespoStatesTree, change : RespoUpdateState) -> Unit

TODO prefer immutable update in future

RespoUpdateState

source

pub(all) struct RespoUpdateState {
  cursor : Array[String]
  data : ObscureState?
  backup : Json?
}

framework defined action for updating states branch

impl Eq for RespoUpdateState

impl ToJson for RespoUpdateState

code_fonts

source

let code_fonts : String

default_fonts

source

let default_fonts : String

fancy_fonts

source

let fancy_fonts : String

mark_need_rerender

source

fn mark_need_rerender() -> Unit

memo_once1

source

fn[K : Eq, V] memo_once1(f : (K) -> V) -> ((K) -> V)

Memoize a function with a single cache slot, taking one argument.

memo_once2

source

fn[K1 : Eq, K2 : Eq, V] memo_once2(f : (K1, K2) -> V) -> ((K1, K2) -> V)

Memoize a function with a single cache slot, taking two arguments.

memo_once3

source

fn[K1 : Eq, K2 : Eq, K3 : Eq, V] memo_once3(f : (K1, K2, K3) -> V) -> ((K1, K2, K3) -> V)

Memoize a function with a single cache slot, taking three arguments.

memo_once4

source

fn[K1 : Eq, K2 : Eq, K3 : Eq, K4 : Eq, V] memo_once4(f : (K1, K2, K3, K4) -> V) -> ((K1, K2, K3, K4) -> V)

Memoize a function with a single cache slot, taking four arguments.

memo_once5

source

fn[K1 : Eq, K2 : Eq, K3 : Eq, K4 : Eq, K5 : Eq, V] memo_once5(f : (K1, K2, K3, K4, K5) -> V) -> ((K1, K2, K3, K4, K5) -> V)

Memoize a function with a single cache slot, taking five arguments.

memoize1

source

fn[K : Hash + Eq, V] memoize1(f : (K) -> V) -> ((K) -> V)

memoize2

source

fn[K1 : Hash + Eq, K2 : Hash + Eq, V] memoize2(f : (K1, K2) -> V) -> ((K1, K2) -> V)

memoize3

source

fn[K1 : Hash + Eq, K2 : Hash + Eq, K3 : Hash + Eq, V] memoize3(f : (K1, K2, K3) -> V) -> ((K1, K2, K3) -> V)

memoize4

source

fn[K1 : Hash + Eq, K2 : Hash + Eq, K3 : Hash + Eq, K4 : Hash + Eq, V] memoize4(f : (K1, K2, K3, K4) -> V) -> ((K1, K2, K3, K4) -> V)

memoize5

source

fn[K1 : Hash + Eq, K2 : Hash + Eq, K3 : Hash + Eq, K4 : Hash + Eq, K5 : Hash + Eq, V] memoize5(f : (K1, K2, K3, K4, K5) -> V) -> ((K1, K2, K3, K4, K5) -> V)

normal_fonts

source

let normal_fonts : String

preset

source

let preset : String

common CSS resets for Respo pages

render_node

source

fn[T, U] render_node(mount_target : @tiye/dom-ffi.Node
Node, store : Ref[U], renderer : () -> @tiye/respo/node.RespoNode
RespoNode[T] raise @tiye/respo/node.RespoCommonError
RespoCommonError, dispatch_action : (T) -> Unit raise @tiye/respo/node.RespoCommonError
RespoCommonError, _interval : Float?) -> Unit raise @tiye/respo/node.RespoCommonError
RespoCommonError

render elements

show_obscure_state

source

fn show_obscure_state(msg : String, v : ObscureState) -> Unit

try_load_storage

source

fn[Model : @moonbitlang/core/json.FromJson
FromJson + Default] try_load_storage(key : String) -> Model

ui_button

source

let ui_button : String

ui_button_danger

source

let ui_button_danger : String

ui_button_primary

source

let ui_button_primary : String

ui_center

source

let ui_center : String

layout items in column and center them with flexbox demos https://ui.respo-mvc.org/#/layouts.html

ui_column

source

let ui_column : String

layout items in column and center them with flexbox demos https://ui.respo-mvc.org/#/layouts.html

ui_column_dispersive

source

let ui_column_dispersive : String

layout items in column with flexbox, space around demos https://ui.respo-mvc.org/#/layouts.html

ui_column_evenly

source

let ui_column_evenly : String

layout items in column with flexbox, space evenly demos https://ui.respo-mvc.org/#/layouts.html

ui_column_parted

source

let ui_column_parted : String

layout items in column with flexbox, space between demos https://ui.respo-mvc.org/#/layouts.html

ui_expand

source

let ui_expand : String

expand item with flex:1

ui_font_code

source

let ui_font_code : String

monospace font for code, Source Code Pro, Menlo, Ubuntu Mono, Consolas

ui_font_fancy

source

let ui_font_fancy : String

fancy font for title, Josefin Sans, Helvetica neue, Arial refers to https://fonts.google.com/specimen/Josefin+Sans or https://cdn.tiye.me/favored-fonts/main-fonts.css

ui_font_normal

source

let ui_font_normal : String

normal font for text, Hind, Helvatica, Arial refers to https://fonts.google.com/specimen/Hind or https://cdn.tiye.me/favored-fonts/main-fonts.css

ui_fullscreen

source

let ui_fullscreen : String

full page with absolute position

ui_global

source

let ui_global : String

ui_input

source

let ui_input : String

ui_link

source

let ui_link : String

ui_row

source

let ui_row : String

layout items in row with flexbox, items are stretched demos https://ui.respo-mvc.org/#/layouts.html

ui_row_center

source

let ui_row_center : String

layout items in row with flexbox, center them demos https://ui.respo-mvc.org/#/layouts.html

ui_row_dispersive

source

let ui_row_dispersive : String

layout items in row with flexbox, space around demos https://ui.respo-mvc.org/#/layouts.html

ui_row_evenly

source

let ui_row_evenly : String

layout items in row with flexbox, space evenly demos https://ui.respo-mvc.org/#/layouts.html

ui_row_middle

source

let ui_row_middle : String

layout items in row with flexbox, space between demos https://ui.respo-mvc.org/#/layouts.html

ui_row_parted

source

let ui_row_parted : String

layout items in row with flexbox, space between demos https://ui.respo-mvc.org/#/layouts.html

ui_textarea

source

let ui_textarea : String

Source Files

Site source Report issue Packages Build queue Skills Statistics

respo

#Respo in MoonBit

#Usage

#License

#ObscureState

#RespoApp

#RespoApp::backup_model_beforeunload

#RespoApp::render_loop

#RespoStatesTree

#RespoStatesTree::cast_branch

#RespoStatesTree::local_pair

#RespoStatesTree::path

#RespoStatesTree::pick

#RespoStatesTree::set_in_mut

#RespoUpdateState

#code_fonts

#default_fonts

#fancy_fonts

#mark_need_rerender

#memo_once1

#memo_once2

#memo_once3

#memo_once4

#memo_once5

#memoize1

#memoize2

#memoize3

#memoize4

#memoize5

#normal_fonts

#preset

#render_node

#show_obscure_state

#try_load_storage

#ui_button

#ui_button_danger

#ui_button_primary

#ui_center

#ui_column

#ui_column_dispersive

#ui_column_evenly

#ui_column_parted

#ui_expand

#ui_font_code

#ui_font_fancy

#ui_font_normal

#ui_fullscreen

#ui_global

#ui_input

#ui_link

#ui_row

#ui_row_center

#ui_row_dispersive

#ui_row_evenly

#ui_row_middle

#ui_row_parted

#ui_textarea

Source Files

ObscureState

RespoApp

RespoApp::backup_model_beforeunload

RespoApp::render_loop

RespoStatesTree

RespoStatesTree::cast_branch

RespoStatesTree::local_pair

RespoStatesTree::path

RespoStatesTree::pick

RespoStatesTree::set_in_mut

RespoUpdateState

code_fonts

default_fonts

fancy_fonts

mark_need_rerender

memo_once1

memo_once2

memo_once3

memo_once4

memo_once5

memoize1

memoize2

memoize3

memoize4

memoize5

normal_fonts

preset

render_node

show_obscure_state

try_load_storage

ui_button

ui_button_danger

ui_button_primary

ui_center

ui_column

ui_column_dispersive

ui_column_evenly

ui_column_parted

ui_expand

ui_font_code

ui_font_fancy

ui_font_normal

ui_fullscreen

ui_global

ui_input

ui_link

ui_row

ui_row_center

ui_row_dispersive

ui_row_evenly

ui_row_middle

ui_row_parted

ui_textarea