Let's start out with shadow-cljs browser quickstart template. After cloning the repo, we need to install preact:

$ npm install preact

In shadow-cljs.edn inside our build we need to add

:js-options
 {:resolve
  {"react" {:target :npm :require "preact/compat"}
   "react-dom" {:target :npm :require "preact/compat"}}}

Adding also reagent as a dependency, the file should look like this:

{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

 :dependencies
 [[reagent "1.2.0"]]

 :dev-http
 {8020 "public"}

 :builds
 {:app
  {:target :browser
   :output-dir "public/js"
   :asset-path "/js"
   :js-options
   {:resolve
    {"react" {:target :npm :require "preact/compat"}
     "react-dom" {:target :npm :require "preact/compat"}}}

   :modules
   {:main ; becomes public/js/main.js
    {:init-fn starter.browser/init}}}}}

Then we can just npx shadow-cljs watch app and open it in browser. Checking the console we can see the messages from js/console.log statements as defined in browser.cljs.

Let's add some minimal functionality to browser.cljs to see that reagent still works:

(ns starter.browser
  (:require [reagent.core :as r]
            [reagent.dom :as rdom]))

(defn component-main []
  (let [state (r/atom {})]
    (fn []
      [:div
       [:input
        {:type "text"
         :on-change (fn [e]
                      (reset! state (-> e .-target .-value)))}]
       [:div "Reversed: "
        (reverse @state)]])))

;; start is called by init and after code reloading finishes
(defn ^:dev/after-load start []
  (js/console.log "start")
  (rdom/render [component-main]
               (js/document.getElementById "app")))

(defn init []
  ;; init is called ONCE when the page loads
  ;; this is called in the index.html and must be exported
  ;; so it is available even in :advanced release builds
  (js/console.log "init")
  (start))

;; this is called before any code is reloaded
(defn ^:dev/before-load stop []
  (js/console.log "stop"))

You can view the full thing on github.

The resulting js-file (npx shadow-cljs release app) is roughly 182 KB. I tried the same using react and react-dom (version "17.0.2" for both) and the resulting file was 274 KB.

Note: if you're planning on migrating your current project from React to Preact make sure you go through differences to React and test properly to ensure nothing breaks.

Edit: Chris McCormick already had a post about this: Replacing React with Preact in ClojureScript. I highly recommend his writings.

;; Don't do:
(defmethod page :hello [args]
  (setup-something! args)
  (fn [_]
    [:div "hello"]))

;; Do instead:
(defn hello-view [args]
  (setup-something! args)
  (fn [_]
    [:div "hello"]))

(defmethod page :hello [args]
  [hello-view args])

When creating multiple pages with the same layout (main navbar, static footer etc), a reasonable approach might be using multimethods to implement the main content of the page. Let's look at a simplified example:

(defonce state (r/atom {:current-view :front-page}))
(def current-view (r/cursor state [:current-view]))

(def pages
  ;; [[page-key page-title] ...]
  [[:front-page "Front page"]
   [:about "About"]
   [:setup "Setup"]])

(defmulti page :current-view)
(defmethod page :default [{:keys [current-view]}]
  [:div "UNIMPLEMENTED:" current-view])

(defn select-view! [view]
  (swap! state assoc :current-view view))

(defn navbar [{:keys [current-view]}]
  [:div.navbar
   (doall
     (for [[view title] pages
           :let [current? (= view current-view)]]
       ^{:key (str "navbar-" view)}
       [:a
        {:style {:padding "5px"
                 :background-color (when current?
                                     "#dddddd")}
         :class-name (when (= view current-view)
                       "active")
         :on-click (r/partial select-view! view)}
        title]))])

(defn main [state]
  [:div
   [navbar {:current-view @current-view}]
   [:div.main-content
    [page {:current-view @current-view}]]])

(defmethod page :front-page [_]
  [:div.content
   [:h1 "Front page"]
   [:div "Welcome etc. [front page content here]"]])

(defmethod page :about [_]
  [:div.content
   [:h1 "About"]
   [:div "[About-page content here]"]])

In some cases we might want to add a view that needs to setup something, use local state etc. i.e. what form-2 components are typically used for. You might try something like this:

(defmethod page :setup [_]
  ;; setup something etc. demonstrated by the print statement:
  (println "run on each open, form-2")
  (fn [_]
    [:div.content
     [:h1 "Do something, form-2"]
     [:div "[content here]"]]))

But when opening this view multiple times, the text is printed only once, and the main-content is stuck with the "Do something, form-2":

Let's see if making it a form-3 component helps, using :component-did-mount to perform the setup instead:

;; remove previous implementation if needed:
(remove-method page :setup)

