From 07daccd6d5721dc17ef5ca182f0a0754ea2ad571 Mon Sep 17 00:00:00 2001 From: Oly Date: Thu, 29 Jun 2023 13:36:19 +0100 Subject: [PATCH] Update error boundary to modern version. --- .../public/documents/hiccup-dsl-demo.org | 42 +++--- .../public/documents/reagent-reitit.org | 3 +- .../src/clojure_demo/core.cljs | 123 +++++++++++------- 3 files changed, 101 insertions(+), 67 deletions(-) diff --git a/reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org b/reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org index 6f29bc7..a9b7567 100644 --- a/reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org +++ b/reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org @@ -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 diff --git a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org index dc154bd..ecf54bb 100644 --- a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org +++ b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org @@ -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] diff --git a/reagent-reitit-demo/src/clojure_demo/core.cljs b/reagent-reitit-demo/src/clojure_demo/core.cljs index 454336c..2174ca6 100644 --- a/reagent-reitit-demo/src/clojure_demo/core.cljs +++ b/reagent-reitit-demo/src/clojure_demo/core.cljs @@ -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