X-init execution of first declared function only

[maxkokocom]

Hi, not sure is it a bug, feature or discussion. It was a bug for me, but I found very random solution which should maybe be documentated or explained somehow. I was doing toasts and had an issue of empty toast showing up on every single refresh. I was not able to create function which would not execute without loosing ability to call this function later on. To my suprise simply declaring other function in front of it in x-init solved it.

<div class="relative w-auto h-auto" x-data>
    <div
        x-data="{
            title: 'Default Toast Notification',
            description: '',
            type: 'default',
            position: 'top-center',
            expanded: false,
            popToast (custom){
                let html = '';
                if(typeof custom != 'undefined'){
                    html = custom;
                }
                toast(this.title, { description: this.description, type: this.type, position: this.position, html: html })
            }
        }"
        x-init="
            window.myGlobalFunction = function(){
                console.log('something');
            };
            window.toast = function(message, options = {}){
                let description = '';
                let type = 'default';
                let position = 'top-center';
                let html = '';
                if(typeof options.description != 'undefined') description = options.description;
                if(typeof options.type != 'undefined') type = options.type;
                if(typeof options.position != 'undefined') position = options.position;
                if(typeof options.html != 'undefined') html = options.html;

                window.dispatchEvent(new CustomEvent('toast-show', { detail : { type: type, message: message, description: description, position : position, html: html }}));
            };

            window.customToastHTML = `
                <div class='relative flex items-start justify-center p-4'>
                    <img src='https://cdn.devdojo.com/images/august2023/headshot-new.jpeg' class='w-10 h-10 mr-2 rounded-full'>
                    <div class='flex flex-col'>
                        <p class='text-sm font-medium text-gray-800'>New Friend Request</p>
                        <p class='mt-1 text-xs leading-none text-gray-800'>Friend request from John Doe.</p>
                        <div class='flex mt-3'>
                            <button type='button' @click='burnToast(toast.id)' class='inline-flex items-center px-2 py-1 text-xs font-semibold text-white bg-indigo-600 rounded shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>Accept</button>
                            <button type='button' @click='burnToast(toast.id)' class='inline-flex items-center px-2 py-1 ml-3 text-xs font-semibold text-gray-900 bg-white rounded shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50'>Decline</button>
                        </div>
                    </div>
                </div>
            `
        "
        class="relative space-y-5">

Adding myGlobalFunction makes it execute, but the next function is not executed anymore, but still works from global scope when called by other scripts. I wonder what should be correct way of making it work... This seems very random and I found it out by accident. Let me know what is the recommanded way to create callable functions which are in global scope, but are not executed. I am new to alpine.js maybe I am missing obvious, but I was trying different vanila js callback functions and nothing work, except for adding other function in first position.

[ekwoka]

You don't call any functions here.

But also, why are these being defined in x init? And not just in a script tag?

[SimoTod]

Functions, in alpine directives, gets autocalled (by design). As mentioned above, the right place to define a function for your component is x-data (or Alpine.data depending on what you use).

[ekwoka]

To clarify, they are called if the evaluation of the expression is to a function. Not just all arbitrarily defined functions.