fixing reliance on js/React

Author: Bruce Hauman

example_src/devdemos/core.cljs

@@ -3,8 +3,8 @@
     :rigsomelight-post true}
   devdemos.core
     (:require
-     [om.core :as om :include-macros true]
-     [om.dom :as dom :include-macros true]
+     #_[om.core :as om :include-macros true]
+     #_[om.dom :as dom :include-macros true]
      [om.next :as omnext :refer-macros [defui]]
      [create-react-class :as create-react-class]
      [reagent.core :as reagent]
@@ -19,7 +19,8 @@
      [devcards.core :as dc :refer [defcard defcard-doc deftest dom-node defcard-om-next]]))
 
 ;; this is to support om with the latest version of React
-(set! (.-createClass (.-React goog.global)) create-react-class)
+;; TODO not needed?
+#_(set! (.-createClass (.-React goog.global)) create-react-class)
 
 (def ^:export front-matter
   {:layout false
@@ -248,7 +249,7 @@
 
 
 
-(defn om-slider [bmi-data param value min max]
+#_(defn om-slider [bmi-data param value min max]
   (sab/html
    [:input {:type "range" :value value :min min :max max
             :style {:width "100%"}
@@ -257,7 +258,7 @@
                          (when (not= param :bmi)
                            (om/update! bmi-data :bmi nil)))}]))
 
-(defn om-bmi-component [bmi-data owner]
+#_(defn om-bmi-component [bmi-data owner]
   (let [{:keys [weight height bmi]} (calc-bmi bmi-data)
         [color diagnose] (cond
                           (< bmi 18.5) ["orange" "underweight"]
@@ -279,7 +280,7 @@
         [:span {:style {:color color}} diagnose]
         (om-slider bmi-data :bmi bmi 10 50)]]))))
 
-(defcard
+#_(defcard
   "# Om support
 
    Here is the same calculator being rendered as an Om application.
@@ -292,7 +293,7 @@
    ``` 
    ")
 
-(defcard om-support
+#_(defcard om-support
   (dc/om-root om-bmi-component)
   {:height 180 :weight 80} ;; initial data
   {:inspect-data true
@@ -500,7 +501,7 @@ as a dependency.
     ;; conditionally start the app based on the presence of #main-app-area
     ;; node is on the page
     (if-let [node (.getElementById js/document \"main-app-area\")]
-      (js/React.render (sab/html [:div \"This is main app is ruunning.\"]) node)))
+      (react-dom/render (sab/html [:div \"This is main app is ruunning.\"]) node)))
 
   (main)  
   ```
@@ -557,5 +558,4 @@ your application's UI so you will want to make sure it isn't getting
 launched.
 
 
-  
   ")

example_src/devdemos/maintain_state.cljs

@@ -3,7 +3,8 @@
      [sablono.core :as sab :include-macros true]
      [goog.object :as gobj]
      [devcards.util.utils :refer-macros [define-react-class-once]]
-     [devcards.core])
+     [devcards.core]
+     [react])
     (:require-macros
      ;; Notice that I am not including the 'devcards.core namespace
      ;; but only the macros. This helps ensure that devcards will only
@@ -36,5 +37,5 @@ This is mainly intended for verification of behavior.")
 The state of this counter is stored in the local state of the component.
 
 To test: increment the counter then save this file and verify that the counter state hasn't changed."
-  (js/React.createElement County))
+  (react/createElement County))
 

project.clj

@@ -52,10 +52,10 @@
                                    }}
                        ]}
 
-         :figwheel { :css-dirs ["resources/public/devcards/css"]
-                     :open-file-command "emacsclient"
-                    ;;:nrepl-port 7888
-                    }
+  :figwheel { :css-dirs ["resources/public/devcards/css"]
+             :open-file-command "emacsclient"
+             ;;:nrepl-port 7888
+             }
 
   :profiles {
    :repl { ;:plugins [[cider/cider-nrepl "0.11.1"]]

src/devcards/core.cljs

@@ -96,10 +96,10 @@
 
 (defn- react-raw [raw-html-str]
   "A React component that renders raw html."
-  (js/React.createElement "div"
-    #js {:key (str (hash raw-html-str))
-         :dangerouslySetInnerHTML
-         #js {:__html raw-html-str}}))
+  (react/createElement "div"
+                       #js {:key (str (hash raw-html-str))
+                            :dangerouslySetInnerHTML
+                            #js {:__html raw-html-str}}))
 
 (declare get-props ref->node)
 
@@ -123,17 +123,17 @@
       (get-props this :code)]])))
 
 (defn code-highlight [code-str lang]
-  (js/React.createElement CodeHighlight #js {:code code-str
-                                             :lang lang}))
+  (react/createElement CodeHighlight #js {:code code-str
+                                          :lang lang}))
 
 (defmulti markdown-block->react :type)
 
 (defmethod markdown-block->react :default [{:keys [content]}]
   (-> content mark/markdown-to-html react-raw))
 
 (defmethod markdown-block->react :code-block [{:keys [content] :as block}]
-  (js/React.createElement CodeHighlight #js {:code (:content block)
-                                             :lang (:lang block)}))
+  (react/createElement CodeHighlight #js {:code (:content block)
+                                          :lang (:lang block)}))
 
 (declare react-element?)
 
