Skip to content
πŸ‘©β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘§β€πŸ‘¦ : An opinionated Stimulus Controller to easily manage Parent/Children controllers with simple conventions
Branch: master
Clone or download
Latest commit 08e9abf Mar 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode
dist
playground
spec
src
.babelrc.js
.gitignore
.npmignore
LICENSE
karma.conf.js
package.json
readme.md
rollup.config.js
webpack.config.js
yarn.lock

readme.md

Stimulus-Conductor

npm version CircleCi build status Coverage

πŸ‘©β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘§β€πŸ‘¦ : An opinionated Stimulus Controller to easily manage Parent/Children controllers with 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.

You can’t perform that action at this time.