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