stimulus-conductor

@1.0.4 by @adrienpoly

An optionated Stimulus Controller to easily manage parent/children controllers

Score: 188.0

Stimulus-Conductor









๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ ๐Ÿ‘จโ€๐Ÿ‘งโ€๐Ÿ‘ฆ : A simple Stimulus Controller to manage Parent/Children controllers with simple conventions

  • Conventions: Parent/children Stimulus controllers defined by simple conventions
  • Has many : an items controller has many item controllers
  • Belongs to : item controllers belong to an items controller

Getting started

This assumes that you have Stimulus already installed.

In your project just add the stimulus-conductor package.

$ yarn add stimulus-conductor

or

$ npm i stimulus-conductor

Conventions

There is a single convention to remember to use this package:

Parent conductor is the plural of the children items name

  • todo controllers are conducted by a todos controller
  • item controllers are conducted by an items controller
  • chart controllers are conducted by a charts controller

Define your html

<div data-controller="items">
  <div data-controller="item"></div>
  <div data-controller="item"></div>
  <div data-controller="item"></div>
</div>

Define your parent controllers by extending stimulus-conductor

// ./controllers/items_controller.js
import Conductor from "stimulus-conductor";

// create a parent controller by extending stimulus-conductor controller
export default class extends Conductor {
  connect() {
    // if you overwrite connect you must call super!!!!
    super.connect();
  }

  disconnect() {
    // if you overwrite disconnect you must call super!!!!
    super.disconnect();
  }

  update() {
    // this.itemControllers is an array of item stimulus controllers
    // this.itemControllers.length -> 3
  }
}

By convention the parent controller has a new class method this.itemControllers that return an array of all children controllers

Define your children controllers by extending stimulus-conductor

// ./controllers/item_controller.js
import Conductor from "stimulus-conductor";

// create a kid controller by extending stimulus-conductor controller
export default class extends Conductor {
  connect() {
    // if you overwrite connect you must call super!!!!
    super.connect();

    // you can access to the parent controller like this
    // this.itemsController is the stimulus controller for the parent controller
  }
}

By convention all children controllers have a new class method this.itemsController that return the parent controller

Example

An very basic todo list example is available on Glitch :

Limitations

Plurals

Currently the library makes a very simple plural of the controller name by adding a sat the end of the word:

  • todo is conducted by todos
  • item is conducted by items

more complex plurals (child/children) are not yet supported

Nesting

Currently it only works with nested parent/children elements

Contributing

Bug reports and pull requests are welcome.

To contribute:

Fork the project.

Install dependencies

$ yarn install

Start the test watcher

$ yarn test:watch

Running one-off test runs can be done with:

$ yarn test

You can test locally also the results with the playground project (yarn start)

Then :

๐Ÿ‘ Write some tests

๐Ÿ’ช Add your feature

๐Ÿš€ Send a PR

License

This package is available as open source under the terms of the MIT License.