:recycle: Explicitly handle namespaced elements in the vdom tree.

2 files changed, 15 insertions, 8 deletions

diff --git a/test/examples/svg.gleam b/test/examples/svg.gleam
index f1859d4..19c7652 100644
--- a/test/examples/svg.gleam
+++ b/test/examples/svg.gleam
@@ -3,7 +3,7 @@
 import gleam/int
 import lustre
 import lustre/attribute.{attribute}
-import lustre/element.{Element, element, text}
+import lustre/element.{Element, namespaced, text}
 import lustre/html.{button, div, p, svg}
 import lustre/event
 
@@ -48,24 +48,29 @@ pub fn render(model: Model) -> Element(Msg) {
   div(
     [],
     [
-      button([event.on_click(Incr)], [plus()]),
-      button([event.on_click(Decr)], [minus()]),
+      button(
+        [event.on_click(Incr)],
+        [plus([attribute.style([#("color", "red")])])],
+      ),
+      button([event.on_click(Decr)], [minus([])]),
       button([event.on_click(Reset)], [text("Reset")]),
       p([], [text(int.to_string(model))]),
     ],
   )
 }
 
-fn plus() {
+fn plus(attrs) {
   svg(
     [
       attribute("width", "15"),
       attribute("height", "15"),
       attribute("viewBox", "0 0 15 15"),
       attribute("fill", "none"),
+      ..attrs
     ],
     [
-      element(
+      namespaced(
+        "http://www.w3.org/2000/svg",
         "path",
         [
           attribute(
@@ -82,16 +87,18 @@ fn plus() {
   )
 }
 
-fn minus() {
+fn minus(attrs) {
   svg(
     [
       attribute("width", "15"),
       attribute("height", "15"),
       attribute("viewBox", "0 0 15 15"),
       attribute("fill", "none"),
+      ..attrs
     ],
     [
-      element(
+      namespaced(
+        "http://www.w3.org/2000/svg",
         "path",
         [
           attribute(
diff --git a/test/examples/svg.html b/test/examples/svg.html
index 10daddd..12af526 100644
--- a/test/examples/svg.html
+++ b/test/examples/svg.html
@@ -6,7 +6,7 @@
     <title>lustre | svg</title>
 
     <script type="module">
-      import { main } from "../../build/dev/javascript/lustre/examples/counter.mjs";
+      import { main } from "../../build/dev/javascript/lustre/examples/svg.mjs";
 
       document.addEventListener("DOMContentLoaded", main);
     </script>