status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make demo code more Light Table-friendly

This commit is contained in:
Dan Holmsand 2014-04-01 19:50:28 +02:00
parent 4060bfc6fe
commit 429ed50fab
11 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/demo.cljs
View File

@ -1,5 +1,6 @@
(ns demo
(:require [reagent.core :as reagent :refer [atom]]
[reagent.interop :refer-macros [.' .! fvar]]
[clojure.string :as string]
[reagentdemo.page :as page :refer [page-map page link prefix]]
[reagentdemo.common :as common :refer [demo-component]]
@ -8,8 +9,8 @@
[reagent.debug :refer-macros [dbg println]]))
(swap! page-map assoc
"index.html" intro/main
"news/index.html" news/main)
"index.html" (fvar intro/main)
"news/index.html" (fvar news/main))
(def github {:href "https://github.com/holmsand/reagent"})
@ -24,11 +25,11 @@
[:div
[:div.nav
[:ul.nav
[:li.brand [link {:href intro/main} "Reagent:"]]
[:li [link {:href intro/main} "Intro"]]
[:li [link {:href news/main} "News"]]
[:li.brand [link {:href (fvar intro/main)} "Reagent:"]]
[:li [link {:href (fvar intro/main)} "Intro"]]
[:li [link {:href (fvar news/main)} "News"]]
[:li [:a github "GitHub"]]]]
(let [comp (get @page-map @page intro/main)]
(let [comp (get @page-map @page (fvar intro/main))]
[comp])
[github-badge]])

4
demo/reagentdemo/common.cljs
View File

@ -34,9 +34,9 @@
(defn src-for [funmap defs]
[:pre (-> funmap (src-for-names defs) syntaxify)])
(defn demo-component [{:keys [comp src complete no-heading]}]
(defn demo-component []
(let [showing (atom true)]
(fn []
(fn [{:keys [comp src complete no-heading]}]
[:div
(when comp
[:div.demo-example.clearfix

17
demo/reagentdemo/intro.cljs
View File

@ -1,6 +1,7 @@
(ns reagentdemo.intro
(:require [reagent.core :as reagent :refer [atom]]
[reagent.interop :refer-macros [.' .! fvar]]
[reagent.debug :refer-macros [dbg println]]
[clojure.string :as string]
[reagentdemo.syntax :refer-macros [get-source]]
@ -10,7 +11,7 @@
(defn simple-component []
[:div
[:p "I am a component!"]
[:p.someclass
[:p.someclass
"I have " [:strong "bold"]
[:span {:style {:color "red"}} " and red "] "text."]])
@ -104,8 +105,8 @@
[:span {:style {:color color}} diagnose]
[slider :bmi bmi 10 50]]]))
(def funmap (-> "reagentdemo/intro.cljs" get-source common/fun-map))
(def src-for (partial common/src-for funmap))
(defonce funmap (-> "reagentdemo/intro.cljs" get-source common/fun-map))
(defonce src-for (partial common/src-for funmap))
(defn intro []
(let [github {:href "https://github.com/holmsand/reagent"}
@ -189,10 +190,10 @@
[: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
:src (src-for [:timer-component])}]
[:p "The previous example also uses another feature of Reagent: a
component function can return another function, that is used to do
the actual rendering. This function is called with the same
@ -275,7 +276,7 @@
(defn bmi-demo []
[:div.demo-text
[:h2 "Putting it all together"]
[:p "Here is a slightly less contrived example: a simple BMI
calculator."]
@ -293,7 +294,7 @@
[:p "Reagent 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
:complete true
:src (-> "simpleexample.cljs"
@ -307,7 +308,7 @@
[:p "The obligatory todo list looks roughly like this in
Reagent (cheating a little bit by skipping routing and
persistence):"]
[demo-component {:comp todomvc/todo-app
:complete true
:src (-> "todomvc.cljs"

1
demo/reagentdemo/news.cljs
View File

@ -1,5 +1,6 @@
(ns reagentdemo.news
(:require [reagent.core :as reagent :refer [atom]]
[reagent.interop :refer-macros [.' .! fvar]]
[reagent.debug :refer-macros [dbg println]]
[reagentdemo.page :refer [title link page-map]]
[reagentdemo.common :as common :refer [demo-component]]

16
demo/reagentdemo/news/anyargs.cljs
View File

@ -1,5 +1,6 @@
(ns reagentdemo.news.anyargs
(:require [reagent.core :as r :refer [atom]]
[reagent.interop :refer-macros [.' .! fvar]]
[reagent.debug :refer-macros [dbg println]]
[reagentdemo.syntax :refer-macros [get-source]]
[reagentdemo.page :refer [title link page-map]]
@ -33,9 +34,8 @@
(let [head "All arguments allowed"
geometry {:href "https://github.com/holmsand/reagent/tree/master/examples/geometry"}
jonase {:href "https://github.com/jonase"}]
[:div.reagent-demo
[:h1 [link {:href main} head]]
[:h1 [link {:href (fvar main)} head]]
[title (str "Reagent 0.4.0: " head)]
[:div.demo-text
@ -43,7 +43,7 @@
[:p "Calling a component in Reagent looks a lot like a function
call. Now it also " [:em "works"] " like one."]
[:p "Before 0.4.0, component functions were always called with
three arguments: a map of attributes, a vector of ”children”,
and the current React component."]
@ -53,12 +53,12 @@
them."]
(if summary
[link {:href main
[link {:href (fvar main)
:class 'news-read-more} "Read more"]
[:div.demo-text
[:p "In other words, you can now do this:"]
[demo-component {:comp say-hello
[demo-component {:comp (fvar say-hello)
:src (src-for [:hello-component :say-hello])}]
[:p "In the above example, it wouldn’t make any difference at
@ -77,7 +77,7 @@
and " [:code "for"] " expressions, so it’s safest to always
put the call at the top, as in " [:code "my-div"] " here:"]
[demo-component {:comp call-my-div
[demo-component {:comp (fvar call-my-div)
:src (src-for [:nsr :my-div :call-my-div])}]
[:p [:em "Note: "] [:code "r/props"] " and "
@ -129,7 +129,7 @@
use Reagent’s new calling convensions, and looks like
this:"]
[demo-component {:comp geometry-example}]])]]))
[demo-component {:comp (fvar geometry-example)}]])]]))
(swap! page-map assoc
"news/any-arguments.html" main)
"news/any-arguments.html" (fvar main))

11
demo/reagentdemo/news/async.cljs
View File

@ -1,5 +1,6 @@
(ns reagentdemo.news.async
(:require [reagent.core :as reagent :refer [atom]]
[reagent.interop :refer-macros [.' .! fvar]]
[reagent.debug :refer-macros [dbg println]]
[reagentdemo.syntax :refer-macros [get-source]]
[reagentdemo.page :refer [title link page-map]]
@ -91,13 +92,13 @@
(let [om-article {:href "http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"}]
[:div.reagent-demo
[title "Reagent: Faster by waiting"]
[:h1 [link {:href main} "Faster by waiting"]]
[:h1 [link {:href (fvar main)} "Faster by waiting"]]
[:div.demo-text
[:h2 "Reagent gets async rendering"]
[:p "Reagent already separates state from components. Now they
are also separated in time."]
[:p "From version 0.3.0, changes in application state (as
represented by Reagent’s " [:code "atom"] "s) are no longer
rendered immediately to the DOM. Instead, Reagent waits until
@ -105,13 +106,13 @@
changes are rendered in one single go."]
(if summary
[link {:href main
[link {:href (fvar main)
:class 'news-read-more} "Read more"]
[:div.demo-text
[:p "This is good for all sorts of reasons:"]
[:ul
[:li "Reagent doesn't have to spend time doing renderings
that no one would ever see (because changes to application
state happened faster than the browser could repaint)."]
@ -194,4 +195,4 @@
:palette :color-demo])}]])]]))
(swap! page-map assoc
"news/reagent-is-async.html" main)
"news/reagent-is-async.html" (fvar main))

11
demo/reagentdemo/news/clockpost.cljs
View File

@ -1,5 +1,6 @@
(ns reagentdemo.news.clockpost
(:require [reagent.core :as r :refer [atom]]
[reagent.interop :refer-macros [.' .! fvar]]
[reagent.debug :refer-macros [dbg]]
[reagentdemo.syntax :refer-macros [get-source]]
[reagentdemo.page :refer [title link page-map]]
@ -21,9 +22,9 @@
om {:href "https://github.com/swannodette/om"}
hoplon {:href "http://hoplon.io"}
clocksrc {:href "https://github.com/holmsand/reagent/blob/master/demo/reagentdemo/news/binaryclock.cljs"}]
[:div.reagent-demo
[:h1 [link {:href main} head]]
[:h1 [link {:href (fvar main)} head]]
[title head]
[:div.demo-text
@ -39,9 +40,9 @@
hoplon "Hoplon"] ", can be seen " [:a hopclock "here"] ")."]
[:p "So, without further ado, here is a binary clock using Reagent."]
(if summary
[link {:href main
[link {:href (fvar main)
:class 'news-read-more} "Read more"]
[:div.demo-text
@ -119,4 +120,4 @@
to React to actually display that UI."]])]]))
(swap! page-map assoc
"news/binary-clock.html" main)
"news/binary-clock.html" (fvar main))

9
demo/reagentdemo/news/undodemo.cljs
View File

@ -1,5 +1,6 @@
(ns reagentdemo.news.undodemo
(:require [reagent.core :as reagent :refer [atom]]
[reagent.interop :refer-macros [.' .! fvar]]
[reagent.debug :refer-macros [dbg println]]
[reagentdemo.syntax :refer-macros [get-source]]
[reagentdemo.page :refer [title link page-map]]
@ -47,11 +48,11 @@
(defn main [{:keys [summary]}]
(let [head "Cloact becomes Reagent: Undo is trivial"]
[:div.reagent-demo
[:h1 [link {:href main} head]]
[:h1 [link {:href (fvar main)} head]]
[title head]
[:div.demo-text
[:h2 "(reset! cloact-name \"Reagent\")"]
[:p "It turns out that ”Cloact” was a really, really bad
name. It made some people think about birds’ behinds, in
possibly unhealthy ways, which even Google suggested they
@ -64,7 +65,7 @@
search-and-replace should suffice."]
(if summary
[link {:href main
[link {:href (fvar main)
:class 'news-read-more} "Read more"]
[:div.demo-text
@ -86,4 +87,4 @@
[undo-demo-cleanup]])]]))
(swap! page-map assoc
"news/cloact-reagent-undo-demo.html" main)
"news/cloact-reagent-undo-demo.html" (fvar main))

1
demo/reagentdemo/page.cljs
View File

@ -1,5 +1,6 @@
(ns reagentdemo.page
(:require [reagent.core :as reagent :refer [atom partial]]
[reagent.interop :refer-macros [.' .! fvar fvar?]]
[reagent.debug :refer-macros [dbg]]
[clojure.string :as string]
[goog.events :as events]

4
src/reagent/interop.clj
View File

@ -61,8 +61,8 @@
(do
(assert (not (nil? ~f))
~(str "undefined fn: " f))
(assert (identical? ~f ~(symbol fns (name f)))
~(str "Not in a namespace: " f))
;; (assert (identical? ~f ~(symbol fns (name f)))
;; ~(str "Not in a namespace: " f))
(let [old# (aget ~f "-fvar")
v# (if (not (nil? old#))
old#

2
test/runtests.cljs
View File

@ -1,7 +1,7 @@
(ns runtests
(:require [reagent.core :as reagent :refer [atom]]
[reagent.interop :refer-macros [.' .!]]
[reagent.interop :refer-macros [.' .! fvar]]
[reagent.debug :refer-macros [dbg println]]
[demo :as demo]
[cemerick.cljs.test :as t]))