Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Async Javascript function #699

Closed
miniscruff opened this issue Apr 23, 2024 · 4 comments
Closed

Async Javascript function #699

miniscruff opened this issue Apr 23, 2024 · 4 comments
Labels
question Further information is requested scripts

Comments

@miniscruff
Copy link

miniscruff commented Apr 23, 2024

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
}
@joerdav joerdav added question Further information is requested scripts labels Apr 23, 2024
@a-h
Copy link
Owner

a-h commented May 18, 2024

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
Copy link
Author

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
Copy link
Collaborator

joerdav commented May 31, 2024

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.

@joerdav joerdav closed this as not planned Won't fix, can't repro, duplicate, stale May 31, 2024
@miniscruff
Copy link
Author

That's fair, thanks for the update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested scripts
Projects
None yet
Development

No branches or pull requests

3 participants