status-im/re-frame
2
0
Fork 0
mirror of https://github.com/status-im/re-frame.git synced 2025-02-22 14:58:12 +00:00
Code Issues Projects Releases Wiki Activity

added an example

Browse Source
This commit is contained in:
Stuart Mitchell 2015-02-25 14:31:11 +13:00
parent 474b2e4bac
commit 774de39e6c
6 changed files with 182 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/simple/README.md Normal file
View File

@ -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

6
examples/simple/devsrc/simpleexample/dev.cljs Normal file
View File

@ -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"})

22
examples/simple/example.css Normal file
View File

@ -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;
}

17
examples/simple/example.html Normal file
View File

@ -0,0 +1,17 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div id="app">
<h1>Reagent example app – see README.md</h1>
</div>
<script src="target/client.js"></script>
<script>
simpleexample.core.run();
</script>
</body>
</html>

33
examples/simple/project.clj Normal file
View File

@ -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"}}}})

95
examples/simple/src/simpleexample/core.cljs Normal file
View File

@ -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")))