(defmethod page :setup [_]
  (r/create-class
    {:display-name "setup-component"
     :component-did-mount
     (fn [_]
       (println "run on each open/mount, form-3"))
     :reagent-render
     (fn [_]
       [:div.content
        [:h1 "Do something, form-3"]
        [:div "[content here]"]])}))

Same problem. Seems like multimethods are incompatible with form-2 and form-3 components. Luckily, since form-1 components seem to work fine, there's a simple solution:

(remove-method page :setup)

(defn setup-view [_]
  (println "run on each open, wrapped")
  (fn [_]
    [:div.content
     [:h1 "Do something, wrapped"]
     [:div "[content here]"]]))

(defmethod page :setup [args]
  [setup-view args])

Perform any setup actions inside an ordinary reagent component, and simply use the multimethod to wrap around this component. A gotcha I've run into before.

Better visibility with dark mode - fillRect with white color instead of clearRect:

(.clearRect ctx 0 0 width height)
;; replaced with the following two lines
(set! (.-fillStyle ctx) "white")
(.fillRect ctx 0 0 width height)

I also wanted to make it work for touch devices. First, I needed to prevent scrolling when trying to draw with a touch screen; added css property

touch-action: none;

I added (.preventDefault e)  for touchevents as well.

Same drawing behavior for touch events. I decided to implement this by setting the same handlers for touch events as for click events. Some helper functions were needed; "touchstart", "touchend", and "touchmove" event objects don't contain offsetX and offsetY properties. We can calculate these from clientX/Y of targetTouch and the getBoundingClientRect() of the canvas (more info here). Hence:

(defn get-offset-x [e]
  (let [bcr   (-> e .-target .getBoundingClientRect)
        bcr-x (.-x bcr)
        x     (-> e
              .-targetTouches
              (aget 0)
              .-clientX
              (- bcr-x)
              int)]
    x))
    
 ;; this can be used by replacing the let-binding:
 (let [x (.-offsetX e)
       ,,,])
 ;; with
 (let [x (or (.-offsetX e) (get-offset-x e))
       ,,,])

Same logic works for offset-y

I also made setup-mouse-events somewhat cleaner:

(defn setup-mouse-events [^js state canvas arr]
  (setup-start-draw state canvas arr)
  (setup-end-draw state canvas arr)
  (setup-draw state canvas arr)
  (.addEventListener
    canvas "mouseout"
    (fn [_]
      (aset state "prev-x" nil)
      (aset state "prev-y" nil))))

And the implementations:

(defn setup-start-draw [state canvas arr]
  (let [start-draw-fn
        (fn [e]
          (let [x (or (.-offsetX e) (get-offset-x e))
                y (or (.-offsetY e) (get-offset-y e))]
            (.preventDefault e)
            (aset state "drawing?" true)
            (aset state "prev-x" x)
            (aset state "prev-y" y)
            (aset arr x y)
            (draw-on-next-frame state "canvas4-draw" canvas arr)))]
    (.addEventListener
      canvas "touchstart"
      start-draw-fn)
    (.addEventListener
      canvas "mousedown"
      start-draw-fn)))
      
(defn setup-end-draw [state canvas arr]
  (let [end-draw-fn
        (fn [e]
          (aset state "drawing?" false))]
    (.addEventListener
      js/window "mouseup"
      end-draw-fn)
    (.addEventListener
      js/window "touchend"
      end-draw-fn)))
      
(defn setup-draw [state canvas arr]
  (let [draw-fn
        (fn [e]
          (when (aget state "drawing?")
            (let [x      (or (.-offsetX e) (get-offset-x e))
                  y      (or (.-offsetY e) (get-offset-y e))
                  prev-x (aget state "prev-x")
                  prev-y (aget state "prev-y")]
              (aset state "prev-x" x)
              (aset state "prev-y" y)
              (when (and prev-x prev-y)
                (line-to-array arr prev-x prev-y x y))
              (draw-on-next-frame state "canvas4-draw" canvas arr))))]
    (.addEventListener
      canvas "mousemove"
      draw-fn)
    (.addEventListener
      canvas "touchmove"
      draw-fn)))

That should be all the changes so far.

TL;DR:

> (rem num 1000) ;; should be between -999 and 999 for all integers
6.1897001964269014E26

I wanted to create a simple Reagent toy example where a user can input a number and the number is displayed in words. A straightforward implementation can use the already existing cl-format from cljs.pprint:

> (cljs.pprint/cl-format false "~R" 123456)
"one hundred twenty-three thousand, four hundred fifty-six"

Because of the way numbers are represented in JavaScript it was clear from the beginning that this will not work properly for large numbers. For example:

