From e6ff65f226da8b373d82a7eb68c3a9a363c83eef Mon Sep 17 00:00:00 2001 From: Joel Lienhard Date: Mon, 16 Oct 2023 22:43:10 +0200 Subject: [PATCH 1/4] propper svg/math elements --- karax.nimble | 2 +- karax/karax.nim | 16 ++++++++++++++-- karax/vdom.nim | 6 ++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/karax.nimble b/karax.nimble index 0098564..b2da147 100644 --- a/karax.nimble +++ b/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" diff --git a/karax/karax.nim b/karax/karax.nim index 7fdcde0..3bd187a 100644 --- a/karax/karax.nim +++ b/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, $n.kind) + elif n.kind in mathElements: + document.createElementNS(mathNamespace, $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): diff --git a/karax/vdom.nim b/karax/vdom.nim index 5afc2a0..843e428 100644 --- a/karax/vdom.nim +++ b/karax/vdom.nim @@ -68,6 +68,12 @@ const selfClosing = {area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr} + svgElements* = {animate .. view} + mathElements* = {maction .. semantics} + + 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. From 7100030f53c578e5a16dd6fb4836a1acb2eadd2c Mon Sep 17 00:00:00 2001 From: Joel Lienhard <71709264+choltreppe@users.noreply.github.com> Date: Mon, 16 Oct 2023 23:07:16 +0200 Subject: [PATCH 2/4] make namespaces var --- karax/vdom.nim | 1 + 1 file changed, 1 insertion(+) diff --git a/karax/vdom.nim b/karax/vdom.nim index 843e428..58fdf96 100644 --- a/karax/vdom.nim +++ b/karax/vdom.nim @@ -71,6 +71,7 @@ const svgElements* = {animate .. view} mathElements* = {maction .. semantics} +var svgNamespace* = "http://www.w3.org/2000/svg" mathNamespace* = "http://www.w3.org/1998/Math/MathML" From b0fe8b0d71fe0002c5da6f3a59ad96b8cac7faae Mon Sep 17 00:00:00 2001 From: Joel Lienhard Date: Wed, 18 Oct 2023 11:22:38 +0200 Subject: [PATCH 3/4] simplify toTag/toEventName defs, and dont uppercase toTag --- karax/karax.nim | 4 ++-- karax/vdom.nim | 30 ++++++++++++------------------ 2 files changed, 14 insertions(+), 20 deletions(-) diff --git a/karax/karax.nim b/karax/karax.nim index 3bd187a..7ba4f56 100644 --- a/karax/karax.nim +++ b/karax/karax.nim @@ -200,9 +200,9 @@ proc toDom*(n: VNode; useAttachedNode: bool; kxi: KaraxInstance = nil): Node = else: result = if n.kind in svgElements: - document.createElementNS(svgNamespace, $n.kind) + document.createElementNS(svgNamespace, toTag[n.kind]) elif n.kind in mathElements: - document.createElementNS(mathNamespace, $n.kind) + document.createElementNS(mathNamespace, toTag[n.kind]) else: document.createElement(toTag[n.kind]) attach n diff --git a/karax/vdom.nim b/karax/vdom.nim index 58fdf96..72732f3 100644 --- a/karax/vdom.nim +++ b/karax/vdom.nim @@ -130,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.} From ce2f3700d27f2579e18255bd6faf1e6803bec219 Mon Sep 17 00:00:00 2001 From: Joel Lienhard Date: Wed, 18 Oct 2023 20:16:03 +0200 Subject: [PATCH 4/4] fix class-name update of svg elements --- karax/karax.nim | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/karax/karax.nim b/karax/karax.nim index 7ba4f56..142746c 100644 --- a/karax/karax.nim +++ b/karax/karax.nim @@ -340,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