WIP: Global-exports to require React and support node modules

README.md

@@ -398,7 +398,7 @@ You can access the raw React component by reading the state’s `:rum/react-comp
 ```clojure
 { :did-mount (fn [state]
                (let [comp     (:rum/react-component state)
-                     dom-node (js/ReactDOM.findDOMNode comp)]
+                     dom-node (react-dom/findDOMNode comp)]
                  (set! (.-width (.-style dom-node)) "100px"))
                state) }
 ```
@@ -464,7 +464,7 @@ To define child context, specify a `:child-context` function taking state and re
                       (let [[color] (:rum/args state)]
                         { :color color }))
                     :class-properties
-                    { :childContextTypes {:color js/React.PropTypes.string} } }
+                    { :childContextTypes {:color prop-types/string} } }
   [color child]
   child)
 ```

examples/rum/examples/context.cljs

@@ -1,5 +1,6 @@
 (ns rum.examples.context
   (:require
+    [prop-types :as prop-types]
     [rum.core :as rum]
     [rum.examples.core :as core]))
 
@@ -10,7 +11,7 @@
 ;; value being set by an ancestor component.
 
 
-(rum/defcc rum-context-comp < { :class-properties { :contextTypes {:color js/React.PropTypes.string}}}
+(rum/defcc rum-context-comp < { :class-properties { :contextTypes {:color prop-types/string}}}
   [comp]
   [:span
     { :style { :color (.. comp -context -color) }}
@@ -20,7 +21,7 @@
 ;; Assume the following component is from our source code.
 (def color-theme
   { :child-context (fn [state] {:color @core/*color}) 
-    :class-properties { :childContextTypes {:color js/React.PropTypes.string} } })
+    :class-properties { :childContextTypes {:color prop-types/string} } })
 
 
 (rum/defc context < color-theme []

examples/rum/examples/form_validation.cljs

@@ -1,5 +1,6 @@
 (ns rum.examples.form-validation
   (:require
+    [react :as react]
     [rum.core :as rum]
     [rum.examples.core :as core]))
 
@@ -27,7 +28,7 @@
 
 (rum/defcs restricting-input-native < rum/reactive [state ref f]
   (let [comp (:rum/react-component state)]
-    (js/React.createElement "input"
+    (react/createElement "input"
       #js {:type "text"
            :style #js {:width 170}
            :value (rum/react ref)

project.clj

@@ -1,15 +1,16 @@
-(defproject rum "0.10.8"
+(defproject rum "0.11.0-SNAPSHOT"
   :description  "ClojureScript wrapper for React"
   :license      { :name "Eclipse"
                   :url  "http://www.eclipse.org/legal/epl-v10.html" }
   :url          "https://github.com/tonsky/rum"
 
   :dependencies
-  [[org.clojure/clojure        "1.7.0"   :scope "provided"]
-   [org.clojure/clojurescript  "1.7.228" :scope "provided"]
-   [cljsjs/react               "15.4.2-0"]
-   [cljsjs/react-dom           "15.4.2-0"]
-   [sablono                    "0.7.7"]]
+  [[org.clojure/clojure        "1.8.0"   :scope "provided"]
+   [org.clojure/clojurescript  "1.9.908" :scope "provided"]
+   [cljsjs/react               "15.6.1-1"]
+   [cljsjs/react-dom           "15.6.1-1"]
+   [cljsjs/create-react-class  "15.6.0-2"]
+   [sablono                    "0.9.0-SNAPSHOT"]]
 
   :global-vars
   { *warn-on-reflection* true }
@@ -18,7 +19,8 @@
 
   :profiles {
     :dev  { :source-paths ["examples"]
-            :dependencies [[cljsjs/react-dom-server "15.4.2-0"]
+            :dependencies [[cljsjs/react-dom-server "15.6.1-1"]
+                           [cljsjs/prop-types "15.5.10-0"]
                            [clj-diffmatchpatch "0.0.9.3" :exclusions [org.clojure/clojure]]] }
     :perf { :source-paths ["perf"]
             :dependencies 

src/rum/core.cljs

@@ -2,8 +2,9 @@
   (:refer-clojure :exclude [ref])
   (:require-macros rum.core)
   (:require
-    [cljsjs.react]
-    [cljsjs.react.dom]
+    [react :as react]
+    [react-dom :as react-dom]
+    [create-react-class :as create-react-class]
     [sablono.core]
     [rum.cursor :as cursor]
     [rum.util :as util :refer [collect collect* call-all]]
@@ -102,7 +103,7 @@
       (merge class-props)
       (->> (util/filter-vals some?))
       (clj->js)
-      (js/React.createClass))))
+      (create-react-class))))
 
 
 (defn- build-ctor [render mixins display-name]
@@ -112,10 +113,10 @@
                  (fn [& args]
                    (let [props #js { ":rum/initial-state" { :rum/args args }
                                      "key" (apply key-fn args) }]
-                     (js/React.createElement class props)))
+                     (react/createElement class props)))
                  (fn [& args]
                    (let [props #js { ":rum/initial-state" { :rum/args args }}] 
-                     (js/React.createElement class props))))]
+                     (react/createElement class props))))]
     (with-meta ctor { :rum/class class })))
 
 
@@ -125,7 +126,7 @@
                   (apply render-body (aget props ":rum/args")))
           _     (aset class "displayName" display-name)
           ctor  (fn [& args]
-                  (js/React.createElement class #js { ":rum/args" args }))]
+                  (react/createElement class #js { ":rum/args" args }))]
       (with-meta ctor { :rum/class class }))
     (let [render (fn [state] [(apply render-body (:rum/args state)) state])]
       (build-ctor render mixins display-name))))
@@ -153,9 +154,11 @@
 
 
 (def ^:private batch
-  (or (when (exists? js/ReactNative) js/ReactNative.unstable_batchedUpdates)
-      (when (exists? js/ReactDOM) js/ReactDOM.unstable_batchedUpdates)
-      (fn [f a] (f a))))
+  (or 
+    ; FIXME:
+    ; (when (exists? js/ReactNative) js/ReactNative.unstable_batchedUpdates)
+    (when (exists? react-dom) react-dom/unstable_batchedUpdates)
+    (fn [f a] (f a))))
 
 
 (def ^:private empty-queue [])
@@ -185,34 +188,34 @@
 (defn mount
   "Add component to the DOM tree. Idempotent. Subsequent mounts will just update component"
   [component node]
-  (js/ReactDOM.render component node)
+  (react-dom/render component node)
   nil)
 
 
 (defn unmount
   "Removes component from the DOM tree"
   [node]
-  (js/ReactDOM.unmountComponentAtNode node))
+  (react-dom/unmountComponentAtNode node))
 
 
 ;; initialization
 
 (defn with-key
   "Adds React key to component"
   [component key]
-  (js/React.cloneElement component #js { "key" key } nil))
+  (react/cloneElement component #js { "key" key } nil))
 
 
 (defn with-ref
   "Adds React ref (string or callback) to component"
   [component ref]
-  (js/React.cloneElement component #js { "ref" ref } nil))
+  (react/cloneElement component #js { "ref" ref } nil))
 
 
 (defn dom-node
   "Given state, returns top-level DOM node. Can’t be called during render"
   [state]
-  (js/ReactDOM.findDOMNode (:rum/react-component state)))
+  (react-dom/findDOMNode (:rum/react-component state)))
 
 
 (defn ref
@@ -224,7 +227,7 @@
 (defn ref-node
   "Given state and ref handle, returns DOM node associated with ref"
   [state key]
-  (js/ReactDOM.findDOMNode (ref state (name key))))
+  (react-dom/findDOMNode (ref state (name key))))
 
 
 ;; static mixin

test/rum/test/server_render.cljc

@@ -7,7 +7,7 @@
              [clojure.java.io :as io]
              [clj-diffmatchpatch :as diff]]
       :cljs [[cljs.test :refer-macros [deftest is are testing]]
-             [cljsjs.react.dom.server]])))
+             ["react-dom/server" :as react-dom-server]])))
 
 (rum/defc comp-simple []
   [:div
@@ -256,7 +256,7 @@
   [write-fn]
   (enable-console-print!)
   (doseq [[name ctor] components
-          :let [html (js/ReactDOMServer.renderToString (ctor))
+          :let [html (react-dom-server/renderToString (ctor))
                 path (str render-dir "/" name ".html")]]
     (println "  writing" path)
     (write-fn path html))))