Do <script> tags work in template files?

[RobinManoli]

Hi!
I tried to load a template file using x-template, and the code inside the <script> tag didn't work. Is it supposed to work?

Previously I've had to obfuscate <script> tags when including such code dynamically, like this:
document.write('<script type="text/javascript" src="..."><\/script>'); // from https://stackoverflow.com/a/17542683

[rehhouari]

Honestly I can't figure how to make them work, I've checked other routers and they don't seem to be doing anything special for scripts neither
To show the templates I'm using el.innerHTML to put it inside the target element not document.write, the latter seem to be deprecated but I don't see any alternative

[boustanihani]

How about using eval() ?

[rehhouari]

It'd have to go through all elements inside the route to find the script then run it. also there is the thing about eval being unsafe. There used to be a saferEval function in Alpine but it's gone now.
I'm currently replicating x-if functionality to render templates, which should make scripts run but it doesn't. So i'll look into why

[rehhouari]

after some testing, scripts inside x-if and therefore templates only work when it's in the same file
I do not how to optimally approach this.
for now you can use x-init inside templates or x-handler if you don't intend to interact with the template since handlers are ran before the templates are rendered

[boustanihani]

Hope this gets solved in an elegant way, cause it would make alpine.js also suitable for large SPAs :)
I love the simplicity of alpine, and mostly, that we simply edit html files, with no build/compile steps needed..

[RobinManoli]

Okay, well the workarounds that worked for me is to have the script somewhere else, or to use inside attributes such as onclick or @click

[boustanihani]

@rehhouari is there a special way for importing a js module inside x-init?

I am getting the following error:

Alpine Expression Error: Cannot use import statement outside a module

Expression: " import * as loginModule from 'pages/login.js' "

This is my code =>

login.js

export function sayHello(){
    return "Hello";
}

login.html

<div x-init="import * as loginModule from 'pages/login.js'" x-data="loginModule">

    <h1>Login</h1>

    Message: <span x-text="sayHello()"></span>

</div>

[rehhouari]

I don't quite get what you're asking, Alpine.data method already works, I don't know what dynamic imports are. I don't see that feature documented anywhere

[boustanihani]

I'm just trying to find a way that makes splitting and importing files more elegant with minimum code.
Those are dynamic imports:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

[rehhouari]

Are you using a build tool like vite? if so you can just do it like this
dropdown.js:

export default () => ({
    open: false,
 
    toggle() {
        this.open = ! this.open
    }
})

main.js:

import dropdown from 'dropdown.js'
import Alpine from 'alpinejs'
Alpine.data('dropdown', dropdown)
Alpine.start()
...

home.html:

<div x-data="dropdown">...

[rehhouari]

Those are dynamic imports:

I don't think alpine supports them, ask in their discord maybe someone could help.

[boustanihani]

Thanks