Dispatch strikes back
- Change the effect implementation signature as follows: (dispatch, props, payload) - dispatch is now the first argument to the function. - props is the value passed in to the effect constructor, e.g., myEffect(props), and - payload is the original payload of the associated action, e.g., the event object. - Remove passive event support and defer this for a future version. - Other options I'm considering are: - Make all `touch` events passive by default - Specify passive events via the attribute name: `on***Passive` - Go back to { action: MyAction, passive: true }
This commit is contained in:
parent
e17470020b
commit
50d39e6200
|
@ -4,10 +4,10 @@ var fx = function(a) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export var focus = fx(function(id) {
|
export var focus = fx(function(_, id) {
|
||||||
document.getElementById(id).focus()
|
document.getElementById(id).focus()
|
||||||
})
|
})
|
||||||
|
|
||||||
export var blur = fx(function(id) {
|
export var blur = fx(function(_, id) {
|
||||||
document.getElementById(id).blur()
|
document.getElementById(id).blur()
|
||||||
})
|
})
|
||||||
|
|
|
@ -7,7 +7,7 @@ var fx = function(a) {
|
||||||
var throttledEvent = function(name) {}
|
var throttledEvent = function(name) {}
|
||||||
|
|
||||||
var rawEvent = function(name) {
|
var rawEvent = function(name) {
|
||||||
return fx(function(action, dispatch) {
|
return fx(function(dispatch, action) {
|
||||||
var listener = function(event) {
|
var listener = function(event) {
|
||||||
dispatch(action, event)
|
dispatch(action, event)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
var fx = function(a) {
|
var timeFx = function(fx) {
|
||||||
return function(b) {
|
return function(action, props) {
|
||||||
return [a, b]
|
return [fx, { action: action, delay: props.delay }]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export var interval = fx(function(props, dispatch) {
|
export var interval = timeFx(function(dispatch, props) {
|
||||||
var id = setInterval(function() {
|
var id = setInterval(function() {
|
||||||
dispatch(props.action, Date.now())
|
dispatch(props.action, Date.now())
|
||||||
}, props.delay)
|
}, props.delay)
|
||||||
|
@ -13,16 +13,14 @@ export var interval = fx(function(props, dispatch) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export var timeout = fx(function(props, dispatch) {
|
export var timeout = timeFx(function(dispatch, props) {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
dispatch(props.action)
|
dispatch(props.action)
|
||||||
}, props.delay)
|
}, props.delay)
|
||||||
})
|
})
|
||||||
|
|
||||||
// TODO
|
// export var now
|
||||||
// now
|
// export var retry
|
||||||
// here
|
// export var debounce
|
||||||
// retry
|
// export var throttle
|
||||||
// debounce
|
// export var idleCallback?
|
||||||
// throttle
|
|
||||||
// idleCallback?
|
|
||||||
|
|
26
src/index.js
26
src/index.js
|
@ -78,7 +78,7 @@ var patchSubs = function(oldSubs, newSubs, dispatch) {
|
||||||
? [
|
? [
|
||||||
newSub[0],
|
newSub[0],
|
||||||
newSub[1],
|
newSub[1],
|
||||||
newSub[0](newSub[1], dispatch),
|
newSub[0](dispatch, newSub[1]),
|
||||||
oldSub && oldSub[2]()
|
oldSub && oldSub[2]()
|
||||||
]
|
]
|
||||||
: oldSub
|
: oldSub
|
||||||
|
@ -101,11 +101,13 @@ var patchProperty = function(node, key, oldValue, newValue, listener, isSvg) {
|
||||||
}
|
}
|
||||||
} else if (key[0] === "o" && key[1] === "n") {
|
} else if (key[0] === "o" && key[1] === "n") {
|
||||||
if (
|
if (
|
||||||
!((node.actions || (node.actions = {}))[(key = key.slice(2))] = newValue)
|
!((node.actions || (node.actions = {}))[
|
||||||
|
(key = key.slice(2).toLowerCase())
|
||||||
|
] = newValue)
|
||||||
) {
|
) {
|
||||||
node.removeEventListener(key, listener)
|
node.removeEventListener(key, listener)
|
||||||
} else if (!oldValue) {
|
} else if (!oldValue) {
|
||||||
node.addEventListener(key, listener, newValue.passive ? newValue : false)
|
node.addEventListener(key, listener)
|
||||||
}
|
}
|
||||||
} else if (!isSvg && key !== "list" && key in node) {
|
} else if (!isSvg && key !== "list" && key in node) {
|
||||||
node[key] = newValue == null ? "" : newValue
|
node[key] = newValue == null ? "" : newValue
|
||||||
|
@ -424,10 +426,7 @@ export var app = function(props, enhance) {
|
||||||
var subs = []
|
var subs = []
|
||||||
|
|
||||||
var listener = function(event) {
|
var listener = function(event) {
|
||||||
var action = this.actions[event.type]
|
dispatch(this.actions[event.type], event)
|
||||||
if (action.preventDefault) event.preventDefault()
|
|
||||||
if (action.stopPropagation) event.stopPropagation()
|
|
||||||
dispatch(action.action || action, event)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var setState = function(newState) {
|
var setState = function(newState) {
|
||||||
|
@ -438,19 +437,20 @@ export var app = function(props, enhance) {
|
||||||
}
|
}
|
||||||
|
|
||||||
var dispatch = (enhance ||
|
var dispatch = (enhance ||
|
||||||
function(a) {
|
function(any) {
|
||||||
return a
|
return any
|
||||||
})(function(action, props) {
|
})(function(action, props, obj) {
|
||||||
return typeof action === "function"
|
return typeof action === "function"
|
||||||
? dispatch(action(state, props))
|
? dispatch(action(state, props), obj || props)
|
||||||
: isArray(action)
|
: isArray(action)
|
||||||
? typeof action[0] === "function"
|
? typeof action[0] === "function"
|
||||||
? dispatch(
|
? dispatch(
|
||||||
action[0],
|
action[0],
|
||||||
typeof action[1] === "function" ? action[1](props) : action[1]
|
typeof (action = action[1]) === "function" ? action(props) : action,
|
||||||
|
props
|
||||||
)
|
)
|
||||||
: (batch(action.slice(1)).map(function(fx) {
|
: (batch(action.slice(1)).map(function(fx) {
|
||||||
fx && fx[0](fx[1], dispatch)
|
fx && fx[0](dispatch, fx[1], props)
|
||||||
}, setState(action[0])),
|
}, setState(action[0])),
|
||||||
state)
|
state)
|
||||||
: setState(action)
|
: setState(action)
|
||||||
|
|
Loading…
Reference in New Issue