News in 0.5.1

New syntax for nested elements

The ”Hiccup syntax” used in Reagent now supports defining nested elements using ”>” as a separator in keywords. This is probably easier to show than to explain…

So, instead of doing this:

(defn old-and-tired []
  [:ul
   [:li.foo [:a.bar "Text 1"]]
   [:li.foo [:a.bar "Text 2"]]])

you can now do this:

(defn new-hotness []
  [:ul
   [:li.foo>a.bar "Text 1"]
   [:li.foo>a.bar "Text 2"]])

with identical results, thus saving several square brackets from an untimely death.

Keeping position

Reagent now tries harder to maintain cursor position in text inputs, even when the value of the input is transformed in code.

Previously, the cursor would jump to the end of the text whenever you made a change in the middle of the text in something like this:

(ns example.core
  (:require [reagent.core :as r]))
(def upper-value (r/atom "FOOBAR"))

(defn upper-input []
  [:div
   [:p "Value is: " @upper-value]
   [:input {:type 'text :value @upper-value
            :on-change #(reset! upper-value
                                (-> % .-target .-value string/upper-case))}]])

Other news

• React is updated to 0.13.3.
• A bit better error messages. In particular, the current component path is now printed when an exception is thrown.
• There is a new function, reagent.core/force-update that will make a component render immediately. It takes an optional second parameter that forces re-rendering of every child component as well.
• Calling the result of reagent.core/create-class as a function is now deprecated. Use Hiccup syntax instead.
• Some other bug fixes and performance tweaks.