Unified React require

package.json

@@ -1,7 +1,11 @@
 {
     "dependencies": {
-        "react": "^15.2.1",
-        "react-dom": "^15.2.1"
+        "browser-resolve": "^1.11.2",
+        "create-react-class": "^15.5.3",
+        "module-deps": "^4.1.1",
+        "react": "^15.5.3",
+        "react-dom": "^15.5.3",
+        "resolve": "^1.3.3"
     },
     "scripts": {
         "bundle": "webpack && NODE_ENV=production webpack -p"

project.clj

@@ -1,13 +1,14 @@
-(defproject reagent "0.7.0"
+(defproject reagent "0.8.0-SNAPSHOT"
   :url "http://github.com/reagent-project/reagent"
   :license {:name "MIT"}
   :description "A simple ClojureScript interface to React"
 
   :dependencies [[org.clojure/clojure "1.8.0"]
-                 [org.clojure/clojurescript "1.9.655"]
-                 [cljsjs/react-dom "15.5.4-0"]
-                 [cljsjs/react-dom-server "15.5.4-0"]
-                 [cljsjs/create-react-class "15.5.3-0"]]
+                 [org.clojure/clojurescript "1.9.854"]
+                 ;; If :npm-deps enabled, these are used only for externs
+                 [cljsjs/react-dom "15.6.1-1"]
+                 [cljsjs/react-dom-server "15.6.1-1"]
+                 [cljsjs/create-react-class "15.6.0-1"]]
 
   :plugins [[lein-cljsbuild "1.1.6"]
             [lein-codox "0.10.3"]]
@@ -24,8 +25,8 @@
                                        :compiler
                                        {:main "reagenttest.runtests"}}}}}
 
-             :fig [{:dependencies [[figwheel "0.5.10"]]
-                    :plugins [[lein-figwheel "0.5.10"]]
+             :fig [{:dependencies [[figwheel "0.5.11"]]
+                    :plugins [[lein-figwheel "0.5.11"]]
                     :source-paths ["demo"] ;; for lighttable
                     :resource-paths ["site" "outsite"]
                     :figwheel {:css-dirs ["site/public/css"]}
@@ -93,7 +94,14 @@
                                        "examples/geometry/src"]
                         :compiler {:parallel-build true
                                    :main "reagentdemo.core"
-                                   :output-to "outsite/public/js/main.js"}}}}
+                                   :output-to "outsite/public/js/main.js"
+                                   :language-in :ecmascript6
+                                   :language-out :ecmascript3
+                                   ;; Add process.env.NODE_ENV preload
+                                   :shim-process true
+                                   :npm-deps {:react "15.6.1"
+                                              :react-dom "15.6.1"
+                                              :create-react-class "15.6.0"}}}}}
 
   :figwheel {:http-server-root "public" ;; assumes "resources"
              :repl false})

src/reagent/core.cljs

