-
-
Notifications
You must be signed in to change notification settings - Fork 230
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
generator: enable script components on alpine.js attributes #579
Comments
i've found a temporary workaround for this feature: it is kind of a hacky solution, but the feature above can be achieved by changing the Alpine.js prefix to add this to your head tag: <script>
function changeAlpinePrefix() {
Alpine.prefix("onx-");
Alpine.start();
}
window.onload = changeAlpinePrefix;
</script> now you can use: templ Index() {
<div onx-data={alpineState()}>
<div>time: <span onx-text="time" /></div>
</div>
}
script alpineState() {
return {
"time": Date.now()
}
} |
Glad you have a temporary workaround. I did notice that a lot of people use
I think of script templates as a way for bundling JS along with component libraries, and a way of passing data from Go to JS, rather than them being the standard way to write JS in templ. |
I think this just needs a decision on whether to implement the minor change or not. I don't know if |
i see, script templates improve readability and look nicer in my opinion. and i think generated function names that start with like you mentioned, they also allow passing data from go to javascript, which i am using (although not in the example i gave above) to pass server-side state to client-side alpinejs state with the all aside, thank you for your interest on the matter. i love my current experience with templ so far :) |
I also just ran into this issue today. I want to populate my In my opinion I think the easiest fix is to just remove the random letters and numbers generated on the javascript function and just making it |
Here is another hack solution I came up with. <script>
function getTemplFunction(name) {
for ( var i in window) {
if((typeof window[i]).toString()=="function"){
if (i.includes("__templ_" + name)) {
return window[i];
}
}
}
}
</script> Then I can use Edit: Actually this didn't work, since it's not possible to pass data into the function then. I found this alternative solution below which did work.
then you can use |
the prefix needs to start with |
1 similar comment
the prefix needs to start with |
my two cents: while I'm also interested in using Alpine with templ, I feel that this should be an opt-in feature, perhaps a full-blown setting to set the prefix(es). |
I believe we now have a standard for passing serverside data to the client here: https://templ.guide/syntax-and-usage/script-templates#passing-server-side-data-to-scripts And in the case of using alpine functions it looks like there is a workaround to get started. That combined with the recommendation away from script templates I think we can close this. |
alpine.js is a lightweight javascript framework that has the potential to integrate nicely with templ.
all alpinejs attributes start with the prefix
x-
.suppose the script component below
it would be great if we could use this component as alpine.js state
more examples
recommendation:
templ/generator/generator.go
Lines 993 to 1000 in 2a7ab84
replace
[]string{"on", "hx-on:"}
with[]string{"on", "hx-on:", "x-"}
to enable script components on all alpine.js attributes.The text was updated successfully, but these errors were encountered: