Support inline JS in script tags

[on3iro]

While having separate scripts might in general be the preferable way to load some sprinkles of JavaScript, there are still occasions where an inline script is better to show the actual intent and keep the component coupled with its frontend behavior.

For example, let's say you have a button with a click handler doing a very specific action. I would like to be able to have a simple fusion component containing the button as well as the script tag with the accompanying event binding.

prototype(Vendor:CookieSettingsButton) < prototype(Neos.Fusion:Component) {
    renderer = afx`
        <button id="klaro-manager">
            Open cookie settings
        </button>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                var button = document.getElementById('klaro-manager');
                button.addEventListener('click', function() {
                    klaro.show();
                });
            });
        </script>
    `
}

[mficzel]

That is quite hard as all those curly braces drive the afx parser nuts. As we follow the development of JSX i would implement a solution they chose but am not aware of any

[jonnitto]

Did you try it that way?

prototype(Vendor:CookieSettingsButton) < prototype(Neos.Fusion:Component) {
    renderer = afx`
        <button id="klaro-manager">
            Open cookie settings
        </button>
        <script>{"
            document.addEventListener('DOMContentLoaded', () => {
                var button = document.getElementById('klaro-manager');
                button.addEventListener('click', function() {
                    klaro.show();
                });
            });
        "}</script>
    `
}

[jonnitto]

@on3iro Is your problem solved? Can we close this issue?

[on3iro]

@jonnitto oh sorry, I totally forgot about that issue. I did not try the way you proposed, but I eventually will (as soon as I run into a similar issue, I guess ;) ). Thanks for the reply anyway.

The issue can be closed :)

[freesh]

Just as note: The solution from @jonnitto is working. :)

[wolfgang-braun]

@jonnitto nice solution. Is it somehow possible to render property values inside such a JS block?

think of

prototype(Vendor:JS) < prototype(Neos.Fusion:Component) {
    MyProp = ${q(node).property('foo')
    renderer = afx`
        <script>{"
            alert({props.MyProp});
        "}</script>
    `
}

Answer

Found out: it can be done by using the EEL exp to concat strings:

prototype(Vendor:JS) < prototype(Neos.Fusion:Component) {
    MyProp = ${q(node).property('foo')
    renderer = afx`
        <script>{"
            alert(\"" + props.MyProp + "\"');
        "}</script>
    `
}