Update error boundary to modern version.
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
e006f31ae5
commit
07daccd6d5
|
|
@ -76,7 +76,8 @@ In this example we have a link component and a nav component the link component
|
|||
{:href "link4"}]]
|
||||
#+END_SRC
|
||||
|
||||
|
||||
In this example we create some simple top trump style cards using a map with a vector of nested maps for the stats.
|
||||
We use map and into to convert the stats value
|
||||
|
||||
#+BEGIN_SRC clojure :results output :tangle src/core.cljs
|
||||
(defn playing-card
|
||||
|
|
@ -88,38 +89,41 @@ In this example we have a link component and a nav component the link component
|
|||
[:img.db.w-100.h-100.br2.br--top {:src image}]
|
||||
|
||||
#_[:div.dtc.tr [:h2.f5.mv0 "amount"]]]
|
||||
(into [:ul.ma2.pa2] (mapv (fn build-stats [ [stat value]] [:li [:div stat [:div.fr (str value)]]]) stats))
|
||||
(into [:ul.ma2.pa2]
|
||||
(mapv (fn build-stats [[stat value]]
|
||||
[:li [:div stat [:div.fr (str value)]]])
|
||||
stats))
|
||||
[:p.f6.lh-copy.measure.mt2.mid-gray ""]]])
|
||||
|
||||
[:div
|
||||
[:div
|
||||
[playing-card
|
||||
{:title "Bee"
|
||||
:image "https://loremflickr.com/300/300/bee"
|
||||
:stats {:strength ""
|
||||
:lifespan "1" ;; 6 weeks
|
||||
:danger ""
|
||||
:stats {:strength "6"
|
||||
:lifespan "3" ;; 6 weeks
|
||||
:danger "5"
|
||||
:mobility "9"}}]
|
||||
[playing-card
|
||||
{:title "Spider"
|
||||
:image "https://loremflickr.com/300/300/spider"
|
||||
:stats {:strength ""
|
||||
:lifespan "3" ;; 1 year
|
||||
:danger ""
|
||||
:mobility ""}}]
|
||||
:stats {:strength "4"
|
||||
:lifespan "5" ;; 1 year
|
||||
:danger "8"
|
||||
:mobility "5"}}]
|
||||
[playing-card
|
||||
{:title "Ant"
|
||||
:image "https://loremflickr.com/300/300/ant"
|
||||
:stats {:strength ""
|
||||
:stats {:strength "8"
|
||||
:lifespan "8" ;; 7 years
|
||||
:danger ""
|
||||
:mobility ""}}]
|
||||
:danger "4"
|
||||
:mobility "3"}}]
|
||||
[playing-card
|
||||
{:title "Ant"
|
||||
:image ""
|
||||
:stats {:strength ""
|
||||
:lifespan ""
|
||||
:danger ""
|
||||
:mobility ""}}]]
|
||||
{:title "Dragonfly"
|
||||
:image "https://loremflickr.com/300/300/dragonfly"
|
||||
:stats {:strength "2"
|
||||
:lifespan "1" ;;2 weeks
|
||||
:danger "1"
|
||||
:mobility "9"}}]]
|
||||
#+END_SRC
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -222,8 +222,7 @@ If we wish to capture a node we can use =:ref= and store the result in an atom,
|
|||
#+END_SRC
|
||||
|
||||
|
||||
#+BEGIN_SRC clojure :tangle src/clojure_demo/core.cljs
|
||||
|
||||
#+BEGIN_SRC clojure :exports none :tangle src/clojure_demo/core.cljs
|
||||
(defn current-page []
|
||||
[:div
|
||||
[navbar]
|
||||
|
|
|
|||
|
|
@ -90,6 +90,24 @@
|
|||
[]
|
||||
transactions))
|
||||
|
||||
(defn err-boundary
|
||||
"https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#error-boundaries"
|
||||
[& children]
|
||||
(let [err-state (reagent/atom nil)]
|
||||
(reagent/create-class
|
||||
{:display-name "Error Boundary"
|
||||
; :component-did-catch (fn [this err info] #_(reset! err-state [err info]))
|
||||
:get-derived-state-from-error (fn [e]
|
||||
(reset! err-state e #_[err info])
|
||||
#js {})
|
||||
:reagent-render (fn [children]
|
||||
(if @err-state
|
||||
[:div (str @err-state)]
|
||||
children
|
||||
;(into [:<>] children)
|
||||
))})))
|
||||
|
||||
|
||||
(defn code-editor
|
||||
[{:keys [exports class results]} content]
|
||||
(let [language class
|
||||
|
|
@ -134,15 +152,16 @@
|
|||
[:div.mb2
|
||||
[:div.ba.ma0.f5.b--black-05.pa2.overflow-auto.editor {:ref #(reset! editor %)}]
|
||||
(when @evaled-result
|
||||
[:pre.ba.ma0.f6.code.b--black-05.pa2.pl4.overflow-auto
|
||||
{:style {:white-space "pre-line"}}
|
||||
;; See org mode :results key
|
||||
(case results
|
||||
"verbatim" (str @evaled-result)
|
||||
"value" (str @evaled-result)
|
||||
"output" @evaled-result
|
||||
"silent" ""
|
||||
@evaled-result)])]))})))
|
||||
[err-boundary
|
||||
[:pre.ba.ma0.f6.code.b--black-05.pa2.pl4.overflow-auto
|
||||
{:style {:white-space "pre-line"}}
|
||||
;; See org mode :results key
|
||||
(case results
|
||||
"verbatim" (str @evaled-result)
|
||||
"value" (str @evaled-result)
|
||||
"output" @evaled-result
|
||||
"silent" ""
|
||||
@evaled-result)]])]))})))
|
||||
|
||||
(def theme
|
||||
(merge tachyon-theme
|
||||
|
|
@ -174,10 +193,20 @@
|
|||
{:homepage {:intro "Clojure tutorials examples and exploration"}
|
||||
:dslpage {:intro "A domain-specific language (DSL) is a language designed to be used for a specific task or domain, clojure has a rich set of DSL some popular DSL's are listed on this page with example's on usage. "}
|
||||
:lorem "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
|
||||
:pages {:dialects {:title "Dialects"
|
||||
:key ::dialects}
|
||||
:devops {:title "devops"
|
||||
:key ::devops}
|
||||
:pages {:dialects {:title "Dialects & Interop"
|
||||
:key ::dialects
|
||||
:demos [{:title "Clojure"
|
||||
:page "clojure-info"}
|
||||
{:title "Clojurescript"
|
||||
:page "clojurescript-info"}
|
||||
{:title "ClojureCLR"
|
||||
:page "clojureclr-info"}
|
||||
{:title "ClojureDart"
|
||||
:page "clojuredart-info"}
|
||||
]}
|
||||
:devops {:title "devops" :key ::devops}
|
||||
:examples {:title "Examples" :key ::examples}
|
||||
:terminology {:title "Terminology" :key ::terminology}
|
||||
:dsl {:title "DSL's"
|
||||
:key ::dsl
|
||||
:intro "A domain-specific language (DSL) is a language designed to be used for a specific task or domain, clojure has a rich set of DSL some popular DSL's are listed on this page with example's on usage. "
|
||||
|
|
@ -242,7 +271,7 @@
|
|||
articles)])
|
||||
|
||||
;; form one component to render a product
|
||||
(defn product-card
|
||||
#_(defn product-card
|
||||
[{:keys [title amount description link]}]
|
||||
[:article.br2.ba.dark-gray.b--black-10.ma2.w-100.w-50-m.w-25-l.mw5
|
||||
[:img.db.w-100.br2.br--top {:src link}]
|
||||
|
|
@ -299,25 +328,26 @@
|
|||
:link (rfe/href ::demo {:page "reagent-demo"})
|
||||
:img-src "https://raw.githubusercontent.com/reagent-project/reagent/master/logo/logo-text.png"}]}]])
|
||||
|
||||
(defn grouped-page [group]
|
||||
[:<>
|
||||
[articles
|
||||
{:title "Clojure Demos"
|
||||
:body (-> site-data :pages group :intro)
|
||||
:articles
|
||||
(mapv (fn fmt-map [demo]
|
||||
{:title (:title demo)
|
||||
:link (rfe/href ::demo {:page (:page demo)})
|
||||
:img-src (:icon-image demo)})
|
||||
(-> site-data :pages group :demos))}]])
|
||||
(defn grouped-page [route]
|
||||
(let [group (keyword (name (:name (:data route))))]
|
||||
[:<>
|
||||
[articles
|
||||
{:title "Clojure Demos"
|
||||
:body (-> site-data :pages group :intro)
|
||||
:articles
|
||||
(mapv (fn fmt-map [demo]
|
||||
{:title (:title demo)
|
||||
:link (rfe/href ::demo {:page (:page demo)})
|
||||
:img-src (:icon-image demo)})
|
||||
(-> site-data :pages group :demos))}]]))
|
||||
|
||||
(defn dialects-page [route]
|
||||
[:<>
|
||||
[grouped-page (keyword (name (:name (:data route))))]])
|
||||
[grouped-page route #_ (keyword (name (:name (:data route))))]])
|
||||
|
||||
(defn dsl-page [route]
|
||||
[:<>
|
||||
[grouped-page (keyword (name (:name (:data route))))]
|
||||
[grouped-page route]
|
||||
#_[articles
|
||||
{:title "Clojure Demos"
|
||||
:body (-> site-data :pages :intro)
|
||||
|
|
@ -373,6 +403,7 @@
|
|||
parse
|
||||
org->split2
|
||||
(reset! content)))})
|
||||
|
||||
(fn [route]
|
||||
(if @content
|
||||
[:main.mt4.mw7.center.avenir
|
||||
|
|
@ -421,33 +452,33 @@
|
|||
:description (-> site-data :lorem)
|
||||
:tagline "https://tachyons.io/components/"}]]])
|
||||
|
||||
;; form 3 component wrap rendering to catch errors and render them
|
||||
;; or just render the rest of the page if all is good
|
||||
;; this uses =create-class= and a hash map of life cycle functions
|
||||
|
||||
(defn err-boundary
|
||||
[& children]
|
||||
(let [err-state (reagent/atom nil)]
|
||||
(reagent/create-class
|
||||
{:display-name "ErrBoundary"
|
||||
:component-did-catch (fn [err info]
|
||||
(reset! err-state [err info]))
|
||||
:reagent-render (fn [& children]
|
||||
(if (nil? @err-state)
|
||||
(into [:<>] children)
|
||||
(let [[_ info] @err-state]
|
||||
[:pre [:code (pr-str info)]])))})))
|
||||
|
||||
;; define our routes, just nested vectors of the route definition hash maps
|
||||
;; define our page routes passed into reitit later on
|
||||
(def routes
|
||||
[["/"
|
||||
{:name ::frontpage
|
||||
:my-data "hi"
|
||||
:view home-page}]
|
||||
|
||||
["/terminology/"
|
||||
{:name ::terminology
|
||||
:view grouped-page}]
|
||||
|
||||
["/dialects/"
|
||||
{:name ::dialects
|
||||
:view grouped-page}]
|
||||
|
||||
["/examples/"
|
||||
{:name ::examples
|
||||
:view grouped-page}]
|
||||
|
||||
["/devops/"
|
||||
{:name ::devops
|
||||
:view grouped-page}]
|
||||
|
||||
["/dsl/"
|
||||
{:name ::dsl
|
||||
:view dsl-page}]
|
||||
:view grouped-page}]
|
||||
|
||||
["/about/"
|
||||
{:name ::about
|
||||
|
|
@ -474,7 +505,7 @@
|
|||
[{:href (rfe/href ::frontpage) :title "title here" :text "home" :key "homepage"}]
|
||||
|
||||
(mapv (fn build-nav [[key page]] {:href (rfe/href (:key page)) :text (:title page)}) (-> site-data :pages))
|
||||
[{:href (rfe/href ::dsl) :text "DSL's" :key "dsl"}
|
||||
[;;{:href (rfe/href ::dsl) :text "DSL's" :key "dsl"}
|
||||
{:title "Domain Specific Languages" :href (rfe/href ::about) :text "About" :key "about"}
|
||||
#_{:href (rfe/href ::i-do-not-exist) :text "missing"}])]
|
||||
[:main.ma4
|
||||
|
|
|
|||
Loading…
Reference in New Issue