Notice: since the author has moved to Calcit-js, the maintenance has been moved to respo.calcit. And this repo will no longer be developed.
Inspired by React and Reagent.
[respo "0.13.11"]DOM syntax
(div {:class-name "demo-container"
:style {:color :red}
:on-click (fn [event dispatch!])}
(div {}))Text Node:
(<> content)
; with styles
(<> content {:color :red
:font-size 14})Component definition:
(defcomp comp-container [content]
(div
{:class-name "demo-container"
:style {:color :red}}
(<> content)))App initialization:
; initialize store and update store
(defonce *store (atom {:point 0 :states {}}))
(defn dispatch! [op op-data] (reset! *store updated-store))
; render to the DOM
(render! mount-point (comp-container @*store) dispatch!)Rerender on store changes:
(defn render-app! [] (render! mount-point (comp-container @*store) dispatch!))
(add-watch *store :changes (fn [] (render-app!)))Reset virtual DOM caching during hot code swapping, and rerender:
(defn reload! []
(clear-cache!)
(render-app!))Adding effects to component:
(defeffect effect-a [text] [action parent-element at-place?]
(println action) ; action could be :mount :update :amount
(when (= :mount action)
(do)))
(defcomp comp-a [text]
[(effect-a text) (div {})])Define a hooks plugin, like components it has caching support:
(defplugin plugin-x [a b]
{:ui (div {} (<> "Demo"))
:show (fn []
(do))})Read docs to use Respo:
yarn compile-test
node target/test.jsCalcit Workflow https://github.com/mvc-works/calcit-workflow
MIT