Migrate preview-panel.js to Stimulus PreviewController

[laymonage]

I've been playing around with Stimulus by refactoring the preview panel and I must say I quite enjoyed it! I think Stimulus fits nicely with our JavaScript use case in the front-end.

Fixes #9360 and adds some more optimisation by debouncing the update. It's still in draft as I have yet to write tests and do more testing.

Fixes #11677.

Please check the following:

• Do the tests still pass?¹
• Does the code comply with the style guide?
  • Run make lint from the Wagtail root.
• For Python changes: Have you added tests to cover the new/fixed behaviour?
• For front-end changes: Did you test on all of Wagtail’s supported environments?²
  • Please list the exact browser and operating system versions you tested:
  • Please list which assistive technologies ³ you tested:
• For new features: Has the documentation been updated accordingly?

Please describe additional details for testing this change.

Footnotes

1. Development Testing ↩

2. Browser and device support ↩

3. Accessibility Target ↩

[squash-labs]

Manage this branch in Squash

Test this branch here: https://laymonagepreview-panel-control-s7sqa.squash.io

[lb-]

One comment, happy to help will a full review later if that helps.

Super great to see another bit of Stimulus work, hopefully the code feels easier to manage this way.

[lb-]

A few more drive-by comments.

[laymonage]

Thanks for the comments @lb-, I believe I've addressed those. I think this is only missing unit tests before it's ready for review, will try to write them over the week.

[lb-]

Thanks @laymonage - happy to do a full review when ready.

[lb-]

Not strict but it's nice to have the connect method at the top (after declaring properties), as it's kind of the entry point to the controller.

[lb-]

Just thinking it may be good to streamline these target names, removing the element type from the reference name + keeps it shorter.

The fact that it's an input/button is probably a duplicate as the html elements that are the target will be these types.

static targets = [
    'size',
    'newTab',
    'spinner',
    'mode',
    'iframe',

Also, not strict, but we have been sorting these alphabetically in other controllers.

[lb-]

@laymonage I needed the Promise handling of the debounce for a different PR so brought it over (hope that's ok), also refined types and added a full unit test suite.

I have adjusted the behaviour for the wait arg so if it's a non-number it will immediately run the code, this is super useful for a pattern where a Stimulus value may set a delay/wait but if it does not we just want the code to run straight away.

#10835

[laymonage]

No worries @lb-, thanks for making the debounce function feature-complete. I've reviewed that PR and will rebase this and drop the debounce commit once that's merged.