mirror of https://github.com/status-im/reagent.git
Make simple-example use figwheel
This commit is contained in:
Dan Holmsand
parent
a29e0c75c7
commit
0b1c7ffc33
|
|
@ -1,21 +0,0 @@
|
||||||
|
|
||||||
PROF = dev
|
|
||||||
# PROF = dev,test,srcmap
|
|
||||||
# PROF = prod,test
|
|
||||||
# PROF = prod
|
|
||||||
|
|
||||||
CLJSBUILD = client
|
|
||||||
|
|
||||||
all: autocompile
|
|
||||||
|
|
||||||
run: openbrowser autocompile
|
|
||||||
|
|
||||||
openbrowser:
|
|
||||||
(sleep 1 && open example.html) &
|
|
||||||
|
|
||||||
autocompile:
|
|
||||||
rm -rf target
|
|
||||||
lein with-profile $(PROF) cljsbuild auto $(CLJSBUILD)
|
|
||||||
|
|
||||||
clean:
|
|
||||||
lein -o clean
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
(ns devsetup
|
||||||
|
(:require [simpleexample :as example]
|
||||||
|
[figwheel.client :as fw]))
|
||||||
|
|
||||||
|
(fw/start {:on-jsload example/run
|
||||||
|
:websocket-url "ws://localhost:3449/figwheel-ws"})
|
||||||
|
|
@ -6,9 +6,17 @@
|
||||||
<link rel="stylesheet" href="example.css">
|
<link rel="stylesheet" href="example.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>This will become an example when the ClojureScript is compiled</h1>
|
<div id="app">
|
||||||
<script type="text/javascript" src="target/client.js"></script>
|
<h1>Reagent example app</h1>
|
||||||
<script type="text/javascript">
|
|
||||||
|
<p> Run "lein figwheel" in a terminal to compile, wait a while, and then refresh the browser. </p>
|
||||||
|
|
||||||
|
<p> Any changes to .cljs files will be reflected in the running page immediately. </p>
|
||||||
|
|
||||||
|
<p> Run "lein clean; lein with-profile prod compile" to compile an optimized version. </p>
|
||||||
|
</div>
|
||||||
|
<script src="target/client.js"></script>
|
||||||
|
<script>
|
||||||
simpleexample.run();
|
simpleexample.run();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,32 @@
|
||||||
|
|
||||||
|
|
||||||
(defproject simple-reagent "0.5.0-alpha"
|
(defproject simple-reagent "0.5.0-alpha"
|
||||||
:dependencies [[org.clojure/clojure "1.6.0"]
|
:dependencies [[org.clojure/clojure "1.6.0"]
|
||||||
[org.clojure/clojurescript "0.0-2342"]
|
[org.clojure/clojurescript "0.0-2760"]
|
||||||
[reagent "0.5.0-alpha"]]
|
[reagent "0.5.0-alpha2"]
|
||||||
:plugins [[lein-cljsbuild "1.0.3"]]
|
[figwheel "0.2.3-SNAPSHOT"]]
|
||||||
|
|
||||||
|
:plugins [[lein-cljsbuild "1.0.4"]
|
||||||
|
[lein-figwheel "0.2.3-SNAPSHOT"]]
|
||||||
|
|
||||||
:hooks [leiningen.cljsbuild]
|
:hooks [leiningen.cljsbuild]
|
||||||
:profiles {:prod {:cljsbuild
|
|
||||||
{:builds
|
:profiles {:dev {:cljsbuild
|
||||||
{:client {:compiler
|
{:builds {:client {:source-paths ["devsrc"]
|
||||||
{:optimizations :advanced
|
:compiler
|
||||||
:preamble ^:replace ["reagent/react.min.js"]
|
{:main devsetup
|
||||||
:pretty-print false}}}}}
|
:optimizations :none
|
||||||
:srcmap {:cljsbuild
|
:source-map true
|
||||||
{:builds
|
:source-map-timestamp true}}}}}
|
||||||
{:client {:compiler
|
|
||||||
{:source-map "target/client.js.map"
|
:prod {:cljsbuild
|
||||||
:source-map-path "client"}}}}}}
|
{:builds {:client {:compiler
|
||||||
:source-paths ["src"]
|
{:optimizations :advanced
|
||||||
:cljsbuild
|
:elide-asserts true
|
||||||
{:builds
|
:pretty-print false}}}}}}
|
||||||
{:client {:source-paths ["src"]
|
|
||||||
:compiler
|
:figwheel {:repl false}
|
||||||
{:preamble ["reagent/react.js"]
|
|
||||||
:output-dir "target/client"
|
:cljsbuild {:builds {:client {:source-paths ["src"]
|
||||||
:output-to "target/client.js"
|
:compiler
|
||||||
:pretty-print true}}}})
|
{:output-dir "target/client"
|
||||||
|
:output-to "target/client.js"}}}})
|
||||||
|
|
|
||||||
|
|
@ -2,18 +2,17 @@
|
||||||
(ns simpleexample
|
(ns simpleexample
|
||||||
(:require [reagent.core :as reagent :refer [atom]]))
|
(:require [reagent.core :as reagent :refer [atom]]))
|
||||||
|
|
||||||
(def timer (atom (js/Date.)))
|
(defonce timer (atom (js/Date.)))
|
||||||
(def time-color (atom "#f34"))
|
|
||||||
|
|
||||||
(defn update-time [time]
|
(defonce time-color (atom "#f34"))
|
||||||
;; Update the time every 1/10 second to be accurate...
|
|
||||||
(js/setTimeout #(reset! time (js/Date.)) 100))
|
(defonce time-updater (js/setInterval
|
||||||
|
#(reset! timer (js/Date.)) 1000))
|
||||||
|
|
||||||
(defn greeting [message]
|
(defn greeting [message]
|
||||||
[:h1 message])
|
[:h1 message])
|
||||||
|
|
||||||
(defn clock []
|
(defn clock []
|
||||||
(update-time timer)
|
|
||||||
(let [time-str (-> @timer .toTimeString (clojure.string/split " ") first)]
|
(let [time-str (-> @timer .toTimeString (clojure.string/split " ") first)]
|
||||||
[:div.example-clock
|
[:div.example-clock
|
||||||
{:style {:color @time-color}}
|
{:style {:color @time-color}}
|
||||||
|
|
@ -33,5 +32,5 @@
|
||||||
[color-input]])
|
[color-input]])
|
||||||
|
|
||||||
(defn ^:export run []
|
(defn ^:export run []
|
||||||
(reagent/render-component (fn [] [simple-example])
|
(reagent/render-component [simple-example]
|
||||||
(.-body js/document)))
|
(js/document.getElementById "app")))
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue