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

fix svg across component boundaries

Browse source
This commit is contained in:
Leo Horie 2016-06-03 12:27:24 -04:00
parent 7b268c6ee8
commit ca784a684e
6 changed files with 64 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

55
mithril.js
View file

@ -96,7 +96,7 @@ if (typeof Promise === "undefined") {
}
}
function Node(tag, key, attrs, children, text, dom) {
return {tag: tag, key: key, attrs: attrs, children: children, text: text, dom: dom, domSize: undefined, state: {}, events: undefined}
return {tag: tag, key: key, attrs: attrs, children: children, text: text, dom: dom, domSize: undefined, state: {}, events: undefined, instance: undefined}
}
Node.normalize = function(node) {
if (node instanceof Array) return Node("[", undefined, undefined, Node.normalizeChildren(node), undefined, undefined)
@ -147,12 +147,7 @@ function hyperscript(selector) {
if (children instanceof Array && children.length == 1 && children[0] != null && children[0].tag === "#") text = children[0].children
else childList = children
var vnode = Node(tag || "div", attrs.key, hasAttrs ? attrs : undefined, childList, text, undefined)
switch (vnode.tag) {
case "svg": changeNS("http://www.w3.org/2000/svg", vnode); break
case "math": changeNS("http://www.w3.org/1998/Math/MathML", vnode); break
}
return vnode
return Node(tag || "div", attrs.key, hasAttrs ? attrs : undefined, childList, text, undefined)
}
}
}
@ -174,12 +169,6 @@ function hyperscript(selector) {
return Node(selector, attrs && attrs.key, attrs || {}, Node.normalizeChildren(children), undefined, undefined)
}
function changeNS(ns, vnode) {
vnode.ns = ns
if (vnode.children != null) {
for (var i = 0; i < vnode.children.length; i++) changeNS(ns, vnode.children[i])
}
}
var m = hyperscript
var renderService = function($window) {
var $doc = $window.document
@ -188,26 +177,26 @@ var renderService = function($window) {
function setEventCallback(callback) {return onevent = callback}
//create
function createNodes(parent, vnodes, start, end, hooks, nextSibling) {
function createNodes(parent, vnodes, start, end, hooks, nextSibling, ns) {
for (var i = start; i < end; i++) {
var vnode = vnodes[i]
if (vnode != null) {
insertNode(parent, createNode(vnode, hooks), nextSibling)
insertNode(parent, createNode(vnode, hooks, ns), nextSibling)
}
}
}
function createNode(vnode, hooks) {
function createNode(vnode, hooks, ns) {
var tag = vnode.tag
if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
if (typeof tag === "string") {
switch (tag) {
case "#": return createText(vnode)
case "<": return createHTML(vnode)
case "[": return createFragment(vnode, hooks)
default: return createElement(vnode, hooks)
case "[": return createFragment(vnode, hooks, ns)
default: return createElement(vnode, hooks, ns)
}
}
else return createComponent(vnode, hooks)
else return createComponent(vnode, hooks, ns)
}
function createText(vnode) {
return vnode.dom = $doc.createTextNode(vnode.children)
@ -227,19 +216,22 @@ var renderService = function($window) {
}
return fragment
}
function createFragment(vnode, hooks) {
function createFragment(vnode, hooks, ns) {
var fragment = $doc.createDocumentFragment()
if (vnode.children != null) {
var children = vnode.children
createNodes(fragment, children, 0, children.length, hooks, null)
createNodes(fragment, children, 0, children.length, hooks, null, ns)
}
vnode.dom = fragment.firstChild
vnode.domSize = fragment.childNodes.length
return fragment
}
function createElement(vnode, hooks) {
function createElement(vnode, hooks, ns) {
var tag = vnode.tag
var ns = vnode.ns
switch (vnode.tag) {
case "svg": ns = "http://www.w3.org/2000/svg"; break
case "math": ns = "http://www.w3.org/1998/Math/MathML"; break
}
var attrs = vnode.attrs
var is = attrs && attrs.is
@ -260,18 +252,18 @@ var renderService = function($window) {
if (vnode.children != null) {
var children = vnode.children
createNodes(element, children, 0, children.length, hooks, null)
createNodes(element, children, 0, children.length, hooks, null, ns)
setLateAttrs(vnode)
}
return element
}
function createComponent(vnode, hooks) {
function createComponent(vnode, hooks, ns) {
vnode.state = copy(vnode.tag)
initLifecycle(vnode.tag, vnode, hooks)
vnode.instance = Node.normalize(vnode.tag.view.call(vnode.state, vnode))
if (vnode.instance != null) {
var element = createNode(vnode.instance, hooks)
var element = createNode(vnode.instance, hooks, ns)
vnode.dom = vnode.instance.dom
vnode.domSize = vnode.instance.domSize
return element
@ -500,7 +492,7 @@ var renderService = function($window) {
}
}
if (vnode.dom.parentNode != null) parent.removeChild(vnode.dom)
if (context != null && vnode.domSize == null && !hasIntegrationMethods(vnode)) { //TODO test custom elements
if (context != null && vnode.domSize == null && !hasIntegrationMethods(vnode.attrs) && !(typeof vnode.tag !== "string" && hasIntegrationMethods(vnode.tag))) { //TODO test custom elements
if (!context.pool) context.pool = [vnode]
else context.pool.push(vnode)
}
@ -526,7 +518,7 @@ var renderService = function($window) {
}
function setAttr(vnode, key, old, value) {
var element = vnode.dom
if (key === "key" || (old === value && !isFormAttribute(vnode, key)) || typeof value === "undefined" || isLifecycleMethod(key)) return
if (key === "key" || (old === value && !isFormAttribute(vnode, key)) && typeof value !== "object" || typeof value === "undefined" || isLifecycleMethod(key)) return
var nsLastIndex = key.indexOf(":")
if (nsLastIndex > -1 && key.substr(0, nsLastIndex) === "xlink") {
element.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(nsLastIndex + 1), value)
@ -576,12 +568,13 @@ var renderService = function($window) {
function isAttribute(attr) {
return attr === "href" || attr === "list" || attr === "form"// || attr === "type" || attr === "width" || attr === "height"
}
function hasIntegrationMethods(vnode) {
return vnode.attrs != null && (vnode.attrs.oncreate || vnode.attrs.onupdate || vnode.attrs.onbeforeremove || vnode.attrs.onremove)
function hasIntegrationMethods(source) {
return source != null && (source.oncreate || source.onupdate || source.onbeforeremove || source.onremove)
}
//style
function updateStyle(element, old, style) {
if (old === style) element.style = "", old = null
if (style == null) element.style = ""
else if (typeof style === "string") element.style = style
else {
@ -992,6 +985,8 @@ m.route = function($window, renderer, pubsub) {
}
route.link = router.link
route.prefix = router.setPrefix
route.setPath = router.setPath
route.getPath = router.getPath
return route
}(window, renderService, redrawService)

14
render/hyperscript.js
View file

@ -40,12 +40,7 @@ function hyperscript(selector) {
if (children instanceof Array && children.length == 1 && children[0] != null && children[0].tag === "#") text = children[0].children
else childList = children
var vnode = Node(tag || "div", attrs.key, hasAttrs ? attrs : undefined, childList, text, undefined)
switch (vnode.tag) {
case "svg": changeNS("http://www.w3.org/2000/svg", vnode); break
case "math": changeNS("http://www.w3.org/1998/Math/MathML", vnode); break
}
return vnode
return Node(tag || "div", attrs.key, hasAttrs ? attrs : undefined, childList, text, undefined)
}
}
}
@ -68,11 +63,4 @@ function hyperscript(selector) {
return Node(selector, attrs && attrs.key, attrs || {}, Node.normalizeChildren(children), undefined, undefined)
}
function changeNS(ns, vnode) {
vnode.ns = ns
if (vnode.children != null) {
for (var i = 0; i < vnode.children.length; i++) changeNS(ns, vnode.children[i])
}
}
module.exports = hyperscript

2
render/node.js
View file

@ -1,5 +1,5 @@
function Node(tag, key, attrs, children, text, dom) {
return {tag: tag, key: key, attrs: attrs, children: children, text: text, dom: dom, domSize: undefined, state: {}, events: undefined, ns: undefined, instance: undefined}
return {tag: tag, key: key, attrs: attrs, children: children, text: text, dom: dom, domSize: undefined, state: {}, events: undefined, instance: undefined}
}
Node.normalize = function(node) {
if (node instanceof Array) return Node("[", undefined, undefined, Node.normalizeChildren(node), undefined, undefined)

29
render/render.js
View file

@ -10,26 +10,26 @@ module.exports = function($window) {
function setEventCallback(callback) {return onevent = callback}
//create
function createNodes(parent, vnodes, start, end, hooks, nextSibling) {
function createNodes(parent, vnodes, start, end, hooks, nextSibling, ns) {
for (var i = start; i < end; i++) {
var vnode = vnodes[i]
if (vnode != null) {
insertNode(parent, createNode(vnode, hooks), nextSibling)
insertNode(parent, createNode(vnode, hooks, ns), nextSibling)
}
}
}
function createNode(vnode, hooks) {
function createNode(vnode, hooks, ns) {
var tag = vnode.tag
if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
if (typeof tag === "string") {
switch (tag) {
case "#": return createText(vnode)
case "<": return createHTML(vnode)
case "[": return createFragment(vnode, hooks)
default: return createElement(vnode, hooks)
case "[": return createFragment(vnode, hooks, ns)
default: return createElement(vnode, hooks, ns)
}
}
else return createComponent(vnode, hooks)
else return createComponent(vnode, hooks, ns)
}
function createText(vnode) {
return vnode.dom = $doc.createTextNode(vnode.children)
@ -49,19 +49,22 @@ module.exports = function($window) {
}
return fragment
}
function createFragment(vnode, hooks) {
function createFragment(vnode, hooks, ns) {
var fragment = $doc.createDocumentFragment()
if (vnode.children != null) {
var children = vnode.children
createNodes(fragment, children, 0, children.length, hooks, null)
createNodes(fragment, children, 0, children.length, hooks, null, ns)
}
vnode.dom = fragment.firstChild
vnode.domSize = fragment.childNodes.length
return fragment
}
function createElement(vnode, hooks) {
function createElement(vnode, hooks, ns) {
var tag = vnode.tag
var ns = vnode.ns
switch (vnode.tag) {
case "svg": ns = "http://www.w3.org/2000/svg"; break
case "math": ns = "http://www.w3.org/1998/Math/MathML"; break
}
var attrs = vnode.attrs
var is = attrs && attrs.is
@ -82,18 +85,18 @@ module.exports = function($window) {
if (vnode.children != null) {
var children = vnode.children
createNodes(element, children, 0, children.length, hooks, null)
createNodes(element, children, 0, children.length, hooks, null, ns)
setLateAttrs(vnode)
}
return element
}
function createComponent(vnode, hooks) {
function createComponent(vnode, hooks, ns) {
vnode.state = copy(vnode.tag)
initLifecycle(vnode.tag, vnode, hooks)
vnode.instance = Node.normalize(vnode.tag.view.call(vnode.state, vnode))
if (vnode.instance != null) {
var element = createNode(vnode.instance, hooks)
var element = createNode(vnode.instance, hooks, ns)
vnode.dom = vnode.instance.dom
vnode.domSize = vnode.instance.domSize
return element

21
render/tests/test-component.js
View file

@ -67,6 +67,27 @@ o.spec("component", function() {
o(root.childNodes.length).equals(1)
o(root.firstChild).equals(div.dom)
})
o("svg works when creating across component boundary", function() {
var component = {
view: function(vnode) {
return {tag: "g"}
}
}
render(root, [{tag: "svg", children: [{tag: component}]}])
o(root.firstChild.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
})
o("svg works when updating across component boundary", function() {
var component = {
view: function(vnode) {
return {tag: "g"}
}
}
render(root, [{tag: "svg", children: [{tag: component}]}])
render(root, [{tag: "svg", children: [{tag: component}]}])
o(root.firstChild.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
})
})
o.spec("return value", function() {
o("can return fragments", function() {

18
render/tests/test-hyperscript.js
View file

@ -394,24 +394,6 @@ o.spec("hyperscript", function() {
o(vnode.children[0].children[0].children[1].tag).equals("s")
})
})
o.spec("namespaced", function() {
o("handles svg ns", function() {
var vnode = m("svg", m("g"))
o(vnode.tag).equals("svg")
o(vnode.ns).equals("http://www.w3.org/2000/svg")
o(vnode.children[0].tag).equals("g")
o(vnode.children[0].ns).equals("http://www.w3.org/2000/svg")
})
o("handles mathml ns", function() {
var vnode = m("math", m("mrow"))
o(vnode.tag).equals("math")
o(vnode.ns).equals("http://www.w3.org/1998/Math/MathML")
o(vnode.children[0].tag).equals("mrow")
o(vnode.children[0].ns).equals("http://www.w3.org/1998/Math/MathML")
})
})
o.spec("components", function() {
o("works", function() {
var component = {