htmx _= attribute for hyperscript

[acmacalister]

Howdy. Just wanted to drop by and say thanks for making this. Been trying some htmx and was looking for a nice templating language.

Currently, the parser throws an error if I add the htmx _= attribute to any html tag. The error for reference:

Error

web/components/approval_items.templ: web/components/approval_items.templ parsing error: <a>: malformed open element: line 35, col 19

Example to Reproduce

https://htmx.org/examples/confirm/

My code

<td>
     <a class="waves-effect waves-dark btn blue lighten-2"
     hx-post={"/v1/approvals/" + strconv.Itoa(int(a.ID)) }
     hx-headers={ AcceptHeader }
     hx-confirm="Are you sure you want to approve this request?"
     _="on htmx:confirm(target, path, verb, etc, elt)
               halt the event
               call Swal.fire({title: 'Confirm', text:'Do you want to continue?'})
               if result.isConfirmed 
                    add .deleted to the closest <tr/> to elt
               fetch `${path}` with method:`${verb}`
               wait 1.1s then remove the closest <tr/> to elt
          end"
     >Approve</a>
</td>

My current workaround is to just move this code into a

<script type="text/hyperscript">
// code here
</script>

This isn't idiomatic Hyperscript and it is hard to scope the handlers to the proper element.

[a-h]

Thanks for raising the issue, and for using templ!

The _ attribute should be supported as of the release I tagged today, thanks to @joerdav's PR - https://github.com/a-h/templ/pull/107/files#diff-ad6799840c66a0c4c053972d865d82099e1862aaa2c073e84b5e1f27f4e127c4

However, it won't completely make working with Hyperscript in templ brilliant, because @joerdav also mentioned the need for multi-line attribute support in #115

He's suggested that it's possible to use the Go expression attribute _={ `whatever` } in the interim until we get that sorted.

For "constant" attributes templ currently just parses all text until the next double quote value, so another related issue is the use of single quotes - #116

I'm working on a conference talk for Gophercon London which will take up all my spare time for a few weeks, but then I'll be able to focus back on feature development for templ. I'm hoping it will help @1cg write a Language Server for Hyperscript. 😁

[gedw99]

Lsp for hyperscript would be fantastic . Maybe it’s possible to do with the templ lsp Server ?

[1cg]

given how insane the hyperscript parser/grammar (same thing) is, I'd say using the actual parser (in js) for the language server would be the best option if at all possible

[gedw99]

Yeah I agree about the insanity.

i am playing around with the idea of building a golang based htmx / Turbo System . So then templ and it’s LSP would fit in with it.

The reason is because it’s not just html that could do with a bit of htmx magic . The big sky team are doing a similar thing for React Native btw. They can it Hyper. It’s on GitHub.

my motivation is to use gio which can run on web, desktop and mobile . The markup is xml based. So then you can see how a nice htmx style System would make it easy to do the gui updates ..

The markup is based on the zudecken format. Then just add templ and htmx ( the golang Version :) ) and your cooking with gas as they say.

[a-h]

@1cg I'll happily give you a preview of my talk in a week or so in exchange for feedback!

It explains how to make a hello world language server from scratch (in Go, but that's just detail), how the protocol works at a low level, then goes up through the abstractions until you've got a real language server. I show making one for https://cooklang.org/

And then I go into a bit of detail on how the templ one works.

I think the main thing is that it really helps if the parser you've got produces file positions of where errors are, and produces an object model where you can go from a a file position to something in your code. For example, in templ, you can go from a file position (line 3, col 2) and find the expression that you're in.

I did try out using a PEG parser, but I ended up wanting a lot more control over error messages too, so I've stuck with a hand-written one that lets me maintain a map of file positions to components in the component tree.

[1cg]

i will die on the recursive descent hill

looking forward to the talk, would love to get a hyperscript lang server going!

[acmacalister]

Thanks for raising the issue, and for using templ!

The _ attribute should be supported as of the release I tagged today, thanks to @joerdav's PR - https://github.com/a-h/templ/pull/107/files#diff-ad6799840c66a0c4c053972d865d82099e1862aaa2c073e84b5e1f27f4e127c4

However, it won't completely make working with Hyperscript in templ brilliant, because @joerdav also mentioned the need for multi-line attribute support in #115

He's suggested that it's possible to use the Go expression attribute _={ `whatever` } in the interim until we get that sorted.

For "constant" attributes templ currently just parses all text until the next double quote value, so another related issue is the use of single quotes - #116

I'm working on a conference talk for Gophercon London which will take up all my spare time for a few weeks, but then I'll be able to focus back on feature development for templ. I'm hoping it will help @1cg write a Language Server for Hyperscript. 😁

Certainly. Thanks for the hard work in making it. Working on a small project at work and wanted to something I could embed templates and use HTMX with. I'll test it again from the tip and see what it looks like. Let me know if there is anything I can do to help or test out.

LSP for hyperscript would be awesome! Can't imagine what the parser/grammar will look like for that!

[joerdav]

@acmacalister Any luck? Did it work with the latest version?

[acmacalister]

@joerdav, yes! Worked great on the latest version. Used the string literal workaround for some long form htmx calls. Thanks for the changes. Happy to provide snippets of the code for samples if that is helpful for other folks looking into this.

[a-h]

#115 was just closed in 5b810fa by @joerdav and released in > v0.2.316

@acmacalister - I think this is resolved. Feel free to reopen if not.

If you think something is missing in the docs at https://templ.guide that would be useful to people, perhaps you could add a page? The docs are at https://github.com/a-h/templ/tree/main/docs/docs