Skip to content

Add language support for HEEx #3696

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Add language support for HEEx #3696

wants to merge 12 commits into from

Conversation

mwnciau
Copy link

@mwnciau mwnciau commented Jun 30, 2025

Hey @joshuataylor, I've just started using Elixir and noticed that HEEx wasn't yet properly supported. Having recently created a plugin for a surprisingly similar language, I thought I'd have a crack.

This will add support for .heex files. This is mostly similar to EEx, and in fact originally copied from EEx, but with a few customisations:

  • The Jetbrains XML parser doesn't support tag names beginning with .. This was surprisingly hard to get around, but I ended up creating a wrapper for the lexer that changes <. and </. to <C and </C. This only affects the lexing, so autocomplete, etc. still work.
  • I've added a HTML inspection suppressor to hide "invalid tag name" errors for HEEx components.
  • Added brace interpolation to the HEEx flex file. These will not be interpolated within script and style tags.
  • Added a custom highlighter that uses the aforementioned lexer.

Anything you'd like me to do in terms of testing/improving the codebase. I'm used to Kotlin, but stuck with Java here since the EEx section was Java. I also tried making this an experimental feature, but couldn't figure out how in the end.

@joshuataylor
Copy link
Collaborator

joshuataylor commented Jul 1, 2025 via email

mwnciau
mwnciau commented Jul 3, 2025
View reviewed changes
@mwnciau
Copy link
Author

mwnciau commented Jul 3, 2025

Currently there's a small issue with interpolated braces inside of HTML/component tags. The following:

<.tag one={""} class=""/>

Looking at the PSI, the {""} is replaced by an outer element, but then the parser tries to set the one attribute to class=""/.

Don't think I'm going to be able to look at this until next week.

@joshuataylor
Copy link
Collaborator

Thanks for your work on this -- I'll take a look tonight.

I've managed to upgrade the deprecated code from Kotlin 1.7 -> 2.2 as required by IntelliJ 2025.1, so we should be good to go with that.

I've also started looking at upgrading the base Elixir version/dependencies, as [email protected] is deprecated, and a PITA to install.

It might be possible to even use something like Burrito, I had a quick play and it looks possible, could even provide our own ERTS.

I'm super keen to get this and the injection stuff in, as it'll make building Live View apps a joy.

@mwnciau
Copy link
Author

mwnciau commented Jul 6, 2025

Right, I've managed to find some time and got this in a much better place. In the last few commits:

  • I've abandoned the plan of creating a custom HeexHTML language. Because it was a new language, all of the CSS/JS injections and other customisations had to be added manually, and weren't guaranteed to work.
  • Instead, I've just modified the TemplateData class used by EEx to force HTML to use our custom lexer. All the built-ins still work, and <.relative_components> now work
  • I've added a change to the flex lexer to support components beginning with Script or Style (e.g. <Script.component>

The only very minor issue I can currently see is that relative component tags (<.component>) are not being highlighted correctly. This is basically because the HtmlHighlighter defines its own lexer, so it's not lexing the source the same way the template is. Not sure there's an easy fix here. I've added a ticket to Jetbrains' YouTrack to add native support for the dot, but I'm not hopeful it will go anywhere.

I'd be keen to get some eyes on these changes to make sure it's working for a variety of HEEx templates . Either way, it's a massive improvement on what was there before.

@mwnciau
Copy link
Author

mwnciau commented Jul 8, 2025

Adding a custom highlighter was actually easy enough so that issue is resolved.

@joshuataylor joshuataylor mentioned this pull request Aug 6, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@mwnciau @joshuataylor