Use React 18 with reagent create-root

React 18 gives a deprecation warning if you use the old rdom/render
api. The reagent.dom.client namespace wraps this new API. It also
enables experimental React 18 features in reagent.

It's acceptable (and possibly more stable) to keep using the old API,
but this deprecation warning can be confusing to the user, who
shouldn't need to be aware of our inlined-deps situation. It looks as
if their reagent code is suspect, when actually ours is.

Updated to the new API. We don't use any other React 18 features yet.

#367

src/day8/re_frame_10x.cljs

@@ -1,5 +1,7 @@
 (ns day8.re-frame-10x
   (:require
+    ["react"                                                              :as react]
+    [clojure.string                                                       :as str]
     [day8.re-frame-10x.inlined-deps.reagent.v1v2v0.reagent.core           :as r]
     [day8.re-frame-10x.inlined-deps.reagent.v1v2v0.reagent.dom            :as rdom]
     [day8.re-frame-10x.inlined-deps.re-frame.v1v3v0.re-frame.core         :as rf]
@@ -135,20 +137,27 @@
 
 ;; --- NEW ---
 
+(defonce react>=18? (<= 18 (js/parseInt (first (str/split react/version ".")))))
 
+(when react>=18?
+  (require '[day8.re-frame-10x.inlined-deps.reagent.v1v2v0.reagent.dom.client :as rdc])
+  (defonce react-root (atom nil)))
 
 (defn inject!
   []
   (rf/clear-subscription-cache!)
   (let [shadow-root (tools.shadow-dom/shadow-root js/document "--re-frame-10x--")
-        container   (spade.dom/create-container shadow-root)]
-
-    (rdom/render
-      [spade.react/with-style-container container
-       [devtools-outer
-        {:panel-type :inline
-         :debug?     debug?}]]
-      shadow-root)))
+        style-container (spade.dom/create-container shadow-root)
+        root-component [spade.react/with-style-container style-container
+                        [devtools-outer
+                         {:panel-type :inline
+                          :debug?     debug?}]]]
+    (if react>=18?
+      (do
+        (when-not @react-root
+          (reset! react-root (rdc/create-root shadow-root)))
+        (rdc/render @react-root root-component))
+      (rdom/render root-component shadow-root))))
 
 (defn patch!
   "Sets up any initial state that needs to be there for tracing. Does not enable tracing."
@@ -161,4 +170,4 @@
   []
   (patch!)
   (rf/dispatch-sync [::events/init {:debug? debug?}])
-  (inject!))
+  (inject!))