Crate respo

Expand description

A tiny framework around a virtual DOM library, compiles to WebAssembly, runs in the browser, declarative UI for building interactive web apps.

Original design was Respo.cljs, which is heavily influenced by React.js and ClojureScript. And this module is still “experimental” since WebAssembly lacks of hot reloading.

It features:

virtual DOM(however simplified in list diffing)
components declaration with functions
globals states with Store and Actions dispatching
states tree with nested states(inherited from Respo.cljs , might be akward)
CSS in Rust macros
basic component effects of Mounted, WillUpdate, Updated, WillUnmount
macros to memoize component functions(although look clumsy)

Meanwhile it does not include features like:

❌ macros for JSX syntax. Respo prefer types over tags
❌ updating component states in lifecycle. Respo enforces “unidirectional data flow”
❌ React-like hooks. Respo uses plain functions without tricky internal states
❌ Hot reloading. Not working in WebAssembly so far

Modules

dialog

module to provide popup dialogs.

ui

Some pre-defined styles for layout fonts, and form elements. Highly coupled with styles from http://ui.respo-mvc.org/ .

util

Macros

declare_tag

a macro for creating a function with a named node

log

wraps on top of web_sys::console.log_1, use it like:

memo1_call_by

exteand to code that interacts with memo cache, that order of args:

static_style_seq

macro to create a public function of CSS rules with a slice at current file scope,

static_styles

macro to create a public function of CSS rules(up to 5 tuples) at current file scope,

Structs

DispatchFn

dispatch function passed from root of renderer, call it like dispatch.run(op)

MaybeState

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

RespoEffect

effects that attached to components

RespoEffectArg

(internal) abstraction on effect argument

RespoEventMark

marks on virtual DOM to declare that there’s an event event handler is HIDDEN from this mark.

RespoEventMarkFn

(internal) function to handle event marks at first phase of event handling

RespoIndexKey

a key for referencing a child node, use a value that can be converted to string

RespoListenerFn

(internal) struct to store event handler function on the tree

RespoStyle

it provides ADT interfaces as APIs, but internally it’s maintained dynamically. it’s easily diffed in a hashmap. and when it’s sent to JS APIs, it’s still in strings, which is also dynamic. TODO order of rules might matter in edge cases

StatesTree

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.

Enums

ChildDomOp

used in list diffing, this is still part of DomChange

CssFlexJustifyContent

DOM operations used for diff/patching performance is not optimial since looking up the DOM via dom_path has repetitive operations, might need to fix in future is overhead observed.

RespoCoord

coordinate system on RespoNode, to lookup among elements and components

RespoEffectType

RespoEvent

event wraps on top of DOM events

RespoNode

an Element or a Component

Traits

RespoAction

it has special support for states

RespoApp

A template for a Respo app

RespoStore

it has a states tree inside, and it does update itself

Functions

a

<a/>

blockquote

<blockquote/>

build_dom_tree

creates a DOM tree from virtual DOM with proxied event handler attached

<button/>

<code/>

turns src/a/b.rs into a_b, used inside macro

declare_static_style

does internal work inside the macro static_style!(name, &styles). inserts CSS as <style .. /> under <head ... /> element notice that the code only generats once and being cached as DOM states,

<div/>

<footer/>

<h1/>

<h2/>

<h3/>

<h4/>