Add libra maps example, modify sci config based on @borkdude suggestions.

.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

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"]}
+ :aliases {:build {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"}
-           :build-dev {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"}
                                     #_#_binaryage/devtools {:mvn/version "1.0.7"}}
                        :main-opts ["-m" "shadow.cljs.devtools.cli"]}
            }

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./

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)
-
+    (add-watch
-    (when-let
+     map-element
-        [lMap (.-id @map-element)
+     :create-map
-]
+     (fn [key atom old-state new-state]
-         (new js/maplibregl.Map
+       (when  @map-element 
-              (clj->js {:container "libra-map"
+         (let [lMap (.-id @map-element)]
-                        :style "https://demotiles.maplibre.org/style.json"
+           (new js/maplibregl.Map
-                        :zoom 1}))
+                (clj->js {:container (.-id @map-element) #_"libra-map"
-      )
+                          :style "https://demotiles.maplibre.org/style.json"
-
+                          :zoom 1}))))))
-
+    (fn []
-      (fn []
+      [:div#libra-map.m-4
-        [:div#libra-map.m-4
+       {:style {:width "400px" :height "400px"}
-         {:style {:width "400px" :height "400px"}
+        :ref #(reset! map-element %)}
-          :ref #(reset! map-element %)}
+       (str @map-element)
-         (str (.-id @map-element))
+       "libra map here"])
-         "libra map here"])
     )
-
   )
 
 
-
 [libra-map-promesa]
 #+END_SRC

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]

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
+    {'reagent.core sci-reagent/reagent-namespace
-     'promesa sci-promesa/promesa-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 {'<p! (sci/copy-var async-in/<p! async-in-ns)}
-     'd sci-datascript/core-namespace
      'tick {'format (sci/copy-var t/format tick-ns)
             'zoned-date-time (sci/copy-var t/zoned-date-time tick-ns)}
      'xml {'emit-str (sci/copy-var xml/emit-str xml-ns)