Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

stimulus-conductor

1.0.3 • Public • Published

Stimulus-Conductor

👩‍👧‍👦 👨‍👧‍👦 : An optionated 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
  • bBelongs to : item controllers belong to an items controller
  • MIT Licensed: free for personal and commercial use

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 an todos controller
  • item controllers are conducted by an items controller
  • chart controllers are conducted by an 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.

Keywords

none

install

npm i stimulus-conductor

Downloadsweekly downloads

8

version

1.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability