Using Stimulus in an Embeddable JS Widget

1

Hello,

I have a proof of concept embeddable widget working with Stimulus, locally. I’m running into an issue and hitting the limit of my understanding and hope I can explain/provide the proper information for some guidance on ways to begin debugging this.

The widget is being bootstrapped properly (template and css load), Stimulus application and controller are loading correctly, the only thing that seems to be unable to work on an external domain is firing of data-action’s. There is a button on the widget that won’t fire. I can initialize and emit a normal JavaScript event. Console logging on initialize and connect also emit a log.

Any other information you may need just ask.

The embeddable widget.js on client page looks something like this:

import { Application } from "stimulus";
import MyController from "../../javascript/controllers/widgets/my_controller";
const application = Application.start();
application.register("widgets--my", MyController);

// Creates and appends a stylesheet in Head
bootstrapCss();
2

Would you be able to paste the HTML snippet and the controller code? It may have something to do with data attribute syntax

3

Thanks for the response, Dan.

Here’s part of the HTML code using data-attributes:

4

I’m guessing the data-controller="widgets--recorder" is further up the DOM tree? It might also help seeing the controller code

5

It ended up being non-stimulus related. I was able to get the button action to fire a console log. I’m using the MediaRecorder api if the page is not in a secure context my condition was failing.

For anyone that stumbles upon this:

Locally-delivered resources such as those with http://127.0.0.1 URLs, http://localhost URLs (under certain conditions), and file:// URLs are also considered to have been delivered securely.
Resources that are not local, to be considered secure, must meet the following criteria:

  • must be served over https:// or wss:// URLs
  • the security properties of the network channel used to deliver the resource must not be considered deprecated