diff --git a/packages/alpinejs/src/mutation.js b/packages/alpinejs/src/mutation.js index 0fd884223..72905ec8b 100644 --- a/packages/alpinejs/src/mutation.js +++ b/packages/alpinejs/src/mutation.js @@ -65,27 +65,24 @@ export function stopObservingMutations() { currentlyObserving = false } -let recordQueue = [] -let willProcessRecordQueue = false +let queuedMutations = [] export function flushObserver() { - recordQueue = recordQueue.concat(observer.takeRecords()) + let records = observer.takeRecords() - if (recordQueue.length && ! willProcessRecordQueue) { - willProcessRecordQueue = true + queuedMutations.push(() => records.length > 0 && onMutate(records)) - queueMicrotask(() => { - processRecordQueue() + let queueLengthWhenTriggered = queuedMutations.length - willProcessRecordQueue = false - }) - } -} - -function processRecordQueue() { - onMutate(recordQueue) - - recordQueue.length = 0 + queueMicrotask(() => { + // If these two lengths match, then we KNOW that this is the LAST + // flush in the current event loop. This way, we can process + // all mutations in one batch at the end of everything... + if (queuedMutations.length === queueLengthWhenTriggered) { + // Now Alpine can process all the mutations... + while (queuedMutations.length > 0) queuedMutations.shift()() + } + }) } export function mutateDom(callback) {