Load a stylesheet into the shadow-root

For #409
day8 · Feb 1, 2024 · 6a01149 · 6a01149
1 parent acca7d7
commit 6a01149
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 11 deletions.
diff --git a/deps.edn b/deps.edn
@@ -1,7 +1,7 @@
 
 ;; Allows users of deps.edn to more conveniently fork / make PRs to re-frame
 
-{:paths ["src" "gen-src"]
+{:paths ["src" "gen-src" "resources"]
  :deps {org.clojure/clojure {:mvn/version "1.10.3"}
  org.clojure/clojurescript {:mvn/version "1.10.879"}
  binaryage/devtools {:mvn/version "1.0.6"}

diff --git a/project.clj b/project.clj
@@ -27,7 +27,7 @@
  :username :env/CLOJARS_USERNAME
  :password :env/CLOJARS_TOKEN}]]
 
- :source-paths ["src" "gen-src"]
+ :source-paths ["src" "gen-src" "resources"]
 
  :release-tasks [["deploy" "clojars"]]
 

diff --git a/resources/day8/re_frame_10x.css b/resources/day8/re_frame_10x.css
@@ -0,0 +1 @@
+/* day8/re-frame-10x */
diff --git a/src/day8/re_frame_10x.cljs b/src/day8/re_frame_10x.cljs
@@ -128,8 +128,8 @@
 (defn ^:export handle-keys! [handle-keys?]
  (rf/dispatch [::settings.events/handle-keys? handle-keys?]))
 
-(defn create-shadow-root []
- (tools.shadow-dom/shadow-root js/document "--re-frame-10x--"))
+(defn create-shadow-root [css-str]
+ (tools.shadow-dom/shadow-root js/document "--re-frame-10x--" css-str))
 
 (defn create-style-container [shadow-root]
  [spade.react/with-style-container

diff --git a/src/day8/re_frame_10x/components/re_com.clj b/src/day8/re_frame_10x/components/re_com.clj
@@ -1,4 +1,5 @@
-(ns day8.re-frame-10x.components.re-com)
+(ns day8.re-frame-10x.components.re-com
+ (:require [clojure.java.io :as io]))
 
 ;; There is a trap when writing DOM event handlers. This looks innocent enough:
 ;;
@@ -31,3 +32,8 @@
 (defmacro handler-fn
  ([& body]
  `(fn [~'event] ~@body nil))) ;; force return nil
+
+(defmacro inline-resource
+ "https://clojureverse.org/t/best-practices-for-importing-raw-text-files-into-clojurescript-projects/2569/2"
+ [resource-path]
+ (slurp (io/resource resource-path)))
diff --git a/src/day8/re_frame_10x/navigation/views.cljs b/src/day8/re_frame_10x/navigation/views.cljs
@@ -34,7 +34,8 @@
  [day8.re-frame-10x.material :as material]
  [day8.re-frame-10x.styles :as styles]
  [day8.re-frame-10x.tools.shadow-dom :as tools.shadow-dom]
- [day8.re-frame-10x.popup :as popup]))
+ [day8.re-frame-10x.popup :as popup])
+ (:require-macros [day8.re-frame-10x.components.re-com :refer [inline-resource]]))
 
 #_(defglobal container-styles
  [:#--re-frame-10x--
@@ -391,7 +392,7 @@
  ;; When programming here, we need to be careful about which document and window
  ;; we are operating on, and keep in mind that the window can close without going
  ;; through standard react lifecycle, so we hook the beforeunload event.
- (let [shadow-root (tools.shadow-dom/shadow-root popup-document "--re-frame-10x--")
+ (let [shadow-root (tools.shadow-dom/shadow-root popup-document "--re-frame-10x--" (inline-resource "day8/re_frame_10x.css"))
  spade-container (spade.dom/create-container shadow-root)
  resize-update-scheduled? (atom false)
  handle-window-resize (fn [_]

diff --git a/src/day8/re_frame_10x/preload/react_18.cljs b/src/day8/re_frame_10x/preload/react_18.cljs
@@ -11,15 +11,16 @@
  [day8.re-frame-10x :as re-frame-10x]
  [day8.re-frame-10x.inlined-deps.re-frame.v1v3v0.re-frame.core :as rf]
  [day8.re-frame-10x.inlined-deps.reagent.v1v2v0.reagent.dom.client :as rdc]
- [day8.re-frame-10x.events :as events]))
+ [day8.re-frame-10x.events :as events])
+ (:require-macros [day8.re-frame-10x.components.re-com :refer [inline-resource]]))
 
 (re-frame-10x/patch!)
 
 (rf/dispatch-sync [::events/init re-frame-10x/project-config])
 
 (rf/clear-subscription-cache!)
 
-(def shadow-root (re-frame-10x/create-shadow-root))
+(def shadow-root (re-frame-10x/create-shadow-root (inline-resource "day8/re_frame_10x.css")))
 
 (rdc/render (rdc/create-root shadow-root)
  (re-frame-10x/create-style-container shadow-root))
diff --git a/src/day8/re_frame_10x/tools/shadow_dom.cljs b/src/day8/re_frame_10x/tools/shadow_dom.cljs
@@ -1,16 +1,22 @@
 (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]
+ [js-document id css-str]
  (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)
- shadow-root))))
+ shadow-root))))