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.
- 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 http://ui.respo-mvc.org/ .
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
Noneaccording 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
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
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
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
special function to return
<div/>with width/height that can be used as a space
dictionary of memoized functions