Render main styesheet with reagent, not dom interop

Fixes #410

Author: kimo-k

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change Log
 All notable changes to this project will be documented in this file. This change log follows the conventions of [keepachangelog.com](http://keepachangelog.com/).
 
+## 1.9.7 (2024-02-02)
+
+#### Fixed
+
+- Pop-out window no longer crashes. See #410.
+
 ## 1.9.6 (2024-02-02)
 
 #### Fixed

src/day8/re_frame_10x.cljs

@@ -14,7 +14,8 @@
    [day8.re-frame-10x.components.re-com                                  :as rc]
    [day8.re-frame-10x.navigation.views                                   :as container]
    [day8.re-frame-10x.panels.settings.subs                               :as settings.subs]
-   [day8.re-frame-10x.panels.settings.events                             :as settings.events]))
+   [day8.re-frame-10x.panels.settings.events                             :as settings.events])
+  (:require-macros [day8.re-frame-10x.components.re-com :refer [inline-resource]]))
 
 (goog-define debug? false)
 
@@ -128,15 +129,17 @@
 (defn ^:export handle-keys! [handle-keys?]
   (rf/dispatch [::settings.events/handle-keys? handle-keys?]))
 
-(defn create-shadow-root [css-str]
-  (tools.shadow-dom/shadow-root js/document "--re-frame-10x--" css-str))
+(defn create-shadow-root []
+  (tools.shadow-dom/shadow-root js/document "--re-frame-10x--"))
 
 (defn create-style-container [shadow-root]
   [spade.react/with-style-container
    (spade.dom/create-container shadow-root)
-   [devtools-outer
-    {:panel-type :inline
-     :debug?     debug?}]])
+   [:<>
+    [:style (inline-resource "day8/re_frame_10x/style.css")]
+    [devtools-outer
+     {:panel-type :inline
+      :debug?     debug?}]]])
 
 (defn patch!
   "Sets up any initial state that needs to be there for tracing. Does not enable tracing."

src/day8/re_frame_10x/navigation/views.cljs

@@ -434,5 +434,7 @@
         :component-will-unmount unmount
         :reagent-render         (fn []
                                   [spade.react/with-style-container spade-container
-                                   [devtools-inner {:panel-type :popup}]])})]
+                                   [:<>
+                                    [:style (inline-resource "day8/re_frame_10x/style.css")]
+                                    [devtools-inner {:panel-type :popup}]]])})]
      shadow-root)))

src/day8/re_frame_10x/preload/react_17.cljs

@@ -9,8 +9,7 @@
    [day8.re-frame-10x                                            :as re-frame-10x]
    [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]
-   [day8.re-frame-10x.events                                     :as events])
-  (:require-macros [day8.re-frame-10x.components.re-com :refer [inline-resource]]))
+   [day8.re-frame-10x.events                                     :as events]))
 
 (let [react-major-version (first (str/split react/version #"\."))]
   (when-not (= "17" react-major-version)
@@ -26,7 +25,7 @@
 
 (rf/clear-subscription-cache!)
 
-(def shadow-root (re-frame-10x/create-shadow-root (inline-resource "day8/re_frame_10x/style.css")))
+(def shadow-root (re-frame-10x/create-shadow-root))
 
 (rdom/render (re-frame-10x/create-style-container shadow-root)
              shadow-root)

src/day8/re_frame_10x/preload/react_18.cljs

@@ -20,7 +20,7 @@
 
 (rf/clear-subscription-cache!)
 
-(def shadow-root (re-frame-10x/create-shadow-root (inline-resource "day8/re_frame_10x/style.css")))
+(def shadow-root (re-frame-10x/create-shadow-root))
 
 (rdc/render (rdc/create-root shadow-root)
             (re-frame-10x/create-style-container shadow-root))

src/day8/re_frame_10x/tools/shadow_dom.cljs

@@ -1,21 +1,15 @@
 (ns day8.re-frame-10x.tools.shadow-dom)
 
-(defn attach-stylesheet [shadow-root css-str]
-  (let [stylesheet (js/CSSStyleSheet.)
-        _ (.replaceSync stylesheet css-str)]
-    (set! (.-adoptedStyleSheets shadow-root) (js/Array. stylesheet))))
-
 (defn shadow-root
   "Creates a new div element with the id attached to the js-document <body>,
    attaches a shadow DOM tree and returns a reference to its ShadowRoot."
-  [js-document id css-str]
+  [js-document id]
   (let [container (.getElementById js-document id)]
     (if container
       (.-shadowRoot container)
       (let [body        (.-body js-document)
             container   (.createElement js-document "div")
             shadow-root (.attachShadow container #js {:mode "open"})]
-        (attach-stylesheet shadow-root css-str)
         (.setAttribute container "id" id)
         (.appendChild body container)
         (js/window.focus container)