svelte-actions-mutation

MutationObserver action plugin for Svelte 3. Demo

Usage

Install with npm or yarn:

npm install --save svelte-actions-mutation

<button bind:this={btn} use:mutation={options} on:click={mutate}>
  Mutate
</button>
 
<script>
  import mutation from 'svelte-actions-mutation';
    
  let btn;
 
  function mutate() {
    btn.classList.add(Math.random().toString(36).substring(7));
  }
  
  const options = {
    attributeOldValue: true,
    attributeFilter: [ 'class' ],
    attributes(mutation) {
      console.log(`Attribute ${mutation.attributeName} mutated. Old value: ${mutation.oldValue}`);
    }
  };
</script> 

Options

Name	Type	Description
attributes	Function	Callback to watch for changes to the value of attributes on the node or nodes being monitored.
characterData	Function	Callback to monitor the specified target node or subtree for changes to the character data contained within the node or nodes.
childList	Function	Callback to monitor the target node (and, if subtree is true, its descendants) for the addition of new child nodes or removal of existing child nodes.
attributeFilter	Array	An array of specific attribute names to be monitored. If this property isn't included, changes to all attributes cause mutation notifications.
attributeOldValue	Boolean	Set to true to record the previous value of any attribute that changes when monitoring the node or nodes for attribute changes.
subtree	Boolean	Set to true to extend monitoring to the entire subtree of nodes rooted at target.
characterDataOldValue	Boolean	Set to true to record the previous value of a node's text whenever the text changes on nodes being monitored.

License

MIT © PaulMaly