Stimulus.js states in its installation documentation:
Stimulus supports all evergreen, self-updating desktop and mobile browsers out of the box. Stimulus 3+ does not support Internet Explorer 11.
In my latest project, I found that older iOS Safari browsers also had trouble with one particular part of the code. To understand it, here's the basic sample Stimulus hello_controller.js:
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}
The problem is here:
static targets = [ "name", "output" ]
It will lead to the following error message on older Safari browsers:
SyntaxError: Unexpected token '='
The issue is the static keyword. However, there's a simple workaround for this:
import { Controller } from "stimulus"
export default class extends Controller {
static get targets() {
return [ "name", "output" ]
}
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}
So, what did we do?
static get targets() {
return [ "name", "output" ]
}
Well, the static keyword to create static fields is only available in Safari after 14.4 (2020).
BUT - static has been around for much longer to define methods (including getter methods with the get keyword), in Safari 8.4+ (2014).
With this simple trick (and honestly, it's not that much of a pain to refactor), you can extend support of your applications for an admittedly small segment of legacy audiences.