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()
})
export var blur = fx(function(id) {
export var blur = fx(function(_, id) {
document.getElementById(id).blur()
})

View File

@ -7,7 +7,7 @@ var fx = function(a) {
var throttledEvent = function(name) {}
var rawEvent = function(name) {
return fx(function(action, dispatch) {
return fx(function(dispatch, action) {
var listener = function(event) {
dispatch(action, event)
}

View File

@ -1,10 +1,10 @@
var fx = function(a) {
return function(b) {
return [a, b]
var timeFx = function(fx) {
return function(action, props) {
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() {
dispatch(props.action, Date.now())
}, 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() {
dispatch(props.action)
}, props.delay)
})
// TODO
// now
// here
// retry
// debounce
// throttle
// idleCallback?
// export var now
// export var retry
// export var debounce
// export var throttle
// export var idleCallback?

View File

@ -78,7 +78,7 @@ var patchSubs = function(oldSubs, newSubs, dispatch) {
? [
newSub[0],
newSub[1],
newSub[0](newSub[1], dispatch),
newSub[0](dispatch, newSub[1]),
oldSub && oldSub[2]()
]
: oldSub
@ -101,11 +101,13 @@ var patchProperty = function(node, key, oldValue, newValue, listener, isSvg) {
}
} else if (key[0] === "o" && key[1] === "n") {
if (
!((node.actions || (node.actions = {}))[(key = key.slice(2))] = newValue)
!((node.actions || (node.actions = {}))[
(key = key.slice(2).toLowerCase())
] = newValue)
) {
node.removeEventListener(key, listener)
} else if (!oldValue) {
node.addEventListener(key, listener, newValue.passive ? newValue : false)
node.addEventListener(key, listener)
}
} else if (!isSvg && key !== "list" && key in node) {
node[key] = newValue == null ? "" : newValue
@ -424,10 +426,7 @@ export var app = function(props, enhance) {
var subs = []
var listener = function(event) {
var action = this.actions[event.type]
if (action.preventDefault) event.preventDefault()
if (action.stopPropagation) event.stopPropagation()
dispatch(action.action || action, event)
dispatch(this.actions[event.type], event)
}
var setState = function(newState) {
@ -438,19 +437,20 @@ export var app = function(props, enhance) {
}
var dispatch = (enhance ||
function(a) {
return a
})(function(action, props) {
function(any) {
return any
})(function(action, props, obj) {
return typeof action === "function"
? dispatch(action(state, props))
? dispatch(action(state, props), obj || props)
: isArray(action)
? typeof action[0] === "function"
? dispatch(
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) {
fx && fx[0](fx[1], dispatch)
fx && fx[0](dispatch, fx[1], props)
}, setState(action[0])),
state)
: setState(action)