News in 0.5.1

Reagent 0.5.1 contains a new convenient shortcut for nested elements, better error messages, new logic for maintaining cursor position in inputs, a new version of React, and some bug fixes and improvements.

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:

Source

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

you can now do this:

Source

(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:

hide

Example

Value is: FOOBAR

Source

(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
                                    clojure.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.
Fork me on GitHub