generator: enable script components on alpine.js attributes about templ HOT 8 OPEN

I think this just needs a decision on whether to implement the minor change or not.

I don't know if x- attributes are widely used elsewhere and changing the behaviour of x- attributes would cause a namespace clash, so I'd want to see some research that before adding it. I suspect not, but I think it's worth a check.

from templ.

Glad you have a temporary workaround.

I did notice that a lot of people use script components when there's no obvious need to, I think the documentation may have over-emphasized them, so I've added a new section into the docs so that this is the first thing you see on https://templ.guide/syntax-and-usage/script-templates/

templ body() {
  <script type="text/javascript">
    function handleClick(event) {
      alert(event + ' clicked');
    }
  </script>
  <button onclick="handleClick(this)">Click me</button>
}

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 see, script templates improve readability and look nicer in my opinion. and i think generated function names that start with __templ might prevent clashes with some other global js functions?

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 onx- prefix. i think script templates have the potential to be useful and improve readability in templ code.

all aside, thank you for your interest on the matter. i love my current experience with templ so far :)

from templ.

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 onx-

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()
  }
}

from templ.

Glad you have a temporary workaround.

I did notice that a lot of people use script components when there's no obvious need to, I think the documentation may have over-emphasized them, so I've added a new section into the docs so that this is the first thing you see on https://templ.guide/syntax-and-usage/script-templates/

templ body() {
  <script type="text/javascript">
    function handleClick(event) {
      alert(event + ' clicked');
    }
  </script>
  <button onclick="handleClick(this)">Click me</button>
}

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.

from templ.