https://github.com/Respo/respo.cljs

A virtual DOM library built with ClojureScript, inspired by React and Reagent.
https://github.com/Respo/respo.cljs

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/Respo/respo.cljs
• Owner: Respo
• License: mit
• Created: 2016-02-20T13:36:47.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-06-18T15:55:06.000Z (7 months ago)
• Last Synced: 2024-09-25T09:32:15.167Z (3 months ago)
• Topics: clojurescript, dom, mvc, respo, virtual-dom
• Language: Cirru
• Homepage: http://respo-mvc.org/
• Size: 1.86 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.

[![Respo](https://img.shields.io/clojars/v/respo/respo.svg)](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