@@ -1,7 +1,8 @@
 (ns reagent.core
   (:require-macros [reagent.core])
   (:refer-clojure :exclude [partial atom flush])
-  (:require [reagent.impl.template :as tmpl]
+  (:require [react :as react]
+            [reagent.impl.template :as tmpl]
             [reagent.impl.component :as comp]
             [reagent.impl.util :as util]
             [reagent.impl.batching :as batch]
@@ -15,8 +16,6 @@
 
 (def is-client util/is-client)
 
-(def react util/react)
-
 (defn create-element
   "Create a native React element, by calling React.createElement directly.
 
@@ -34,13 +33,13 @@
    (create-element type nil))
   ([type props]
    (assert-js-object props)
-   ($ react createElement type props))
+   (react/createElement type props))
   ([type props child]
    (assert-js-object props)
-   ($ react createElement type props child))
+   (react/createElement type props child))
   ([type props child & children]
    (assert-js-object props)
-   (apply ($ react :createElement) type props child children)))
+   (apply react/createElement type props child children)))
 
 (defn as-element
   "Turns a vector of Hiccup syntax into a React element. Returns form

src/reagent/dom.cljs

@@ -1,5 +1,5 @@
 (ns reagent.dom
-  (:require [cljsjs.react.dom]
+  (:require [react-dom :as react-dom]
             [reagent.impl.util :as util]
             [reagent.impl.template :as tmpl]
             [reagent.impl.batching :as batch]
@@ -9,31 +9,21 @@
 
 (defonce ^:private imported nil)
 
-(defn module []
-  (cond
-    (some? imported) imported
-    (exists? js/ReactDOM) (set! imported js/ReactDOM)
-    (exists? js/require) (or (set! imported (js/require "react-dom"))
-                             (throw (js/Error. "require('react-dom') failed")))
-    :else
-    (throw (js/Error. "js/ReactDOM is missing"))))
-
-
 (defonce ^:private roots (atom {}))
 
 (defn- unmount-comp [container]
   (swap! roots dissoc container)
-  ($ (module) unmountComponentAtNode container))
+  (react-dom/unmountComponentAtNode container))
 
 (defn- render-comp [comp container callback]
   (binding [util/*always-update* true]
-    (->> ($ (module) render (comp) container
-            (fn []
-              (binding [util/*always-update* false]
-                (swap! roots assoc container [comp container])
-                (batch/flush-after-render)
-                (if (some? callback)
-                  (callback))))))))
+    (react-dom/render (comp) container
+      (fn []
+        (binding [util/*always-update* false]
+          (swap! roots assoc container [comp container])
+          (batch/flush-after-render)
+          (if (some? callback)
+            (callback)))))))
 
 (defn- re-render-component [comp container]
   (render-comp comp container nil))
@@ -59,7 +49,7 @@
 (defn dom-node
   "Returns the root DOM node of a mounted component."
   [this]
-  ($ (module) findDOMNode this))
+  (react-dom/findDOMNode this))
 
 (set! tmpl/find-dom-node dom-node)
 

src/reagent/dom/server.cljs

@@ -1,33 +1,22 @@
 (ns reagent.dom.server
-  (:require [cljsjs.react.dom.server]
+  (:require ["react-dom/server" :as dom-server]
             [reagent.impl.util :as util]
             [reagent.impl.template :as tmpl]
             [reagent.ratom :as ratom]
             [reagent.interop :refer-macros [$ $!]]))
 
 (defonce ^:private imported nil)
 
-(defn module []
-  (cond
-    (some? imported) imported
-    (exists? js/ReactDOMServer) (set! imported js/ReactDOMServer)
-    (exists? js/require) (or (set! imported (js/require "react-dom/server"))
-                             (throw (js/Error.
-                                     "require('react-dom/server') failed")))
-    :else
-    (throw (js/Error. "js/ReactDOMServer is missing"))))
-
-
 (defn render-to-string
   "Turns a component into an HTML string."
   [component]
   (ratom/flush!)
   (binding [util/*non-reactive* true]
-    ($ (module) renderToString (tmpl/as-element component))))
+    (dom-server/renderToString (tmpl/as-element component))))
 
 (defn render-to-static-markup
   "Turns a component into an HTML string, without data-react-id attributes, etc."
   [component]
   (ratom/flush!)
   (binding [util/*non-reactive* true]
-    ($ (module) renderToStaticMarkup (tmpl/as-element component))))
+    (dom-server/renderToStaticMarkup (tmpl/as-element component))))

src/reagent/impl/component.cljs

@@ -1,5 +1,7 @@
 (ns reagent.impl.component
-  (:require [reagent.impl.util :as util]
+  (:require [create-react-class :as create-react-class]
+            [react :as react]
+            [reagent.impl.util :as util]
             [reagent.impl.batching :as batch]
             [reagent.ratom :as ratom]
             [reagent.interop :refer-macros [$ $!]]
@@ -49,7 +51,7 @@
     (if-some [v ($ p :argv)]
       (extract-children v)
       (->> ($ p :children)
-           ($ util/react Children.toArray)
+           (react/Children.toArray)
            (into [])))))
 
 (defn ^boolean reagent-class? [c]
@@ -263,7 +265,7 @@
   {:pre [(map? body)]}
   (->> body
        cljsify
-       util/create-class))
+       create-react-class))
 
 (defn component-path [c]
   (let [elem (some-> (or (some-> c ($ :_reactInternalInstance))

src/reagent/impl/template.cljs

@@ -1,5 +1,6 @@
 (ns reagent.impl.template
-  (:require [clojure.string :as string]
+  (:require [react :as react]
+            [clojure.string :as string]
             [clojure.walk :refer [prewalk]]
             [reagent.impl.util :as util :refer [is-client]]
             [reagent.impl.component :as comp]
@@ -251,7 +252,7 @@
         jsprops #js{:argv v}]
     (when-some [key (key-from-vec v)]
       ($! jsprops :key key))
-    ($ util/react createElement c jsprops)))
+    (react/createElement c jsprops)))
 
 (defn adapt-react-class [c]
   (doto (->NativeWrapper)
@@ -392,12 +393,12 @@
 (defn make-element [argv comp jsprops first-child]
   (case (- (count argv) first-child)
     ;; Optimize cases of zero or one child
-    0 ($ util/react createElement comp jsprops)
+    0 (react/createElement comp jsprops)
 
-    1 ($ util/react createElement comp jsprops
+    1 (react/createElement comp jsprops
           (as-element (nth argv first-child nil)))
 
-    (.apply ($ util/react :createElement) nil
+    (.apply react/createElement nil
             (reduce-kv (fn [a k v]
                          (when (>= k first-child)
                            (.push a (as-element v)))

src/reagent/impl/util.cljs

@@ -1,22 +1,8 @@
 (ns reagent.impl.util
-  (:require [cljsjs.react]
-            [cljsjs.create-react-class]
-            [reagent.debug :refer-macros [dbg log warn]]
+  (:require [reagent.debug :refer-macros [dbg log warn]]
             [reagent.interop :refer-macros [$ $!]]
             [clojure.string :as string]))
 
-(defonce react
-  (cond (exists? js/React) js/React
-        (exists? js/require) (or (js/require "react")
-                                 (throw (js/Error. "require('react') failed")))
-        :else (throw (js/Error. "js/React is missing"))))
-
-(defonce create-class
-  (cond (exists? js/createReactClass) js/createReactClass
-        (exists? js/require) (or (js/require "create-react-class")
-                                 (throw (js/Error. "require('create-react-class') failed")))
-        :else (throw (js/Error. "js/createReactClass is missing"))))
-
 (def is-client (and (exists? js/window)
                     (-> js/window ($ :document) nil? not)))
 

test/reagenttest/testreagent.cljs

@@ -1,5 +1,6 @@
 (ns reagenttest.testreagent
   (:require [cljs.test :as t :refer-macros [is deftest testing]]
+            [create-react-class :as create-react-class]
             [reagent.ratom :as rv :refer-macros [reaction]]
             [reagent.debug :as debug :refer-macros [dbg println log dev?]]
             [reagent.interop :refer-macros [$ $!]]
@@ -460,7 +461,7 @@
     (is (= (rstr (ae [:div [:div "foo"]]))
            (rstr (ae [:div (ce "div" nil "foo")]))))))
 
-(def ndiv (util/create-class
+(def ndiv (create-react-class
             #js {:displayName "ndiv"
                  :render
                  (fn []
@@ -924,7 +925,7 @@
             comp4 (fn comp4 []
                     (for [i (range 0 1)]
                       [:p "foo"]))
-            nat (util/create-class #js {:render (fn [])})
+            nat (create-react-class #js {:render (fn [])})
             pkg "reagenttest.testreagent."
             stack1 (str "in " pkg "comp1")
             stack2 (str "in " pkg "comp2 > " pkg "comp1")