Test controller inheritance about tailwindcss-stimulus-components HOT 6 CLOSED

Thanks @adrienpoly. Using super isn't much of a concern, I know that'd work.

What I don't know is how to append items to the static targets array. It'd be nice not having to redefine that and simply add new targets in. I also wondered if redefining a static variable would throw an error or not.

from tailwindcss-stimulus-components.

Updated the readme with an example of this.

from tailwindcss-stimulus-components.

This is fairly easy to achieve with standard ES6 class inheritance.

I am using this very often and described it in the Flatpickr Stimulus Wrapper I did.
Here is the relevant documentation :
https://github.com/adrienpoly/stimulus-flatpickr#extends-the-controller

For the Modal controller it would look something like that:

//controllers/modal_controller.js
import { Modal } from "tailwindcss-stimulus-components"

export default class extends Modal {
  connect() {
    //your custom connect code
    super.connect(); // always call super to run parent connect code
  };

  open(e) {
    //your custom open code
    super.open(e); // always call super to run parent open code
  };
}

from tailwindcss-stimulus-components.

From a quick test, it looks like you can rewrite it as static, but not modify the array. We may be able to just remove the static from our components to make these extendable.

class SuperDropdown extends Dropdown {
  static targets = [ 'menu', 'extra' ]
}
console.log(SuperDropdown.targets)
// ['menu', 'extra']

class SuperDropdown extends Dropdown {
  connect() {
    this.targets.push('extra')
    super.connect()
  }
}
console.log(SuperDropdown.targets)
// ['menu']

from tailwindcss-stimulus-components.

Ok I didn't though initially about the targets that is indeed a good point. From my testing I think this works out of the box.

you can have a look at this example :
https://glitch.com/edit/#!/pepper-dingo?path=src/controllers/super-input_controller.js:10:1

The extended controller

//controllers/super-input_controller.js
import { Controller } from "stimulus";

class Input extends Controller {
  static targets = ["parent"]

  connect() {
    console.log("the value of parentTarget : ", this.parentTarget.value)
  }
}

export default class extends Input {
  static targets = ["children"]

  connect() {
    super.connect();
    console.log("the value of childrenTarget : ", this.childrenTarget.value)
  }
}

The Html

<div data-controller="super-input">
  <input type="text"
        value="children target"
        data-target="super-input.children">
  
  <input type="text"
        value="parent target"
        data-target="super-input.parent">
</div>

As a result in my console.log I have both targets values available 🎉

the value of parentTarget :  parent target
the value of childrenTarget :  children target

from tailwindcss-stimulus-components.

Sweet, I didn't even try that, assuming it would replace the value. That looks like it does the trick.

from tailwindcss-stimulus-components.