@@ -217,7 +217,7 @@
 
 (defn ref->node [this ref]
   (when-let [comp (gobj/get (.. this -refs) ref)]
-    (js/ReactDOM.findDOMNode comp)))
+    (react-dom/findDOMNode comp)))
 
 (defn get-props [this k]
   (gobj/get (.-props this) (name k)))
@@ -239,9 +239,9 @@
 
 ;; this is not currently being used
 (defn dont-update [change-count children-thunk]
-  (js/React.createElement DontUpdate
-                          #js { :change_count change-count
-                                :children_thunk children-thunk}))
+  (react/createElement DontUpdate
+                       #js {:change_count change-count
+                            :children_thunk children-thunk}))
 
 (defn wrangle-inital-data [this]
   (let [data (or (:initial-data (get-props this :card)) {})]
@@ -366,15 +366,15 @@
   (componentWillUnmount
    [this]
    (when-let [node (ref->node this (get-state this :unique_id))]
-     (js/ReactDOM.unmountComponentAtNode node)))
+     (react-dom/unmountComponentAtNode node)))
   (componentDidMount [this] (render-into-dom this))
   (render
    [this]
    (if (html-env?)
-     (js/React.createElement "div"
+     (react/createElement "div"
       #js { :className "com-rigsomelight-devcards-dom-node" :ref (get-state this :unique_id)}
       "Card has not mounted DOM node.")
-     (js/React.createElement "div" nil "Card has not mounted DOM node."))))
+     (react/createElement "div" nil "Card has not mounted DOM node."))))
 
 (defn booler? [key opts]
   (let [x (get opts key)]
@@ -477,7 +477,7 @@
   (let [errors (validate-card-options card-options)]
     (if (not-empty errors)
       (render-errors card-options errors)
-      (js/React.createElement DevcardBase #js { :card (add-environment-defaults card-options) }))))
+      (react/createElement DevcardBase #js { :card (add-environment-defaults card-options) }))))
 
 (defrecord IdentityOptions [obj]
   IDevcardOptions
@@ -528,9 +528,9 @@
 ;; keep
 (defn- dom-node* [node-fn]
   (fn [data-atom owner]
-     (js/React.createElement DomComponent
-                             #js {:node_fn   node-fn
-                                  :data_atom data-atom})))
+     (react/createElement DomComponent
+                          #js {:node_fn   node-fn
+                               :data_atom data-atom})))
 
 ;; devcard protocol that takes a devcard and returns a devcard
 
@@ -733,8 +733,8 @@
 
 ;; keep
 (defn- hist-recorder* [data-atom]
-  (js/React.createElement HistoryComponent
-                         #js { :data_atom data-atom :key "devcards-history-control-bar"}))
+  (react/createElement HistoryComponent
+                       #js { :data_atom data-atom :key "devcards-history-control-bar"}))
 
 ;; Testing via cljs.test
 (comment
@@ -789,14 +789,14 @@
    m
    (sab/html
     [:div
-     (js/React.createElement CodeHighlight #js {:code (utils/pprint-code expected)
-                                                :lang "clojure"})
+     (react/createElement CodeHighlight #js {:code (utils/pprint-code expected)
+                                             :lang "clojure"})
      (when (= type :fail)
        (sab/html [:div {:style {:marginTop "5px"}}
                   [:div {:style {:position "absolute" :fontSize "0.9em"}} "▶"]
                   [:div {:style {:marginLeft "20px"}}
-                   (js/React.createElement CodeHighlight #js {:code (utils/pprint-code actual)
-                                                              :lang "clojure"})]]))])))
+                   (react/createElement CodeHighlight #js {:code (utils/pprint-code actual)
+                                                           :lang "clojure"})]]))])))
 
 (defmethod test-render :pass [m]
   (render-pass-fail m))
@@ -968,9 +968,9 @@
     IDevcard
     (-devcard [this devcard-opts]
       (let [path (:path devcards.system/*devcard-data*)]
-        (js/React.createElement TestDevcard
-                                #js {:test_thunks test-thunks
-                                     :path path})))))
+        (react/createElement TestDevcard
+                             #js {:test_thunks test-thunks
+                                  :path path})))))
 
 ;; render namespace to string
 
@@ -998,6 +998,7 @@
     (println "Adding base card options!" (prn-str  base-card-options))
     (swap! dev/app-state update-in [:base-card-options] (fn [opts] (merge opts base-card-options)))))
 
+;; deprecated
 (defn ^:export render-namespace-to-string [ns-symbol]
   (when-let [card (get-cards-for-ns ns-symbol)]
     (merge-front-matter-options! ns-symbol)
@@ -1011,7 +1012,7 @@
 
 (defn render-ns [ns-symbol app-state]
   (when-let [card (get-cards-for-ns ns-symbol)]
-    (js/ReactDOM.render
+    (react-dom/render
      (sab/html
       [:div.com-rigsomelight-devcards-base.com-rigsomelight-devcards-string-render
        (dev/render-cards (dev/display-cards card) app-state)])

src/devcards/system.cljs

@@ -315,8 +315,8 @@
 
 (defn renderer [state-atom]
   #_(prn "Rendering")
-  (js/ReactDOM.render
-   (js/React.createElement DevcardsRoot)
+  (react-dom/render
+   (react/createElement DevcardsRoot)
    #_(sab/html [:div
               (main-template state-atom)
               #_(edn-rend/html-edn @state-atom)])
@@ -406,8 +406,8 @@
 (defn start-ui-with-renderer [channel renderer]
   (defonce devcards-ui-setup
     (do
-      (when (exists? js/React.initializeTouchEvents)
-        (js/React.initializeTouchEvents true))
+      (when (exists? react/initializeTouchEvents)
+        (react/initializeTouchEvents true))
       (go
         (<! (load-data-from-channel! channel))
 
@@ -429,8 +429,8 @@
 (defn start-ui [channel]
   (defonce devcards-ui-setup
     (do
-      (when (exists? js/React.initializeTouchEvents)
-        (js/React.initializeTouchEvents true))
+      (when (exists? react/initializeTouchEvents)
+        (react/initializeTouchEvents true))
       (render-base-if-necessary!)
       (go
         ;; initial load
@@ -490,7 +490,7 @@
 </svg>")
 
 (defn cljs-logo []
-  (js/React.createElement "span"
+  (react/createElement "span"
     #js {:key "cljs-logo"
          :dangerouslySetInnerHTML
          #js {:__html cljs-logo-svg}}))

src/devcards/util/utils.clj

@@ -18,17 +18,17 @@
         constructor-fn (if constructor-fn
                          `(fn [props#]
                             (cljs.core/this-as this#
-                              (.call js/React.Component this# props#)
+                              (.call js/devcards.util.utils.react_holder.Component this# props#)
                               (.call ~constructor-fn this# props#)
                               this#))
                          `(fn [props#]
                             (cljs.core/this-as this#
-                              (.call js/React.Component this# props#)
+                              (.call js/devcards.util.utils.react_holder.Component this# props#)
                               this#)))
         body (->> body
                   (remove #(= 'constructor (first %))))]
     `(let [ctor# ~constructor-fn]
-       (goog.inherits ctor# js/React.Component)
+       (goog.inherits ctor# js/devcards.util.utils.react_holder.Component)
        (cljs.core/specify! (.-prototype ctor#)
          ~'Object
          ~@body)

src/devcards/util/utils.cljs

@@ -1,10 +1,14 @@
 (ns devcards.util.utils
   (:require
    [goog.object :as gobj]
-   [cljs.pprint :as pprint])
+   [cljs.pprint :as pprint]
+   [react])
   (:require-macros
    [devcards.util.utils]))
 
+;; this is a reference
+(def react-holder react)
+
 (defn html-env? []
   (if-let [doc js/goog.global.document]
     (gobj/get doc "write")))