mirror of https://github.com/status-im/reagent.git
Make todomvc example use figwheel
This commit is contained in:
Dan Holmsand
parent
3e9b42a92b
commit
73281cdd16
|
|
@ -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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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"})
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example</title>
|
||||
<link rel="stylesheet" href="todos.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>Reagent example app – see README.md</h1>
|
||||
</div>
|
||||
<script src="target/client.js"></script>
|
||||
<script>
|
||||
todomvc.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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"]
|
||||
|
||||
:profiles {:dev {:cljsbuild
|
||||
{:builds {:client {:source-paths ["devsrc"]
|
||||
:compiler
|
||||
{:preamble ["reagent/react.js"]
|
||||
:output-dir "target/client"
|
||||
:output-to "target/client.js"
|
||||
:pretty-print true}}}})
|
||||
{: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"}}}})
|
||||
|
|
|
|||
|
|
@ -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])))
|
||||
|
||||
(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)
|
||||
(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")))
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>todomvc with reagent</title>
|
||||
<link rel="stylesheet" href="todos.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>This will become todomvc when the ClojureScript is compiled</h1>
|
||||
<script type="text/javascript" src="target/client.js"></script>
|
||||
<script type="text/javascript">
|
||||
todomvc.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue