1 files changed, 15 insertions, 15 deletions
diff --git a/src/runtime.ffi.mjs b/src/runtime.ffi.mjs
index babd0b8..c7f6668 100644
--- a/src/runtime.ffi.mjs
+++ b/src/runtime.ffi.mjs
@@ -1,11 +1,20 @@
-import { element, text } from "./lustre/element.mjs";
+import { element, element_ns, text } from "./lustre/element.mjs";
 import { List } from "./gleam.mjs";
+import { find } from "../gleam_stdlib/gleam/list.mjs";
 import { Some, None } from "../gleam_stdlib/gleam/option.mjs";
 
 const Element = element("").constructor;
+const ElementNs = element_ns("", "").constructor;
 const Text = text("").constructor;
 
 export function morph(prev, curr) {
+  if (curr instanceof ElementNs)
+    return prev?.nodeType === 1 &&
+      prev.nodeName === curr[0].toUpperCase() &&
+      prev.namespaceURI === curr[3]
+      ? morphElement(prev, curr, curr[3])
+      : createElement(prev, curr, curr[3]);
+
   if (curr instanceof Element) {
     return prev?.nodeType === 1 && prev.nodeName === curr[0].toUpperCase()
       ? morphElement(prev, curr)
@@ -30,11 +39,10 @@ export function morph(prev, curr) {
 
 // ELEMENTS --------------------------------------------------------------------
 
-function createElement(prev, curr) {
-  const el =
-    curr[0] === "svg"
-      ? document.createElementNS("http://www.w3.org/2000/svg", "svg")
-      : document.createElement(curr[0]);
+function createElement(prev, curr, ns) {
+  const el = ns
+    ? document.createElementNS(ns, curr[0])
+    : document.createElement(curr[0]);
 
   let attr = curr[1];
   while (attr.head) {
@@ -42,10 +50,6 @@ function createElement(prev, curr) {
     attr = attr.tail;
   }
 
-  if (curr[0] === "svg" && !el.getAttribute("xmlns")) {
-    el.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-  }
-
   let child = curr[2];
   while (child.head) {
     el.appendChild(morph(null, child.head));
@@ -56,7 +60,7 @@ function createElement(prev, curr) {
   return el;
 }
 
-function morphElement(prev, curr) {
+function morphElement(prev, curr, ns) {
   const prevAttrs = prev.attributes;
   const currAttrs = new Map();
 
@@ -66,10 +70,6 @@ function morphElement(prev, curr) {
     currAttr = currAttr.tail;
   }
 
-  if (curr[0] === "svg" && !currAttrs.has("xmlns")) {
-    currAttrs.set("xmlns", "http://www.w3.org/2000/svg");
-  }
-
   for (const { name, value: prevValue } of prevAttrs) {
     if (!currAttrs.has(name)) prev.removeAttribute(name);
     const value = currAttrs.get(name);