joker
December 5, 2019, 2:16pm
#1
Hi guys,
To be honest, I don’t have any experience with Stimulus but I’m very interested. My biggest question right now is if there is a way to dynamically load a controller via dynamic imports and webpack only when it is actually needed (data attribute was found in the dom).
Thanks!
2 Likes
Here is an example of how I am using dynamic import for large third-party libraries
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["time"];
connect() {
import("moment").then(moment => {
this.moment = moment.default;
this.timer = requestAnimationFrame(this.updateTimer.bind(this));
});
}
updateTimer() {
this.timer = requestAnimationFrame(this.updateTimer.bind(this));
this.timeTarget.textContent = this.moment().format(
"dddd, MMMM Do YYYY, h:mm:ss a"
);
}
disconnect() {
cancelAnimationFrame(this.timer);
}
}
1 Like
javan
December 6, 2019, 6:24pm
#3
This helper library does exactly that: https://github.com/danieldiekmeier/stimulus-controller-resolver . I haven’t used it myself, but it looks solid. [via this tweet ]
1 Like