mirror of https://github.com/status-im/reagent.git
362 lines
12 KiB
Clojure
362 lines
12 KiB
Clojure
(ns demo
|
||
(:require [cloact.core :as cloact :refer [atom]]
|
||
[clojure.string :as string]
|
||
[demoutil :as demoutil :refer-macros [get-source]]
|
||
[cloact.debug :refer-macros [dbg println]]))
|
||
|
||
(defn src-parts [src]
|
||
(string/split src #"\n(?=[(])"))
|
||
|
||
(defn src-defs [parts]
|
||
(let [ws #"\s+"]
|
||
(into {} (for [x parts]
|
||
[(-> x (string/split ws) second keyword) x]))))
|
||
|
||
(def srcmap
|
||
(-> "demo.cljs" get-source src-parts src-defs))
|
||
|
||
(def nssrc
|
||
"(ns example
|
||
(:require [cloact.core :as cloact :refer [atom]]))
|
||
")
|
||
|
||
(defn src-for-names [names]
|
||
(string/join "\n" (-> srcmap
|
||
(assoc :ns nssrc)
|
||
(select-keys names)
|
||
vals)))
|
||
|
||
(defn src-for [defs]
|
||
[:pre (-> defs src-for-names demoutil/syntaxify)])
|
||
|
||
(defn demo-component [{:keys [comp defs src]}]
|
||
(let [colored (if src
|
||
(demoutil/syntaxify src)
|
||
(src-for defs))
|
||
showing (atom true)]
|
||
(fn []
|
||
[:div
|
||
(when comp
|
||
[:div.demo-example
|
||
[:a.demo-example-hide {:on-click (fn [e]
|
||
(.preventDefault e)
|
||
(swap! showing not))}
|
||
(if @showing "hide" "show")]
|
||
[:h3.demo-heading "Example "]
|
||
(when @showing
|
||
(if defs
|
||
[:div.simple-demo [comp]]
|
||
[comp]))])
|
||
(when @showing
|
||
[:div.demo-source
|
||
[:h3.demo-heading "Source"]
|
||
colored])])))
|
||
|
||
(defn simple-component []
|
||
[:div
|
||
[:p "I am a component!"]
|
||
[:p.someclass
|
||
"I have " [:strong "bold"]
|
||
[:span {:style {:color "red"}} " and red "] "text."]])
|
||
|
||
(defn simple-parent []
|
||
[:div
|
||
[:p "I include simple-component."]
|
||
[simple-component]])
|
||
|
||
(defn lister [props]
|
||
[:ul
|
||
(for [item (:items props)]
|
||
[:li {:key item} "Item " item])])
|
||
|
||
(defn lister-user []
|
||
[:div
|
||
"Here is a list:"
|
||
[lister {:items (range 3)}]])
|
||
|
||
(def click-count (atom 0))
|
||
|
||
(defn counting-component []
|
||
[:div
|
||
"The atom " [:code "click-count"] " has value: "
|
||
@click-count ". "
|
||
[:input {:type "button" :value "Click me!"
|
||
:on-click #(swap! click-count inc)}]])
|
||
|
||
(defn atom-input [{:keys [value]}]
|
||
[:input {:type "text"
|
||
:value @value
|
||
:on-change #(reset! value (-> % .-target .-value))}])
|
||
|
||
(defn shared-state []
|
||
(let [val (atom "foo")]
|
||
(fn []
|
||
[:div
|
||
[:p "The value is now: " @val]
|
||
[:p "Change it here: "
|
||
[atom-input {:value val}]]])))
|
||
|
||
(defn timer-component []
|
||
(let [seconds-elapsed (atom 0)]
|
||
(fn []
|
||
(js/setTimeout #(swap! seconds-elapsed inc) 1000)
|
||
[:div
|
||
"Seconds Elapsed: " @seconds-elapsed])))
|
||
|
||
(defn render-simple []
|
||
(cloact/render-component [simple-component]
|
||
(.-body js/document)))
|
||
|
||
(defn calc-bmi [params to-calc]
|
||
(let [{:keys [height weight bmi]} params
|
||
h (/ height 100)]
|
||
(case to-calc
|
||
:bmi (assoc params :bmi (/ weight (* h h)))
|
||
:weight (assoc params :weight (* bmi h h)))))
|
||
|
||
(def bmi-data (atom (calc-bmi {:height 180 :weight 80} :bmi)))
|
||
|
||
(defn set-bmi [key val]
|
||
(swap! bmi-data #(calc-bmi (assoc % key val)
|
||
(case key :bmi :weight :bmi))))
|
||
|
||
(defn slider [{:keys [value min max param]}]
|
||
[:input {:type "range" :value value :min min :max max
|
||
:style {:width "100%"}
|
||
:on-change #(set-bmi param (-> % .-target .-value))}])
|
||
|
||
(defn bmi-component []
|
||
(let [{:keys [weight height bmi]} @bmi-data
|
||
[color diagnose] (cond
|
||
(< bmi 18.5) ["orange" "underweight"]
|
||
(< bmi 25) ["inherit" "normal"]
|
||
(< bmi 30) ["orange" "overweight"]
|
||
:else ["red" "obese"])]
|
||
[:div
|
||
[:h3 "BMI calculator"]
|
||
[:div
|
||
"Height: " (int height) "cm"
|
||
[slider {:value height :min 100 :max 220 :param :height}]]
|
||
[:div
|
||
"Weight: " (int weight) "kg"
|
||
[slider {:value weight :min 30 :max 150 :param :weight}]]
|
||
[:div
|
||
"BMI: " (int bmi) " "
|
||
[:span {:style {:color color}} diagnose]
|
||
[slider {:value bmi :min 10 :max 50 :param :bmi}]]]))
|
||
|
||
(defn intro []
|
||
(let [github {:href "https://github.com/holmsand/cloact"}
|
||
clojurescript {:href "https://github.com/clojure/clojurescript"}
|
||
react {:href "http://facebook.github.io/react/"}
|
||
hiccup {:href "https://github.com/weavejester/hiccup"}]
|
||
[:div.demo-text
|
||
|
||
[:h2 "Introduction to Cloact"]
|
||
|
||
[:p [:a github "Cloact"] " provides a minimalistic interface
|
||
between " [:a clojurescript "ClojureScript"] " and " [:a
|
||
react "React"] ". It allows you to define efficient React
|
||
components using nothing but plain ClojureScript functions and
|
||
data, that describe your UI using a " [:a hiccup "Hiccup"] "-like
|
||
syntax."]
|
||
|
||
[:p "The goal of Cloact is to make it possible to define
|
||
arbitrarily complex UIs using just a couple of basic concepts,
|
||
and to be fast enough by default that you rarely have to care
|
||
about performance."]
|
||
|
||
[:p "A very basic Cloact component may look something like this: "]
|
||
[demo-component {:comp simple-component
|
||
:defs [:simple-component]}]
|
||
|
||
[:p "You can build new components using other components as
|
||
building blocks. Like this:"]
|
||
[demo-component {:comp simple-parent
|
||
:defs [:simple-parent]}]
|
||
|
||
[:p "Data is passed to child components using plain old Clojure
|
||
maps. For example, here is a component that shows items in a "
|
||
[:code "seq"] ":" ]
|
||
|
||
[demo-component {:comp lister-user
|
||
:defs [:lister :lister-user]}]
|
||
|
||
[:p [:strong "Note: "]
|
||
"The " [:code "{:key item}"] " part of the " [:code ":li"] "
|
||
isn’t really necessary in this simple example, but passing a
|
||
unique key for every item in a dynamically generated list of
|
||
components is good practice, and helps React to improve
|
||
performance for large lists."]]))
|
||
|
||
(defn managing-state []
|
||
[:div.demo-text
|
||
[:h2 "Managing state in Cloact"]
|
||
|
||
[:p "The easiest way to manage state in Cloact is to use Cloact’s
|
||
own version of " [:code "atom"] ". It works exactly like the one in
|
||
clojure.core, except that it keeps track of every time it is
|
||
deref’ed. Any component that uses an " [:code "atom"]" is automagically
|
||
re-rendered when its value changes."]
|
||
|
||
[:p "Let’s demonstrate that with a simple example:"]
|
||
[demo-component {:comp counting-component
|
||
:defs [:ns :click-count :counting-component]}]
|
||
|
||
[:p "Sometimes you may want to maintain state locally in a
|
||
component. That is easy to do with an " [:code "atom"] " as well."]
|
||
|
||
[:p "Here is an example of that, where we call "
|
||
[:code "setTimeout"] " every time the component is rendered to
|
||
update a counter:"]
|
||
|
||
[demo-component {:comp timer-component
|
||
:defs [:timer-component]}]
|
||
|
||
[:p "The previous example also uses another feature of Cloact: a component
|
||
function can return another function, that is used to do the actual
|
||
rendering. This allows you to perform some setup of newly
|
||
created components, without resorting to React’s lifecycle
|
||
events."]
|
||
|
||
[:p "By simply passing atoms around you can share state management
|
||
between components, like this:"]
|
||
[demo-component {:comp shared-state
|
||
:defs [:ns :atom-input :shared-state]}]
|
||
|
||
[:p [:strong "Note: "] "Component functions (including the ones
|
||
returned by other component functions) are called with three
|
||
arguments: "]
|
||
[:ul
|
||
[:li [:code "props"] ": a map passed from a parent" ]
|
||
[:li [:code "children"] ": a vector of the children passed to the component"]
|
||
[:li [:code "this"] ": the actual React component"]]])
|
||
|
||
(defn essential-api []
|
||
[:div.demo-text
|
||
[:h2 "Essential API"]
|
||
|
||
[:p "Cloact supports most of React’s API, but there is really only
|
||
one entry-point that is necessary for most applications: "
|
||
[:code "cloact.core/render-component"] "."]
|
||
|
||
[:p "It takes too arguments: a component, and a DOM node. For
|
||
example, splashing the very first example all over the page would
|
||
look like this:"]
|
||
|
||
[demo-component {:defs [:ns :simple-component :render-simple]}]])
|
||
|
||
(defn performance []
|
||
[:div.demo-text
|
||
[:h2 "Performance"]
|
||
|
||
[:p "React itself is very fast, and so is Cloact. In fact, Cloact
|
||
will be even faster than plain React a lot of the time, thanks to
|
||
optimizations made possible by ClojureScript."]
|
||
|
||
[:p "Mounted components are only re-rendered when their parameters
|
||
have changed. The change could come from a deref’ed "
|
||
[:code "atom"] ", the arguments passed to the component (i.e the
|
||
”props” map and children) or component state."]
|
||
|
||
[:p "All of these are checked for changes with a simple "
|
||
[:code "identical?"] " which is basically only a pointer
|
||
comparison, so the overhead is very low (even if the components of
|
||
the props map are compared separately, and "
|
||
[:code ":style"] " attributes are handled specially). Even the
|
||
built-in React components are handled the same way."]
|
||
|
||
[:p "All this means that you (hopefully) simply won’t have to care
|
||
about performance most of the time. Just define your UI however you like
|
||
– it will be fast enough."]
|
||
|
||
[:p "There are a couple of situations that you might have to care
|
||
about, though. If you give Cloact big " [:code "seq"] "s of
|
||
components to render, you might have to supply all of them with a
|
||
unique " [:code ":key"] " attribute to speed up rendering. Also note
|
||
that anonymous functions are not, in general, equal to each other
|
||
even if they represent the same code and closure."]
|
||
|
||
[:p "But again, in general you should just trust that React and
|
||
Cloact will be fast enough. This very page is composed of a single
|
||
Cloact component with thousands of child components (every single
|
||
parenthesis etc in the code examples is a separate component), and
|
||
yet the page can be updated many times every second without taxing
|
||
the browser the slightest."]
|
||
|
||
[:p "Incidentally, this page also uses another React trick: the
|
||
entire page is pre-rendered using Node, and "
|
||
[:code "cloact/render-component-to-string"] ". When it is loaded
|
||
into the browser, React automatically attaches event-handlers to
|
||
the already present DOM tree."]])
|
||
|
||
(defn bmi-demo []
|
||
[:div.demo-text
|
||
[:h2 "Putting it all together"]
|
||
|
||
[:p "Here is a slightly less contrived example: a simple BMI
|
||
calculator."]
|
||
|
||
[:p "Data is kept in a single " [:code "cloact.core/atom"] ": a map
|
||
with height, weight and BMI as keys."]
|
||
|
||
[demo-component {:comp bmi-component
|
||
:defs [:ns :calc-bmi :bmi-data :set-bmi :slider
|
||
:bmi-component]}]])
|
||
|
||
(defn test-results []
|
||
[:div.demo-text
|
||
[:h2 "Test results"]
|
||
[runtests/test-output]])
|
||
|
||
(defn complete-simple-demo []
|
||
[:div.demo-text
|
||
[:h2 "Complete demo"]
|
||
|
||
[:p "Cloact comes with a couple of complete examples, with
|
||
Leiningen project files and everything. Here’s one of them in
|
||
action:"]
|
||
|
||
[demo-component {:comp simpleexample/simple-example
|
||
:src (get-source "simpleexample.cljs")}]])
|
||
|
||
(defn todomvc-demo []
|
||
[:div.demo-text
|
||
[:h2 "Todomvc"]
|
||
|
||
[:p "The obligatory todo list looks roughly like this in
|
||
Cloact (cheating a little bit by skipping routing and
|
||
persistence):"]
|
||
|
||
[demo-component {:comp todomvc/todo-app
|
||
:src (get-source "todomvc.cljs")}]])
|
||
|
||
(defn github-badge []
|
||
[:a.github-badge
|
||
{:href "https://github.com/holmsand/cloact"}
|
||
[:img {:style {:position "absolute" :top 0 :left 0 :border 0}
|
||
:src "https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"
|
||
:alt "Fork me on GitHub"}]])
|
||
|
||
(defn demo []
|
||
[:div
|
||
[:div.test-output-mini
|
||
[runtests/test-output-mini]]
|
||
[:div.cloact-demo
|
||
[:h1 "Cloact: Minimalistic React for ClojureScript"]
|
||
[intro]
|
||
[managing-state]
|
||
[essential-api]
|
||
[bmi-demo]
|
||
[performance]
|
||
[test-results]
|
||
[complete-simple-demo]
|
||
[todomvc-demo]]
|
||
[github-badge]])
|
||
|
||
(defn ^:export mountdemo []
|
||
(cloact/render-component [demo] (.-body js/document)))
|
||
|
||
(defn ^:export genpage []
|
||
(cloact/render-component-to-string [demo]))
|