Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
wants to merge 1 commit into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.org
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@
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
=render-static= functions from the =sablono.server= namespace you
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
Expand Down
23 changes: 12 additions & 11 deletions benchmark/sablono/benchmark.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]]
Expand All @@ -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])))
Expand All @@ -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])))
Expand All @@ -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])))
Expand All @@ -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 []
Expand All @@ -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"}))])))
Expand All @@ -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"}))])))
Expand All @@ -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])))
Expand Down
26 changes: 13 additions & 13 deletions project.clj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
12 changes: 7 additions & 5 deletions src/sablono/interpreter.cljc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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]
Expand All @@ -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
Expand All @@ -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))
Expand Down Expand Up @@ -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)
Expand Down
7 changes: 4 additions & 3 deletions src/sablono/server.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)))
2 changes: 1 addition & 1 deletion src/sablono/util.cljc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading