Feature: updating to RC7, patch elements namespaces (#15)

- added the new namespace option to patch elements functions
- examples of morphing using namespaces

Author: JeremS

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Release notes for the Clojure SDK
 
+## 2025-12-22 - RC6
+### Added
+- Patch elements functions in the SDK now provide the namespace option introduced in
+  [Datastar RC7](https://github.com/starfederation/datastar/releases/tag/v1.0.0-RC.7).
+
+### Changes
+- Urls for the Datastar CDN provided in the API now point to
+  [Datastar RC7](https://github.com/starfederation/datastar/releases/tag/v1.0.0-RC.7).
+
 ## 2025-12-14 - RC5
 
 ### Fixed

libraries/sdk/src/main/starfederation/datastar/clojure/api.clj

@@ -16,6 +16,7 @@ These function take options map whose keys are:
 - [[selector]]
 - [[patch-mode]]
 - [[use-view-transition]]
+- [[element-ns]]
 - [[only-if-missing]]
 - [[auto-remove]]
 - [[attributes]]
@@ -54,13 +55,13 @@ Some scripts are provided:
 ;; -----------------------------------------------------------------------------
 (def CDN-url
   "URL for the Datastar js bundle tracking the latest Datastar, currently
-  v1.0.0-RC6."
+  v1.0.0-RC7."
 
-  "https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.6/bundles/datastar.js")
+  "https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.7/bundles/datastar.js")
 
 (def CDN-map-url
   "URL for the Datastar source map going with [[CDN-url]]."
-  "https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.6/bundles/datastar.js.map")
+  "https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.7/bundles/datastar.js.map")
 
 ;; -----------------------------------------------------------------------------
 ;; SSE generator management
@@ -180,6 +181,17 @@ Some scripts are provided:
   Datastar client side will default to false."
   common/use-view-transition)
 
+
+(def element-ns
+  "[[patch-elements!]] & [[patch-elements-seq!]] option, boolean:
+
+  Use a namespace when patching elements.
+  Possible values are:
+  - [[ns-html]] default
+  - [[ns-svg]]
+  - [[ns-mathml]]"
+  common/element-namespace)
+
 ;;Signals opts
 (def only-if-missing
   "[[patch-signals!]] option, boolean:
@@ -240,6 +252,17 @@ Some scripts are provided:
   related state."
   consts/element-patch-mode-replace)
 
+(def ns-html
+  "element namespace: default html namespace"
+  consts/element-namespace-html)
+
+(def ns-svg
+  "element namespace: svg namespace"
+  consts/element-namespace-svg)
+
+(def ns-mathml
+  "element namespace: mathMl namespace"
+  consts/element-namespace-mathml)
 
 (defn patch-elements!
   "Send HTML elements to the browser to be patchd into the DOM.
@@ -255,6 +278,7 @@ Some scripts are provided:
   - [[selector]]
   - [[patch-mode]]
   - [[use-view-transition]]
+  - [[element-ns]]
 
   Return value:
   - `false` if the connection is closed
@@ -378,7 +402,7 @@ Some scripts are provided:
    (scripts/execute-script! sse-gen script-text opts)))
 
 
- 
+
 ;; -----------------------------------------------------------------------------
 ;; SSE helpers
 ;; -----------------------------------------------------------------------------
@@ -483,4 +507,3 @@ Some scripts are provided:
   of the header means the request is issued from a datastar action."
   [request]
   (= "true" (get-in request [:headers "datastar-request"])))
-

libraries/sdk/src/main/starfederation/datastar/clojure/api/common.clj

@@ -1,6 +1,4 @@
-(ns starfederation.datastar.clojure.api.common
-  (:require
-   [clojure.string :as string]))
+(ns starfederation.datastar.clojure.api.common)
 
 ;; -----------------------------------------------------------------------------
 ;; Option names
@@ -14,6 +12,7 @@
 (def selector            :d*.elements/selector)
 (def patch-mode          :d*.elements/patch-mode)
 (def use-view-transition :d*.elements/use-view-transition)
+(def element-namespace   :d*.elements/namespace)
 
 ;;Signals opts
 (def only-if-missing     :d*.signals/only-if-missing)

libraries/sdk/src/main/starfederation/datastar/clojure/api/elements.clj

@@ -12,20 +12,23 @@
 ;; -----------------------------------------------------------------------------
 (def ^:private valid-selector? u/not-empty-string?)
 
-(defn- add-epm? [fmm]
-  (and fmm (not= fmm consts/default-element-patch-mode)))
+(defn- add-epm? [patch-mode]
+  (not= patch-mode consts/default-element-patch-mode))
 
 (defn- add-view-transition? [v]
   (common/add-boolean-option? consts/default-elements-use-view-transitions v))
 
+(defn add-namespace? [namespace]
+  (not= consts/default-element-namespace namespace))
 
 (defn conj-patch-element-opts!
   "Conj the optional data-lines to the transient `data-lines` vector.
   vector."
   [data-lines! opts]
   (let [sel (common/selector opts)
         patch-mode (common/patch-mode opts)
-        use-vt (common/use-view-transition opts)]
+        use-vt (common/use-view-transition opts)
+        namespace (common/element-namespace opts)]
 
     (cond-> data-lines!
       (and sel (valid-selector? sel))
@@ -35,7 +38,10 @@
       (common/add-opt-line! consts/mode-dataline-literal patch-mode)
 
       (and use-vt (add-view-transition? use-vt))
-      (common/add-opt-line! consts/use-view-transition-dataline-literal use-vt))))
+      (common/add-opt-line! consts/use-view-transition-dataline-literal use-vt)
+
+      (and namespace (add-namespace? namespace))
+      (common/add-opt-line! consts/namespace-dataline-literal namespace))))
 
 
 
@@ -76,10 +82,12 @@
   (= (->patch-elements "<div>hello</div> \n<div>world!!!</div>"
                        {common/selector "#toto"
                         common/patch-mode consts/element-patch-mode-after
-                        common/use-view-transition true})
+                        common/use-view-transition true
+                        common/element-namespace "svg"})
      ["selector #toto"
       "mode after"
       "useViewTransition true"
+      "namespace svg"
       "elements <div>hello</div> "
       "elements <div>world!!!</div>"]))
 

libraries/sdk/src/main/starfederation/datastar/clojure/consts.clj

@@ -22,6 +22,7 @@
 (def use-view-transition-dataline-literal "useViewTransition ")
 (def signals-dataline-literal "signals ")
 (def only-if-missing-dataline-literal "onlyIfMissing ")
+(def namespace-dataline-literal "namespace ")
 
 
 ;; -----------------------------------------------------------------------------
@@ -80,6 +81,12 @@
   Morphs the element into the existing element."
   element-patch-mode-outer)
 
+;; Namespaces
+(def element-namespace-html   "html")
+(def element-namespace-svg    "svg")
+(def element-namespace-mathml "mathml")
+(def default-element-namespace element-namespace-html)
+
 
 ;; EventType
 

src/dev/examples/form_behavior/core.clj

@@ -125,9 +125,8 @@
 (def router
   (rr/router
     [["/" {:handler form}]
-     ["/endpoint"    {:handler process-form}]
+     ["/endpoint"    {:handler process-form}]]))
                       ;:parameters {:multipart true} :middleware [mpparams/multipart-middleware]}]
-     c/datastar-route]))
 
 
 (def handler
@@ -137,4 +136,5 @@
 
 
 (comment
-  (u/reboot-hk-server! #'handler))
+  (u/reboot-hk-server! #'handler)
+  (user/clear-terminal!))

src/dev/examples/forms/core.clj

@@ -25,8 +25,7 @@
   (rr/router
     [["/" {:handler (constantly (rur/response home))}]
      ["" efh/routes]
-     ["" efd*/routes]
-     c/datastar-route]))
+     ["" efd*/routes]]))
 
 
 

src/dev/examples/namespaces.clj

@@ -0,0 +1,128 @@
+(ns examples.namespaces
+  (:require
+    [clojure.java.io :as io]
+    [examples.common :as c]
+    [dev.onionpancakes.chassis.core :as h]
+    [dev.onionpancakes.chassis.compiler :as hc]
+    [examples.utils :as u]
+    [ring.util.response :as rur]
+    [reitit.ring :as rr]
+    [reitit.ring.middleware.parameters :as params]
+    [starfederation.datastar.clojure.adapter.http-kit :refer [->sse-response on-open]]
+    [starfederation.datastar.clojure.api :as d*]))
+
+;; example taken from https://github.com/zigster64/datastar.http.zig/blob/d142e841620769fde0647fd032025b71622e70f4/examples/01_basic.zig
+;; Here we patch svg/math elements using the d*/element-ns options
+(defn r-int [low high]
+  (+ low (rand-int (- high low))))
+
+
+(defn random-rect []
+  [:rect {:id :svg-rect
+          :x (r-int 10 100)
+          :y (r-int 10 100)
+          :width (r-int 10 80)
+          :height 80
+          :fill "red" :stroke "black" :stroke-width 4
+          :class "animate"}])
+
+
+(defn random-circle []
+   [:circle {:id :svg-circle
+             :cx (r-int 10 100)
+             :cy (r-int 10 100)
+             :r (r-int 10 80)
+             :fill "green" :stroke "black" :stroke-width 4
+             :class "animate"}])
+
+
+(defn random-polygon []
+  (let [v #(r-int 50 300)]
+    [:polygon {:id :svg-triangle
+               :points (str (v) "," (v) " "
+                            (v) "," (v) " "
+                            (v) "," (v) " ")
+               :fill "blue"
+               :stroke "black"
+               :stroke-width 4
+               :class "animate"}]))
+
+(defn random-img []
+  [:svg {:width 500
+         :height 300
+         :viewBox "0 0 500 300"
+         :xmlns "http://www.w3.org/2000/svg"}
+   (random-rect)
+   (random-polygon)
+   (random-circle)])
+
+(def math
+  [:math {:id "math-ml" :display "block"}
+    [:mrow
+      [:mi "E"]
+      [:mo "="]
+      [:mi "m"]
+      [:msup
+        [:mi "c"]
+        [:mn {:id "math-factor"} "2"]]]])
+
+(def page
+  (h/html
+    (c/page-scaffold
+      [:div
+       [:style ".animate {transition: all 0.4s ease;}"]
+       [:h1 "Namespaces tests"]
+       [:div
+        [:h2 "svg"]
+        [:button {:data-on:click (d*/sse-post "/rand")} "random!!!"]
+        (random-img)]
+       [:div
+        [:h2 "math"]
+        [:button {:data-on:click (d*/sse-post "/rand-math")} "random!!!"]
+        math]])))
+
+
+
+(defn home
+  ([_]
+   (rur/response page))
+  ([req respond _]
+   (respond (home req))))
+
+
+(defn merge-svg [req]
+  (->sse-response req
+    {on-open (fn [sse]
+               (d*/with-open-sse sse
+                 (d*/patch-elements-seq! sse
+                                         [(h/html (random-rect))
+                                          (h/html (random-circle))
+                                          (h/html (random-polygon))]
+                                         {d*/element-ns d*/ns-svg})))}))
+
+
+
+(defn merge-math [req]
+  (->sse-response req
+    {on-open (fn [sse]
+               (d*/with-open-sse sse
+                 (d*/patch-elements! sse
+                                     (h/html [:mn {:id "math-factor"} (rand-int 5)])
+                                     {d*/element-ns d*/ns-svg})))}))
+
+
+(def router
+  (rr/router
+    [["/" {:handler #'home}]
+     ["/rand" {:handler #'merge-svg}]
+     ["/rand-math" {:handler #'merge-math}]]))
+
+
+(def handler
+  (rr/ring-handler router
+                   (rr/create-default-handler)
+                   {:middleware [params/parameters-middleware]}))
+
+(comment
+  (u/reboot-hk-server! #'handler)
+  (user/clear-terminal!))

src/dev/examples/utils.clj

@@ -1,6 +1,7 @@
 (ns examples.utils
   (:require
     [charred.api                         :as charred]
+    [clojure.java.io                     :as io]
     [fireworks.core                      :refer [?]]
     [puget.printer                       :as pp]
     [starfederation.datastar.clojure.api :as d*]))
@@ -9,17 +10,39 @@
 ;; -----------------------------------------------------------------------------
 ;; Misc utils
 ;; -----------------------------------------------------------------------------
-(defn clear-terminal! []
-  (binding [*out* (java.io.PrintWriter. System/out)]
-    (print "\033c")
-    (flush)))
+(defn- safe-requiring-resolve [sym]
+  (try
+    (deref (requiring-resolve sym))
+    (catch Exception _ nil)))
+
+
+(def original-out
+  (or
+    (:out (safe-requiring-resolve 'cider.nrepl.middleware.out/original-output))
+    System/out))
+
 
+(def original-err
+  (or
+    (:err (safe-requiring-resolve 'cider.nrepl.middleware.out/original-output))
+    System/err))
 
-(defmacro force-out [& body]
-  `(binding [*out* (java.io.OutputStreamWriter. System/out)]
+
+(defmacro force-out
+  "Binds [[*out*]] to the original system's out."
+  [& body]
+  `(binding [*out* (io/writer original-out)]
      ~@body))
 
 
+(defn clear-terminal!
+  "Clear the terminal of all text"
+  []
+  (force-out
+    (print "\033c")
+    (flush)))
+
+
 (defn pp-request [req]
  (-> req
      (dissoc :reitit.core/match :reitit.core/router)