oly
/
clojure-demos
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update error boundary to modern version.
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Oly 2023-06-29 13:36:19 +01:00
parent e006f31ae5
commit 07daccd6d5
3 changed files with 101 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org
View File

@ -76,7 +76,8 @@ In this example we have a link component and a nav component the link component
{:href "link4"}]] {:href "link4"}]]
#+END_SRC #+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 #+BEGIN_SRC clojure :results output :tangle src/core.cljs
(defn playing-card (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}] [:img.db.w-100.h-100.br2.br--top {:src image}]
#_[:div.dtc.tr [:h2.f5.mv0 "amount"]]] #_[: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 ""]]]) [:p.f6.lh-copy.measure.mt2.mid-gray ""]]])
[:div [:div
[playing-card [playing-card
{:title "Bee" {:title "Bee"
:image "https://loremflickr.com/300/300/bee" :image "https://loremflickr.com/300/300/bee"
:stats {:strength "" :stats {:strength "6"
:lifespan "1" ;; 6 weeks :lifespan "3" ;; 6 weeks
:danger "" :danger "5"
:mobility "9"}}] :mobility "9"}}]
[playing-card [playing-card
{:title "Spider" {:title "Spider"
:image "https://loremflickr.com/300/300/spider" :image "https://loremflickr.com/300/300/spider"
:stats {:strength "" :stats {:strength "4"
:lifespan "3" ;; 1 year :lifespan "5" ;; 1 year
:danger "" :danger "8"
:mobility ""}}] :mobility "5"}}]
[playing-card [playing-card
{:title "Ant" {:title "Ant"
:image "https://loremflickr.com/300/300/ant" :image "https://loremflickr.com/300/300/ant"
:stats {:strength "" :stats {:strength "8"
:lifespan "8" ;; 7 years :lifespan "8" ;; 7 years
:danger "" :danger "4"
:mobility ""}}] :mobility "3"}}]
[playing-card [playing-card
{:title "Ant" {:title "Dragonfly"
:image "" :image "https://loremflickr.com/300/300/dragonfly"
:stats {:strength "" :stats {:strength "2"
:lifespan "" :lifespan "1" ;;2 weeks
:danger "" :danger "1"
:mobility ""}}]] :mobility "9"}}]]
#+END_SRC #+END_SRC

3
reagent-reitit-demo/resources/public/documents/reagent-reitit.org
View File

@ -222,8 +222,7 @@ If we wish to capture a node we can use =:ref= and store the result in an atom,
#+END_SRC #+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 [] (defn current-page []
[:div [:div
[navbar] [navbar]

123
reagent-reitit-demo/src/clojure_demo/core.cljs
View File

@ -90,6 +90,24 @@
[] []
transactions)) 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 (defn code-editor
[{:keys [exports class results]} content] [{:keys [exports class results]} content]
(let [language class (let [language class
@ -134,15 +152,16 @@
[:div.mb2 [:div.mb2
[:div.ba.ma0.f5.b--black-05.pa2.overflow-auto.editor {:ref #(reset! editor %)}] [:div.ba.ma0.f5.b--black-05.pa2.overflow-auto.editor {:ref #(reset! editor %)}]
(when @evaled-result (when @evaled-result
[:pre.ba.ma0.f6.code.b--black-05.pa2.pl4.overflow-auto [err-boundary
{:style {:white-space "pre-line"}} [:pre.ba.ma0.f6.code.b--black-05.pa2.pl4.overflow-auto
;; See org mode :results key {:style {:white-space "pre-line"}}
(case results ;; See org mode :results key
"verbatim" (str @evaled-result) (case results
"value" (str @evaled-result) "verbatim" (str @evaled-result)
"output" @evaled-result "value" (str @evaled-result)
"silent" "" "output" @evaled-result
@evaled-result)])]))}))) "silent" ""
@evaled-result)]])]))})))
(def theme (def theme
(merge tachyon-theme (merge tachyon-theme
@ -174,10 +193,20 @@
{:homepage {:intro "Clojure tutorials examples and exploration"} {: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. "} :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." :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" :pages {:dialects {:title "Dialects & Interop"
:key ::dialects} :key ::dialects
:devops {:title "devops" :demos [{:title "Clojure"
:key ::devops} :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" :dsl {:title "DSL's"
:key ::dsl :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. " :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)]) articles)])
;; form one component to render a product ;; form one component to render a product
(defn product-card #_(defn product-card
[{:keys [title amount description link]}] [{:keys [title amount description link]}]
[:article.br2.ba.dark-gray.b--black-10.ma2.w-100.w-50-m.w-25-l.mw5 [: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}] [:img.db.w-100.br2.br--top {:src link}]
@ -299,25 +328,26 @@
:link (rfe/href ::demo {:page "reagent-demo"}) :link (rfe/href ::demo {:page "reagent-demo"})
:img-src "https://raw.githubusercontent.com/reagent-project/reagent/master/logo/logo-text.png"}]}]]) :img-src "https://raw.githubusercontent.com/reagent-project/reagent/master/logo/logo-text.png"}]}]])
(defn grouped-page [group] (defn grouped-page [route]
[:<> (let [group (keyword (name (:name (:data route))))]
[articles [:<>
{:title "Clojure Demos" [articles
:body (-> site-data :pages group :intro) {:title "Clojure Demos"
:articles :body (-> site-data :pages group :intro)
(mapv (fn fmt-map [demo] :articles
{:title (:title demo) (mapv (fn fmt-map [demo]
:link (rfe/href ::demo {:page (:page demo)}) {:title (:title demo)
:img-src (:icon-image demo)}) :link (rfe/href ::demo {:page (:page demo)})
(-> site-data :pages group :demos))}]]) :img-src (:icon-image demo)})
(-> site-data :pages group :demos))}]]))
(defn dialects-page [route] (defn dialects-page [route]
[:<> [:<>
[grouped-page (keyword (name (:name (:data route))))]]) [grouped-page route #_ (keyword (name (:name (:data route))))]])
(defn dsl-page [route] (defn dsl-page [route]
[:<> [:<>
[grouped-page (keyword (name (:name (:data route))))] [grouped-page route]
#_[articles #_[articles
{:title "Clojure Demos" {:title "Clojure Demos"
:body (-> site-data :pages :intro) :body (-> site-data :pages :intro)
@ -373,6 +403,7 @@
parse parse
org->split2 org->split2
(reset! content)))}) (reset! content)))})
(fn [route] (fn [route]
(if @content (if @content
[:main.mt4.mw7.center.avenir [:main.mt4.mw7.center.avenir
@ -421,33 +452,33 @@
:description (-> site-data :lorem) :description (-> site-data :lorem)
:tagline "https://tachyons.io/components/"}]]]) :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 ;; define our page routes passed into reitit later on
[& 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
(def routes (def routes
[["/" [["/"
{:name ::frontpage {:name ::frontpage
:my-data "hi" :my-data "hi"
:view home-page}] :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/" ["/dsl/"
{:name ::dsl {:name ::dsl
:view dsl-page}] :view grouped-page}]
["/about/" ["/about/"
{:name ::about {:name ::about
@ -474,7 +505,7 @@
[{:href (rfe/href ::frontpage) :title "title here" :text "home" :key "homepage"}] [{: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)) (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"} {:title "Domain Specific Languages" :href (rfe/href ::about) :text "About" :key "about"}
#_{:href (rfe/href ::i-do-not-exist) :text "missing"}])] #_{:href (rfe/href ::i-do-not-exist) :text "missing"}])]
[:main.ma4 [:main.ma4