vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[render] add support for SVG in m.trust() strings

Browse source
This commit is contained in:
Pierre-Yves Gérardy 2018-03-02 14:41:49 +01:00 • committed by Pierre-Yves Gérardy
parent fdd34f9726
commit ad46a21a7d
4 changed files with 48 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

22
render/render.js
View file

@ -52,7 +52,7 @@ module.exports = function($window) {
if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
switch (tag) {
case "#": return createText(parent, vnode, nextSibling)
case "<": return createHTML(parent, vnode, nextSibling)
case "<": return createHTML(parent, vnode, ns, nextSibling)
case "[": return createFragment(parent, vnode, hooks, ns, nextSibling)
default: return createElement(parent, vnode, hooks, ns, nextSibling)
}
@ -64,12 +64,16 @@ module.exports = function($window) {
insertNode(parent, vnode.dom, nextSibling)
return vnode.dom
}
function createHTML(parent, vnode, nextSibling) {
var possibleParents = {caption: "table", thead: "table", tbody: "table", tfoot: "table", tr: "tbody", th: "tr", td: "tr", colgroup: "table", col: "colgroup"}
function createHTML(parent, vnode, ns, nextSibling) {
var match = vnode.children.match(/^\s*?<(\w+)/im) || []
var parent1 = {caption: "table", thead: "table", tbody: "table", tfoot: "table", tr: "tbody", th: "tr", td: "tr", colgroup: "table", col: "colgroup"}[match[1]] || "div"
var temp = $doc.createElement(parent1)
temp.innerHTML = vnode.children
var temp = $doc.createElement(possibleParents[match[1]] || "div")
if (ns === "http://www.w3.org/2000/svg") {
temp.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\">" + vnode.children + "</svg>"
temp = temp.firstChild
} else {
temp.innerHTML = vnode.children
}
vnode.dom = temp.firstChild
vnode.domSize = temp.childNodes.length
var fragment = $doc.createDocumentFragment()
@ -404,7 +408,7 @@ module.exports = function($window) {
}
switch (oldTag) {
case "#": updateText(old, vnode); break
case "<": updateHTML(parent, old, vnode, nextSibling); break
case "<": updateHTML(parent, old, vnode, ns, nextSibling); break
case "[": updateFragment(parent, old, vnode, recycling, hooks, nextSibling, ns); break
default: updateElement(old, vnode, recycling, hooks, ns)
}
@ -422,10 +426,10 @@ module.exports = function($window) {
}
vnode.dom = old.dom
}
function updateHTML(parent, old, vnode, nextSibling) {
function updateHTML(parent, old, vnode, ns, nextSibling) {
if (old.children !== vnode.children) {
toFragment(old)
createHTML(parent, vnode, nextSibling)
createHTML(parent, vnode, ns, nextSibling)
}
else vnode.dom = old.dom, vnode.domSize = old.domSize
}

32
render/tests/test-createHTML.js
View file

@ -31,7 +31,7 @@ o.spec("createHTML", function() {
o(vnode.dom).equals(null)
o(vnode.domSize).equals(0)
})
o("handles multiple children", function() {
o("handles multiple children in HTML", function() {
var vnode = {tag: "<", children: "<a></a><b></b>"}
render(root, [vnode])
@ -51,4 +51,34 @@ o.spec("createHTML", function() {
o(vnode.dom.nodeName).equals(tag.toUpperCase())
})
})
o("creates SVG", function() {
var vnode = {tag: "<", children: "<g></g>"}
render(root, [{tag:"svg", children: [vnode]}])
o(vnode.dom.nodeName).equals("g")
o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
})
o("creates text SVG", function() {
var vnode = {tag: "<", children: "a"}
render(root, [{tag:"svg", children: [vnode]}])
o(vnode.dom.nodeValue).equals("a")
})
o("handles empty SVG", function() {
var vnode = {tag: "<", children: ""}
render(root, [{tag:"svg", children: [vnode]}])
o(vnode.dom).equals(null)
o(vnode.domSize).equals(0)
})
o("handles multiple children in SVG", function() {
var vnode = {tag: "<", children: "<g></g><text></text>"}
render(root, [{tag:"svg", children: [vnode]}])
o(vnode.domSize).equals(2)
o(vnode.dom.nodeName).equals("g")
o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
o(vnode.dom.nextSibling.nodeName).equals("text")
o(vnode.dom.nextSibling.namespaceURI).equals("http://www.w3.org/2000/svg")
})
})