From ea746d5a29c0d1896d6601ce23ae486095b8866f Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Fri, 18 Aug 2017 21:01:34 +0300 Subject: [PATCH] wip --- README.org | 6 +- benchmark/sablono/benchmark.cljs | 23 ++-- project.clj | 26 ++-- src/sablono/interpreter.cljc | 12 +- src/sablono/server.cljs | 7 +- src/sablono/util.cljc | 2 +- test/sablono/compiler_test.clj | 196 +++++++++++++++---------------- test/sablono/test.cljs | 3 - 8 files changed, 138 insertions(+), 137 deletions(-) diff --git a/README.org b/README.org index 720b715..c606fe8 100644 --- a/README.org +++ b/README.org @@ -16,8 +16,8 @@ provide the dependencies yourself like this: #+BEGIN_SRC clojure :exports code :results silent - [cljsjs/react "15.4.2-2"] - [cljsjs/react-dom "15.4.2-2"] + [cljsjs/react "15.6.1-1"] + [cljsjs/react-dom "15.6.1-1"] #+END_SRC If you want to do server rendering and use the =render= or @@ -25,7 +25,7 @@ need to add the following dependency as well: #+BEGIN_SRC clojure :exports code :results silent - [cljsjs/react-dom-server "15.4.2-2"] + [cljsjs/react-dom-server "15.6.1-1"] #+END_SRC ** Usage diff --git a/benchmark/sablono/benchmark.cljs b/benchmark/sablono/benchmark.cljs index 397ebf8..c246f03 100644 --- a/benchmark/sablono/benchmark.cljs +++ b/benchmark/sablono/benchmark.cljs @@ -1,5 +1,6 @@ (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]] @@ -18,7 +19,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 +33,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 +47,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 +66,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 +92,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 +106,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 +119,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]))) diff --git a/project.clj b/project.clj index 687b88d..f601a1a 100644 --- a/project.clj +++ b/project.clj @@ -1,34 +1,34 @@ -(defproject sablono "0.8.1-SNAPSHOT" +(defproject sablono "0.9.0-SNAPSHOT" :description "Lisp style templating for Facebook's React." :url "http://github.com/r0man/sablono" :author "r0man" :min-lein-version "2.0.0" :license {:name "Eclipse Public License" :url "http://www.eclipse.org/legal/epl-v10.html"} - :dependencies [[org.clojure/clojure "1.9.0-alpha16"] - [org.omcljs/om "1.0.0-alpha48"]] + :dependencies [[org.clojure/clojure "1.9.0-alpha17"] + [org.omcljs/om "1.1.0-SNAPSHOT"]] :profiles {:dev {:dependencies [[criterium "0.4.4"] - [devcards "0.2.3" :exclusions [sablono]] + [devcards "0.3.0-SNAPSHOT" :exclusions [sablono]] [doo "0.1.7"] - [figwheel-sidecar "0.5.10"] + [figwheel-sidecar "0.5.13"] [funcool/tubax "0.2.0"] [org.clojure/test.check "0.9.0"] [perforate-x "0.1.0"] - [reagent "0.6.2"] - [rum "0.10.8" :exclusions [sablono]]] + [reagent "0.8.0-alpha1"] + [rum "0.11.0-SNAPSHOT" :exclusions [sablono]] + [cljsjs/react "15.6.1-1"] + [cljsjs/react-dom "15.6.1-1"] + [cljsjs/react-dom-server "15.6.1-1"]] :node-dependencies [[benchmark "1.0.0"] - [react "15.5.4"] - [react-dom "15.5.4"]] + [react "15.6.1"] + [react-dom "15.6.1"]] :plugins [[lein-cljsbuild "1.1.4"] [lein-doo "0.1.7"] [lein-figwheel "0.5.8"] [lein-npm "0.5.0"] [perforate "0.3.4"]] :resource-paths ["test-resources" "target"]} - :provided {:dependencies [[cljsjs/react "15.6.1-0"] - [cljsjs/react-dom "15.6.1-0"] - [cljsjs/react-dom-server "15.6.1-0"] - [org.clojure/clojurescript "1.9.562"]]} + :provided {:dependencies [[org.clojure/clojurescript "1.9.908"]]} :repl {:dependencies [[com.cemerick/piggieback "0.2.2"]] :repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}}} :aliases {"ci" ["do" diff --git a/src/sablono/interpreter.cljc b/src/sablono/interpreter.cljc index 09bda6d..22c7c3f 100644 --- 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 react-dom]) [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 (react-dom/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 index 75a06a5..c9ccd8a 100644 --- 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 react-dom-server])) (defn render "Render `element` as HTML string." [element] (if element - (js/ReactDOMServer.renderToString element))) + (react-dom-server/renderToString element))) (defn render-static "Render `element` as HTML string, without React internal attributes." [element] (if element - (js/ReactDOMServer.renderToStaticMarkup element))) + (react-dom-server/renderToStaticMarkup element))) diff --git a/src/sablono/util.cljc b/src/sablono/util.cljc index 68c9801..714f41c 100644 --- a/src/sablono/util.cljc +++ b/src/sablono/util.cljc @@ -73,7 +73,7 @@ [type] (if (contains? #{:input :select :textarea} (keyword type)) 'sablono.interpreter/create-element - 'js/React.createElement)) + 'react/createElement)) #?(:cljs (extend-protocol ToString diff --git a/test/sablono/compiler_test.clj b/test/sablono/compiler_test.clj index 96b00dd..856fcf6 100644 --- a/test/sablono/compiler_test.clj +++ b/test/sablono/compiler_test.clj @@ -79,62 +79,62 @@ (prop/for-all [tag (s/gen keyword?)] (=== (eval `(compile [~tag])) - `(js/React.createElement ~(name tag) nil)))) + `(react/createElement ~(name tag) nil)))) (deftest tag-names (testing "basic tags" (are-html - '[:div] '(js/React.createElement "div" nil) - '["div"] '(js/React.createElement "div" nil) - '['div] '(js/React.createElement "div" nil))) + '[:div] '(react/createElement "div" nil) + '["div"] '(react/createElement "div" nil) + '['div] '(react/createElement "div" nil))) (testing "tag syntax sugar" (are-html - '[:div#foo] '(js/React.createElement "div" #j {:id "foo"}) - '[:div.foo] '(js/React.createElement "div" #j {:className "foo"}) + '[:div#foo] '(react/createElement "div" #j {:id "foo"}) + '[:div.foo] '(react/createElement "div" #j {:className "foo"}) '[:div.foo (str "bar" "baz")] '(let* [attrs (str "bar" "baz")] (clojure.core/apply - js/React.createElement "div" + react/createElement "div" (if (clojure.core/map? attrs) (sablono.interpreter/attributes (sablono.normalize/merge-with-class {:class ["foo"]} attrs)) #j {:className "foo"}) (if (clojure.core/map? attrs) nil [(sablono.interpreter/interpret attrs)]))) - '[:div.a.b] '(js/React.createElement "div" #j {:className "a b"}) - '[:div.a.b.c] '(js/React.createElement "div" #j {:className "a b c"}) - '[:div#foo.bar.baz] '(js/React.createElement "div" #j {:id "foo", :className "bar baz"}) - '[:div.jumbotron] '(js/React.createElement "div" #j {:className "jumbotron"})))) + '[:div.a.b] '(react/createElement "div" #j {:className "a b"}) + '[:div.a.b.c] '(react/createElement "div" #j {:className "a b c"}) + '[:div#foo.bar.baz] '(react/createElement "div" #j {:id "foo", :className "bar baz"}) + '[:div.jumbotron] '(react/createElement "div" #j {:className "jumbotron"})))) (deftest tag-contents (testing "empty tags" (are-html - '[:div] '(js/React.createElement "div" nil) - '[:h1] '(js/React.createElement "h1" nil) - '[:script] '(js/React.createElement "script" nil) - '[:text] '(js/React.createElement "text" nil) - '[:a] '(js/React.createElement "a" nil) - '[:iframe] '(js/React.createElement "iframe" nil) - '[:title] '(js/React.createElement "title" nil) - '[:section] '(js/React.createElement "section" nil))) + '[:div] '(react/createElement "div" nil) + '[:h1] '(react/createElement "h1" nil) + '[:script] '(react/createElement "script" nil) + '[:text] '(react/createElement "text" nil) + '[:a] '(react/createElement "a" nil) + '[:iframe] '(react/createElement "iframe" nil) + '[:title] '(react/createElement "title" nil) + '[:section] '(react/createElement "section" nil))) (testing "tags containing text" (are-html - '[:text "Lorem Ipsum"] '(js/React.createElement "text" nil "Lorem Ipsum"))) + '[:text "Lorem Ipsum"] '(react/createElement "text" nil "Lorem Ipsum"))) (testing "contents are concatenated" (are-html '[:div "foo" "bar"] - '(js/React.createElement "div" nil "foo" "bar") + '(react/createElement "div" nil "foo" "bar") '[:div [:p] [:br]] - '(js/React.createElement + '(react/createElement "div" nil - (js/React.createElement "p" nil) - (js/React.createElement "br" nil)))) + (react/createElement "p" nil) + (react/createElement "br" nil)))) (testing "seqs are expanded" (are-html '[:div (list "foo" "bar")] '(let* [attrs (list "foo" "bar")] (clojure.core/apply - js/React.createElement "div" + react/createElement "div" (if (clojure.core/map? attrs) (sablono.interpreter/attributes attrs) nil) @@ -145,37 +145,37 @@ (testing "tags can contain tags" (are-html '[:div [:p]] - '(js/React.createElement + '(react/createElement "div" nil - (js/React.createElement "p" nil)) + (react/createElement "p" nil)) '[:div [:b]] - '(js/React.createElement + '(react/createElement "div" nil - (js/React.createElement "b" nil)) + (react/createElement "b" nil)) '[:p [:span [:a "foo"]]] - '(js/React.createElement + '(react/createElement "p" nil - (js/React.createElement + (react/createElement "span" nil - (js/React.createElement "a" nil "foo")))))) + (react/createElement "a" nil "foo")))))) (deftest tag-attributes (testing "tag with empty attribute map" (are-html - '[:div {}] '(js/React.createElement "div" nil))) + '[:div {}] '(react/createElement "div" nil))) (testing "tag with populated attribute map" (are-html - '[:div {:min "1", :max "2"}] '(js/React.createElement "div" #j {:min "1", :max "2"}) - '[:img {"id" "foo"}] '(js/React.createElement "img" #j {"id" "foo"}) - '[:img {:id "foo"}] '(js/React.createElement "img" #j {:id "foo"}))) + '[:div {:min "1", :max "2"}] '(react/createElement "div" #j {:min "1", :max "2"}) + '[:img {"id" "foo"}] '(react/createElement "img" #j {"id" "foo"}) + '[:img {:id "foo"}] '(react/createElement "img" #j {:id "foo"}))) (testing "attribute values are escaped" (are-html - '[:div {:id "\""}] '(js/React.createElement "div" #j {:id "\""}))) + '[:div {:id "\""}] '(react/createElement "div" #j {:id "\""}))) (testing "attributes are converted to their DOM equivalents" (are-html - '[:div {:class "classy"}] '(js/React.createElement "div" #j {:className "classy"}) - '[:div {:data-foo-bar "baz"}] '(js/React.createElement "div" #j {:data-foo-bar "baz"}) - '[:label {:for "foo"}] '(js/React.createElement "label" #j {:htmlFor "foo"}))) + '[:div {:class "classy"}] '(react/createElement "div" #j {:className "classy"}) + '[:div {:data-foo-bar "baz"}] '(react/createElement "div" #j {:data-foo-bar "baz"}) + '[:label {:for "foo"}] '(react/createElement "label" #j {:htmlFor "foo"}))) (testing "boolean attributes" (are-html '[:input {:type "checkbox" :checked true}] @@ -184,18 +184,18 @@ '(sablono.interpreter/create-element "input" #j {:checked false, :type "checkbox"}))) (testing "nil attributes" (are-html - '[:span {:class nil} "foo"] '(js/React.createElement "span" #j {:className nil} "foo"))) + '[:span {:class nil} "foo"] '(react/createElement "span" #j {:className nil} "foo"))) (testing "empty attributes" (are-html - '[:span {} "foo"] '(js/React.createElement "span" nil "foo"))) + '[:span {} "foo"] '(react/createElement "span" nil "foo"))) (testing "tag with aria attributes" (are-html [:div {:aria-disabled true}] - '(js/React.createElement "div" #j {:aria-disabled true}))) + '(react/createElement "div" #j {:aria-disabled true}))) (testing "tag with data attributes" (are-html [:div {:data-toggle "modal" :data-target "#modal"}] - '(js/React.createElement "div" #j {:data-toggle "modal", :data-target "#modal"})))) + '(react/createElement "div" #j {:data-toggle "modal", :data-target "#modal"})))) (deftest compiled-tags (testing "tag content can be vars, and vars can be type-hinted with some metadata" @@ -205,7 +205,7 @@ '[:span x] '(let* [attrs x] (clojure.core/apply - js/React.createElement "span" + react/createElement "span" (if (clojure.core/map? attrs) (sablono.interpreter/attributes attrs) nil) @@ -214,40 +214,40 @@ '[:span ^:attrs y] '(let* [attrs y] (clojure.core/apply - js/React.createElement "span" + react/createElement "span" (sablono.interpreter/attributes attrs) nil))))) (testing "tag content can be forms, and forms can be type-hinted with some metadata" (are-html '[:span (str (+ 1 1))] '(let* [attrs (str (+ 1 1))] (clojure.core/apply - js/React.createElement "span" + react/createElement "span" (if (clojure.core/map? attrs) (sablono.interpreter/attributes attrs) nil) (if (clojure.core/map? attrs) nil [(sablono.interpreter/interpret attrs)]))) - [:span ({:foo "bar"} :foo)] '(js/React.createElement "span" nil "bar") + [:span ({:foo "bar"} :foo)] '(react/createElement "span" nil "bar") '[:span ^:attrs (merge {:type "button"} attrs)] '(let* [attrs (merge {:type "button"} attrs)] (clojure.core/apply - js/React.createElement "span" + react/createElement "span" (sablono.interpreter/attributes attrs) nil)))) (testing "attributes can contain vars" (let [id "id"] (are-html - '[:div {:id id}] '(js/React.createElement "div" #j {:id id}) - '[:div {:id id} "bar"] '(js/React.createElement "div" #j {:id id} "bar")))) + '[:div {:id id}] '(react/createElement "div" #j {:id id}) + '[:div {:id id} "bar"] '(react/createElement "div" #j {:id id} "bar")))) (testing "attributes are evaluated" (are-html '[:img {:src (str "/foo" "/bar")}] - '(js/React.createElement "img" #j {:src (str "/foo" "/bar")}) + '(react/createElement "img" #j {:src (str "/foo" "/bar")}) '[:div {:id (str "a" "b")} (str "foo")] - '(js/React.createElement "div" #j {:id (str "a" "b")} (sablono.interpreter/interpret (str "foo"))))) + '(react/createElement "div" #j {:id (str "a" "b")} (sablono.interpreter/interpret (str "foo"))))) (testing "type hints" (let [string "x"] (are-html - '[:span ^String string] '(js/React.createElement "span" nil string)))) + '[:span ^String string] '(react/createElement "span" nil string)))) (testing "values are evaluated only once" (let [times-called (atom 0) foo #(swap! times-called inc)] @@ -261,29 +261,29 @@ [:div {:id (str "item" (:key datum)) :class ["class1" "class2"]} [:span {:class "anchor"} (:name datum)]]] - '(js/React.createElement + '(react/createElement "li" nil - (js/React.createElement + (react/createElement "a" #j {:href (str "#show/" (:key datum))}) - (js/React.createElement + (react/createElement "div" #j {:id (str "item" (:key datum)), :className "class1 class2"} - (js/React.createElement + (react/createElement "span" #j {:className "anchor"} (sablono.interpreter/interpret (:name datum))))))) (deftest test-issue-2-merge-class (are-html '[:div.a {:class (if (true? true) "true" "false")}] - '(js/React.createElement + '(react/createElement "div" #j {:className (sablono.util/join-classes ["a" (if (true? true) "true" "false")])}) '[:div.a.b {:class (if (true? true) ["true"] "false")}] - '(js/React.createElement + '(react/createElement "div" #j {:className (sablono.util/join-classes ["a" "b" (if (true? true) ["true"] "false")])}))) (deftest test-issue-3-recursive-js-literal (are-html '[:div.interaction-row {:style {:position "relative"}}] - '(js/React.createElement "div" #j {:className "interaction-row", :style #j {:position "relative"}})) + '(react/createElement "div" #j {:className "interaction-row", :style #j {:position "relative"}})) (let [username "foo", hidden #(if %1 {:display "none"} {:display "block"})] (are-html '[:ul.nav.navbar-nav.navbar-right.pull-right @@ -291,33 +291,33 @@ [:a.dropdown-toggle {:role "button" :href "#"} (str "Welcome, " username) [:span.caret]] [:ul.dropdown-menu {:role "menu" :style {:left 0}}]]] - '(js/React.createElement + '(react/createElement "ul" #j {:className "nav navbar-nav navbar-right pull-right"} - (js/React.createElement + (react/createElement "li" #j {:style (sablono.interpreter/attributes (hidden (nil? username))) :className "dropdown"} - (js/React.createElement + (react/createElement "a" #j {:href "#", :role "button", :className "dropdown-toggle"} (sablono.interpreter/interpret (str "Welcome, " username)) - (js/React.createElement + (react/createElement "span" #j {:className "caret"})) - (js/React.createElement + (react/createElement "ul" #j {:role "menu", :style #j {:left 0}, :className "dropdown-menu"})))))) (deftest test-issue-22-id-after-class (are-html [:div.well#setup] - '(js/React.createElement "div" #j {:id "setup", :className "well"}))) + '(react/createElement "div" #j {:id "setup", :className "well"}))) (deftest test-issue-25-comma-separated-class (are-html '[:div.c1.c2 "text"] - '(js/React.createElement "div" #j {:className "c1 c2"} "text") + '(react/createElement "div" #j {:className "c1 c2"} "text") '[:div.aa (merge {:class "bb"})] '(let* [attrs (merge {:class "bb"})] (clojure.core/apply - js/React.createElement "div" + react/createElement "div" (if (clojure.core/map? attrs) (sablono.interpreter/attributes (sablono.normalize/merge-with-class {:class ["aa"]} attrs)) @@ -330,7 +330,7 @@ '[:div (count [1 2 3])] '(let* [attrs (count [1 2 3])] (clojure.core/apply - js/React.createElement "div" + react/createElement "div" (if (clojure.core/map? attrs) (sablono.interpreter/attributes attrs) nil) @@ -340,20 +340,20 @@ (deftest test-issue-37-camel-case-style-attrs (are-html '[:div {:style {:z-index 1000}}] - '(js/React.createElement "div" #j {:style #j {:zIndex 1000}}))) + '(react/createElement "div" #j {:style #j {:zIndex 1000}}))) (deftest shorthand-div-forms (are-html [:#test] - '(js/React.createElement "div" #j {:id "test"}) + '(react/createElement "div" #j {:id "test"}) '[:.klass] - '(js/React.createElement "div" #j {:className "klass"}) + '(react/createElement "div" #j {:className "klass"}) '[:#test.klass] - '(js/React.createElement "div" #j {:id "test" :className "klass"}) + '(react/createElement "div" #j {:id "test" :className "klass"}) '[:#test.klass1.klass2] - '(js/React.createElement "div" #j {:id "test" :className "klass1 klass2"}) + '(react/createElement "div" #j {:id "test" :className "klass1 klass2"}) '[:.klass1.klass2#test] - '(js/React.createElement "div" #j {:id "test" :className "klass1 klass2"}))) + '(react/createElement "div" #j {:id "test" :className "klass1 klass2"}))) (deftest test-namespaced-fn-call (are-html @@ -366,7 +366,7 @@ (is (=== (compile [:div (map identity ["A" "B"])]) '(let* [attrs (map identity ["A" "B"])] (clojure.core/apply - js/React.createElement "div" + react/createElement "div" (if (clojure.core/map? attrs) (sablono.interpreter/attributes attrs) nil) @@ -376,15 +376,15 @@ (deftest test-compile-div-with-nested-list (is (=== (compile [:div '("A" "B")]) - '(js/React.createElement "div" nil "A" "B")))) + '(react/createElement "div" nil "A" "B")))) (deftest test-compile-div-with-nested-vector (is (=== (compile [:div ["A" "B"]]) - '(js/React.createElement "div" nil "A" "B"))) + '(react/createElement "div" nil "A" "B"))) (is (=== (compile [:div (vector "A" "B")]) '(let* [attrs (vector "A" "B")] (clojure.core/apply - js/React.createElement "div" + react/createElement "div" (if (clojure.core/map? attrs) (sablono.interpreter/attributes attrs) nil) @@ -394,26 +394,26 @@ (deftest test-class-as-set (is (=== (compile [:div.a {:class #{"a" "b" "c"}}]) - '(js/React.createElement "div" #j {:className "a a b c"})))) + '(react/createElement "div" #j {:className "a a b c"})))) (deftest test-class-as-list (is (=== (compile [:div.a {:class (list "a" "b" "c")}]) - '(js/React.createElement "div" #j {:className (sablono.util/join-classes ["a" (list "a" "b" "c")])})))) + '(react/createElement "div" #j {:className (sablono.util/join-classes ["a" (list "a" "b" "c")])})))) (deftest test-class-as-vector (is (=== (compile [:div.a {:class (vector "a" "b" "c")}]) - '(js/React.createElement + '(react/createElement "div" #j {:className (sablono.util/join-classes ["a" (vector "a" "b" "c")])})))) (deftest test-class-merge-symbol (let [class #{"b"}] (are-html [:div.a {:class class}] - '(js/React.createElement "div" #j {:className "a b"})))) + '(react/createElement "div" #j {:className "a b"})))) (deftest test-issue-90 (is (=== (compile [:div nil (case :a :a "a")]) - '(js/React.createElement + '(react/createElement "div" nil nil (sablono.interpreter/interpret (case :a :a "a")))))) @@ -433,57 +433,57 @@ (deftest test-optimize-let-form (is (=== (compile (let [x "x"] [:div "x"])) - '(let* [x "x"] (js/React.createElement "div" nil "x"))))) + '(let* [x "x"] (react/createElement "div" nil "x"))))) (deftest test-optimize-for-loop (is (=== (compile [:ul (for [n (range 3)] [:li n])]) - '(js/React.createElement + '(react/createElement "ul" nil (into-array (clojure.core/for [n (range 3)] (clojure.core/let [attrs n] (clojure.core/apply - js/React.createElement "li" + react/createElement "li" (if (clojure.core/map? attrs) (sablono.interpreter/attributes attrs) nil) (if (clojure.core/map? attrs) nil [(sablono.interpreter/interpret attrs)])))))))) (is (=== (compile [:ul (for [n (range 3)] [:li ^:attrs n])]) - '(js/React.createElement + '(react/createElement "ul" nil (into-array (clojure.core/for [n (range 3)] (clojure.core/let [attrs n] (clojure.core/apply - js/React.createElement "li" + react/createElement "li" (sablono.interpreter/attributes attrs) nil)))))))) (deftest test-optimize-if (is (=== (compile (if true [:span "foo"] [:span "bar"]) ) '(if true - (js/React.createElement "span" nil "foo") - (js/React.createElement "span" nil "bar"))))) + (react/createElement "span" nil "foo") + (react/createElement "span" nil "bar"))))) (deftest test-issue-115 (is (=== (compile [:a {:id :XY}]) - '(js/React.createElement "a" #j {:id "XY"})))) + '(react/createElement "a" #j {:id "XY"})))) (deftest test-issue-130 (let [css {:table-cell "bg-blue"}] (is (=== (compile [:div {:class (:table-cell css)} [:span "abc"]]) - '(js/React.createElement + '(react/createElement "div" #j {:className (sablono.util/join-classes [(:table-cell css)])} - (js/React.createElement "span" nil "abc")))))) + (react/createElement "span" nil "abc")))))) (deftest test-issue-141-inline (testing "with attributes" (is (=== (compile [:span {} ^:inline (constantly 1)]) - '(js/React.createElement "span" nil (constantly 1))))) + '(react/createElement "span" nil (constantly 1))))) (testing "without attributes" (is (=== (compile [:span ^:inline (constantly 1)]) - '(js/React.createElement "span" nil (constantly 1)))))) + '(react/createElement "span" nil (constantly 1)))))) (deftest test-compile-attributes-non-literal-key (is (=== (compile [:input {(case :checkbox :checkbox :checked :value) "x"}]) @@ -494,7 +494,7 @@ (deftest test-issue-158 (is (=== (compile [:div {:style (merge {:margin-left "2rem"} (when focused? {:color "red"}))}]) - '(js/React.createElement + '(react/createElement "div" #j {:style (sablono.interpreter/attributes (merge {:margin-left "2rem"} (when focused? {:color "red"})))})))) diff --git a/test/sablono/test.cljs b/test/sablono/test.cljs index 552b2d9..151ae01 100644 --- a/test/sablono/test.cljs +++ b/test/sablono/test.cljs @@ -1,9 +1,6 @@ (ns sablono.test (:require [clojure.test.check] [clojure.test.check.generators] - [cljsjs.react] - [cljsjs.react.dom] - [cljsjs.react.dom.server] [tubax.core :as tubax] [sablono.server :as server]))