How to run HTML/Alpine functions from Javascript Module? Outside the window object.

[blenderman-de]

Hi Community,

I'm using your great framework together with other ES6 libs and with the Parcel bundler. Like in the documentation example I defined my function on the window object.

It works directly from HTML/Alpine. I can access all the functions and values from my index.js. This part works great! 🥳

But how can I run a function like window.dropdown().close(); or open('contact') from Javascript to HTML/Alpine❓

Created an example on jsfiddle. Thanks a lot for your help.

[blenderman-de]

Clarification and more tests:

This is my script tag <script type="module" src="./index.js"></script>.

On my application: I can run the window.modal() functions from my index.js file but get into errors or get only initial states or nothing is happening. From HTML/Alpine side everything is working fine.

• window.modal().open("contact"); seems to work but modal isn´t open
• window.modal().close(); goes into TypeError: main is undefined
• window.modal().isYoutube(); logs boolean, but return always the initial state.

The second jsfiddle: https://jsfiddle.net/blenderman/v1x9pqr4/ The functions work at the beginning. But not in a later event. Then nothing more happens.

At least I tried Parcel global variable with no result 😿

• dev server parcel src/index.html --global modal
• instead of window.modal: var modal = function () { ...

[HugoDF]

Doing window.modal() is creating a new object, that is different to what Alpine.js is referencing

[HugoDF]

2 ways to do this:

1. (Hacky & likely to break) Find the Alpine instance and call the function using that, it'll look something like document.querySelector('[x-data']).__x.$data.open()
2. Dispatch a custom event and have your component listen to that. I've written up a guide about this at https://codewithhugo.com/alpinejs-component-communication-event-bus/

[blenderman-de]

Hugo! Thanks for your response and your great blog. Your hacky solution works on my code.

document.querySelector('[x-data]').__x.$data.open("youtube"); 

From the article, I understand that I can add a global listener using the .window or .document modifier eg. x-on:show:toaster.window or x-on:show-toaster.document. It tried it and it works inside HTML between different Alpine instances. Great.

But how can I listen and dispatch this in my index.js?

[HugoDF]

You can use regular custom events

window.dispatchEvent(new CustomEvent('event-name')

[blenderman-de]

It's been working great. Now I understand it and I am even more enthusiastic about AlpineJS. Thanks a lot for your great support 👏

[HugoDF]

Glad to hear, always happy to help on here or the discord 😄