abelljs/vscode-abell-language-features

Syntax Highliting for .abell files

vscode-abell-language-features's Issues

Migrate to Volar

Description

I think its time to remove all of this and migrate to Volar.js. I have done a POC and it works great. Takes care of showing errors, hovers, click to go to source code, typescript, autoimports and a lot more.

Migration Path

• Support Source Maps
• Use Source Maps for mapping the input of typescript to output

Allow HTML language features in .abell files

Currently, only HTML syntax highlighting is supported by the extension. Would be very helpful if we could support auto-completion and other language features of HTML and JavaScript.

AutoCompletion Breaks when you add `<style></style>` attribute in abell file

Paste this content in a new xyz.abell file. The autocomplete inside abell blocks will break.

{{ 
  import something from './all-vite.abell';
}}

<style>
  header {
    display: flex;
  }
</style>

It stops autocompleting the component names

Publish the language server

We should publish the language server so that people can make integrations for other editors without rewriting all this logic.

I would personally like to make a coc.nvim extension for this.

Highlight blocks inside strings

We need a way to highlight the blocks that are written inside " or '

<meta name="xyz" content="{{ meta.title }}" />

In the above code, we should be able to highlight {{ meta.title }}

Publish extension to open-vsx.org

Many forks of vscode like Code OSS which removes microsoft telemetry uses this extension registry as microsoft doesn't allow you to incoperate the official registry in any other editor.

I think we should also publish this extenion to https://open-vsx.org/ so that it is also accessible for those people.

I hit this when I was using oni2 editor.

Submit abell grammer to github

So that we can have ```abell support on GitHub :)

You have already done the hard work of creating a text mate grammar.

We will need to make a PR to https://github.com/github/linguist

Add completion for `inlined` attribute

This need to be done after we are done with scoped css issue in abell renderer.

Add completion for Abell.contentArray and other attributes

Highlight HTML inside JavaScript strings

    <span class="articles-container">
    {{
      articles.map(article => ( /* html */
        `<a href="${article.url}" class="article shadow">${article.name}</a>`
        )).join('<br/>');
    }}
    </span>

In the snippet above, we should be able to highlight anchor tag HTML inside map function