Create elements in Clojure syntax:
(div {:class-name "demo"
:style {:color :red
:font-size 16
:font-family "Josefin Sans"}
:on-click (fn [event dispatch! mutate!])})
(div {}
(span {})
(div {}))
(div {}
(<> "text")
(<> "text with style" {:color :red}))
Create Components
To define components, use defcomp
, which is a Macro:
(defcomp comp-demo [p1 p2]
(div {}
(<> p1)
(<> p2)))
(comp-demo :a :b)
Use render!
to mount a component. It also handles re-rendering if mounting already happened.
(defonce *store (atom {}))
(defn dispatch! [op op-data] (swap! *store assoc :a 1))
(render! mount-target (comp-container @*store) dispatch!)
To hot replace app code, use render!
function. clear-cache!
for restting internal rendering caches:
(defn reload! []
(clear-cache!)
(render! mount-target (comp-container @*store) dispatch!))
Adding Effects
Define effect with defeffect
macro. You may also compare arguments with old one to decide what to do:
(defeffect effect-focus [a] [action el *local at-place?]
(when (= :mount action)
(.focus (.querySelector el "input"))))
Pass component results in a vectors with effects defined:
(defcomp comp-draft [data]
[(effect-focus data)
(div {}
(input {})))]
The effect will be called during with action in :mount
:before-update
:update
and unmount
.
Respo would compare [data]
passed to effect-focus
with old arguments and updates will be called when they change.
States Management
Respo uses an Atom to maintain global states. Global states and "Single Source of Truth" are preferred:
(defonce *store (atom {}))
(defn dispatch! [op op-data] (swap! *store assoc :a 1))
(add-watch *store :changes
(fn []
(render! mount-target (comp-container @*store) dispatch!)))
Respo has supports for component-level states. But states is designed in an awkward syntax in order to make sure it's consistent with "Single Source of Truth". Read about mutate!
and cursor->
in the docs. Ecosystem
During developing Respo, a bunch of libraries are added:
ui -- basic UI styles collected based on Flexboxmarkdown -- subset Markdown syntax rendering to virtual DOMmessage -- displaying message on top-right cornerfeather -- icons library of featheralerts -- replacing alert/confirm/prompt componentsrouter -- HTML5 router library decoupled from view partreel -- time travelling developing toolvalue -- to display collectionsform -- simple form librarynotifier -- notification notifier You may also try Reacher which is a React wrapper. Try Respo
Now it's your turn to read Guide and try Respo: