Crate respo

source ·
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


module to provide popup dialogs.
Some pre-defined styles for layout fonts, and form elements. Highly coupled with styles from .


a macro for creating a function with a named node
wraps on top of web_sys::console.log_1, use it like:
exteand to code that interacts with memo cache, that order of args:
macro to create a public function of CSS rules with a slice at current file scope,
macro to create a public function of CSS rules(up to 5 tuples) at current file scope,


dispatch function passed from root of renderer, call it like
local state in component could be None according to the tree structure
effects that attached to components
(internal) abstraction on effect argument
marks on virtual DOM to declare that there’s an event event handler is HIDDEN from this mark.
(internal) function to handle event marks at first phase of event handling
a key for referencing a child node, use a value that can be converted to string
(internal) struct to store event handler function on the tree
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
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.


used in list diffing, this is still part of DomChange
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.
coordinate system on RespoNode, to lookup among elements and components
event wraps on top of DOM events
an Element or a Component


it has special support for states
A template for a Respo app
it has a states tree inside, and it does update itself


creates a DOM tree from virtual DOM with proxied event handler attached
turns src/a/ into a_b, used inside macro
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,
internal function for handling memo1_call_by
render elements
special function to return <div/> with width/height that can be used as a space

Type Definitions

dictionary of memoized functions