Respo: A virtual DOM library in ClojureScript

Inspired by React and Reagent.

[respo "0.10.11"]

• Home http://respo-mvc.org
• Bundled example
• Docs

Usage

DOM syntax

(div {:class-name "demo-container"
      :style {:color :red}
      :on-click (fn [event dispatch! mutate!])}
      (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 *local]
  (println action) ; action could be :mount :update :amount
  (when (= :mount action)
    (swap! *local assoc :data "data")))

(defcomp comp-a [text]
  [(effect-a text) (div {})])

Read docs to use Respo:

• Beginner Guide
• Minimal App
• Examples

Test

yarn compile-test
node target/test.js

Develop

Calcit Workflow https://github.com/mvc-works/calcit-workflow

License

MIT