SVG elements are not rendered with Tyxml_lwd

[tmattio]

Hi,

First off, thanks a lot for your work on Lwd! I started porting a JS app to it yesterday and I'm really impressed by the elegance of the API!

I've encountered an issue with the rendering of SVG elements.

While inspecting the generated HTML, the code looks good, but the SVG is not displayed.

I've pushed a small repro here: https://github.com/tmattio/lwd-svg-repro/blob/main/lib/app.ml.

Let me know if there's anything I can do to help debug that 🙂

[let-def]

Thanks for trying :). Please note that this is an alpha release, so things are moving a bit and it is not surprising to find bugs :P.
How can I test your example? I can build the repository, but what is the workflow to run the result in the browser?

[tmattio]

Please note that this is an alpha release, so things are moving a bit and it is not surprising to find bugs

Of course, no pressure! I've been trying multiple alternatives, and I'm pleasantly surprised with Lwd, so I wanted to give it a shot, but I'm completely aware that it's a brand new library 🙂

How can I test your example

Once you've built the repo, you can open _build/default/asset/index.html. You'll see the page is blank, but if you inspect the code with the browser dev tools, you'll see that the div#root element contains the SVG:

<div class="text-gray-500">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-8 h-8" fill="none" stroke="currentColor" viewbox="0 0 24 24">
    <path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
  </svg>
</div>

[let-def]

I see. XML namespaces are not managed properly. I will see what we can do (I am not sure how this should be solved).

[let-def]

I have a fix. It is made of two steps:

• first is interpreting "xmlns" attributes differently in Tyxml-lwd. They are not really attribute (even though they make look like syntactically) as they are frozen at element creation time.
• second is applying this patch to your repro app:

diff --git a/lib/app.ml b/lib/app.ml
index 06994d8..b3f928e 100644
--- a/lib/app.ml
+++ b/lib/app.ml
@@ -18,6 +18,7 @@ module El = struct
           [ Tyxml_lwd.Svg.path
               ~a:
                 [ Tyxml_lwd.Svg.a_d (Lwd.pure "M6 18L18 6M6 6l12 12")
+                ; a_svg_custom "xmlns" "http://www.w3.org/2000/svg"
                 ; a_svg_custom "stroke-linecap" "round"
                 ; a_svg_custom "stroke-linejoin" "round"
                 ; a_svg_custom "stroke-width" "2"

This makes me think that the issue goes a bit deeper and should be handled at Tyxml level. I am curious what @Drup thinks about that.

[Drup]

Hmmm, this is delicate. I guess your issue is that xmlns shouldn't be "reactive" (lwdive ?) at all ? Do we have the same issue if we build everything with Tyxml_js.R ?

Could you try to instantiate the first tree with an initial value ?

[let-def]

Well, right now I suppose that xmlns is not reactive, but that's not even a real issue, I could make it reactive if it proved important.

The real issue, if I am not mistaken, is that xmlns namespace is not set for other Svg elements: the path is in this example.
It would be nice if the Svg functor could make the namespace clear (for instance, the Xml.node and Xml.leaf functions could take an additional ?ns argument).

[Drup]

Hmm, right, we had an issue like that previously too.

IIRC, the "right" way is to provide a different Xml_svg module with different namespaces. The HTML functor doesn't suppose that the SVG modules used the same XML module, only that the types are compatible. This is the solution used in Tyxml_js.

[let-def]

I see, I completely missed that. That's a good solution, I will implement it, thanks.

[Drup]

You have a point though, this could be considered a workaround and maybe we should provide better support for varied namespaces in tyxml directly to avoid it.

Could you open a ticket on tyxml to propose it ? I think I'll have lot's of changes in the functor API to do for the next version ...

[let-def]

Done: ocsigen/tyxml#277

[let-def]

The fix live in branch tyxml-svg-xmlns

[tmattio]

Thanks a lot for the swift answer and fix @let-def 🎉

I can confirm this fixes the issue in the repro project!