tree-sitter-html icon indicating copy to clipboard operation
tree-sitter-html copied to clipboard

Attribute values containing ${} anywhere are interpreted as javascript with fixed offsets

Open kmoschcau opened this issue 2 years ago • 5 comments

This is particularly noticeable when using thymeleaf expression syntax.

For example I have this element:

<div th:replace="footers/${footerStyle} :: .footer-container"></div>

The attribute value starting from the second "o" until the last "e" is interpreted as javascript. This looks to me as if the dollar sign, opening and closing brace are implicitly assumed to be at the start and end of the attribute value, even though they can appear anywhere in the attribute to trigger this behavior.

Here is what that looks like when using this for highlighting in neovim: image

This is what the TSPlayground shows when toggling everything on:

element [0, 0] - [0, 68]
  start_tag [0, 0] - [0, 62]
    "<" [0, 0] - [0, 1]
    tag_name [0, 1] - [0, 4]
    attribute [0, 5] - [0, 61]
      attribute_name [0, 5] - [0, 15]
      "=" [0, 15] - [0, 16]
      quoted_attribute_value [0, 16] - [0, 61]
        """ [0, 16] - [0, 17]
        attribute_value [0, 17] - [0, 60]
          expression_statement [0, 19] - [0, 59]
            binary_expression [0, 19] - [0, 59]
              left: binary_expression [0, 19] - [0, 50]
                left: identifier [0, 19] - [0, 24]
                operator: "/" [0, 24] - [0, 25]
                ERROR [0, 25] - [0, 26]
                  identifier [0, 25] - [0, 26]
                right: member_expression [0, 26] - [0, 50]
                  object: object [0, 26] - [0, 39]
                    "{" [0, 26] - [0, 27]
                    shorthand_property_identifier [0, 27] - [0, 38]
                    "}" [0, 38] - [0, 39]
                  ERROR [0, 40] - [0, 42]
                    ":" [0, 40] - [0, 41]
                    ":" [0, 41] - [0, 42]
                  "." [0, 43] - [0, 44]
                  property: property_identifier [0, 44] - [0, 50]
              operator: "-" [0, 50] - [0, 51]
              right: identifier [0, 51] - [0, 59]
        """ [0, 60] - [0, 61]
    ">" [0, 61] - [0, 62]
  end_tag [0, 62] - [0, 68]
    "</" [0, 62] - [0, 64]
    tag_name [0, 64] - [0, 67]
    ">" [0, 67] - [0, 68]

kmoschcau avatar May 04 '23 15:05 kmoschcau

Just FYI, this won't be solved here - you could create a grammar for thymeleaf to then be injected here

amaanq avatar Oct 03 '23 02:10 amaanq

Just FYI, this won't be solved here - you could create a grammar for thymeleaf to then be injected here

I am not sure this issue is thymeleaf specific though. If the HTML grammar already looks for these interpolation constructs in attributes, it should also consider where in the attribute they appear. This is independent of thymeleaf.

kmoschcau avatar Oct 03 '23 07:10 kmoschcau

No, the HTML grammar does not look for them. The way it works is an injections query is created to inject languages into certain nodes of the HTML grammar - in Neovim JavaScript is injected if $( and } are present iirc. Same construct would apply for thymeleaf, once there's a grammar certain patterns/nodes can be queried to have that language injected.

amaanq avatar Oct 03 '23 08:10 amaanq

No, the HTML grammar does not look for them. The way it works is an injections query is created to inject languages into certain nodes of the HTML grammar - in Neovim JavaScript is injected if $( and } are present iirc. Same construct would apply for thymeleaf, once there's a grammar certain patterns/nodes can be queried to have that language injected.

Alright. But since there is no thymeleaf grammar as far as I know, this would then mean that the JavaScript grammar is wrong here, correct?

kmoschcau avatar Oct 03 '23 15:10 kmoschcau