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

Updated reagent info.
continuous-integration/drone/push Build encountered an error Details

This commit is contained in:
Oly 2023-06-16 14:14:00 +01:00
parent f8a3f544a4
commit 0dbb44be12
3 changed files with 219 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
deps.edn
View File

@ -6,8 +6,8 @@
cljs-ajax/cljs-ajax {:mvn/version "0.8.1"} cljs-ajax/cljs-ajax {:mvn/version "0.8.1"}
;; react ;; react
reagent/reagent {:mvn/version "1.1.1"} reagent/reagent {:mvn/version "1.2.0"}
reagent-utils/reagent-utils {:mvn/version "0.3.3"} reagent-utils/reagent-utils {:mvn/version "0.3.6"}
olymk2/cl-org {:git/url "https://gitlab.com/olymk2/cl-org.git" olymk2/cl-org {:git/url "https://gitlab.com/olymk2/cl-org.git"
:sha "528e8125afcac5d7664aac80f7fbba12dd0f5d98"} :sha "528e8125afcac5d7664aac80f7fbba12dd0f5d98"}
;;routing ;;routing

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

@ -7,11 +7,89 @@ Reagent is a popular react wrapper in the clojurescript it greatly simplify buil
The basis of any react app is components these are small snippets of html which can be composed to build up a page, The basis of any react app is components these are small snippets of html which can be composed to build up a page,
reagent provides 3 main ways to create components dependant on the complexity needed most of the time you will create form 1 and form 2 components. reagent provides 3 main ways to create components dependant on the complexity needed most of the time you will create form 1 and form 2 components.
#+BEGIN_SRC html :results silent :exports none :tangle resources/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clojure demos</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css">
</head>
<body>
<div id="app">
App loading here
</div>
<script src="/cljs-out/main_bundle.js" type="application/javascript"></script>
</body>
</html>
#+END_SRC
#+BEGIN_SRC edn :results silent :tangle deps.edn
{:paths ["src" "resources"]
:deps
{org.clojure/clojure {:mvn/version "1.10.0"}
org.clojure/clojurescript {:mvn/version "1.11.60"}
reagent/reagent {:mvn/version "1.2.0"}
thheller/shadow-cljs {:mvn/version "2.24.0"}}
}
#+END_SRC
#+BEGIN_SRC edn :results silent :tangle shadow-cljs.edn
{:deps {:aliases [:dev]}
:dev-http {8080 ["resources/public/" "classpath:public"]}
:source ["src" "../../components"]
:builds {:app {:output-dir "resources/public/cljs-out/"
:asset-path "/cljs-out"
:target :browser
:compiler-options {:infer-externs :auto
:externs ["datascript/externs.js"]
:output-feature-set :es6}
:modules {:main_bundle {:init-fn clojure-demo.core/startup!}}
:devtools {:after-load app.main/reload!}}}}
#+END_SRC
#+BEGIN_SRC json :results silent :tangle package.json
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"shadow-cljs": "^2.23.3",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
#+END_SRC
#+BEGIN_SRC text :results silent :tangle readme.org
#+TITLE: Getting started
* Install the npm requirements.
npx install
* Launch shadow-cljs watch for source code changes
npx shadow-cljs watch app
#+END_SRC
#+BEGIN_SRC json :tangle src/clojure_demo/core.cljs
(ns clojure-demo.core
(:require
["react-dom/client" :refer [createRoot]]
[reagent.core :as reagent]))
#+END_SRC
** Form 1 components ** Form 1 components
Form one components are the most basic simply rendering some html with values that are not going to change. Form one components are the most basic simply rendering some html with values that are not going to change.
In the example below the function just returns some hiccup with the parameters inserted, you need to specify =:key= when dynamically repeating the elements and these should be reproducible unique id's where possible not randomly generated or indexed numbers if the data is unordered. In the example below the function just returns some hiccup with the parameters inserted, you need to specify =:key= when dynamically repeating the elements and these should be reproducible unique id's where possible not randomly generated or indexed numbers if the data is unordered.
#+BEGIN_SRC clojure :tangle "src/core.cljs"
#+BEGIN_SRC clojure :tangle src/clojure_demo/core.cljs
(defn navbar-link [{:keys [href title text] :or {text nil title nil}}] (defn navbar-link [{:keys [href title text] :or {text nil title nil}}]
[:a.link.dim.dib.mr3 {:key href :href href :title title} text]) [:a.link.dim.dib.mr3 {:key href :href href :title title} text])
@ -19,7 +97,7 @@ In the example below the function just returns some hiccup with the parameters i
#+END_SRC #+END_SRC
#+BEGIN_SRC clojure #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs
(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
@ -46,31 +124,50 @@ In the example below the function just returns some hiccup with the parameters i
** Form 2 components ** Form 2 components
Form two components are used so we can track local state of a component, this is appropriate any time we need to react to change forms and user click event's being simple examples. Form two components are used so we can track local state of a component, this is appropriate any time we need to react to change forms and user click event's being simple examples.
#+BEGIN_SRC clojurescript
#+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs
(defn my-component [title starting-value] (defn my-component [title starting-value]
(let [local-state (reagent/atom starting-value)] (let [local-state (reagent/atom starting-value)]
(fn [title] (fn [title]
[:h1 {:class (when @local-state "hide") [:h1 {:class (when @local-state "hide")
:on-click (fn [] (swap! local-state inc))} :on-click (fn [e]
(prn (-> e .-target))
(swap! local-state inc))}
(str title " " @local-state)]))) (str title " " @local-state)])))
[my-component "Clickable component" 1] [my-component "Clickable component" 1]
#+END_SRC #+END_SRC
#+BEGIN_SRC clojurescript #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs
(defn update-form-data [form-data name value] (defn update-form-data [form-data ^js event]
(swap! form-data assoc [name] value)) (prn "test here")
(prn @form-data)
;;(prn (.dir js/console event))
(prn (-> event))
(prn (-> event .-currentTarget))
(prn (-> event .-target ))
(prn (-> event .-target .-value))
(swap! form-data assoc
(keyword (-> event .-target .-name))
(-> event .-target .-value)))
(defn my-address-form [] (defn my-address-form []
(let [form-data (r/atom {})] (let [form-data (reagent/atom {})
form-change (partial update-form-data form-data)]
(fn [] (fn []
[:form [:div
[:input {:name "address-line-1" :on-change :placeholder "Address Line 1"}] (str @form-data)
[:input {:name "address-line-2" :placeholder "Address Line 2"}] [:form {:on-submit prn}
[:input {:name "address-line-3" :placeholder "Address Line 3"}] [:input {:type "text"
[:input {:name "city" :placeholder "City"}] :default-value (str (:test @form-data))
[:input {:name "postcode" :placeholder "Postcode / Zipcode"}] :name "address-line-1"
])) :on-change form-change :placeholder "Address Line 1"}]
[:input {:type "text" :name "address-line-2" :on-change form-change :placeholder "Address Line 2"}]
[:input {:name "address-line-3" :on-change form-change :placeholder "Address Line 3"}]
[:input {:name "city" :on-change form-change :placeholder "City"}]
[:input {:name "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]])))
[:div [my-address-form]]
#+END_SRC #+END_SRC
@ -96,7 +193,7 @@ usually this form of component is only needed when rendering graphics or things
* Fetching a html element reference * Fetching a html element reference
If we wish to capture a node we can use =:ref= and store the result in an atom, we can then de reference the atom and call a method on the node using =aget=. If we wish to capture a node we can use =:ref= and store the result in an atom, we can then de reference the atom and call a method on the node using =aget=.
#+BEGIN_SRC clojurescript :results output #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs
(defn example-ref-component [title] (defn example-ref-component [title]
(let [local-ref (reagent/atom nil)] (let [local-ref (reagent/atom nil)]
(fn [title] (fn [title]
@ -108,6 +205,21 @@ If we wish to capture a node we can use =:ref= and store the result in an atom,
#+END_SRC #+END_SRC
#+BEGIN_SRC json :tangle src/clojure_demo/core.cljs
(defn current-page [])
(defn mount-root-page []
;; this select the main node from the html file and injects your page content
(.render
(createRoot (.getElementById js/document "app"))
(reagent/as-element [err-boundary [current-page]])))
(def launch (do (startup!) true))
#+END_SRC
* Further reading * Further reading
https://github.com/reagent-project/reagent https://github.com/reagent-project/reagent

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

@ -25,11 +25,12 @@
[sci.core :as sci] [sci.core :as sci]
[spec-tools.data-spec :as ds])) [spec-tools.data-spec :as ds]))
(def languages {"clojure" {:mode "clojure"} (def languages
{"clojure" {:mode "clojure"}
"clojurescript" {:mode "clojure"} "clojurescript" {:mode "clojure"}
"yaml" {:mode "yaml"}}) "yaml" {:mode "yaml"}})
(def yaml-mode (LanguageSupport. (.define StreamLanguage yaml) )) (def yaml-mode (LanguageSupport. (.define StreamLanguage yaml)))
;; https://github.com/babashka/sci.configs ;; https://github.com/babashka/sci.configs
(def rf-ns (sci/create-ns 'reitit.frontend nil)) (def rf-ns (sci/create-ns 'reitit.frontend nil))
@ -56,22 +57,22 @@
'rfe {'start! (sci/copy-var rfe/start! rfe-ns) 'rfe {'start! (sci/copy-var rfe/start! rfe-ns)
'href (sci/copy-var rfe/href rfe-ns)}}})) 'href (sci/copy-var rfe/href rfe-ns)}}}))
;(def sci-ctx (sci/empty-environment)) ;(def sci-ctx (sci/empty-environment))
(sci/alter-var-root sci/print-fn (constantly *print-fn*)) (sci/alter-var-root sci/print-fn (constantly *print-fn*))
(defn slugify [s] (defn slugify [s]
(str "toc" (when s
(str ;;"toc"
(-> s (-> s
(clojure.string/lower-case) (clojure.string/lower-case)
(clojure.string/replace #"[^\w]+" "-") (clojure.string/replace #"[^\w]+" "-")
(clojure.string/replace #"^-\\|-\\-$" "")))) (clojure.string/replace #"^-\\|-\\-$" "")))))
(defn fetch-selected-text (defn fetch-selected-text
"Get the users selected text" "Get the users selected text"
[updated-view transactions] [updated-view transactions]
(reduce (fn [text t] (reduce (fn [text t]
(if (= "select.pointer" (str (.annotation t (.-userEvent Transaction) ))) (if (= "select.pointer" (str (.annotation t (.-userEvent Transaction))))
(conj text (conj text
(.sliceDoc (.sliceDoc
^EditorState (.-state updated-view) ^EditorState (.-state updated-view)
@ -101,7 +102,7 @@
(first selected-text) (first selected-text)
(.-doc (.-state view-update)))] (.-doc (.-state view-update)))]
(reset! evaled-result (sci/eval-string* sci-ctx (reset! evaled-result (sci/eval-string* sci-ctx
(.toString eval-code) )) (.toString eval-code)))
(prn "updated delayed"))) 1000))))) (prn "updated delayed"))) 1000)))))
start-state start-state
(.create EditorState (.create EditorState
@ -119,7 +120,7 @@
;:mode "yaml" ;:mode "yaml"
:mode "clojure" :mode "clojure"
:updateListener prn :updateListener prn
:parent @editor }))))) :parent @editor})))))
:component-will-unmount (fn [_] (.destroy @view)) :component-will-unmount (fn [_] (.destroy @view))
:reagent-render (fn [] :reagent-render (fn []
[:div.mb2 [:div.mb2
@ -135,7 +136,6 @@
"silent" "" "silent" ""
@evaled-result)])])}))) @evaled-result)])])})))
(defn link-handler [v _] (defn link-handler [v _]
(prn v) (prn v)
(prn (conj [:a] v #_(second v))) (prn (conj [:a] v #_(second v)))
@ -145,7 +145,6 @@
(:href (second v)) (:href (second v))
(:title (second v)))))) (:title (second v))))))
(defn link-handler4 [v _] (defn link-handler4 [v _]
(if (-> v second :img) (if (-> v second :img)
(conj [:img] (dissoc (rename-keys (second v) {:href :src}) :img)) (conj [:img] (dissoc (rename-keys (second v) {:href :src}) :img))
@ -153,7 +152,6 @@
{:href (:href (second v))} {:href (:href (second v))}
(:title (second v)))))) (:title (second v))))))
(def theme (def theme
(merge tachyon-theme (merge tachyon-theme
{:SRC code-editor {:SRC code-editor
@ -245,7 +243,6 @@
(defn circle [{:keys [img alt]}] (defn circle [{:keys [img alt]}]
[:div.pa4.tc [:img.br-100.ba.h3.w3.dib {:src img :alt alt}]]) [:div.pa4.tc [:img.br-100.ba.h3.w3.dib {:src img :alt alt}]])
;; form one component to render a nav link ;; form one component to render a nav link
(defn navbar-link [{:keys [href title text key] :or {text nil title nil}}] (defn navbar-link [{:keys [href title text key] :or {text nil title nil}}]
[:a.link.dim.white.dib.mr3 {:key (or key href) :href href :title title} text]) [:a.link.dim.white.dib.mr3 {:key (or key href) :href href :title title} text])
@ -261,7 +258,6 @@
{:target "_blank" :href "https://matrix.to/#/@oly:matrix.org"} {:target "_blank" :href "https://matrix.to/#/@oly:matrix.org"}
"Contact me"]]) "Contact me"]])
;; form2 component notice the render function takes the same param as the component function ;; form2 component notice the render function takes the same param as the component function
;; this is important, you can hit issues if you forget this in form 2 components. ;; this is important, you can hit issues if you forget this in form 2 components.
(defn my-component [title value] (defn my-component [title value]
@ -324,16 +320,17 @@
(defn build-file-tar [code-blocks] (defn build-file-tar [code-blocks]
(tarts (clj->js (mapv (fn [block] {:name (str (:tangle (second block))) (tarts (clj->js (mapv (fn [block] {:name (str (:tangle (second block)))
:content (str (last block))}) :content (str (last block))})
code-blocks )))) code-blocks))))
(defn build-file-tar-hm [code-blocks] (defn build-file-tar-hm [code-blocks]
(tarts (clj->js code-blocks ))) (tarts (clj->js code-blocks)))
(defn build-tarts-map [blocks] (defn build-tarts-map [blocks]
(->> blocks (->> blocks
(group-by (fn [block] (:tangle (second block)))) (group-by (fn [block] (:tangle (second block))))
(reduce (fn [m [k v]] (conj m {:name (str k) (reduce (fn [m [k v]]
:content (str (concat (mapv last v)))})) []))) (conj m {:name (str k)
:content (str (clojure.string/join "" (mapv last v)))})) [])))
(defn org->split2 (defn org->split2
"Split out meta and body" "Split out meta and body"
@ -343,6 +340,34 @@
:code (filter (fn filter-code [tag] (org-code (first tag))) dsl) :code (filter (fn filter-code [tag] (org-code (first tag))) dsl)
:body (filter (fn filter-body [tag] (body (first tag))) dsl)}) :body (filter (fn filter-body [tag] (body (first tag))) dsl)})
(defn update-form-data [form-data ^js event]
(prn "test here")
(prn @form-data)
;;(prn (.dir js/console event))
(prn (-> event))
(prn (-> event .-currentTarget))
(prn (-> event .-target))
(prn (-> event .-target .-value))
(swap! form-data assoc
(keyword (-> event .-target .-name))
(-> event .-target .-value)))
(defn my-address-form []
(let [form-data (reagent/atom {})
form-change (partial update-form-data form-data)]
(fn []
[:div
(str @form-data)
[:form {:on-submit prn}
[:input {:type "text"
:default-value (str (:test @form-data))
:name "address-line-1"
:on-change form-change :placeholder "Address Line 1"}]
[:input {:type "text" :name "address-line-2" :on-change form-change :placeholder "Address Line 2"}]
[:input {:name "address-line-3" :on-change form-change :placeholder "Address Line 3"}]
[:input {:name "city" :on-change form-change :placeholder "City"}]
[:input {:name "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]])))
;; form two component render demo ;; form two component render demo
;;(h/org->split (parse document1)) ;;(h/org->split (parse document1))
(defn demo-page [route] (defn demo-page [route]
@ -358,6 +383,7 @@
org->split2 org->split2
(reset! content)))}) (reset! content)))})
(fn [route] (fn [route]
<<<<<<< HEAD
[:main.mt4.mw7.center.avenir [:main.mt4.mw7.center.avenir
[:h1.f3.f2-ns (:content (last (first (:header @content))))] [:h1.f3.f2-ns (:content (last (first (:header @content))))]
@ -375,7 +401,30 @@
"Download Code"] "Download Code"]
[:div.mw7.center.avenir [:div.mw7.center.avenir
(into [:div] (org->replacements theme (:body @content)))]]))) (into [:div] (org->replacements theme (:body @content)))]])))
=======
(if @content
[:main.mt4.mw7.center.avenir
[my-address-form]
(slugify (:content (last (first (:header @content)))))
[:h1.f3.f2-ns (:content (last (first (:header @content))))]
[:div.mw7.center.avenir
(into [:ol] (org->replacements theme-toc (:toc @content)))]
[:p "The code in these examples is evaluated when modified, you can highlight a partial expression to evalute the selection, You can also download the code as a tar if you like and use it in your favourite editor."]
[:a.f6.link.dim.ph3.pv2.mb2.dib.white.bg-dark-blue
{:download (str (slugify (:content (last (first (:header @content))))) ".tar")
:title (:content (last (first (:header @content))))
:href (.createObjectURL
js/URL
(js/Blob. #js [(build-file-tar-hm
(build-tarts-map
(:code @content)))]
{:type "application/tar"}))}
"Download Code"]
[:div.mw7.center.avenir
(into [:div] (org->replacements theme (:body @content)))]]
>>>>>>> a6c9ed1 (Updated reagent info.)
[:<>]))))
;; form one render about page component ;; form one render about page component
(defn about-page [] (defn about-page []
@ -462,8 +511,7 @@
;; this select the main node from the html file and injects your page content ;; this select the main node from the html file and injects your page content
(.render (.render
(createRoot (.getElementById js/document "app")) (createRoot (.getElementById js/document "app"))
(reagent/as-element [err-boundary [current-page]]) (reagent/as-element [err-boundary [current-page]])))
))
(defn ^:after-load render-site [] (defn ^:after-load render-site []
;; this select the main node from the html file and injects your page content ;; this select the main node from the html file and injects your page content
@ -485,8 +533,7 @@
#_(when result #_(when result
;(.preventDefault e) ;(.preventDefault e)
#_(js/console.log "will prevent by href" href)) #_(js/console.log "will prevent by href" href))
result)))) result))))})
})
(render-site)) (render-site))
;; we defonce the startup so that hot reloading does not reinitialize the state of the site ;; we defonce the startup so that hot reloading does not reinitialize the state of the site