solarized highlighting theme added to the docs build
This commit is contained in:
parent
5fe1735ea8
commit
b9b02e6edd
|
@ -3,6 +3,9 @@
|
||||||
"description": "Documentation of re-frame framework",
|
"description": "Documentation of re-frame framework",
|
||||||
"language": "en",
|
"language": "en",
|
||||||
"root": "./docs/",
|
"root": "./docs/",
|
||||||
|
"styles": {
|
||||||
|
"website": "styles/website.css"
|
||||||
|
},
|
||||||
"structure": {
|
"structure": {
|
||||||
"readme": "INTRO.md",
|
"readme": "INTRO.md",
|
||||||
"summary": "README.md"
|
"summary": "README.md"
|
||||||
|
|
|
@ -60,7 +60,7 @@ here, to minimise cognitive load, we'll cut that corner.
|
||||||
But ... we can't cut it completely. You'll still need an
|
But ... we can't cut it completely. You'll still need an
|
||||||
informal description, and here it is ... for this app `app-db` will contain
|
informal description, and here it is ... for this app `app-db` will contain
|
||||||
a two-key map like this:
|
a two-key map like this:
|
||||||
```cljs
|
```clj
|
||||||
{:time (js/Date.) ;; current time for display
|
{:time (js/Date.) ;; current time for display
|
||||||
:time-color "#f88"} ;; the colour in which the time should be shown
|
:time-color "#f88"} ;; the colour in which the time should be shown
|
||||||
```
|
```
|
||||||
|
|
|
@ -89,16 +89,16 @@ It is the functions within these namespaces that we wish to trace.
|
||||||
|
|
||||||
1. At the top of each add these namespaces, add these requires:
|
1. At the top of each add these namespaces, add these requires:
|
||||||
|
|
||||||
```cljs
|
```clojure
|
||||||
[clairvoyant.core :refer-macros [trace-forms]]
|
[clairvoyant.core :refer-macros [trace-forms]]
|
||||||
[re-frame-tracer.core :refer [tracer]]
|
[re-frame-tracer.core :refer [tracer]]
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Then, immediately after the `ns` form add (if you want a green colour):
|
2. Then, immediately after the `ns` form add (if you want a green colour):
|
||||||
|
|
||||||
```cljs
|
```clojure
|
||||||
(trace-forms {:tracer (tracer :color "green")}
|
(trace-forms {:tracer (tracer :color "green")}
|
||||||
```
|
```
|
||||||
|
|
||||||
3. Finally, put in a closing `)` at the end of the file. Now all functions within the
|
3. Finally, put in a closing `)` at the end of the file. Now all functions within the
|
||||||
`ns` will be traced. It that is too noisy -- perhaps you won't want to trace all the helper functions --
|
`ns` will be traced. It that is too noisy -- perhaps you won't want to trace all the helper functions --
|
||||||
|
@ -107,15 +107,15 @@ around to suit your needs.
|
||||||
|
|
||||||
4. Colour choice
|
4. Colour choice
|
||||||
|
|
||||||
We have sauntered in the direction of the following colours
|
We have sauntered in the direction of the following colours
|
||||||
|
|
||||||
| file | colour|
|
| file | colour|
|
||||||
|--------------|-------|
|
|--------------|-------|
|
||||||
|`handlers.clj`| green |
|
|`handlers.clj`| green |
|
||||||
|`subs.cljs` | brown |
|
|`subs.cljs` | brown |
|
||||||
|`views.clj` | gold |
|
|`views.clj` | gold |
|
||||||
|
|
||||||
But I still think orange, flared pants are a good look. So, yeah. You may end up choosing others.
|
But I still think orange, flared pants are a good look. So, yeah. You may end up choosing others.
|
||||||
|
|
||||||
|
|
||||||
## Say No To Anonymous
|
## Say No To Anonymous
|
||||||
|
@ -124,7 +124,8 @@ To get good quality tracing, you need to provide names for all
|
||||||
your functions. So, don't let handlers be anonymous when registering them.
|
your functions. So, don't let handlers be anonymous when registering them.
|
||||||
|
|
||||||
For example, make sure you name the renderer in a Form2 component:
|
For example, make sure you name the renderer in a Form2 component:
|
||||||
```clj
|
|
||||||
|
```clojure
|
||||||
(defn my-view
|
(defn my-view
|
||||||
[]
|
[]
|
||||||
(let [name (subscribe [:name])]
|
(let [name (subscribe [:name])]
|
||||||
|
@ -133,6 +134,7 @@ For example, make sure you name the renderer in a Form2 component:
|
||||||
```
|
```
|
||||||
|
|
||||||
And name those event handlers:
|
And name those event handlers:
|
||||||
|
|
||||||
```clj
|
```clj
|
||||||
(reg-event-db
|
(reg-event-db
|
||||||
:blah
|
:blah
|
||||||
|
@ -209,7 +211,7 @@ you need to replace the macro `reaction` with the function `make-reaction`.
|
||||||
|
|
||||||
Do the following code:
|
Do the following code:
|
||||||
|
|
||||||
```cljs
|
```clj
|
||||||
(ns my.ns
|
(ns my.ns
|
||||||
(:require-macros [reagent.ratom :refer [reaction]]))
|
(:require-macros [reagent.ratom :refer [reaction]]))
|
||||||
|
|
||||||
|
@ -224,7 +226,7 @@ Do the following code:
|
||||||
|
|
||||||
needs to become
|
needs to become
|
||||||
|
|
||||||
```cljs
|
```clj
|
||||||
(ns my.ns
|
(ns my.ns
|
||||||
(:require [reagent.ratom :refer [make-reaction]]))
|
(:require [reagent.ratom :refer [make-reaction]]))
|
||||||
|
|
||||||
|
|
|
@ -49,7 +49,7 @@ the particular side effect required, and the `value` for that `key` provides
|
||||||
further data. The structure of `value` is different for each side-effect.
|
further data. The structure of `value` is different for each side-effect.
|
||||||
|
|
||||||
Here's the two instructions from the example above:
|
Here's the two instructions from the example above:
|
||||||
```cljs
|
```clj
|
||||||
{:db (assoc db :flag a) ;; side effect on app-db
|
{:db (assoc db :flag a) ;; side effect on app-db
|
||||||
:dispatch [:do-something-else 3]} ;; dispatch this event
|
:dispatch [:do-something-else 3]} ;; dispatch this event
|
||||||
```
|
```
|
||||||
|
|
|
@ -103,7 +103,7 @@ into a collection, the events caused by that user's actions
|
||||||
(button clicks, drags, key presses, etc).
|
(button clicks, drags, key presses, etc).
|
||||||
|
|
||||||
The collection of events might look like this:
|
The collection of events might look like this:
|
||||||
```cljs
|
```clj
|
||||||
(def collected-events
|
(def collected-events
|
||||||
[
|
[
|
||||||
[:clear]
|
[:clear]
|
||||||
|
|
|
@ -96,7 +96,7 @@ AND there's less chance of us forgetting an `@` (which can lead to odd problems)
|
||||||
I've ended up quite liking [the alternative names](https://lambdaisland.com/blog/11-02-2017-re-frame-form-1-subscriptions)
|
I've ended up quite liking [the alternative names](https://lambdaisland.com/blog/11-02-2017-re-frame-form-1-subscriptions)
|
||||||
suggested by [Lambda Island Videos](https://lambdaisland.com/):
|
suggested by [Lambda Island Videos](https://lambdaisland.com/):
|
||||||
|
|
||||||
```cljs
|
```clj
|
||||||
(def <sub (comp deref re-frame.core/subscribe)) ;; aka listen (above)
|
(def <sub (comp deref re-frame.core/subscribe)) ;; aka listen (above)
|
||||||
(def >evt re-frame.core/dispatch)
|
(def >evt re-frame.core/dispatch)
|
||||||
```
|
```
|
||||||
|
|
|
@ -39,6 +39,7 @@ tutorial. Every unittest has 3 steps:
|
||||||
Event Handlers are pure functions which should make them easy to test, right?
|
Event Handlers are pure functions which should make them easy to test, right?
|
||||||
|
|
||||||
First, create a named event handler using `defn` like this:
|
First, create a named event handler using `defn` like this:
|
||||||
|
|
||||||
```clj
|
```clj
|
||||||
(defn select-triangle
|
(defn select-triangle
|
||||||
[db [_ triangle-id]
|
[db [_ triangle-id]
|
||||||
|
@ -46,6 +47,7 @@ First, create a named event handler using `defn` like this:
|
||||||
```
|
```
|
||||||
|
|
||||||
You'd register this handler in a separate step:
|
You'd register this handler in a separate step:
|
||||||
|
|
||||||
```clj
|
```clj
|
||||||
(re-frame.core/reg-event-db ;; this is a "-db" event handler, not "-fx"
|
(re-frame.core/reg-event-db ;; this is a "-db" event handler, not "-fx"
|
||||||
:select-triangle
|
:select-triangle
|
||||||
|
@ -67,7 +69,7 @@ But how to create a useful `db` value?
|
||||||
into a map at certain paths to simulate a real-world `db` value or, even easier, just use
|
into a map at certain paths to simulate a real-world `db` value or, even easier, just use
|
||||||
a map literal, like this:
|
a map literal, like this:
|
||||||
|
|
||||||
```cljs
|
```clj
|
||||||
;; a test
|
;; a test
|
||||||
(let [
|
(let [
|
||||||
;; setup - create db and event
|
;; setup - create db and event
|
||||||
|
@ -108,6 +110,7 @@ which cumulatively create the required initial state. Tests then need
|
||||||
know nothing about the internal structure of that `db`.
|
know nothing about the internal structure of that `db`.
|
||||||
|
|
||||||
Like this:
|
Like this:
|
||||||
|
|
||||||
```clj
|
```clj
|
||||||
(let [
|
(let [
|
||||||
;; setup - cummulatively build up db
|
;; setup - cummulatively build up db
|
||||||
|
@ -123,6 +126,7 @@ Like this:
|
||||||
|
|
||||||
;; validate that db' is correct
|
;; validate that db' is correct
|
||||||
(is ...)
|
(is ...)
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
This approach works so long as all the event handlers are
|
This approach works so long as all the event handlers are
|
||||||
|
@ -144,16 +148,16 @@ Except, we'd have to use `dispatch-sysnc` rather `dispatch` to
|
||||||
force immediate handling of events, rather than queuing.
|
force immediate handling of events, rather than queuing.
|
||||||
|
|
||||||
```clj
|
```clj
|
||||||
;; setup - cummulatively build up db
|
;; setup - cummulatively build up db
|
||||||
(dispatch-sync [:initialise-db])
|
(dispatch-sync [:initialise-db])
|
||||||
(dispatch-sync [:clear-panel])
|
(dispatch-sync [:clear-panel])
|
||||||
(dispatch-sync [:draw-triangle 1 2 3]))
|
(dispatch-sync [:draw-triangle 1 2 3])
|
||||||
|
|
||||||
;; execute
|
;; execute
|
||||||
(dispatch-sync [:select-triange :other :stuff])
|
(dispatch-sync [:select-triange :other :stuff])
|
||||||
|
|
||||||
;; validate that the valuein `app-db` is correct
|
;; validate that the valuein 'app-db' is correct
|
||||||
;; perhaps with subscriptions
|
;; perhaps with subscriptions
|
||||||
```
|
```
|
||||||
|
|
||||||
Notes:
|
Notes:
|
||||||
|
@ -241,7 +245,7 @@ A trivial example:
|
||||||
```
|
```
|
||||||
|
|
||||||
So, here, testing involves passing values into the function and checking the data structure returned
|
So, here, testing involves passing values into the function and checking the data structure returned
|
||||||
for correctness.
|
for correctness.p
|
||||||
|
|
||||||
What's returned is hiccup, of course. So how do you test hiccup for correctness?
|
What's returned is hiccup, of course. So how do you test hiccup for correctness?
|
||||||
|
|
||||||
|
@ -256,8 +260,8 @@ But what if the View Function has a subscription?
|
||||||
```clj
|
```clj
|
||||||
(defn my-view
|
(defn my-view
|
||||||
[something]
|
[something]
|
||||||
(let [val (subscribe [:query-id])] <-- reactive subscription
|
(let [val (subscribe [:query-id])] ;; <-- reactive subscription
|
||||||
[:div .... using @val in here])))
|
[:div .... using @val in here]))
|
||||||
```
|
```
|
||||||
|
|
||||||
The use of `subscribe` makes the function impure (it obtains data from places other than its args).
|
The use of `subscribe` makes the function impure (it obtains data from places other than its args).
|
||||||
|
@ -279,6 +283,7 @@ Which is all possible, if a little messy.
|
||||||
|
|
||||||
There is a pragmatic method available to handle the impurity: use `with-redefs`
|
There is a pragmatic method available to handle the impurity: use `with-redefs`
|
||||||
to stub out `subscribe`. Like this:
|
to stub out `subscribe`. Like this:
|
||||||
|
|
||||||
```clj
|
```clj
|
||||||
(defn subscription-stub [x]
|
(defn subscription-stub [x]
|
||||||
(atom
|
(atom
|
||||||
|
|
|
@ -23,7 +23,7 @@ The pattern involves the outer component, which sources data, supplying this dat
|
||||||
|
|
||||||
### Example Using Google Maps
|
### Example Using Google Maps
|
||||||
|
|
||||||
```cljs
|
```clj
|
||||||
(defn gmap-inner []
|
(defn gmap-inner []
|
||||||
(let [gmap (atom nil)
|
(let [gmap (atom nil)
|
||||||
options (clj->js {"zoom" 9})
|
options (clj->js {"zoom" 9})
|
||||||
|
|
|
@ -0,0 +1,93 @@
|
||||||
|
/* .hljs-symbol { */
|
||||||
|
/* color: #AD81FF !important; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
/* .hljs-name { */
|
||||||
|
/* color: #67D8EE !important; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
/* .hljs-builtin-name { */
|
||||||
|
/* color: #A6E131; */
|
||||||
|
/* } */
|
||||||
|
.markdown-section > pre {
|
||||||
|
color: #657b83 !important;
|
||||||
|
background: #fdf6e3 !important;
|
||||||
|
}
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
background: #fdf6e3;
|
||||||
|
color: #657b83;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #93a1a1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Solarized Green */
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-addition {
|
||||||
|
color: #859900;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Solarized Cyan */
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-meta .hljs-meta-string,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-regexp {
|
||||||
|
color: #2aa198;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Solarized Blue */
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class {
|
||||||
|
color: #268bd2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Solarized Yellow */
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-class .hljs-title,
|
||||||
|
.hljs-type {
|
||||||
|
color: #b58900;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Solarized Orange */
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-subst,
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-meta .hljs-keyword,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-link {
|
||||||
|
color: #cb4b16;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Solarized Red */
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #dc322f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-formula {
|
||||||
|
background: #eee8d5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
Loading…
Reference in New Issue