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

fix bugs about recycling in components, and styles when reusing style object

Browse source
This commit is contained in:
Leo Horie 2016-06-02 21:42:18 -04:00
parent 86673f8d16
commit f9ef480b34
5 changed files with 157 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

109
mithril.js
View file

@ -1,4 +1,100 @@
"use strict"
if (typeof Promise === "undefined") {
var Promise = function(executor) {
if (!(this instanceof Promise)) throw new Error("Promise must be called with `new`")
if (typeof executor !== "function") throw new TypeError("executor must be a function")
var self = this, resolvers = [], rejectors = [], resolveCurrent = handler(resolvers, true), rejectCurrent = handler(rejectors, false)
var instance = self._instance = {resolvers: resolvers, rejectors: rejectors}
var callAsync = typeof setImmediate === "function" ? setImmediate : setTimeout
function handler(list, shouldAbsorb) {
return function execute(value) {
var then
try {
if (shouldAbsorb && value != null && (typeof value === "object" || typeof value === "function") && typeof (then = value.then) === "function") {
if (value === self) throw new TypeError("Promise can't be resolved w/ itself")
executeOnce(then.bind(value))
}
else {
callAsync(function() {
if (!shouldAbsorb && list.length === 0) console.error("Possible unhandled promise rejection:", value)
for (var i = 0; i < list.length; i++) list[i](value)
resolvers.length = 0, rejectors.length = 0
instance.state = shouldAbsorb
instance.retry = function() {execute(value)}
}, 0)
}
}
catch (e) {
rejectCurrent(e)
}
}
}
function executeOnce(then) {
var runs = 0
function run(fn) {
return function(value) {
if (runs++ > 0) return
fn(value)
}
}
var onerror = run(rejectCurrent)
try {then(run(resolveCurrent), onerror)} catch (e) {onerror(e)}
}
executeOnce(executor)
}
Promise.prototype.then = function(onFulfilled, onRejection) {
var self = this, instance = self._instance
function handle(callback, list, next, state) {
list.push(function(value) {
if (typeof callback !== "function") next(value)
else try {resolveNext(callback(value))} catch (e) {if (rejectNext) rejectNext(e)}
})
if (typeof instance.retry === "function" && state === instance.state) instance.retry()
}
var resolveNext, rejectNext
var promise = new Promise(function(resolve, reject) {resolveNext = resolve, rejectNext = reject})
handle(onFulfilled, instance.resolvers, resolveNext, true), handle(onRejection, instance.rejectors, rejectNext, false)
return promise
}
Promise.prototype.catch = function(onRejection) {
return this.then(null, onRejection)
}
Promise.resolve = function(value) {
if (value instanceof Promise) return value
return new Promise(function(resolve, reject) {resolve(value)})
}
Promise.reject = function(value) {
return new Promise(function(resolve, reject) {reject(value)})
}
Promise.all = function(list) {
return new Promise(function(resolve, reject) {
var total = list.length, count = 0, values = []
if (list.length === 0) resolve([])
else for (var i = 0; i < list.length; i++) {
new function(i) {
function consume(value) {
count++
values[i] = value
if (count === total) resolve(values)
}
if (list[i] != null && (typeof list[i] === "object" || typeof list[i] === "function") && typeof list[i].then === "function") {
list[i].then(consume, reject)
}
else consume(list[i])
}(i)
}
})
}
Promise.race = function(list) {
return new Promise(function(resolve, reject) {
for (var i = 0; i < list.length; i++) {
list[i].then(resolve, reject)
}
})
}
}
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}
}
@ -13,7 +109,7 @@ Node.normalizeChildren = function normalizeChildren(children) {
}
return children
}
var selectorParser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[.+?\])/g, attrParser = /\[(.+?)(?:\s*=\s*("|'|)(.*?)\2)?\]/
var selectorParser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g
var selectorCache = {}
function hyperscript(selector) {
if (typeof selector === "string") {
@ -25,8 +121,9 @@ function hyperscript(selector) {
else if (type === "#") attributes.id = value
else if (type === ".") classes.push(value)
else if (match[3][0] === "[") {
var pair = attrParser.exec(match[3])
attributes[pair[1]] = pair[3] || true
var attrValue = match[6]
if (attrValue) attrValue = attrValue.replace(/\\(["'])/g, "$1").replace(/\\\\/g, "\\")
attributes[match[4]] = attrValue || true
}
}
if (classes.length > 0) attributes.className = classes.join(" ")
@ -601,10 +698,10 @@ var buildQueryString = function(object) {
else args.push(encodeURIComponent(key) + (value != null && value !== "" ? "=" + encodeURIComponent(value) : ""))
}
}
var requestService = function($window, Promise) {
var requestService = function($window, Promise1) {
var callbackCount = 0
function xhr(args) {
return new Promise(function(resolve, reject) {
return new Promise1(function(resolve, reject) {
var useBody = args.useBody != null ? args.useBody : args.method !== "GET" && args.method !== "TRACE"
if (typeof args.serialize !== "function") args.serialize = JSON.stringify
@ -656,7 +753,7 @@ var requestService = function($window, Promise) {
})
}
function jsonp(args) {
return new Promise(function(resolve, reject) {
return new Promise1(function(resolve, reject) {
var callbackName = args.callbackName || "_mithril_" + Math.round(Math.random() * 1e16) + "_" + callbackCount++
var script = $window.document.createElement("script")
$window[callbackName] = function(data) {

9
render/render.js
View file

@ -325,7 +325,7 @@ module.exports = 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)
}
@ -352,7 +352,7 @@ module.exports = 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)
@ -402,12 +402,13 @@ module.exports = 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 {

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

@ -537,6 +537,23 @@ o.spec("component", function() {
o(called).equals(1)
o(root.childNodes.length).equals(0)
})
o("does not recycle when there's an onupdate", function() {
var component = {
onupdate: function() {},
view: function() {
return {tag: "div"}
}
}
var update = o.spy()
var vnode = {tag: component, key: 1}
var updated = {tag: component, key: 1}
render(root, [vnode])
render(root, [])
render(root, [updated])
o(vnode.dom).notEquals(updated.dom)
})
})
o.spec("state", function() {
o("deep copies state", function() {

31
render/tests/test-updateElement.js
View file

@ -92,6 +92,24 @@ o.spec("updateElement", function() {
o(updated.dom.style.backgroundColor).equals("green")
})
o("handles noop style change when style is string", function() {
var vnode = {tag: "a", attrs: {style: "background-color:green;"}}
var updated = {tag: "a", attrs: {style: "background-color:green;"}}
render(root, [vnode])
render(root, [updated])
o(updated.dom.style.backgroundColor).equals("green")
})
o("handles noop style change when style is object", function() {
var vnode = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
var updated = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
render(root, [vnode])
render(root, [updated])
o(updated.dom.style.backgroundColor).equals("red")
})
o("updates style from string to object", function() {
var vnode = {tag: "a", attrs: {style: "background-color:red;"}}
var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
@ -150,6 +168,19 @@ o.spec("updateElement", function() {
o(updated.dom.style.backgroundColor).equals("red")
o(updated.dom.style.border).equals("")
})
o("updates style when it's same object but mutated", function() {
var style = {backgroundColor: "red", color: "gold"}
var vnode = {tag: "a", attrs: {style: style}}
render(root, [vnode])
delete style.backgroundColor
var updated = {tag: "a", attrs: {style: style}}
render(root, [updated])
o(updated.dom.style.backgroundColor).equals("")
o(updated.dom.style.color).equals("gold")
})
o("replaces el", function() {
var vnode = {tag: "a"}
var updated = {tag: "b"}

2
test-utils/callAsync.js
View file

@ -1,3 +1,3 @@
"use strict"
module.exports = typeof process === "object" ? process.nextTick : window.setImmediate || window.setTimeout
module.exports = typeof setImmediate === "function" ? setImmediate : setTimeout