propper svg/math elements

karax.nimble

@@ -1,6 +1,6 @@
 # Package
 
-version       = "1.3.0"
+version       = "1.3.1"
 author        = "Andreas Rumpf"
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"

karax/karax.nim

@@ -7,6 +7,9 @@ export kdom.Event, kdom.Blob
 when defined(nimNoNil):
   {.experimental: "notnil".}
 
+proc createElementNS(document: Document, namespace, tag: cstring): Node {.importjs: "#.createElementNS(@)".}
+proc `classBaseVal=`(n: Node, v: cstring) {.importjs: "#.className.baseVal = #".}
+
 proc kout*[T](x: T) {.importc: "console.log", varargs.}
   ## The preferred way of debugging karax applications.
 
@@ -195,7 +198,13 @@ proc toDom*(n: VNode; useAttachedNode: bool; kxi: KaraxInstance = nil): Node =
     attach n
     return result
   else:
-    result = document.createElement(toTag[n.kind])
+    result =
+      if n.kind in svgElements:
+        document.createElementNS(svgNamespace, toTag[n.kind])
+      elif n.kind in mathElements:
+        document.createElementNS(mathNamespace, toTag[n.kind])
+      else:
+        document.createElement(toTag[n.kind])
     attach n
     for k in n:
       appendChild(result, toDom(k, useAttachedNode, kxi))
@@ -205,7 +214,10 @@ proc toDom*(n: VNode; useAttachedNode: bool; kxi: KaraxInstance = nil): Node =
   if n.id != nil:
     result.id = n.id
   if n.class != nil:
-    result.class = n.class
+    if n.kind in svgElements:
+      result.classBaseVal = n.class.cstring
+    else:
+      result.class = n.class
   #if n.key >= 0:
   #  result.key = n.key
   for k, v in attrs(n):
@@ -328,7 +340,10 @@ proc updateStyles(newNode, oldNode: VNode) =
       applyStyle(oldNode.dom, newNode.style)
       newNode.styleVersion = newNode.style.version
     else: oldNode.dom.style = Style()
-    oldNode.dom.class = newNode.class
+    if oldNode.kind in svgElements:
+      oldNode.dom.classBaseVal = newNode.class
+    else:
+      oldNode.dom.class = newNode.class
   oldNode.style = newNode.style
   oldNode.class = newNode.class
 

karax/vdom.nim

@@ -68,6 +68,13 @@ const
   selfClosing = {area, base, br, col, embed, hr, img, input,
     link, meta, param, source, track, wbr}
 
+  svgElements* = {animate .. view}
+  mathElements* = {maction .. semantics}
+
+var
+  svgNamespace* = "http://www.w3.org/2000/svg"
+  mathNamespace* = "http://www.w3.org/1998/Math/MathML"
+
 type
   EventKind* {.pure.} = enum ## The events supported by the virtual DOM.
     onclick, ## An element is clicked.
@@ -123,24 +130,18 @@ type
 
     onwheel ## fires when the user rotates a wheel button on a pointing device.
 
-macro buildLookupTables(): untyped =
-  var a = newTree(nnkBracket)
-  for i in low(VNodeKind)..high(VNodeKind):
-    let x = $i
-    let y = if x[0] == '#': x else: toUpperAscii(x)
-    a.add(newCall("kstring", newLit(y)))
-  var e = newTree(nnkBracket)
-  for i in low(EventKind)..high(EventKind):
-    e.add(newCall("kstring", newLit(substr($i, 2))))
-
-  template tmpl(a, e) {.dirty.} =
-    const
-      toTag*: array[VNodeKind, kstring] = a
-      toEventName*: array[EventKind, kstring] = e
-
-  result = getAst tmpl(a, e)
-
-buildLookupTables()
+const
+  toTag* = block:
+    var res: array[VNodeKind, kstring]
+    for kind in VNodeKind:
+      res[kind] = kstring($kind)
+    res
+
+  toEventName* = block:
+    var res: array[EventKind, kstring]
+    for kind in EventKind:
+      res[kind] = kstring(($kind)[2..^1])
+    res
 
 type
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}