be-vigilant

Add mutation observer to element.

Size, including be-decorated framework:

Size of new code:

Use case I: Many UI libraries are built around communicating between elements via events. be-vigilant translates mutation changes into events.

<div be-vigilant=my-event-name>
...
</div>

Event my-event-name is fired from the div element when the direct children of the div element change.

If the value of the attribute isn't specified, the default event name is be-vigilant-changed:

<div be-vigilant>
...
</div>

Use case II: be-vigilant also provides a brute-force way of sniffing out be-decorated adorned elements, even behind nooks and crannies of the DOM. be-decorated behaviors search for elements based on css observing, but sometimes those aren't always picked up.

For example:

<select>
    <template be-repeated></template>
</select>

Using the standard ways be-decorated elements are registered via css animation queries, this template simply won't be registered.

be-vigilant will cause it to register, if instructed to do so:

<select be-vigilant='{
    "forBs": true
}'>
    <template be-repeated></template>
</select>

To fine tune how the mutation observer is configured:

<div be-vigilant='{
    "subtree": true,
    "dispatchInfo": "my-event-name"
}'>
...
</div>

Another option, matchActions, provides the ability to specify different event names, based on css match tests on the mutated elements.

CDN

To use from a CDN:

<script type='module' crossorigin='anonymous'>
    import 'https://esm.run/be-vigilant';
</script>