🎛️ RFC 78 - Initial Stimulus adoption v2

[lb-]

RFC 78 - Initial Stimulus adoption

This PR is a draft for the initial first set of commits to get Stimulus started in Wagtail.

Overview

• This contains one Stimulus controller for the auto-submit form behaviour in images/documents listing drop-downs (e.g. changing the collection will submit the form) and is intentionally a simple case to get initial feedback
• This is a partial re-implementation of https://github.com/lb-/wagtail/pull/5 - a more fleshed out adoption with more code usage (header search, skip link, upgrade notification).
• This is also a smaller scoped version of 🎛️ RFC 78 - Initial Stimulus adoption #9075 (no docs, and no 'magic' controller inclusions).
• This intentionally includes no documentation for now except for a folder README.md (planned new convention discussed within the UI team) to help guide contributors.
• There are three non-core commits, two of them ignore some linting so that we can adopt Stimulus without more global ignoring of rules we should ignore, it also contains a fix for the draftail types that was causing CI failures previously.
• Builds on Eslint - disable rule class-methods-use-this #9482 & Eslint - disable rule max-classes-per-file #9483

How to evaluate this PR

1. If you have not already, read the RFC RFC 78: Adopt Stimulus (lightweight JS framework) 🎛️ rfcs#78
2. Read the Stimulus docs (or at least the first few pages of the 'handbook' section) https://stimulus.hotwired.dev/handbook/origin
3. Look at the granular commits, each builds on each other to adopt Stimulus in the code
4. Run the code locally npm install npm start will be required and check the behaviour of the drop-downs in the images/documents listing actually works
5. Read through the documentation and see if you can add your own controller easily within the bakerydemo
6. If the feedback is general - best to put it on the RFC - otherwise feel free to put implementation specific feedback on this PR and it will be incorporated back into the RFC in due course.

[squash-labs]

Manage this branch in Squash

Test this branch here: https://lb-featurerfc78-001-initial-st-bgqfq.squash.io

[lb-]

With RFC 78 merged - will mark this as ready for review.

[lb-]

Stimulus 3.1.1 out. Should update - https://github.com/hotwired/stimulus/releases/tag/v3.1.1

[lb-]

Rebased & updated to Stimulus 3.1.1

[lb-]

Stimulus 3.2.0 is now out - making it easier to write keyboard shortcuts (without an external library), a nice outlets API (will help for things like bulk actions and search results) and a way to call a static method on registration of the controller (will help for backwards compatible global function creation).

https://github.com/hotwired/stimulus/releases/tag/v3.2.0

I'll aim to update and rebase this PR soon.

[lb-]

Rebased & updated to Stimulus 3.2

[lb-]

CI failure is unrelated to this change.

Starting postgres service container
  /usr/bin/docker pull postgres:11
  Error response from daemon: Head "https://registry-1.docker.io/v2/library/postgres/manifests/11": received unexpected HTTP status: 503 Service Unavailable
  Warning: Docker pull failed with exit code 1, back off 2.89 seconds before retry.
  /usr/bin/docker pull postgres:11
  Error response from daemon: Head "https://registry-1.docker.io/v2/library/postgres/manifests/11": received unexpected HTTP status: 503 Service Unavailable
  Warning: Docker pull failed with exit code 1, back off 2.837 seconds before retry.
  /usr/bin/docker pull postgres:11
  Error response from daemon: Head "https://registry-1.docker.io/v2/library/postgres/manifests/11": received unexpected HTTP status: 503 Service Unavailable
  Error: Docker pull failed with exit code 1

[lb-]

Another release - will try to update if I get the time. https://github.com/hotwired/stimulus/releases/tag/v3.2.1

Just a bug fix

[pySilver]

Just a side note. I'm working with Django & Stimulus (well it's not binded in any way) and I'm so so so so happy with it. HTML-over-the-wire it is so simple and flexible approach. I'm very happy it's going to be used inside Wagtail (one of the best CMS/F on the market). It would be much easier to extend Admin panel having Stimulus integrated.

[lb-]

Thanks @pySilver - very glad to hear that - if you have not already, be sure to have a read of the early draft documentation in the RFC.

Here is the direct link https://github.com/wagtail/rfcs/blob/main/text/078-adopt-stimulus-js.md#a-documentation-for-developers

The target audience of that section is those using Wagtail and wanting to customise parts of the admin and/or use the Stimulus application instance provided for their own JS widgets. With or without a Node tooling setup.

[lb-]

Rebased on latest (a few items have been merged in) thanks Thibuad.

[thibaudcolas]

All working exactly as intended as far as I can tell! There are a few things I’d like to suggest simplifications for, keen to hear what you think.

[lb-]

@thibaudcolas - this is ready for another review.

I've added one comment for myself, the JSDoc is alll cleaned up also and I've intentionally avoided an example of createController / Wagtail hook usage for now

[thibaudcolas]

I’m surprised you removed all of the initialisation events – aside from that all good!

Note while testing this I got a PropTypes error from Storybook saying the React checked prop was submitted as the string "true" rather than a boolean. As far as I can tell this is a Storybook bug but thought I’d mention just in case.

Tested in Chrome 108 macOS 13, Firefox 102 Windows 11, Edge 102 Windows 11, Safari 14.1 macOS 12.1.

source-map-explorer output with Stimulus added for reference (nothing outstanding): https://leafy-centaur-e7a959.netlify.app/

[laymonage]

Aaand it's in! Thank you very much @lb- and @thibaudcolas, can't wait to use this for new code and some refactoring 🥳

[lb-]

@thibaudcolas thank you for the thoughtful feedback on this, it's great to see it go in.

As for the events - I figured they may become helpful in the future, if so we can add them if needed. I've got a backup of the branch before removing them.