> (cljs.pprint/cl-format false "~R" 44444444444444444444444444444444444444)
"forty-four undecillion, four hundred forty-four decillion, four hundred forty-four nonillion, four hundred forty-four octillion, four hundred forty-four septillion, four hundred thirty-two sextillion"

We can see it ends with "thirty-two sextillion"; a clear loss of precision.

What surprised me was when playing around with the Reagent example, the whole thing suddenly broke. The textual representation was no longer getting updated, and there was an error message in the console:

Uncaught (in promise) Error: No item 6.189700196426902e+24 in vector of length 20
...

So what's going on? Trying to replicate the issue, I found an example input value:

;; we'll use this definition in some of the later REPL examples as well:
(def num 5555555555555555555555555555555555555555555)

(cljs.pprint/cl-format false "~R" num)
Execution error (Error) at (<cljs repl>:1).
No item 6.189700196426902e+24 in vector of length 20
:repl/exception!

The stack trace contains a line

at cljs$pprint$format_simple_cardinal (pprint.cljs:1187:33)

which seemed like a good place to start digging around the source code (https://github.com/clojure/clojurescript/blob/39709c9614d37b9a3dd398be8fed83cd3dda534b/src/main/cljs/cljs/pprint.cljs#L1187):

      (if (pos? hundreds) (str (nth english-cardinal-units hundreds) " hundred"))

Since the error was "No item 6.189700196426902e+24 in vector of length 20", the (nth english-cardinal-units hundreds) is the likely culprit - hundreds is defined as

(defn- format-simple-cardinal
  "Convert a number less than 1000 to a cardinal english string"
  [num]
  (let [hundreds (quot num 100)
        ,,,]

Since the function formats a number less than 1000, 'hundreds' should always be between 0 and 9, but here it seems to be larger than that. Let's take a look at where this is getting called. In format-cardinal-english we find

      (let [,,,
            parts (remainders 1000 abs-arg)]
        (if (<= (count parts) (count english-scale-numbers))
          (let [parts-strs (map format-simple-cardinal parts)

Let's see if there's anything weird going on with 'remainders' (note: the #'ns/fn syntax can be used to access private functions from other namespaces):

> (#'cljs.pprint/remainders 1000 num)
(5 555 555 555 555 554 0 0 0 0 0 0 0 0 6.1897001964269014E26)

The final value in the list looks familiar. Since 'remainders' is using 'rem' let's just quickly try:

> (rem num 1000)
6.1897001964269014E26

There we go. rem i.e. remainder "Returns the remainder of dividing numerator n by denominator d." Ignoring the precision issues, the remainder should be 555. At least it should never be greater than (or equal to) 1000, the denominator. Here we're getting a massive number instead.

The source code of rem is

(defn rem
  [n d]
  (let [q (quot n d)]
    (- n (* d q))))

We can see that numerator is divided by denominator (taking only the quotient), then the quotient is multiplied again by the denominator. This is then subtracted from the numerator, which mathematically should give the remainder - something about the number representation causes us to lose precision here. To further pinpoint the issue:

> (let [n 5555555555555555555555555555555555555555555
        d 1000
        q (quot n d)
        multiplied (* d q)]
    [n multiplied (- n multiplied)])
[5.5555555555555556E42
 5.555555555555555E42
 6.1897001964269014E26]

An alternative example:

> 5555555555555555555555555555555555555555555
5.5555555555555556E42
> 5555555555555555555555555555555555555555
5.555555555555555E39
> (* *1 1000)
5.555555555555555E42
> (- 5555555555555555555555555555555555555555555 *1)
6.1897001964269014E26

Where we can see the original number vs the multiplied one differ slightly in the representation (5.[snip]56E42 vs 5.[snip]5E42), which causes an error in the subtraction to the tune of 6e26.

I did some searching and I found a report quot and rem are inefficient from 2015. The proposed solution (rem defined as js-mod) seems to fix this problem:

(with-redefs [rem js-mod]
  (cljs.pprint/cl-format false "~R" 5555555555555555555555555555555555555555555))
"five tredecillion, five hundred fifty-five duodecillion, five hundred fifty-five undecillion, five hundred fifty-five decillion, five hundred fifty-five nonillion, five hundred fifty-four octillion, three hundred four septillion, four hundred eighty-eight sextillion, nine hundred seventy-six quintillion, seven hundred eighty-four quadrillion, four hundred sixteen trillion, eight hundred seventy-two billion, nine hundred seventy-six million, three hundred twenty thousand, four hundred eighty"

It still has the aforementioned precision issues, but at least it doesn't outright fail.

Another solution would be to just replace the rem with js-mod permanently:

(set! rem js-mod)