Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

throttle/debounce user callback after preventDefault/stopPropagation is executed #3481

Merged
merged 5 commits into from May 11, 2023
Merged

throttle/debounce user callback after preventDefault/stopPropagation is executed #3481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ca71c5c
throttle/debounce user callback after preventDefault/stopPropagation …
hudon Mar 23, 2023
a824e6e
spelling
hudon Mar 23, 2023
0af79ff
add tests
hudon Mar 23, 2023
9143753
cleaner test
hudon Mar 23, 2023
af62b61
nit
hudon Mar 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 17 additions & 14 deletions packages/alpinejs/src/utils/on.js
View file
Open in desktop
Expand Up @@ -18,6 +18,23 @@ export default function on (el, event, modifiers, callback) {
if (modifiers.includes('capture')) options.capture = true
if (modifiers.includes('window')) listenerTarget = window
if (modifiers.includes('document')) listenerTarget = document

// By wrapping the handler with debounce & throttle first, we ensure that the wrapping logic itself is not
// throttled/debounced, only the user's callback is. This way, if the user expects
// `e.preventDefault()` to happen, it'll still happen even if their callback gets throttled.
if (modifiers.includes('debounce')) {
let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250

handler = debounce(handler, wait)
}
if (modifiers.includes('throttle')) {
let nextModifier = modifiers[modifiers.indexOf('throttle')+1] || 'invalid-wait'
let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't yours, but I think just

Number(nextModifier.replace('ms','')) || 250

would be more efficient and get the same job done.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch, reads better too. I've made the change and confirmed existing tests cover this


handler = throttle(handler, wait)
}

if (modifiers.includes('prevent')) handler = wrapHandler(handler, (next, e) => { e.preventDefault(); next(e) })
if (modifiers.includes('stop')) handler = wrapHandler(handler, (next, e) => { e.stopPropagation(); next(e) })
if (modifiers.includes('self')) handler = wrapHandler(handler, (next, e) => { e.target === el && next(e) })
Expand Down Expand Up @@ -59,20 +76,6 @@ export default function on (el, event, modifiers, callback) {
next(e)
})

if (modifiers.includes('debounce')) {
let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250

handler = debounce(handler, wait)
}

if (modifiers.includes('throttle')) {
let nextModifier = modifiers[modifiers.indexOf('throttle')+1] || 'invalid-wait'
let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250

handler = throttle(handler, wait)
}

listenerTarget.addEventListener(event, handler, options)

return () => {
Expand Down
33 changes: 33 additions & 0 deletions tests/cypress/integration/directives/x-on.spec.js
View file
Open in desktop
Expand Up @@ -97,6 +97,26 @@ test('.stop modifier',
}
)


test('.stop modifier with a .throttle',
html`
<div x-data="{ foo: 'bar' }">
<button x-on:click="foo = 'baz'">
<h1>h1</h1>
<h2 @click.stop.throttle>h2</h2>
</button>
</div>
`,
({ get }) => {
get('div').should(haveData('foo', 'bar'))
get('h2').click()
get('h2').click()
get('div').should(haveData('foo', 'bar'))
get('h1').click()
get('div').should(haveData('foo', 'baz'))
}
)

test('.capture modifier',
html`
<div x-data="{ foo: 'bar', count: 0 }">
Expand Down Expand Up @@ -178,6 +198,19 @@ test('.prevent modifier',
}
)

test('.prevent modifier with a .debounce',
html`
<div x-data="{}">
<input type="checkbox" x-on:click.prevent.debounce>
</div>
`,
({ get }) => {
get('input').check()
get('input').check()
get('input').should(notBeChecked())
}
)

test('.window modifier',
html`
<div x-data="{ foo: 'bar' }">
Expand Down