From 774de39e6c09fe2f9e25a230a2de20420d6e30fe Mon Sep 17 00:00:00 2001 From: Stuart Mitchell Date: Wed, 25 Feb 2015 14:31:11 +1300 Subject: [PATCH] added an example --- examples/simple/README.md | 9 ++ examples/simple/devsrc/simpleexample/dev.cljs | 6 ++ examples/simple/example.css | 22 +++++ examples/simple/example.html | 17 ++++ examples/simple/project.clj | 33 +++++++ examples/simple/src/simpleexample/core.cljs | 95 +++++++++++++++++++ 6 files changed, 182 insertions(+) create mode 100644 examples/simple/README.md create mode 100644 examples/simple/devsrc/simpleexample/dev.cljs create mode 100644 examples/simple/example.css create mode 100644 examples/simple/example.html create mode 100644 examples/simple/project.clj create mode 100644 examples/simple/src/simpleexample/core.cljs diff --git a/examples/simple/README.md b/examples/simple/README.md new file mode 100644 index 0000000..ab579ff --- /dev/null +++ b/examples/simple/README.md @@ -0,0 +1,9 @@ +# Reagent example app now using re-frame + +Run "`lein figwheel`" in a terminal to compile the app, and then open example.html. + +Any changes to ClojureScript source files (in `src`) will be reflected in the running page immediately (while "`lein figwheel`" is running). + +Run "`lein clean; lein with-profile prod compile`" to compile an optimized version. + +Original reagent example code found at https://github.com/reagent-project/reagent diff --git a/examples/simple/devsrc/simpleexample/dev.cljs b/examples/simple/devsrc/simpleexample/dev.cljs new file mode 100644 index 0000000..543863a --- /dev/null +++ b/examples/simple/devsrc/simpleexample/dev.cljs @@ -0,0 +1,6 @@ +(ns simpleexample.dev + (:require [simpleexample.core :as example] + [figwheel.client :as fw])) + +(fw/start {:on-jsload example/run + :websocket-url "ws://localhost:3449/figwheel-ws"}) diff --git a/examples/simple/example.css b/examples/simple/example.css new file mode 100644 index 0000000..e271a16 --- /dev/null +++ b/examples/simple/example.css @@ -0,0 +1,22 @@ + +div, h1, input { + font-family: HelveticaNeue, Helvetica; + color: #777; +} + +.example-clock { + font-size: 128px; + line-height: 1.2em; + font-family: HelveticaNeue-UltraLight, Helvetica; +} + +@media (max-width: 768px) { + .example-clock { + font-size: 64px; + } +} + +.color-input, .color-input input { + font-size: 24px; + line-height: 1.5em; +} diff --git a/examples/simple/example.html b/examples/simple/example.html new file mode 100644 index 0000000..a9b7c39 --- /dev/null +++ b/examples/simple/example.html @@ -0,0 +1,17 @@ + + + + + Example + + + +
+

Reagent example app – see README.md

+
+ + + + diff --git a/examples/simple/project.clj b/examples/simple/project.clj new file mode 100644 index 0000000..dea5d1c --- /dev/null +++ b/examples/simple/project.clj @@ -0,0 +1,33 @@ + +(defproject simple-reagent "0.5.0-alpha3" + :dependencies [[org.clojure/clojure "1.6.0"] + [org.clojure/clojurescript "0.0-2816"] + [reagent "0.5.0-alpha3"] + [re-frame "0.1.5"] + [figwheel "0.2.3-SNAPSHOT"]] + + :plugins [[lein-cljsbuild "1.0.4"] + [lein-figwheel "0.2.3-SNAPSHOT"]] + + :hooks [leiningen.cljsbuild] + + :profiles {:dev {:cljsbuild + {:builds {:client {:source-paths ["devsrc"] + :compiler + {:main simpleexample.dev + :optimizations :none + :source-map true + :source-map-timestamp true}}}}} + + :prod {:cljsbuild + {:builds {:client {:compiler + {:optimizations :advanced + :elide-asserts true + :pretty-print false}}}}}} + + :figwheel {:repl false} + + :cljsbuild {:builds {:client {:source-paths ["src"] + :compiler + {:output-dir "target/client" + :output-to "target/client.js"}}}}) diff --git a/examples/simple/src/simpleexample/core.cljs b/examples/simple/src/simpleexample/core.cljs new file mode 100644 index 0000000..8a5e1a4 --- /dev/null +++ b/examples/simple/src/simpleexample/core.cljs @@ -0,0 +1,95 @@ +(ns simpleexample.core + (:require-macros [reagent.ratom :refer [reaction]]) + (:require [reagent.core :as reagent :refer [atom]] + [re-frame.handlers :as handlers] + [re-frame.subs :as subs] + [re-frame.handlers :refer [dispatch]])) + +(defonce timer (atom (js/Date.))) + +(defonce time-updater (js/setInterval + #(dispatch [:timer (js/Date.)]) 1000)) + +;;; re-frame stuff +;;; add an initialize handler +;;; this will set the initial state +(defonce initial-state + {:timer (js/Date.) + :time-color "#f34"}) + +(handlers/register + :initialize + (fn + [db _] + (swap! db merge initial-state))) + +;; add subscriptions to :timer and :time-color +(subs/register + :timer + (fn + [db _] + ;; you need to wrap your subscription code in a reaction + (reaction (:timer @db)))) + +(subs/register + :time-color + (fn + [db _] + ;; you need to wrap your subscription code in a reaction + (reaction (:time-color @db)))) + +(handlers/register + :time-color + (fn + ;; the first item in the second argument is :time-color the second is the + ;; new value + [db [_ value]] + (swap! db assoc :time-color value))) + +(handlers/register + :timer + (fn + ;; the first item in the second argument is :timer the second is the + ;; new value + [db [_ value]] + (swap! db assoc :timer value))) + +(dispatch [:initialize]) + + +(defn greeting [message] + [:h1 message]) + +(defn clock [] + (let [time-color (subs/subscribe [:time-color]) + timer (subs/subscribe [:timer])] + ;;; wrap your component in a function to use the suscription + (fn [] + ;; note that the initialize call will not be dispatched immediately + ;; as it is an async call + (when @timer + (let [time-str (-> @timer .toTimeString (clojure.string/split " ") first)] + [:div.example-clock + {:style {:color @time-color}} + time-str]))))) + +(defn color-input [] + (let [time-color (subs/subscribe [:time-color])] + ;;; wrap your component in a function to use the suscription + (fn [] + [:div.color-input + "Time color: " + [:input {:type "text" + :value @time-color + :on-change #(dispatch + [:time-color (-> % .-target .-value)])}]]))) + +(defn simple-example [] + [:div + [greeting "Hello world, it is now"] + [clock] + [color-input]]) + +(defn ^:export run [] + (reagent/render [simple-example] + (js/document.getElementById "app"))) \ No newline at end of file