Reagami: A minimal zero-deps Reagent-like for Squint and CLJS

Fold your state into the DOM!

A minimal zero-deps Reagent-like in Squint and CLJS.

Quickstart example:

(Open this example on the Squint playground)

In ClojureScript you would add this library to your deps.edn :deps as follows:

and then require it with (:require [reagami.core :as reagami]).

Reagami supports:

• Building small reactive apps with the only dependency being Squint or CLJS. Smallest app with Squint after minification is around 3.5kb gzip.
• Rendering hiccup into a container DOM node. The only public function is render.
• Event handlers via :on-click, :on-input, etc.
• Default attributes: :default-value, etc. for uncontrolled components
• Id and class short notation: [:div#foo.class1.class2]
• Disabling properties with false: [:button {:disabled (not true)}]
• :style maps: {:style {:background-color :green}}
• :on-render function that gets called with the node and either :mount, :update or :unmount after updating the DOM. This can be used to mount/update/unmount 3rd party Java library components. Demo here.

Reagami does NOT support:

• Auto-rerendering by auto-watching custom atoms. Instead you use add-watch + render on regular atoms or you call render yourself.
• Local state and form-2 components, although you can mimic local state by using nested renders like in this example.
• React hooks (it doesn't use React)

Reagami uses a basic patching algorithm explained in this blog post. It may become more advanced in the future, but the (fun) point of this library at this point is that it's small, underengineered and thus suited for educational purposes.

For a more fully featured version of Reagent in squint, check out Eucalypt.

Examples on the Squint playground:

• Input field + counter
• Boring crud table
• Snake game
• Draggable button
• CSS transition
• Ohm's law
• Multi select

MIT