(~VUE) Sigil highlighting and future extension ideas

[GuilhermePSF]

Hello!

I have been recently diving in LiveVue, because of how much I like Vue and its ease to develop good UI effortlessly and how I could integrate complex JS based UI libs in a Phoenix project.

I have recently dabbled into the idea of a LiveVue VSCode extension, initially a modified version of the Phoenix one could be more than enough.

Since it was in the roadmap, I tried to make the (~VUE) sigil have highlighting and this was the result:

{
  "injectionSelector": "L:source.elixir -comment -text -string",
  "name": "elixir-heex-vue",
  "scopeName": "source.elixir.heex",
  "patterns": [
    {
      "comment": "HEEx or VUE sigils with heredoc (triple double quotes)",
      "name": "text.html.heex",
      "begin": "\\s?(~(?:H|VUE)\"\"\")$",
      "beginCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "end": "^\\s*(\"\"\"[a-z]*)$",
      "endCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "patterns": [{ "include": "source.heex" }, { "include": "source.vue" }]
    },
    {
      "comment": "HEEx or VUE sigils with double quotes",
      "name": "text.html.heex",
      "begin": "~(?:H|VUE)\\\"",
      "beginCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "end": "\\\"[a-z]*",
      "endCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "patterns": [{ "include": "source.heex" }, { "include": "source.vue" }]
    },
    {
      "comment": "HEEx or VUE sigils with square brackets",
      "name": "text.html.heex",
      "begin": "~(?:H|VUE)\\[",
      "beginCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "end": "\\][a-z]*",
      "endCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "patterns": [{ "include": "source.heex" }, { "include": "source.vue" }]
    },
    {
      "comment": "HEEx or VUE sigils with parentheses",
      "name": "text.html.heex",
      "begin": "~(?:H|VUE)\\(",
      "beginCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "end": "\\)[a-z]*",
      "endCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "patterns": [{ "include": "source.heex" }, { "include": "source.vue" }]
    },
    {
      "comment": "HEEx or VUE sigils with curly brackets",
      "name": "text.html.heex",
      "begin": "~(?:H|VUE)\\{",
      "beginCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "end": "\\}[a-z]*",
      "endCaptures": {
        "0": {
          "name": "string.quoted.double.heredoc.elixir"
        }
      },
      "patterns": [{ "include": "source.heex" }, { "include": "source.vue" }]
    }
  ]
}

changing the syntaxes/elixir-heex.json to this allows the sigil to work, nothing much but could be a good idea to make greater minds interested in developing the extension.

[Valian]

Great you picked it up @GuilhermePSF 🫡 I wanted to make it work for quite some time already, just the priority of it was always lower than something else 😂

How could I test this extension of yours? Could you maybe fork HEEX one and push your changes there? Would be much easier to collaborate! Or maybe we could put "vs_code_extension" directory directly into this repo.

In your example I see it works both for HEEX and Vue. Maybe it would be better to leave HEEX ouside of that extension and focus purely on ~VUE sigil? I think it might conflict with an existing VScode extension?

All in all, would be totally awesome to have it working!!