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",
|
||||
"language": "en",
|
||||
"root": "./docs/",
|
||||
"styles": {
|
||||
"website": "styles/website.css"
|
||||
},
|
||||
"structure": {
|
||||
"readme": "INTRO.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
|
||||
informal description, and here it is ... for this app `app-db` will contain
|
||||
a two-key map like this:
|
||||
```cljs
|
||||
```clj
|
||||
{:time (js/Date.) ;; current time for display
|
||||
: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:
|
||||
|
||||
```cljs
|
||||
[clairvoyant.core :refer-macros [trace-forms]]
|
||||
[re-frame-tracer.core :refer [tracer]]
|
||||
```
|
||||
```clojure
|
||||
[clairvoyant.core :refer-macros [trace-forms]]
|
||||
[re-frame-tracer.core :refer [tracer]]
|
||||
```
|
||||
|
||||
2. Then, immediately after the `ns` form add (if you want a green colour):
|
||||
|
||||
```cljs
|
||||
(trace-forms {:tracer (tracer :color "green")}
|
||||
```
|
||||
```clojure
|
||||
(trace-forms {:tracer (tracer :color "green")}
|
||||
```
|
||||
|
||||
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 --
|
||||
|
@ -107,15 +107,15 @@ around to suit your needs.
|
|||
|
||||
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|
|
||||
|--------------|-------|
|
||||
|`handlers.clj`| green |
|
||||
|`subs.cljs` | brown |
|
||||
|`views.clj` | gold |
|
||||
| file | colour|
|
||||
|--------------|-------|
|
||||
|`handlers.clj`| green |
|
||||
|`subs.cljs` | brown |
|
||||
|`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
|
||||
|
@ -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.
|
||||
|
||||
For example, make sure you name the renderer in a Form2 component:
|
||||
```clj
|
||||
|
||||
```clojure
|
||||
(defn my-view
|
||||
[]
|
||||
(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:
|
||||
|
||||
```clj
|
||||
(reg-event-db
|
||||
:blah
|
||||
|
@ -209,7 +211,7 @@ you need to replace the macro `reaction` with the function `make-reaction`.
|
|||
|
||||
Do the following code:
|
||||
|
||||
```cljs
|
||||
```clj
|
||||
(ns my.ns
|
||||
(:require-macros [reagent.ratom :refer [reaction]]))
|
||||
|
||||
|
@ -224,7 +226,7 @@ Do the following code:
|
|||
|
||||
needs to become
|
||||
|
||||
```cljs
|
||||
```clj
|
||||
(ns my.ns
|
||||
(: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.
|
||||
|
||||
Here's the two instructions from the example above:
|
||||
```cljs
|
||||
```clj
|
||||
{:db (assoc db :flag a) ;; side effect on app-db
|
||||
: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).
|
||||
|
||||
The collection of events might look like this:
|
||||
```cljs
|
||||
```clj
|
||||
(def collected-events
|
||||
[
|
||||
[: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)
|
||||
suggested by [Lambda Island Videos](https://lambdaisland.com/):
|
||||
|
||||
```cljs
|
||||
```clj
|
||||
(def <sub (comp deref re-frame.core/subscribe)) ;; aka listen (above)
|
||||
(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?
|
||||
|
||||
First, create a named event handler using `defn` like this:
|
||||
|
||||
```clj
|
||||
(defn select-triangle
|
||||
[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:
|
||||
|
||||
```clj
|
||||
(re-frame.core/reg-event-db ;; this is a "-db" event handler, not "-fx"
|
||||
: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
|
||||
a map literal, like this:
|
||||
|
||||
```cljs
|
||||
```clj
|
||||
;; a test
|
||||
(let [
|
||||
;; 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`.
|
||||
|
||||
Like this:
|
||||
|
||||
```clj
|
||||
(let [
|
||||
;; setup - cummulatively build up db
|
||||
|
@ -123,6 +126,7 @@ Like this:
|
|||
|
||||
;; validate that db' is correct
|
||||
(is ...)
|
||||
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
```clj
|
||||
;; setup - cummulatively build up db
|
||||
(dispatch-sync [:initialise-db])
|
||||
(dispatch-sync [:clear-panel])
|
||||
(dispatch-sync [:draw-triangle 1 2 3]))
|
||||
;; setup - cummulatively build up db
|
||||
(dispatch-sync [:initialise-db])
|
||||
(dispatch-sync [:clear-panel])
|
||||
(dispatch-sync [:draw-triangle 1 2 3])
|
||||
|
||||
;; execute
|
||||
(dispatch-sync [:select-triange :other :stuff])
|
||||
;; execute
|
||||
(dispatch-sync [:select-triange :other :stuff])
|
||||
|
||||
;; validate that the valuein `app-db` is correct
|
||||
;; perhaps with subscriptions
|
||||
;; validate that the valuein 'app-db' is correct
|
||||
;; perhaps with subscriptions
|
||||
```
|
||||
|
||||
Notes:
|
||||
|
@ -241,7 +245,7 @@ A trivial example:
|
|||
```
|
||||
|
||||
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?
|
||||
|
||||
|
@ -255,9 +259,9 @@ But what if the View Function has a subscription?
|
|||
|
||||
```clj
|
||||
(defn my-view
|
||||
[something]
|
||||
(let [val (subscribe [:query-id])] <-- reactive subscription
|
||||
[:div .... using @val in here])))
|
||||
[something]
|
||||
(let [val (subscribe [:query-id])] ;; <-- reactive subscription
|
||||
[:div .... using @val in here]))
|
||||
```
|
||||
|
||||
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`
|
||||
to stub out `subscribe`. Like this:
|
||||
|
||||
```clj
|
||||
(defn subscription-stub [x]
|
||||
(atom
|
||||
|
|
|
@ -23,7 +23,7 @@ The pattern involves the outer component, which sources data, supplying this dat
|
|||
|
||||
### Example Using Google Maps
|
||||
|
||||
```cljs
|
||||
```clj
|
||||
(defn gmap-inner []
|
||||
(let [gmap (atom nil)
|
||||
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