[RFC] Namespace support in knete #185

planetis-m · 2021-02-07T15:02:30Z

example:

import std / dom

window.onLoad = proc (e: Event) =
  let svgdiv = document.getElementById("svg1")
  for k in 1 .. 2:
    let svg = buildHtml svg(width = "100", height = "100"):
      circle(cx = "50", cy = "50", r = "40", stroke = "blue",
             stroke-width = "4", fill = "currentColor", class = "icon")
    svgdiv.add(svg)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="tsvg.js"></script>
  <style>
    .icon {
      color: red
    }
  </style>
</head>
<body>
</head>
<body>
  <div id="svg1"></div>
</body>
</html>

planetis-m · 2021-02-07T15:05:42Z

For it to work, setting the className was replaced with setAttribute("class", x). See also facebook/react#1590

planetis-m · 2021-02-07T15:23:22Z

Problems with it:

needs an buildNS parentNamespace overload

Araq · 2021-02-08T15:24:02Z

I don't understand this PR. Knete is code duplication and should be refactored. It's also not documented, is it? Do you want to use Knete?

planetis-m · 2021-02-08T16:30:34Z

I don't understand this PR. Knete is code duplication and should be refactored. It's also not documented, is it? Do you want to use Knete?

I'm trying it yes. My previous attempt #179 to add svg support to karax failed, I tried to work on knete instead, being just a thin dsl on top of the dom.

So my example produces:

let ns_369098792 = getChildNamespace(Namespace.none, Tag.svg)
let tmp_369098791 = newNode(ns_369098792, Tag.svg)
setAttr(tmp_369098791, "width", "100")
setAttr(tmp_369098791, "height", "100")
let ns_369098799 = getChildNamespace(ns_369098792, Tag.circle)
let tmp_369098798 = newNode(ns_369098799, Tag.circle)
setAttr(tmp_369098798, "cx", "50")
setAttr(tmp_369098798, "cy", "50")
setAttr(tmp_369098798, "r", "40")
setAttr(tmp_369098798, "stroke", "blue")
setAttr(tmp_369098798, "stroke-width", "4")
setAttr(tmp_369098798, "fill", "currentColor")
setAttr(tmp_369098798, "class", "icon")
add(tmp_369098791, tmp_369098798)

which is equivalent to:

let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
svg.setAttribute("width", "100")
svg.setAttribute("height", "100")
let c = document.createElementNS("http://www.w3.org/2000/svg", "circle")
c.setAttribute("cx", "50")
c.setAttribute("cy", "50")
c.setAttribute("r", "40")
c.setAttribute("stroke", "green")
c.setAttribute("stroke-width", "4")
c.setAttribute("fill", "yellow")
svg.appendChild(c)

...but the logic for determining the correct namespace is moved at runtime (see the getChildNamespace proc). That makes svg as well as mathml elements render properly.

planetis-m · 2021-02-08T16:36:37Z

I think it would be better to add a buildSvg overload for karax, but I'm waiting for your feedback and suggestions.

Main problems with that are: nodeName doesn't return all uppercase when inside the svg/mathml namespace, which breaks karax.same. Moreover the xml standard is case-sensitive, meaning createElementNS("SVG") or createElementNS("MATH") don't work.

geotre · 2023-10-20T15:38:48Z

Closing this as we added SVG support in #271

planetis-m added 13 commits February 4, 2021 22:40

attempt to fix svg elements

0a8a5ba

uppercase tag names don't work for svg elements apparently

4bf4e5d

refactor namespaces add mathml elements

5c939fc

trying to fix this

4820066

question remains about classname

f70a2fe

workaround read-only className for svg

cbc428f

last one before revert

1153a85

revert everything with namespaces

924b707

revert

a0a4a40

update knete

e7e4dd4

add dep to std/dom fixed setting className

5040190

fix examples

369d120

basic support of svgs

ab5ab32

geotre closed this Oct 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RFC] Namespace support in knete #185

[RFC] Namespace support in knete #185

planetis-m commented Feb 7, 2021 •

edited

Loading

planetis-m commented Feb 7, 2021

planetis-m commented Feb 7, 2021

Araq commented Feb 8, 2021

planetis-m commented Feb 8, 2021 •

edited

Loading

planetis-m commented Feb 8, 2021 •

edited

Loading

geotre commented Oct 20, 2023

[RFC] Namespace support in knete #185

[RFC] Namespace support in knete #185

Conversation

planetis-m commented Feb 7, 2021 • edited Loading

planetis-m commented Feb 7, 2021

planetis-m commented Feb 7, 2021

Araq commented Feb 8, 2021

planetis-m commented Feb 8, 2021 • edited Loading

planetis-m commented Feb 8, 2021 • edited Loading

geotre commented Oct 20, 2023

planetis-m commented Feb 7, 2021 •

edited

Loading

planetis-m commented Feb 8, 2021 •

edited

Loading

planetis-m commented Feb 8, 2021 •

edited

Loading