Cloact becomes Reagent: Undo is trivial

2014-01-19

(reset! cloact-name "Reagent")

It turns out that ”Cloact” was a really, really bad name. It made some people think about birds’ behinds, in possibly unhealthy ways, which even Google suggested they should.

The new name is Reagent, which hopefully doesn’t bring with it the same disgusting connotations.

The API is otherwise unchanged, so a simple search-and-replace should suffice.

Undo the easy way

To celebrate the undoing of the apparently disgusting name, here is an example of how easy it is to add undo functionality to Reagent components.

It simply saves the old state whenever it changes, and restores it when the button is clicked.

The really nice thing about ClojureScript is that not only is this easy and safe to do, courtesy of immutable data structures, it is also efficient. ClojureScript figures out how to represent ”changes” to maps and vectors efficiently, so that you won’t have to.

hide

Example

Mark all as complete

Rename Cloact to Reagent
Add undo demo
Make all rendering async
Allow any arguments to component functions

Source

(ns example
  (:require [reagent.core :as r]))
(def state todomvc/todos)

(def undo-list (r/atom nil))

(defn undo []
  (let [undos @undo-list]
    (when-let [old (first undos)]
      (reset! state old)
      (reset! undo-list (rest undos)))))


(defn undo-button []
  (let [n (count @undo-list)]
    [:input {:type "button" :on-click undo
             :disabled (zero? n)
             :value (str "Undo (" n ")")}]))

(defn todomvc-with-undo []
  (add-watch state ::undo-watcher
             (fn [_ _ old-state _]
               (swap! undo-list conj old-state)))
  [:div
   [undo-button]
   [todomvc/todo-app]])