Stimulus: [Enhancement proposal] debug mode with lifecycle events and action logs

[adrienpoly]

I find my self very often adding console.log when building Stimulus controllers. I use them for many things but mostly

• make sure my controller is properly loaded (no spelling mistakes)
• log actions to confirm the event is correctly setup and/or inspect the payload
• check my target lists etc

Talking with others (ping @ssaunier, @db0sch) we thought in terms of DX it would be nice to have a more generic way of doing this and potentially hook it to log service such as logRocket for debugging

That it something I started to implement for the StimulusUse mixins (example with useDispatch).

I looked whether this could be some kind of useDebug mixin in StimulusUse to optionally enhance Stimulus without bloating the core with it. I think it would be possible but with quite a bit of monkey patching and using non official API before looking into doing something outside I wanted to submit a proposal of API as a core Stimulus feature to discuss.

Draft API

Here is a proposal of what it could look like

Setting

Either

application.debug(process.env.NODE_ENV === 'development')

or

application.start(debug: process.env.NODE_ENV === 'development') // I think this would be a breaking change for the start function

Logs

The following would be logged:

• initialize/connect/disconnect lifecycle
• in the initialize collapse add the target elements (or simply count)
• actions
• [bonus] valueChanged

use a groupCollapsed with the lifecycle/action name and some context details in the collapsed zone.

Example:

This should leverage the current Logger class to combine to a single point all error/warning and log activities.

Would this be something that you would be interested to have in terms of core feature ?

At the core feature level it could maybe be as simple as having a hook at the application level for all activities and this hook can then be customized.

[dhh]

Would be great to get debugging, yes. How about it just being a flag that can be toggled:

if (process.env.NODE_ENV === 'development') {
  application.debug = true
}

Then you could even toggle it at runtime if your application object is accessible from the console.

[adrienpoly]

Yes this was exactly my idea with a slightly different syntax (function rather than setter) but both work.

[javan]

We had a custom logger long ago: https://github.com/stimulusjs/stimulus/pull/12. Don't recall why we removed it, exactly.