Async Javascript function

[miniscruff]

I am trying to implement the passwordless client using templ and running into a few issues.

The general code is below and my issues come from trying to use async/await and scripts. I am not sure if this is supported at all but I tried a few different methods and none seemed to work.
Additionally, I am not quite sure how to call the async function immediately on page load.
I tried using onload={ @registerToken(...) } but it didn't seem to work. It did work when I changed it to onclick and I clicked the div/button.

script registerToken(publicKey, registerToken string) {
    const p = new Passwordless.Client({
        apiKey: publicKey
    });

    const newToken = await p.register(registerToken);
}

templ TokenGenerated(publicKey string, token string) {
	@registerToken(publicKey, token)
	<div>
		Registered? Check console.
	</div>
}

Note that the function it self does run properly as I can open the console and copy paste the __templ_function call and it will work if I were to use the .then() syntax instead of async/await.

Further example with the calling on load, an alternative approach would be the window.on load event, could be a bad idea but trying to be complete. But I am not sure how you can pass templ variables into scripts as I don't believe you can.

templ AuthSignIn(value string) {
<script type="text/javascript">
    window.addEventListener("load", (event) => {
        // how can I use the templ value argument in here? Is it possible?
        console.log({value})
    });
</script>
// ... rest of the html index page
}

[a-h]

Hi, sorry for the delay in responding.

At the moment, templ script components don't do any bundling or transpilation of the JavaScript that's in them. That means that you can only use browser-supported features in templ script components.

However, you can bundle your own JavaScript or TypeScript and use any features you like, including async/await, importing npm modules.

I put together an example of how to bundle TypeScript in the PR at https://github.com/a-h/templ/pull/738/files - it's the same process for JS, but with different file names.

It also covers your use case of getting Go data into your JavaScript function.

Note how ./ts/src/index.ts is bundled and minified by esbuild (https://esbuild.github.io/getting-started/#install-esbuild) to create ./assets/js/index.js.

I will update the https://templ.guide documentation to mention this approach more clearly.

I'm also proposing two new features to add to templ to make this simpler to achieve: #739

And in #740 I discuss where I think we might want to go with CSS.

[miniscruff]

For use with htmx I feel the advantage of being able to, per response, generate a dynamic async function would be quite useful. Just that, my one particular use case for passwordless is extremely minimal.

For that I do have to question this point you made.

That means that you can only use browser-supported features in templ script components.

https://caniuse.com/async-functions is widely supported ( over 97% ), which I am not sure where you draw the line at supported or not but I understand if it needs to be 100%.

Additionally, the experience of writing short javascript functions is not that bad. I don't feel its any different from writing inside a <script></script> tag in a normal html file.

I think I have a solution using strings, it just means I have to match up the function name by string rather then directly but to me that is a better trade off then adding nodejs and esbuild as a dependency. Maybe if I had hundreds of lines of javascript it would be worth it. But via HTMX I really only need a little bit.

[joerdav]

It seems there is a work around for this, and with the deprecation of script templates as recommended features I think we can close this.

[miniscruff]

That's fair, thanks for the update.