add cache bustin helper for development with figwheel

clj-commons · Oct 4, 2017 · f1aa53a · f1aa53a
1 parent 8145307
commit f1aa53a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/example/project.clj b/example/project.clj
@@ -20,7 +20,8 @@
   :cljsbuild {:builds
               [{:id "dev"
                 :source-paths ["src" "../src"]
-                :figwheel {:open-urls ["http://localhost:3450/index.html"]}
+                :figwheel {:on-jsload example.core/mount
+                           :open-urls ["http://localhost:3450/index.html"]}
                 :compiler {:main example.core
                            :asset-path "js/compiled/out"
                            :output-to "resources/public/js/compiled/example.js"

diff --git a/example/src/example/core.cljs b/example/src/example/core.cljs
@@ -44,8 +44,6 @@
            :active? false}
           "Clojure Style Sheets for Rum")])
 
-(rum/mount (RumTitle) (gdom/getElement "rum-app"))
-
 
 ;; Reagent
 (rss/defstyled ReagentH1 :h1
@@ -59,8 +57,6 @@
    [ReagentH1 {:v-margin "8px" :color @color}
     "Clojure Style Sheets for Reagent"]])
 
-(r/render [ReagentTitle] (gdom/getElement "reagent-app"))
-
 
 ;; Om
 (omss/defstyled OmH1 :h1
@@ -77,8 +73,6 @@
              :color @color}
             "Clojure Style Sheets for Om"))))
 
-(om/add-root! (om/reconciler {:state color}) OmTitle (gdom/getElement "om-app"))
-
 
 
 (rss/defstyled InputField :div
@@ -102,4 +96,10 @@
            :padding-v "4px"
            :padding-h "8px"}]])
 
-(r/render [App] (gdom/getElement "app"))
+(defn mount []
+  (rum/mount (RumTitle) (gdom/getElement "rum-app"))
+  (r/render [ReagentTitle] (gdom/getElement "reagent-app"))
+  (om/add-root! (om/reconciler {:state color}) OmTitle (gdom/getElement "om-app"))
+  (r/render [App] (gdom/getElement "app")))
+
+(mount)
diff --git a/src/cljss/core.cljs b/src/cljss/core.cljs
@@ -1,24 +1,30 @@
 (ns cljss.core
   (:require [cljss.sheet :refer [create-sheet insert! filled?]]
-            [cljss.utils :refer [build-css]]
+            [cljss.utils :refer [build-css dev?]]
             [clojure.string :as cstr]))
 
 (defonce ^:private sheets (atom (list (create-sheet))))
 (defonce ^:private *id* (atom 0))
 (defonce ^:private cache (atom {}))
 
+(defn- with-cache-busting [clsn cls static]
+  (cstr/replace static (str "." clsn) (str "." cls)))
+
 (defn css
   "Takes class name, static styles and dynamic styles.
    Injects styles and returns a string of generated class names."
-  [cls static vars]
-  (let [sheet (first @sheets)]
+  [clsn static vars]
+  (let [sheet (first @sheets)
+        cls (if-not dev? clsn (str clsn "-" (swap! *id* inc)))]
     (if (filled? sheet)
       (do
         (swap! sheets conj (create-sheet))
         (css cls static vars))
       (do
         (when-not (empty? static)
-          (insert! sheet static cls))
+          (if dev?
+            (insert! sheet (with-cache-busting clsn cls static) cls)
+            (insert! sheet static cls)))
         (if (pos? (count vars))
           (if-let [var-cls (get @cache vars)]
             (str cls " " var-cls)

diff --git a/src/cljss/sheet.cljs b/src/cljss/sheet.cljs
@@ -1,8 +1,8 @@
 (ns cljss.sheet
   (:require [goog.object :as gobj]
-            [goog.dom :as dom]))
+            [goog.dom :as dom]
+            [cljss.utils :refer [dev?]]))
 
-(def ^:private dev? ^boolean goog.DEBUG)
 (def ^:private limit 65534)
 
 (defn- make-style-tag []

diff --git a/src/cljss/utils.cljc b/src/cljss/utils.cljc
@@ -1,6 +1,8 @@
 (ns cljss.utils
   (:require [clojure.string :as cstr]))
 
+#?(:cljs (def dev? ^boolean goog.DEBUG))
+
 (defn escape-val [rule val]
   (if (= rule :content)
     (pr-str val)