Observe one mutation via `MutationObserver`, then resolve a Promise.
npm install one-mutation[badge-gzip]: https://img.shields.io/bundlephobia/minzip/one-mutation.svg?label=gzipped
[link-bundlephobia]: https://bundlephobia.com/result?p=one-mutation
> Observe one mutation via MutationObserver, then resolve a Promise.
``
npm install one-mutation
`js`
// This module is only offered as a ES Module
import oneMutation from 'one-mutation';
`js
oneMutation(document.body, {childList: true}).then(mutations => {
// A text node was added!
});
document.body.append('Text');
`
`js
oneMutation(document.body, {
childList: true,
filter: mutations => mutations.find(mutation => {
for (const node of mutation.addedNodes) {
if (node.textContent === 'Just me!') {
return true;
}
}
})
}).then(mutations => {
// The expected 'Just me!' node was added!
});
document.body.append('Text'); // Won't resolve the promise
document.body.append(document.createElement('div')); // Won't resolve the promise
document.body.append('Just me!'); // Now!
`
Example:
Returns a Promise that is fulfilled when the expected mutation is found.
#### node
Type: Node document.body
Example: , document.querySelector('.article-list')
The node/element to observe. The equivalent parameter of:
`JS`
new MutationObserver(callback).observe(NODE, options)
#### options
Type: MutationObserverInit & {filter?: FilterFunction, signal?: AbortSignal} {childList: true}
Example: , {subtree: true, filter: filterFunction}
This matches MutationObserverInit and adds a filter method and an signal to cancel the observation.
The equivalent parameter of:
`JS`
new MutationObserver(callback).observe(node, OPTIONS)
##### subtree, childList, ...
Refer to the MDN MutationObserver documentation to find the full list of properties.
##### filter
Type: boolean-returning function
Example:
`js
function filterFunction(mutations) {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node.textContent === 'Just me!') {
return true;
}
}
}
}
A function that will be called every time that MutationObserver detects a change, the equivalent parameter of:
`JS`
new MutationObserver(FILTER)
But it should only be used to return true or false so that the Promise can be resolved.
##### signal
Type: AbortSignal
Example:
`js`
const timeout = AbortSignal.timeout(1000);
oneMutation(document.body, {
signal: timeout,
attributes: true,
}).then(mutations => {
if (mutations.length > 0) {
console.log('No changes were detected in 1 second');
} else {
console.log('A change was detected!');
}
});
- one-event - Micro module to add an event listener to be executed only once.
- select-dom - Lightweight querySelector/All wrapper that outputs an Array.DocumentFragment
- doma - Parse an HTML string into or one Element`, in a few bytes.
- Refined GitHub - Uses this module.
MIT © Federico Brigante