From 73281cdd161cfcfb2cd2ad0a1cdad73cd0d62738 Mon Sep 17 00:00:00 2001 From: Dan Holmsand Date: Mon, 9 Feb 2015 12:25:12 +0100 Subject: [PATCH] Make todomvc example use figwheel --- examples/todomvc/Makefile | 20 ---------- examples/todomvc/README.md | 7 ++++ examples/todomvc/devsrc/devsetup.cljs | 6 +++ examples/todomvc/example.html | 17 +++++++++ examples/todomvc/project.clj | 53 ++++++++++++++------------- examples/todomvc/src/todomvc.cljs | 19 +++++----- examples/todomvc/todomvc.html | 15 -------- examples/todomvc/todos.css | 2 +- 8 files changed, 69 insertions(+), 70 deletions(-) delete mode 100644 examples/todomvc/Makefile create mode 100644 examples/todomvc/README.md create mode 100644 examples/todomvc/devsrc/devsetup.cljs create mode 100644 examples/todomvc/example.html delete mode 100644 examples/todomvc/todomvc.html diff --git a/examples/todomvc/Makefile b/examples/todomvc/Makefile deleted file mode 100644 index 543e9a9..0000000 --- a/examples/todomvc/Makefile +++ /dev/null @@ -1,20 +0,0 @@ - -PROF = dev -# PROF = dev,test,srcmap -# PROF = prod,test -# PROF = prod - -CLJSBUILD = client - -all: autocompile - -run: openbrowser autocompile - -openbrowser: - (sleep 1 && open todomvc.html) & - -autocompile: - lein with-profile $(PROF) cljsbuild auto $(CLJSBUILD) - -clean: - lein -o clean diff --git a/examples/todomvc/README.md b/examples/todomvc/README.md new file mode 100644 index 0000000..a2e5bc4 --- /dev/null +++ b/examples/todomvc/README.md @@ -0,0 +1,7 @@ +# Reagent example app + +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. diff --git a/examples/todomvc/devsrc/devsetup.cljs b/examples/todomvc/devsrc/devsetup.cljs new file mode 100644 index 0000000..adce322 --- /dev/null +++ b/examples/todomvc/devsrc/devsetup.cljs @@ -0,0 +1,6 @@ +(ns devsetup + (:require [todomvc :as example] + [figwheel.client :as fw])) + +(fw/start {:on-jsload example/run + :websocket-url "ws://localhost:3449/figwheel-ws"}) diff --git a/examples/todomvc/example.html b/examples/todomvc/example.html new file mode 100644 index 0000000..ff36a3e --- /dev/null +++ b/examples/todomvc/example.html @@ -0,0 +1,17 @@ + + + + + Example + + + +
+

Reagent example app – see README.md

+
+ + + + diff --git a/examples/todomvc/project.clj b/examples/todomvc/project.clj index f269153..a5e7b1d 100644 --- a/examples/todomvc/project.clj +++ b/examples/todomvc/project.clj @@ -1,28 +1,31 @@ - - (defproject todomvc-reagent "0.5.0-alpha" :dependencies [[org.clojure/clojure "1.6.0"] - [org.clojure/clojurescript "0.0-2342"] - [reagent "0.5.0-alpha"]] - :plugins [[lein-cljsbuild "1.0.3"]] + [org.clojure/clojurescript "0.0-2760"] + [reagent "0.5.0-alpha2"] + [figwheel "0.2.3-SNAPSHOT"]] + + :plugins [[lein-cljsbuild "1.0.4"] + [lein-figwheel "0.2.3-SNAPSHOT"]] + :hooks [leiningen.cljsbuild] - :profiles {:prod {:cljsbuild - {:builds - {:client {:compiler - {:optimizations :advanced - :preamble ^:replace ["reagent/react.min.js"] - :pretty-print false}}}}} - :srcmap {:cljsbuild - {:builds - {:client {:compiler - {:source-map "target/client.js.map" - :source-map-path "client"}}}}}} - :source-paths ["src"] - :cljsbuild - {:builds - {:client {:source-paths ["src"] - :compiler - {:preamble ["reagent/react.js"] - :output-dir "target/client" - :output-to "target/client.js" - :pretty-print true}}}}) + + :profiles {:dev {:cljsbuild + {:builds {:client {:source-paths ["devsrc"] + :compiler + {:main devsetup + :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/todomvc/src/todomvc.cljs b/examples/todomvc/src/todomvc.cljs index cada0a8..abaa284 100644 --- a/examples/todomvc/src/todomvc.cljs +++ b/examples/todomvc/src/todomvc.cljs @@ -1,10 +1,9 @@ - (ns todomvc (:require [reagent.core :as reagent :refer [atom]])) -(def todos (atom (sorted-map))) +(defonce todos (atom (sorted-map))) -(def counter (atom 0)) +(defonce counter (atom 0)) (defn add-todo [text] (let [id (swap! counter inc)] @@ -18,11 +17,12 @@ (defn complete-all [v] (swap! todos mmap map #(assoc-in % [1 :done] v))) (defn clear-done [] (swap! todos mmap remove #(get-in % [1 :done]))) -(add-todo "Rename Cloact to Reagent") -(add-todo "Add undo demo") -(add-todo "Make all rendering async") -(add-todo "Allow any arguments to component functions") -(complete-all true) +(defonce init (do + (add-todo "Rename Cloact to Reagent") + (add-todo "Add undo demo") + (add-todo "Make all rendering async") + (add-todo "Allow any arguments to component functions") + (complete-all true))) (defn todo-input [{:keys [title on-save on-stop]}] (let [val (atom title) @@ -104,4 +104,5 @@ [:p "Double-click to edit a todo"]]])))) (defn ^:export run [] - (reagent/render-component [todo-app] (.-body js/document))) + (reagent/render [todo-app] + (js/document.getElementById "app"))) diff --git a/examples/todomvc/todomvc.html b/examples/todomvc/todomvc.html deleted file mode 100644 index 6f09b0a..0000000 --- a/examples/todomvc/todomvc.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - todomvc with reagent - - - -

This will become todomvc when the ClojureScript is compiled

- - - - diff --git a/examples/todomvc/todos.css b/examples/todomvc/todos.css index 9095474..b8947d3 100644 --- a/examples/todomvc/todos.css +++ b/examples/todomvc/todos.css @@ -107,7 +107,7 @@ input[type="checkbox"] { background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); + /* filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); */ border-top-left-radius: 1px; border-top-right-radius: 1px; }