Require react

r0man · Dec 30, 2018 · 85bfd81 · 85bfd81
1 parent ac75557
commit 85bfd81
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 178 deletions.
diff --git a/benchmark/sablono/benchmark.cljs b/benchmark/sablono/benchmark.cljs
@@ -1,15 +1,13 @@
 (ns sablono.benchmark
   (:require [perforate-x.core :as perf :refer [defgoal defcase]]
+            [react :as React]
             [reagent.impl.template :as reagent]
             [sablono.core :as html :refer-macros [html]]
-            [sablono.server :refer [render-static]]
-            [cljs.nodejs :as node]))
-
-(def dom-server
-  (node/require "react-dom/server"))
+            [sablono.server :refer [render-static]]))
 
 (defn render [x]
-  (dom-server.renderToStaticMarkup x))
+  (render-static x))
+
 
 (defgoal :compile-tag-only
   "Render element with tag only")
@@ -18,7 +16,7 @@
   #(render (html [:div])))
 
 (defcase :compile-tag-only :react []
-  #(render (js/React.createElement "div")))
+  #(render (React/createElement "div")))
 
 (defcase :compile-tag-only :reagent []
   #(render (reagent/as-element [:div])))
@@ -32,7 +30,7 @@
   #(render (html [:div.x])))
 
 (defcase :compile-class-attribute :react []
-  #(render (js/React.createElement "div" #js {:className "x"})))
+  #(render (React/createElement "div" #js {:className "x"})))
 
 (defcase :compile-class-attribute :reagent []
   #(render (reagent/as-element [:div.x])))
@@ -46,7 +44,7 @@
   #(render (html [:div#x.y])))
 
 (defcase :compile-class-and-id-attributes :react []
-  #(render (js/React.createElement "div" #js {:className "y" :id "x"})))
+  #(render (React/createElement "div" #js {:className "y" :id "x"})))
 
 (defcase :compile-class-and-id-attributes :reagent []
   #(render (reagent/as-element [:div#x.y])))
@@ -65,13 +63,13 @@
                    " text."]])))
 
 (defcase :compile-nested-literals :react []
-  #(render (js/React.createElement
+  #(render (React/createElement
             "div" nil
-            (js/React.createElement "h3" nil "I am a component!")
-            (js/React.createElement
+            (React/createElement "h3" nil "I am a component!")
+            (React/createElement
              "p" #js {:className "someclass"}
-             "I have " (js/React.createElement "strong" nil "bold")
-             (js/React.createElement "span" #js {:style #js {:color "red"}} " and red")
+             "I have " (React/createElement "strong" nil "bold")
+             (React/createElement "span" #js {:style #js {:color "red"}} " and red")
              " text."))))
 
 (defcase :compile-nested-literals :reagent []
@@ -91,7 +89,7 @@
   #(render (html [:div ((constantly {:class "x"}))])))
 
 (defcase :interpret-attributes :react []
-  #(render (js/React.createElement "div" ((constantly #js {:className "x"})))))
+  #(render (React/createElement "div" ((constantly #js {:className "x"})))))
 
 (defcase :interpret-attributes :reagent []
   #(render (reagent/as-element [:div ((constantly {:class "x"}))])))
@@ -105,7 +103,7 @@
   #(render (html [:div ^:attrs ((constantly {:class "x"}))])))
 
 (defcase :interpret-hinted-attributes :react []
-  #(render (js/React.createElement "div" ((constantly #js {:className "x"})))))
+  #(render (React/createElement "div" ((constantly #js {:className "x"})))))
 
 (defcase :interpret-hinted-attributes :reagent []
   #(render (reagent/as-element [:div ((constantly {:class "x"}))])))
@@ -118,7 +116,7 @@
   #(render (html [:div {:class "a"} "b" 1 2 3])))
 
 (defcase :compile-attributes-children :react []
-  #(render (js/React.createElement "div" #js {:className "a"} "b" 1 2 3)))
+  #(render (React/createElement "div" #js {:className "a"} "b" 1 2 3)))
 
 (defcase :compile-attributes-children :reagent []
   #(render (reagent/as-element [:div {:class "a"} "b" 1 2 3])))
@@ -133,11 +131,11 @@
                   (when true [:div [:div]])])))
 
 (defcase :compile-when-form :react []
-  #(render (js/React.createElement
+  #(render (React/createElement
             "div" #js {:className "a"}
             (when true
-              (js/React.createElement
-               "div" nil (js/React.createElement "div"))))))
+              (React/createElement
+               "div" nil (React/createElement "div"))))))
 
 (defcase :compile-when-form :reagent []
   #(render (reagent/as-element

diff --git a/project.clj b/project.clj
@@ -16,7 +16,7 @@
                                   [funcool/tubax "0.2.0"]
                                   [org.clojure/test.check "0.9.0"]
                                   [perforate-x "0.1.0"]
-                                  [reagent "0.7.0"]
+                                  [reagent "0.8.1"]
                                   [rum "0.11.3" :exclusions [sablono]]]
                    :plugins [[lein-cljsbuild "1.1.7"]
                              [lein-doo "0.1.11"]
@@ -28,8 +28,8 @@
                                        [cljsjs/react-dom "16.6.0-0"]
                                        [cljsjs/react-dom-server "16.6.0-0"]
                                        [org.clojure/clojurescript "1.10.439"]]}
