diff --git a/.drone.yml b/.drone.yml index 9e39264..972b68b 100644 --- a/.drone.yml +++ b/.drone.yml @@ -12,7 +12,7 @@ steps: user: root commands: #- cp resources/public/rename-me-index.html resources/public/index.html - - clojure -Mbuild-dev release app + - clojure -Mbuild release app #- clj -A:prod - name: deploy-site diff --git a/deps.edn b/deps.edn index 6b53c2c..1743025 100644 --- a/deps.edn +++ b/deps.edn @@ -34,8 +34,7 @@ datascript/datascript {:mvn/version "1.5.1"}} :paths ["src" "resources"] - :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]} - :build-dev {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"} + :aliases {:build {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"} #_#_binaryage/devtools {:mvn/version "1.0.7"}} :main-opts ["-m" "shadow.cljs.devtools.cli"]} } diff --git a/readme.org b/readme.org index 05c30ab..989fa1d 100644 --- a/readme.org +++ b/readme.org @@ -4,6 +4,13 @@ Future Content - Dynamic html with macro for frontend generation on build. - Complete frontend backend example wth ring retit reagent -clj -m figwheel.main --build dev --repl +#+BEGIN_SRC sh +npm install +#+END_SRC + +#+BEGIN_SRC sh +clojure -Mbuild-dev watch app +#+END_SRC + https://www.clojuriststogether.org/news/call-for-new-proposals.-june-survey-results./ diff --git a/resources/public/documents/examples-maps.org b/resources/public/documents/examples-maps.org index b9e628e..4627d90 100644 --- a/resources/public/documents/examples-maps.org +++ b/resources/public/documents/examples-maps.org @@ -80,7 +80,7 @@ You will need to provide your own api key, the examples use no api key and rende } #+END_SRC -#+BEGIN_SRC clojurescript :exports none :tangle src/clojure_demo/core.cljs +#+BEGIN_SRC json :exports none :results output :tangle src/clojure_demo/core.cljs (ns clojure-demo.core (:require ["react-dom/client" :refer [createRoot]] @@ -173,6 +173,7 @@ Shadow CLJS has its one js-await macro we can use in the following fashion, here An example using promesa to render a google map. #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs + (defn google-map-promesa [] (let [map-element (reagent/atom nil)] (load-google-maps-script "") @@ -224,6 +225,7 @@ An example using promesa to render a google map. * LibraMaps +Create a dummy function to load the js dynamically, this could be imported in other ways like npm. #+BEGIN_SRC clojurescript :results value :tangle src/clojure_demo/core.cljs (defn load-libra-maps [] (let [script (.createElement js/document "script")] @@ -233,34 +235,35 @@ An example using promesa to render a google map. (load-libra-maps) #+END_SRC +Get a references to the element and store in =map-element= add a watch to detect when the value changes, we can then create the map using the elements id. + +When using =:ref= you need to remember this is an atom not a reagent atom, else you will get extra renders. + +To customize see https://maplibre.org/maplibre-gl-js/docs/ -https://maplibre.org/maplibre-gl-js/docs/ #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs (defn libra-map-promesa [] - (let [map-element (reagent/atom nil)] + (let [map-element (atom nil)] (load-libra-maps) - - (when-let - [lMap (.-id @map-element) -] - (new js/maplibregl.Map - (clj->js {:container "libra-map" - :style "https://demotiles.maplibre.org/style.json" - :zoom 1})) - ) - - - (fn [] - [:div#libra-map.m-4 - {:style {:width "400px" :height "400px"} - :ref #(reset! map-element %)} - (str (.-id @map-element)) - "libra map here"]) + (add-watch + map-element + :create-map + (fn [key atom old-state new-state] + (when @map-element + (let [lMap (.-id @map-element)] + (new js/maplibregl.Map + (clj->js {:container (.-id @map-element) #_"libra-map" + :style "https://demotiles.maplibre.org/style.json" + :zoom 1})))))) + (fn [] + [:div#libra-map.m-4 + {:style {:width "400px" :height "400px"} + :ref #(reset! map-element %)} + (str @map-element) + "libra map here"]) ) - ) - [libra-map-promesa] #+END_SRC diff --git a/resources/public/documents/reagent-reitit.org b/resources/public/documents/reagent-reitit.org index ecf54bb..0520aec 100644 --- a/resources/public/documents/reagent-reitit.org +++ b/resources/public/documents/reagent-reitit.org @@ -67,6 +67,7 @@ Reagent is a popular react wrapper in the clojurescript it greatly simplify buil npx install * Launch shadow-cljs watch for source code changes +#+BEGIN_SRC sh npx shadow-cljs watch app #+END_SRC @@ -133,6 +134,11 @@ Form two components are used so we can track local state of a component, this is *** Example Click counter component #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs +(ns example + (:require + [reagent.core :as r] + [reagent.dom.server :as rdom])) + (defn my-component [title starting-value] (let [local-state (reagent/atom starting-value)] (fn [title] diff --git a/src/clojure_demo/core.cljs b/src/clojure_demo/core.cljs index 34e9dae..d9d6c4a 100644 --- a/src/clojure_demo/core.cljs +++ b/src/clojure_demo/core.cljs @@ -20,16 +20,17 @@ [clojure.data.xml :as xml] [clojure.string :as str] [honey.sql :as sql] + [promesa.core :as promesa] [honey.sql.helpers :as sqlh] [reagent.core :as reagent] [reitit.coercion.spec :as rss] [reitit.frontend :as rf] [reitit.frontend.easy :as rfe] [reitit.frontend.history :refer [ignore-anchor-click?]] + [sci.core :as sci] [sci.configs.funcool.promesa :as sci-promesa] [sci.configs.reagent.reagent :as sci-reagent] [sci.configs.tonsky.datascript :as sci-datascript] - [sci.core :as sci] [clojure-demo.routes :refer [site-data routes]] [clojure-demo.sitemap :as sm #_#_:refer [spit-pwa-sitemap]] [tick.core :as t]) @@ -79,15 +80,21 @@ (sci/init {:classes {'js js/globalThis :allow :all} :features #{:cljs} + :aliases {'promesa 'promesa.core + 'reagent 'reagent.core} :namespaces - {'reagent sci-reagent/reagent-namespace - 'promesa sci-promesa/promesa-namespace + {'reagent.core sci-reagent/reagent-namespace + 'reagent.ratom sci-reagent/reagent-ratom-namespace + ;'reagent.dom.server sci-reagent-server/namespaces + 'promesa.core sci-promesa/promesa-namespace + 'datascript.core sci-datascript/core-namespace + 'datascript.db sci-datascript/db-namespace + ;'h {'html (sci/copy-var h/html hc-ns)} ;'async {'go (sci/copy-var async/go async-ns)} ;'shadow {'js-await (sci/copy-var js-await shadow-ns)} 'shadow {'js-await (sci/copy-var my-js-await shadow-ns)} ;'async-in {'