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§
- Some pre-defined styles for layout fonts, and form elements. Highly coupled with styles from http://ui.respo-mvc.org/ .
Macros§
- a macro for creating a function with a named node
- wraps on top of
web_sys::console.log_1, use it like: - 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,
Structs§
- dispatch function passed from root of renderer, call it like
dispatch.run(op) - internal abstraction for a component
- in Respo, effect are link element, they are diffed and then applied. Not composable as in React.
- (internal) abstraction on effect argument
- internal abstraction for an element
- 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
Enums§
- 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
Elementor aComponent
Traits§
- it has special support for states
- A template for a Respo app
- it has a states tree inside, and it does update itself
Functions§
<a/><blockquote/>- creates a DOM tree from virtual DOM with proxied event handler attached
<button/><code/>- turns
src/a/b.rsintoa_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, <div/><footer/><h1/><h2/><h3/><h4/><header/><img/><input/><label/><li/><link/><pre/>- render elements
<section/>- special function to return
<div/>with width/height that can be used as a space <span/><input/><ul/><video/>