-             :repl {:dependencies [[nrepl/piggieback "0.2.2"]]
-                    :repl-options {:nrepl-middleware [nrepl.piggieback/wrap-cljs-repl]}}}
+             :repl {:dependencies [[cider/piggieback "0.3.10"]]
+                    :repl-options {:nrepl-middleware [cider.piggieback/wrap-cljs-repl]}}}
   :aliases {"benchmark" ["doo" "node" "benchmark" "once"]
             "ci" ["do" ["clean"] ["test"] ["test.nashorn"] ["test.node"] ["test.phantom"] ["benchmark"]]
             "deploy" ["do" "clean," "deploy" "clojars"]
@@ -57,7 +57,8 @@
                  :aot-cache true
                  :main sablono.benchmark
                  :npm-deps
-                 {:benchmark "1.0.0"
+                 {:benchmark "2.1.4"
+                  :create-react-class "15.6.3"
                   :react "16.7.0"
                   :react-dom "16.7.0"}
                  :install-deps true
@@ -74,7 +75,7 @@
                  :aot-cache true
                  :main sablono.test.runner
                  :npm-deps
-                 {:benchmark "1.0.0"
+                 {:benchmark "2.1.4"
                   :react "16.7.0"
                   :react-dom "16.7.0"}
                  :install-deps true

diff --git a/src/sablono/compiler.clj b/src/sablono/compiler.clj
@@ -57,7 +57,7 @@
   [type]
   (if (contains? #{:input :select :textarea} (keyword type))
     'sablono.interpreter/create-element
-    'js/React.createElement))
+    'sablono.core/create-element))
 
 (defn compile-merge-attrs [attrs-1 attrs-2]
   (let [empty-attrs? #(or (nil? %1) (and (map? %1) (empty? %1)))]
@@ -76,11 +76,11 @@
               (sablono.normalize/merge-with-class ~attrs-1 ~attrs-2)))))
 
 (defn- compile-tag
-  "Replace fragment syntax (`:*`) by 'js/React.Fragment, otherwise the
+  "Replace fragment syntax (`:*`) by 'React.Fragment, otherwise the
   name of the tag"
   [tag]
   (if (fragment? tag)
-    'js/React.Fragment
+    'sablono.core/fragment
     (name tag)))
 
 (defn compile-react-element

diff --git a/src/sablono/core.cljs b/src/sablono/core.cljs
@@ -5,7 +5,16 @@
             [sablono.normalize :as normalize]
             [sablono.util :refer [as-str to-uri]]
             [sablono.interpreter :as interpreter]
-            [goog.dom :as dom]))
+            [goog.dom :as dom]
+            [react :as React]))
+
+(def create-element
+  "The React.js create element function."
+  React/createElement)
+
+(def fragment
+  "The React.js Fragment."
+  React/Fragment)
 
 (defn wrap-attrs
   "Add an optional attribute argument to a function that returns a element vector."

diff --git a/src/sablono/interpreter.cljc b/src/sablono/interpreter.cljc
@@ -1,6 +1,8 @@
 (ns sablono.interpreter
   (:require #?(:clj [om.dom :as dom])
             #?(:cljs [goog.object :as object])
+            #?(:cljs [react :as React])
+            #?(:cljs [react-dom :as ReactDOM])
             [clojure.string :as str]
             [clojure.string :refer [blank? join]]
             [sablono.normalize :as normalize]
@@ -30,9 +32,9 @@
                             (->> #js {:onChange (goog.bind (object/get this "onChange") this)}
                                  (object/extend state props))
                             state))
-                    (.call js/React.Component this props)))]
+                    (.call React/Component this props)))]
        (set! (.-displayName ctor) (str "wrapped-" element))
-       (goog.inherits ctor js/React.Component)
+       (goog.inherits ctor React/Component)
        (specify! (.-prototype ctor)
          Object
          (onChange [this event]
@@ -44,7 +46,7 @@
 
          (componentWillReceiveProps [this new-props]
            (let [state-value (object/getValueByKeys this "state" property)
-                 element-value (object/get (js/ReactDOM.findDOMNode this) property)]
+                 element-value (object/get (ReactDOM/findDOMNode this) property)]
              ;; On IE, onChange event might come after actual value of
              ;; an element have changed. We detect this and render
              ;; element as-is, hoping that next onChange will
@@ -62,7 +64,7 @@
                (update-state this new-props property (object/get new-props property)))))
 
          (render [this]
-           (js/React.createElement element (.-state this))))
+           (React/createElement element (.-state this))))
        ctor)))
 
 #?(:cljs (def wrapped-input))
@@ -119,7 +121,7 @@
             :children children
             :react-key nil
             :tag type})
-     :cljs (apply js/React.createElement (element-class type props) props children)))
+     :cljs (apply React/createElement (element-class type props) props children)))
 
 (defn attributes [attrs]
   #?(:clj (-> (util/html-to-dom-attrs attrs)

diff --git a/src/sablono/server.cljs b/src/sablono/server.cljs
@@ -1,13 +1,14 @@
-(ns sablono.server)
+(ns sablono.server
+  (:require ["react-dom/server" :as ReactDOMServer]))
 
 (defn render
   "Render `element` as HTML string."
   [element]
   (if element
-    (js/ReactDOMServer.renderToString element)))
+    (ReactDOMServer/renderToString element)))
 
 (defn render-static
   "Render `element` as HTML string, without React internal attributes."
   [element]
   (if element
-    (js/ReactDOMServer.renderToStaticMarkup element)))
+    (ReactDOMServer/renderToStaticMarkup element)))