Working version with React 18

There are still a lot of gotchas with Reagent + React 18.

Specifically, see:

reagent-project/reagent#579

Without the workaround described in that issue, root React nodes, like
the debugger overlay don't hot reload properly.

client/clojure/reflet/client.cljs

@@ -1,17 +1,18 @@
 (ns reflet.client
  "Stand-alone client example, and testing."
  (:require [re-frame.core :as f*]
- [reagent.dom :as dom]
+ [reagent.dom.client :as dom]
  [reflet.client.boot :as boot]
  [reflet.client.ui :as ui]
  [reflet.core :as f]))
 
+(defonce root
+ (dom/create-root (.getElementById js/document "container")))
+
 (defn render!
  []
  (f*/clear-subscription-cache!)
- (some->> "container"
- (.getElementById js/document)
- (dom/render [ui/app])))
+ (dom/render root [(fn [] ui/app)]))
 
 (defn config!
  []

deps.edn

@@ -1,7 +1,8 @@
 {:deps {io.zalky/cinch {:mvn/version "0.1.0"}
  org.clojure/clojure {:mvn/version "1.11.1"}
  re-frame/re-frame {:mvn/version "1.1.2"}
- reagent/reagent {:mvn/version "1.1.1"}}
+ reagent/reagent {:git/url "https://github.com/reagent-project/reagent.git"
+ :git/sha "e67d4f8804c109868469d6e81ecd7184cf707575"}}
  :paths ["src/clojure"]
  :aliases {:cljs/dev {:extra-paths ["test/clojure"]
  :extra-deps {binaryage/devtools {:mvn/version "1.0.6"}

package.json

@@ -1,7 +1,7 @@
 {
  "dependencies": {
  "highlight.js": "11.5.1",
- "react": "17.0.2",
- "react-dom": "17.0.2"
+ "react": "18.2.0",
+ "react-dom": "18.2.0"
  }
 }

src/clojure/reflet/debug/ui.cljs

@@ -2,7 +2,7 @@
  (:require [cljs.pprint :as pprint]
  [react-dom :as react-dom]
  [reagent.core :as r]
- [reagent.dom :as dom]
+ [reagent.dom.client :as dom]
  [reflet.core :as f]
  [reflet.css.bundled :as bundled]
  [reflet.db :as db]
@@ -591,14 +591,16 @@
  (.appendChild (body-el) el)
  el)))
 
+(defonce root
+ (dom/create-root (upsert-overlay-el!)))
+
 (defn render!
  "Renders the debugger to the DOM."
  []
  (when (f/debug?)
  (upsert-css!)
  (f/disp-sync [::impl/config])
- (->> (upsert-overlay-el!)
- (dom/render [overlay]))))
+ (dom/render root [(fn [] overlay)])))
 
 (defn activate!
  "Configures the debugger. This needs to be called before any react