Support for inline <script> tags

[hhofner]

Would be nice to have support for inline script tags (please disregard the gibberish JS)

[connorlay]

I like this idea! I can work on a PR adding JS injections to https://github.com/phoenixframework/tree-sitter-heex/blob/main/queries/injections.scm. Depending on what text editor you use you may need to port those queries to the format your text editor understands. For example, nvim-treesitter uses a different set of captures to handle language injection.

[connorlay]

Update on this: I believe we need to introduce a new node type for <script> that allows {} characters. Once I have more time for open source I'll get started on that.

[the-mikedavis]

We could support script (and maybe style too?) elements as separate nodes like tree-sitter-html: https://github.com/tree-sitter/tree-sitter-html/blob/d742025fa2d8e6100f134a6ea990443aa1f074b3/grammar.js#L64-L68. It looks like we have some parsing errors currently where do is mistaken by the error recovery mechanism and I think using a custom element might eliminate that

[connorlay]

I started working on this last night, see #38. I'm currently struggling to get the contents of a <script> tag to parse correctly. It is running into issues when there are {} characters and I'm not sure how to proceed.

Looking at tree-sitter-html they solve this via an external scanner written in C. Given how similar HEEx is I could copy that over if we are willing to introduce native code into this grammar.

@the-mikedavis If you have any ideas, I'd love to hear them!

[connorlay]

For posterity, it appears that we do need to implement an external scanner to write a node that captures all text until hitting </script> or </style>: tree-sitter/tree-sitter#1252

[kaeedo]

Hello. Could I ask about the status of this?

[the-mikedavis]

I believe Connor's last comment is still up-to-date. To fix this properly we would probably need to add a scanner like tree-sitter-html's and follow what it's doing for parsing <script> tags.

[fedcho]

This is the closest I could get for nvim-treesitter.
The following injections file properly highly JS:

; heex/injections.scm
((tag
  (start_tag
      (tag_name) @tag_name (#eq? @tag_name "script"))
  (text)
  (end_tag)
) @injection.content
 (#offset! @injection.content 1 0 0 -9)
 (#set! injection.language "javascript")
 (#set! injection.include-children)
 (#set! injection.combined))

However, it disables the elixir injections. I'm not sure why since the query seems to match the exact nodes.

[fedcho]

I got it working by adding the ;; extends modeline comments to my queries.
Here is a workaround for nvim-treesitter users, while the support is added to the grammar:

File: nvim/queries/heex/injections.scm

;; extends

((tag
  (start_tag
      (tag_name) @tag_name (#eq? @tag_name "script"))
  (text)
  (end_tag)
) @injection.content
 (#offset! @injection.content 1 0 0 -9)
 (#set! injection.language "javascript")
 (#set! injection.include-children)
 (#set! injection.combined)
)

((tag
  (start_tag
      (tag_name) @tag_name (#eq? @tag_name "style"))
  (text)
  (end_tag)
) @injection.content
 (#offset! @injection.content 1 0 0 -9)
 (#set! injection.language "css")
 (#set! injection.include-children)
 (#set! injection.combined)
)

This only adds syntax highlight support.

[atcherry]

is there a status update on this? I would love to start using this with colocated hooks