Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mvc-works/respo
A virtual DOM library built with ClojureScript, inspired by React and Reagent.
https://github.com/mvc-works/respo
clojurescript dom mvc respo virtual-dom
Last synced: about 2 months ago
JSON representation
A virtual DOM library built with ClojureScript, inspired by React and Reagent.
- Host: GitHub
- URL: https://github.com/mvc-works/respo
- Owner: Respo
- License: mit
- Created: 2016-02-20T13:36:47.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-27T15:49:14.000Z (11 months ago)
- Last Synced: 2024-04-22T13:33:14.721Z (5 months ago)
- Topics: clojurescript, dom, mvc, respo, virtual-dom
- Language: Cirru
- Homepage: http://respo-mvc.org/
- Size: 1.85 MB
- Stars: 235
- Watchers: 12
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-clojurescript - Respo
README
> Notice: since the author has moved to Calcit-js, the maintenance has been moved to [respo.calcit](https://github.com/Respo/respo.calcit). And this repo will no longer be developed.
Respo: A virtual DOM library in ClojureScript
----
> Inspired by React and Reagent.
[](https://clojars.org/respo/respo)
```clojure
[respo "0.13.11"]
```
* Home http://respo-mvc.org
* [Bundled example](http://repo.respo-mvc.org/respo/)
* [Docs](https://github.com/Respo/respo/wiki)
### Usage
DOM syntax
```clojure
(div {:class-name "demo-container"
:style {:color :red}
:on-click (fn [event dispatch!])}
(div {}))
```
Text Node:
```clojure
(<> content)
; with styles
(<> content {:color :red
:font-size 14})
```
Component definition:
```clojure
(defcomp comp-container [content]
(div
{:class-name "demo-container"
:style {:color :red}}
(<> content)))
```
App initialization:
```clojure
; 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:
```clojure
(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:
```clojure
(defn reload! []
(clear-cache!)
(render-app!))
```
Adding effects to component:
```clojure
(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:
```clojure
(defplugin plugin-x [a b]
{:ui (div {} (<> "Demo"))
:show (fn []
(do))})
```
Read docs to use Respo:
* [Beginner Guide](https://github.com/Respo/respo/wiki/Beginner-Guide)
* [Minimal App](https://github.com/Respo/minimal-respo)
* [Examples](https://github.com/Respo/respo-examples)
### Test
```bash
yarn compile-test
node target/test.js
```
### Develop
Calcit Workflow https://github.com/mvc-works/calcit-workflow
### License
MIT