Skip to content

Latest commit

 

History

History
116 lines (82 loc) · 2.25 KB

README.md

File metadata and controls

116 lines (82 loc) · 2.25 KB
Raw

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.

Respo: A virtual DOM library in ClojureScript

Inspired by React and Reagent.

Respo

[respo "0.13.11"]

Usage

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:

Test

yarn compile-test
node target/test.js

Develop

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

License

MIT