/stimulus-mutation

Route mutations to attributes and child lists like Events

Primary LanguageTypeScript

Stimulus Mutation

Route mutations to attributes and child lists like Events

Usage

Declare [data-mutation] in the same style as [data-action].

Attribute mutations

<div data-controller="my-controller" data-mutation="aria-busy->controller#doSomethingAboutIt">
  <!-- ... -->
</div>
<div data-controller="my-controller" data-mutation="aria-busy->controller#doSomethingAboutIt:!subtree">
  <!-- ... -->
</div>
<div data-controller="my-controller" data-mutation="controller#doSomethingAboutIt:attributes">
  <!-- ... -->
</div>

ChildList mutations

<div data-controller="my-controller" data-mutation="controller#doSomethingAboutIt:childList">
  <!-- ... -->
</div>
<div data-controller="my-controller" data-mutation="controller#doSomethingAboutIt:childList:!subtree">
  <!-- ... -->
</div>

All mutations

<div data-controller="my-controller" data-mutation="controller#doSomethingAboutIt:attributes:childList">
  <!-- ... -->
</div>

Callbacks

Declare attributeChanged callback to listen for changes to the element with [data-controller]:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  attributeChanged(attributeName, newValue, oldValue) {
   // ...
  }
}

Declare [name]TargetAttributeChanged callback to listen for changes to an element with [data-$IDENTIFIER-target~="name"]:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["observed"]

  observedTagretAttributeChanged(target, attributeName, newValue, oldValue) {
   // ...
  }
}

Installation

import { Application } from "@hotwired/stimulus"
import { install } from "@seanpdoyle/stimulus-mutation"

const application = Application.start()
// ...

install(application)

[data-mutation] by default, but can be overridden by passing { mutationAttribute: "..." } to install:

import { Application } from "@hotwired/stimulus"
import { install } from "@seanpdoyle/stimulus-mutation"

const application = Application.start()
// ...

install(application, { mutationAttribute: "data-mutation-routes" })