Skip to content

πŸ‘©β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘§β€πŸ‘¦ : A simple Stimulus Controller to manage Parent/Children controllers with simple conventions

License

Notifications You must be signed in to change notification settings

bandzoogle/stimulus-conductor

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Stimulus-Conductor

npm version CircleCi build status Coverage

πŸ‘©β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘§β€πŸ‘¦ : 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

Inflections & custom naming

Sometime plurals are not just as simple as adding a s at the end. You can overide the musician and conductor name by setting the static musicianId and conductorId values.

// your conductor todo_controller.js
export default class extends Controller {
  static musicianId = 'todo-item'
  // ...
}

// your musicians todo-item_controller.js
export default class extends Controller {
  static conductorId = 'todo'
  // ...
}

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.

About

πŸ‘©β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘§β€πŸ‘¦ : A simple Stimulus Controller to manage Parent/Children controllers with simple conventions

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 87.9%
  • HTML 12.1%