auto closing of tags appears to not work on gjs/gts files
Opened this issue · 12 comments
Screencast.from.2023-10-15.09-11-24.webm
When I did my deep dive into this to support gts/gjs I was not able to figure this part out. My assumption was injecting the html/handlebars context in a template tag should enable auto closing tags but that doesn't work.
I'll have another look some point next week to.
It may be a case where such cases handled by https://github.com/lifeart/typescript-hbs-plugin
Here? https://github.com/lifeart/typescript-hbs-plugin/blob/main/src/html-template-language-service.ts#L237C12-L237C38 (not sure with it, but we could add tests to verify)
These docs should be helpful when I get time to look at this
https://code.visualstudio.com/api/language-extensions/embedded-languages
@lifeart I'm assuming we could pull the completion you highlighted in typescript-hbs-plugin to your ember-language-server so this works for everyone?
@evoactivity yep, right
Not sure where exactly this should be configured in this extension.
Made a PR to vscode-auto-close-tag for people relying that: formulahendry/vscode-auto-close-tag#224
To get it working already today, you could install the extension and add this config:
{
// other settings ...
"auto-close-tag.activationOnLanguage": [
"*",
"glimmer-js",
"glimmer-ts",
],
}Interesting approach, will be a lot simplar than adding this to the language server. It might be worth adding that addon to the extension pack rather than here though, especially since your PR was accepted installing it should just work.
That seems reasonable to me, I can look to PR it. We'll need some info in the README though as to why it's needed, as VS Code ships this natively since https://code.visualstudio.com/updates/v1_16#_html-close-tags.
Seems like a good quick blog post to make as well, if I can find some time 👀
hmm, this is kind of annoying, it auto closes when I'm writing typescript
Good catch, apparently it's a known issue reported 8 years ago 🙃 (formulahendry/vscode-auto-close-tag#17)
I can take a look to fix it in the extension, but at that point it might be worth rather to take over the extension's functionality in this one?
@IgnaceMaes we could do it in our typescript-hbs-plugin (it's dependency of this extension)
https://github.com/lifeart/typescript-hbs-plugin/blob/92e1caf5c62ba7a8e0d1124bed7ac566097ad213/src/html-template-language-service.ts#L237 here is test for jsx reference: https://github.com/lifeart/typescript-hbs-plugin/blob/main/e2e/tests/jsxTagClosing.js
Using vscode-html-languageserver for this is the proper way to do it. I began looking into that with your typescript-hbs-plugin but I'm just not sure where to begin with it to be honest. I couldn't even figure out what calls getJsxClosingTagAtPosition, I assume something in vscode, but then how do we get it to be called for <template></template> regions?
It'd be good to get the full html intellisense working, not just auto closing tags too.
I plan on watching this at some point https://www.youtube.com/watch?v=Xo5VXTRoL6Q so hopefully I'll have a better understanding LSP's and can help contribute more.
@evoactivity start with tests and original repo (https://github.com/microsoft/typescript-lit-html-plugin)
To proper support document fragments in we could take RangeWalker from Ember Language Server: https://github.com/lifeart/ember-language-server/blob/2583961db0415f0eac3ab929a2f99ce5b99429e6/src/utils/glimmer-script.ts#L166C14-L166C25 it allow us to have proper fragments for <style>, <template>, etc