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_inRespoStatesTree::set_in
T
RespoUpdateState
- ::borrowStateRef::borrow
- ::getStateRef::get
- ::newStateRef::new
- ::setStateRef::set
- ::updateStateRef::update
V
code_fonts
V
collect_global_handlers
V
debug_event
V
debug_log
V
debug_render
V
debug_state_change
V
debug_store_update
V
default_fonts
V
dispatch_global_event
V
fancy_fonts
V
is_debug_mode
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
set_debug_mode
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.3.2

License

Apache-2.0

Repository

github.com/Respo/respo.mbt

Last updated

5 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:

Immutable data by design - Store and component states must be immutable. Updates create new values using record update syntax ({ ..old, field: new_value }). Use Ref[T] for mutable references at the application level
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
Physical equality optimization - Since data is immutable, unchanged references are skipped during re-rendering

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

#Immutable Data Requirements

Respo requires all state to be immutable:

// Store must be immutable - no `mut` fields
struct Store {
  counted : Int
  tasks : @immut/array.T[Task]  // Use immutable collections
  states : RespoStatesTree
}

// Update returns a new Store, never mutates in place
fn Store::update(self : Store, op : ActionOp) -> Store {
  match op {
    Increment => { ..self, counted: self.counted + 1 }
    // ...
  }
}

// At top level, wrap in Ref for mutability
let app_store : Ref[Store] = Ref::new(Store::default())
app_store.val = app_store.val.update(action)  // Replace with new value

This design enables:

Efficient change detection via reference equality (physical_equal)
Predictable state management
Safe concurrent access patterns

#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 : @moonbitlang/core/ref.Ref
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 : Eq, ActionOp, G] RespoApp::render_loop(self : RespoApp[Model], renderer : () -> @tiye/respo/node.RespoNode
RespoNode[ActionOp, G] 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 : @moonbitlang/core/immut/array.T
T[String]
  branches : @moonbitlang/core/immut/hashmap.HashMap
HashMap[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.

This is an immutable data structure - all updates return new trees.

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

Cast the data in the branch to the specified type. If data is not present but backup exists, restore from backup.

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 Returns (state, cursor)

let (state, cursor) = 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

Pick a branch from the tree by name, returns a new tree representing that branch.

RespoStatesTree::set_in

source

fn RespoStatesTree::set_in(self : RespoStatesTree, change : RespoUpdateState) -> RespoStatesTree

Immutably update the tree at the specified cursor path. Returns a new tree with the update applied.

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

StateRef

source

pub struct StateRef[T] {
  cell : @moonbitlang/core/ref.Ref
Ref[T]
}

StateRef wraps a mutable Ref while serializing to an empty JSON object. Use it for ephemeral fields that should not affect persisted snapshots.

impl Default for StateRef[T]

impl Eq for StateRef[T]

impl Hash for StateRef[T]

impl Show for StateRef[T]

impl ToJson for StateRef[T]

impl FromJson for StateRef[T]

StateRef::borrow

source

fn[T] StateRef::borrow(self : StateRef[T]) -> @moonbitlang/core/ref.Ref
Ref[T]

Returns the underlying Ref so callers can mutate the payload directly.

StateRef::get

source

fn[T] StateRef::get(self : StateRef[T]) -> T

Get the current value (read-only)

StateRef::new

source

fn[T] StateRef::new(value : T) -> StateRef[T]

StateRef::set

source

fn[T] StateRef::set(self : StateRef[T], value : T) -> Unit

Set a new value

StateRef::update

source

fn[T] StateRef::update(self : StateRef[T], f : (T) -> T) -> Unit

Update the value using a function

code_fonts

source

let code_fonts : String

collect_global_handlers

source

fn[T, G] collect_global_handlers(tree : @tiye/respo/node.RespoNode
RespoNode[T, G], coord : @moonbitlang/core/immut/array.T
T[@tiye/respo/node.RespoCoord
RespoCoord]) -> Array[((G, @tiye/respo/node.DispatchFn
DispatchFn[T]) -> Unit raise @tiye/respo/node.RespoCommonError
RespoCommonError, @moonbitlang/core/immut/array.T
T[@tiye/respo/node.RespoCoord
RespoCoord])]

Collect all global event handlers from the virtual DOM tree Returns an array of handler functions with their coordinates

debug_event

source

fn debug_event(event_type : String, details : String) -> Unit

Log an event (only when debug mode is enabled)

debug_log

source

fn debug_log(message : String) -> Unit

Log a debug message (only when debug mode is enabled)

debug_render

source

fn debug_render(message : String) -> Unit

Log a render cycle (only when debug mode is enabled)

debug_state_change

source

fn[T : Show] debug_state_change(label : String, old_state : T, new_state : T) -> Unit

Log a state change (only when debug mode is enabled)

debug_store_update

source

fn[T : Show] debug_store_update(action : T) -> Unit

Log store update (only when debug mode is enabled)

default_fonts

source

let default_fonts : String

dispatch_global_event

source

fn[T, G] dispatch_global_event(event : G, tree : @tiye/respo/node.RespoNode
RespoNode[T, G], dispatch : @tiye/respo/node.DispatchFn
DispatchFn[T]) -> Unit raise @tiye/respo/node.RespoCommonError
RespoCommonError

Dispatch a global event to all registered handlers in the tree

fancy_fonts

source

let fancy_fonts : String

is_debug_mode

source

fn is_debug_mode() -> Bool

Check if debug mode is enabled

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 : Eq, G] render_node(mount_target : @tiye/dom-ffi.Node
Node, store : @moonbitlang/core/ref.Ref
Ref[U], renderer : () -> @tiye/respo/node.RespoNode
RespoNode[T, G] 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

set_debug_mode

source

fn set_debug_mode(enabled : Bool) -> Unit

Enable or disable debug mode for Respo framework When enabled, logs state changes, events, and render cycles

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

#Immutable Data Requirements

#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

#RespoUpdateState

#StateRef

#StateRef::borrow

#StateRef::get

#StateRef::new

#StateRef::set

#StateRef::update

#code_fonts

#collect_global_handlers

#debug_event

#debug_log

#debug_render

#debug_state_change

#debug_store_update

#default_fonts

#dispatch_global_event

#fancy_fonts

#is_debug_mode

#mark_need_rerender

#memo_once1

#memo_once2

#memo_once3

#memo_once4

#memo_once5

#memoize1

#memoize2

#memoize3

#memoize4

#memoize5

#normal_fonts

#preset

#render_node

#set_debug_mode

#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

RespoUpdateState

StateRef

StateRef::borrow

StateRef::get

StateRef::new

StateRef::set

StateRef::update

code_fonts

collect_global_handlers

debug_event

debug_log

debug_render

debug_state_change

debug_store_update

default_fonts

dispatch_global_event

fancy_fonts

is_debug_mode

mark_need_rerender

memo_once1

memo_once2

memo_once3

memo_once4

memo_once5

memoize1

memoize2

memoize3

memoize4

memoize5

normal_fonts

preset

render_node

set_debug_mode

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