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

Allow variadic arguments to m.fragment (#2328)

Browse source 
* Implement support for variadic arguments to `m.fragment`

While I was at it, I refactored the common logic out of `hyperscript`.

* Add a missed change from #2326

* Update docs + changelog [skip ci]

* Explain rationale for `hyperscriptVnode`'s calling convention

This way, it doesn't get erroneously "cleaned up" into something worse,
and so it's clearer how it'd be potentially optimized once ES5 support
is dropped.
This commit is contained in:
Isiah Meadows 2018-12-05 23:57:42 -05:00 • committed by GitHub
parent 843f420291
commit 966e78bcab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 256 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

9
render/fragment.js
View file

@ -1,7 +1,12 @@
"use strict"
var Vnode = require("../render/vnode")
var hyperscriptVnode = require("./hyperscriptVnode")
module.exports = function(attrs, children) {
return Vnode("[", attrs.key, attrs, Vnode.normalizeChildren(children), undefined, undefined)
module.exports = function() {
var vnode = hyperscriptVnode.apply(0, arguments)
vnode.tag = "["
vnode.children = Vnode.normalizeChildren(vnode.children)
return vnode
}

52
render/hyperscript.js
View file

@ -1,6 +1,7 @@
"use strict"
var Vnode = require("../render/vnode")
var hyperscriptVnode = require("./hyperscriptVnode")
var selectorParser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g
var selectorCache = {}
@ -29,18 +30,21 @@ function compileSelector(selector) {
return selectorCache[selector] = {tag: tag, attrs: attrs}
}
function execSelector(state, attrs, children) {
var hasAttrs = false, childList, text
var classAttr = hasOwn.call(attrs, "class") ? "class" : "className"
var className = attrs[classAttr]
function execSelector(state, vnode) {
var attrs = vnode.attrs
var children = Vnode.normalizeChildren(vnode.children)
var hasClass = hasOwn.call(attrs, "class")
var className = hasClass ? attrs.class : attrs.className
vnode.tag = state.tag
vnode.attrs = null
vnode.children = undefined
if (!isEmpty(state.attrs) && !isEmpty(attrs)) {
var newAttrs = {}
for(var key in attrs) {
if (hasOwn.call(attrs, key)) {
newAttrs[key] = attrs[key]
}
for (var key in attrs) {
if (hasOwn.call(attrs, key)) newAttrs[key] = attrs[key]
}
attrs = newAttrs
@ -60,22 +64,22 @@ function execSelector(state, attrs, children) {
? state.attrs.className
: null
if (classAttr === "class") attrs.class = null
if (hasClass) attrs.class = null
for (var key in attrs) {
if (hasOwn.call(attrs, key) && key !== "key") {
hasAttrs = true
vnode.attrs = attrs
break
}
}
if (Array.isArray(children) && children.length === 1 && children[0] != null && children[0].tag === "#") {
text = children[0].children
vnode.text = children[0].children
} else {
childList = children
vnode.children = children
}
return Vnode(state.tag, attrs.key, hasAttrs ? attrs : null, childList, text)
return vnode
}
function hyperscript(selector) {
@ -83,27 +87,13 @@ function hyperscript(selector) {
throw Error("The selector must be either a string or a component.");
}
var attrs = arguments[1], start = 2, children
if (attrs == null) {
attrs = {}
} else if (typeof attrs !== "object" || attrs.tag != null || Array.isArray(attrs)) {
attrs = {}
start = 1
}
if (arguments.length === start + 1) {
children = arguments[start]
if (!Array.isArray(children)) children = [children]
} else {
children = []
while (start < arguments.length) children.push(arguments[start++])
}
var vnode = hyperscriptVnode.apply(1, arguments)
if (typeof selector === "string") {
return execSelector(selectorCache[selector] || compileSelector(selector), attrs, Vnode.normalizeChildren(children))
return execSelector(selectorCache[selector] || compileSelector(selector), vnode)
} else {
return Vnode(selector, attrs.key, attrs, children)
vnode.tag = selector
return vnode
}
}

53
render/hyperscriptVnode.js Normal file
View file

@ -0,0 +1,53 @@
"use strict"
var Vnode = require("../render/vnode")
// Call via `hyperscriptVnode.apply(startOffset, arguments)`
//
// The reason I do it this way, forwarding the arguments and passing the start
// offset in `this`, is so I don't have to create a temporary array in a
// performance-critical path.
//
// In native ES6, I'd instead add a final `...args` parameter to the
// `hyperscript` and `fragment` factories and define this as
// `hyperscriptVnode(...args)`, since modern engines do optimize that away. But
// ES5 (what Mithril requires thanks to IE support) doesn't give me that luxury,
// and engines aren't nearly intelligent enough to do either of these:
//
// 1. Elide the allocation for `[].slice.call(arguments, 1)` when it's passed to
// another function only to be indexed.
// 2. Elide an `arguments` allocation when it's passed to any function other
// than `Function.prototype.apply` or `Reflect.apply`.
//
// In ES6, it'd probably look closer to this (I'd need to profile it, though):
// module.exports = function(attrs, ...children) {
// if (attrs == null || typeof attrs === "object" && attrs.tag == null && !Array.isArray(attrs)) {
// if (children.length === 1 && Array.isArray(children[0])) children = children[0]
// } else {
// children = children.length === 0 && Array.isArray(attrs) ? attrs : [attrs, ...children]
// attrs = undefined
// }
//
// if (attrs == null) attrs = {}
// return Vnode("", attrs.key, attrs, children)
// }
module.exports = function() {
var attrs = arguments[this], start = this + 1, children
if (attrs == null) {
attrs = {}
} else if (typeof attrs !== "object" || attrs.tag != null || Array.isArray(attrs)) {
attrs = {}
start = this
}
if (arguments.length === start + 1) {
children = arguments[start]
if (!Array.isArray(children)) children = [children]
} else {
children = []
while (start < arguments.length) children.push(arguments[start++])
}
return Vnode("", attrs.key, attrs, children)
}

162
render/tests/test-fragment.js
View file

@ -32,4 +32,166 @@ o.spec("fragment", function() {
o(frag.key).equals(7)
})
o.spec("children with no attrs", function() {
o("handles string single child", function() {
var vnode = fragment(["a"])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("a")
})
o("handles falsy string single child", function() {
var vnode = fragment([""])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("")
})
o("handles number single child", function() {
var vnode = fragment([1])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(1)
})
o("handles falsy number single child", function() {
var vnode = fragment([0])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(0)
})
o("handles boolean single child", function() {
var vnode = fragment([true])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(true)
})
o("handles falsy boolean single child", function() {
var vnode = fragment([false])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("")
})
o("handles null single child", function() {
var vnode = fragment([null])
o(vnode.children[0]).equals(null)
})
o("handles undefined single child", function() {
var vnode = fragment([undefined])
o(vnode.children[0]).equals(undefined)
})
o("handles multiple string children", function() {
var vnode = fragment(["", "a"])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("")
o(vnode.children[1].tag).equals("#")
o(vnode.children[1].children).equals("a")
})
o("handles multiple number children", function() {
var vnode = fragment([0, 1])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(0)
o(vnode.children[1].tag).equals("#")
o(vnode.children[1].children).equals(1)
})
o("handles multiple boolean children", function() {
var vnode = fragment([false, true])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("")
o(vnode.children[1].tag).equals("#")
o(vnode.children[1].children).equals(true)
})
o("handles multiple null/undefined child", function() {
var vnode = fragment([null, undefined])
o(vnode.children[0]).equals(null)
o(vnode.children[1]).equals(undefined)
})
o("handles falsy number single child without attrs", function() {
var vnode = fragment(0)
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(0)
})
})
o.spec("children with attrs", function() {
o("handles string single child", function() {
var vnode = fragment({}, ["a"])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("a")
})
o("handles falsy string single child", function() {
var vnode = fragment({}, [""])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("")
})
o("handles number single child", function() {
var vnode = fragment({}, [1])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(1)
})
o("handles falsy number single child", function() {
var vnode = fragment({}, [0])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(0)
})
o("handles boolean single child", function() {
var vnode = fragment({}, [true])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(true)
})
o("handles falsy boolean single child", function() {
var vnode = fragment({}, [false])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("")
})
o("handles null single child", function() {
var vnode = fragment({}, [null])
o(vnode.children[0]).equals(null)
})
o("handles undefined single child", function() {
var vnode = fragment({}, [undefined])
o(vnode.children[0]).equals(undefined)
})
o("handles multiple string children", function() {
var vnode = fragment({}, ["", "a"])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("")
o(vnode.children[1].tag).equals("#")
o(vnode.children[1].children).equals("a")
})
o("handles multiple number children", function() {
var vnode = fragment({}, [0, 1])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals(0)
o(vnode.children[1].tag).equals("#")
o(vnode.children[1].children).equals(1)
})
o("handles multiple boolean children", function() {
var vnode = fragment({}, [false, true])
o(vnode.children[0].tag).equals("#")
o(vnode.children[0].children).equals("")
o(vnode.children[1].tag).equals("#")
o(vnode.children[1].children).equals(true)
})
o("handles multiple null/undefined child", function() {
var vnode = fragment({}, [null, undefined])
o(vnode.children[0]).equals(null)
o(vnode.children[1]).equals(undefined)
})
})
})