Fix nested elements in SVG (#57)

* Fix nested elements in SVG * Check for null children not just undefined * Test to verify correct namespace is applied to the whole svg tree

Author: asvanberg

src/Flame/Html/Element.js

@@ -167,9 +167,12 @@ exports.createSingleSvgNode = function (nodeData) {
 };
 
 function asSvg(elements) {
- for (let e of elements)
+ for (let e of elements) {
  if (e.nodeType === elementNode)
  e.nodeType = svgNode;
+ if (e.children !== null && typeof e.children !== 'undefined')
+ e.children = asSvg(e.children);
+ }
 
  return elements;
 }
@@ -222,4 +225,4 @@ function fromNodeData(allData) {
  }
 
  return nodeData;
-}
+}

test/Main.purs

@@ -387,6 +387,23 @@ main = TUM.runTest do
  text <- textContent "#mount-point"
  TUA.equal "oi" text
 
+ TU.test "nested svg elements have correct namespace" do
+ let html = HE.svg
+ [ HA.viewBox "0 0 100 100"
+ , HA.createAttribute "xmlns" "http://www.w3.org/2000/svg"
+ ]
+ [ HE.g [ HA.fill "white", HA.stroke "green", HA.strokeWidth "5" ]
+ [ HE.circle' [ HA.cx "40", HA.cy "40", HA.r "25" ], HE.circle' [ HA.cx "60", HA.cy "60", HA.r "25" ] ]
+ ]
+ void $ mountHtml html
+ let verifyNodeAndChildren node = do
+ TUA.equal (Just "http://www.w3.org/2000/svg") (WDE.namespaceURI node)
+ children <- liftEffect $ childrenNode' node
+ DT.for_ children verifyNodeAndChildren
+ svg <- liftEffect $ unsafeQuerySelector "svg"
+ verifyNodeAndChildren svg
+
+
  TU.suite "dom node update" do
  TU.test "update text nodes" do
  let html = HE.text "oi"
@@ -986,6 +1003,10 @@ main = TUM.runTest do
  children <- WDP.children $ WDE.toParentNode mountPoint
  WDHC.toArray children
 
+ childrenNode' parent = do
+ children <- WDP.children $ WDE.toParentNode parent
+ WDHC.toArray children
+
  textContent selector = liftEffect do
  element <- unsafeQuerySelector selector
  WDN.textContent $ WDE.toNode element