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:
Jorge Bucaran 2019-05-15 04:25:05 +09:00
parent e17470020b
commit 50d39e6200
No known key found for this signature in database
GPG Key ID: E54BA3C0E646DB30
4 changed files with 26 additions and 28 deletions

View File

@ -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()
}) })

View File

@ -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)
} }

View File

@ -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?

View File

@ -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)