Svelte Actions Mutation

PaulMaly
9

MutationObserver action plugin for Svelte 3

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

Top categories