generator: enable script components on alpine.js attributes

[hakanrw]

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

script alpineState() {
  return {
    "time": Date.now()
  }
}

it would be great if we could use this component as alpine.js state

<div x-data={alpineState()} x-text="time"></div>

more examples

script currentTime() {
  return  Date.now()
}

script logToConsole() {
  console.log("clicked")
}

<div x-data="{}">
  <span x-text={currentTime()}</span>
  <button x-on:click={logToConsole()}>click me</span>
</div>

recommendation:

https://github.com/a-h/templ/blob/2a7ab8400e6e3813a650bb7e4618ef9eddebe2b1/generator/generator.go#L993-L1000

replace []string{"on", "hx-on:"} with []string{"on", "hx-on:", "x-"} to enable script components on all alpine.js attributes.