Crate respo

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
• CssBackgroundSize
• CssBorderStyle
• CssBoxSizing
• CssColor
• CssDisplay
• CssFlexAlignItems
• CssFlexDirection
• CssFlexJustifyContent
• CssFlexWrap
• CssFontStyle
• CssFontWeight
• CssLineHeight
• CssOverflow
• CssPosition
• CssSize
• CssTextAlign
• CssTextDecoration
• CssTextOverflow
• CssTimingFunction
• CssTransform
• CssVerticalAlign
• 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.
• 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
  <button/>
• changes_to_cirru
• code
  <code/>
• css_name_from_path
  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
  <div/>
• footer
  <footer/>
• h1
  <h1/>
• h2
  <h2/>
• h3
  <h3/>
• h4
  <h4/>
• header
  <header/>
• img
  <img/>
• input
  <input/>
• internal_memof1_call_by
  internal function for handling memo1_call_by
• label
  <label/>
• li
  <li/>
• link
  <link/>
• pre
  <pre/>
• render_node
  render elements
• section
  <section/>
• space
  special function to return <div/> with width/height that can be used as a space
• span
  <span/>
• textarea
  <input/>
• ul
  <ul/>
• video
  <video/>

Type Aliases

• MemoCache
  dictionary of memoized functions