[Hard question] avoid re-run of Stimulus on DOM modifications?

[gremo]

I'll try to explain what I'm asking as simple as possible.

I'm writing a controller named parent. This is the starting HTML:

<div data-controller="parent">
    <!-- ... -->
</div>

After the controller kicks in, the DOM will be modified this way (because how the JavaScript library I'm using):

<div class="wrapper">
    <div data-controller="parent">
        <!-- ... -->
    </div>
</div>

Problem 1: the controller named parent re-run. This is not my intended behavior. I've managed to fix it using the plugin onInit hook, simply deleting the data-controller attribute:

connect() {
  new MyPlugin(this.element, {
    onInit: () => {
      delete this.element.dataset.controller; // <-- this will avoid re-run of parent controller
    }
  });
}

Problem 2 the problem is much worst with "child" controllers. Stimulus will run twice: on load and on DOM modifications:

<div class="wrapper">
    <div data-controller="parent">
        <div data-controller="child"></div>
    </div>
</div>

Any idea on how to solve this (like "disable watching DOM modifications" is much appreciated, thanks.

[adrienpoly]

That is a fairly usual problem with selects kind of libraries. The easiest solution is to give to your plugin a target rather than this.element.

static targets = ['field']

connect() {
  new MyPlugin(this.fieldTarget)
}

another similar issue #411

[gremo]

Well @adrienpoly thanks for helping, but my plugin only accept a container (this.element) and a child selector :(

[adrienpoly]

is it a public library you can share ? I don't really see what is the difference between thie.element and this.fieldTarget both are html node that could be given to a plugin as root element

[gremo]

Sure https://github.com/Mobius1/Pageable

Give me 20 mins and I’ll provide the controller too.

[gremo]

Full working example (no CSS required):

@adrienpoly yarn install pageable or npm install pageable

<div data-controller="pageable">
    <div id="pageable-1" data-pageable-target="anchor"
        style="background-color: red;">
    </div>

    <div id="pageable-2" data-pageable-target="anchor"
        style="background-color: green;">
    </div>

    <div id="pageable-3" data-pageable-target="anchor"
        style="background-color: blue;">
    </div>
</div>

import { Controller } from 'stimulus'

/**
 * Stimulus controller for "pageable" library.
 *
 * @see {@link https://github.com/Mobius1/Pageable}
 */
export default class extends Controller {
  pageable;

  async connect() {
    console.log(`Controller ${this.identifier}->connect()`);

    const Pageable = (await import('pageable')).default;
    this.pageable = new Pageable(this.element, {
      childSelector: `:scope [data-${this.identifier}-target="anchor"]`,
    });
  }

  disconnect() {
    this.pageable && this.pageable.destroy();
  }
}

As you can see in console, pageable controller is called multiple times (4 times at least).

[adrienpoly]

this should work

<div data-controller="pageable">
  <div data-pageable-target="container">
    <div id="pageable-1" data-pageable-target="anchor"
        style="background-color: red;">
    </div>

    <div id="pageable-2" data-pageable-target="anchor"
        style="background-color: green;">
    </div>

    <div id="pageable-3" data-pageable-target="anchor"
        style="background-color: blue;">
    </div>
  </div>
</div>

import { Controller } from 'stimulus'

/**
 * Stimulus controller for "pageable" library.
 *
 * @see {@link https://github.com/Mobius1/Pageable}
 */
export default class extends Controller {
  pageable;
 static targets = ["container"]
  async connect() {
    console.log(`Controller ${this.identifier}->connect()`);

    const Pageable = (await import('pageable')).default;
    this.pageable = new Pageable(this.containerTarget, {
      childSelector: `:scope [data-${this.identifier}-target="anchor"]`,
    });
  }

  disconnect() {
    this.pageable && this.pageable.destroy();
  }
}

[gremo]

@adrienpoly that's a good catch, but it doesn't solve the problem with nested controllers :(

[dhh]

Would be good to summarize this issue in a FAQ doc PR.