@fizzmod/mutationobserver-generator v1.1.0

mutationobserver-generator

This package provides a more straightforward way of using the MutationObserver API

To know more about the MutationObserver API, click here

Installation

    npm i -S @fizzmod/mutationobserver-generator

Usage

The package consists of one method, setObserver. So:

For FIT projects:

Just import it from the package

    import setObserver from '@fizzmod/mutationobserver-generator'

For non-FIT projects:

The package provides a bundle that declares globally the setObserver method. In order to use it in sections of your code that are not transpiled until the files are uploaded via vtex-uploader, you can do the following steps:

1. Add the proper include file using vtex-uploader syntax.

   Examples:

       /* include '../node_modules/@fizzmod/mutationobserver-generator/dist/bundle.js' */

       includeFile('../node_modules/@fizzmod/mutationobserver-generator/dist/bundle.js');

2. You can now use the setObserver method, it will be globally declared.

3. Before uploading the files via vtex-uploader, you'll need to build. Just click on the 'BUILD' button of vtex-uploader and wait for all dependencies have been installed.

Note: This procedure will not work for non-FIT projects in which manual build (via terminal) is needed.

setObserver(selector, callback, config) ⇒ MutationObserver ⎮ Object

It creates a MutationObserver instance and calls its observe() method with the two arguments required by the API in order to work.

Kind: global function
Returns: MutationObserver|Object - If arguments are valid, it returns a MutationObserver instance with received callback param as argument. If not, it returns a MutationObserver instance "mock".
Throws:

• Will throw a specific warning if any given argument is invalid.

Example

setObserver(document, cb, { attributes: true, childList: true, subtree: true });

Example

setObserver('.main-wrapper-example', () => console.log('mutation observed'), { attributes: true, childList: true });

Example

setObserver('.main-wrapper-example', cb); // This will set the observer with { childList: true } as default config.