jonsmithers / vim-html-template-literals

Syntax highlighting for html template literals in javascript (as in lit-html and polymer 3)
MIT License
71 stars 10 forks source link

Activation through assignment to custom variable #16

Open timonson opened 4 years ago

timonson commented 4 years ago

Hi @jonsmithers, you made a really useful plugin here, thank you!

I would like to ask if it would be possible to activate the highlighting not only through the tagged template function call but also through an assignment to a custom variable. For example:

const html = `<div>Click</div>`

Many people don't use lit-html very frequently but make custom templates by assigning the html or css strings to variables first. In other words the pattern matching had to resolve to const html = instead of html`.

What do you think? Thanks you!

jonsmithers commented 4 years ago

Hmm. That seems like it would be feasible, but I'm not sure that hard-coding it to the html variable name is the best decision. Aren't there use cases where someone would want to change the variable name or have multiple such variables in the same scope?

FYI, there is an experimental g:htl_all_templates flag you can enable. Once I merge the dev branch into master, this will be discoverable in the readme.

Come to think of it, it might be possible to key off of the `< starting character sequence and >` ending character sequence. That might be cool. Would there be drawbacks to applying html syntax to all template literals that start/end with < and > characters (newlines and spaces can be disregarded)?

Assuming this is a good idea, maybe I can investigate this a bit further. Regarding implementation, we'd have to fight for precedence over the syntax plugin. Note to self:

:syntax region anotherHtmlRegion start=" `[\n\s]*<" end=">[\n\s]*`"
timonson commented 4 years ago

Hi @jonsmithers, thank you for your quick reply!

You are right, I had not seen the new g:htl_all_templates option yet and I find it amazing. I think this is pretty much exactly what I was hoping for but I need to test it a little bit more to being able to say this decisively.

I can't think of many drawbacks regarding the < and > characters. But I like your implementation with g:htl_all_templates more than my suggested idea anyways.

Thanks again for this great plugin!

timonson commented 4 years ago

@jonsmithers until now your new g:htl_all_templates has worked without any problems. The only thing I have noticed is that the automatic indentation is not activated for this feature yet. If I knew vimscript I would look into it on my own my I have never learnt it.

pablo-abc commented 1 year ago

Trying this plugin now and came upon this issue as well!

Could it be possible to do like what Prettier does?

If a template literal starts with either the html tag or a /* HTML */ comment, it gets formatted as HTML.

E.g.

const html = /* HTML */ `<div>Click</div>`
drschwabe commented 9 months ago

@pablo-abc did you ever find a template literal syntax highlighting solution that works using a comment like that ?

@schrotie has a PR on this that adds what you describe, but it didn't work for me:

https://github.com/jonsmithers/vim-html-template-literals/pull/19

schrotie commented 9 months ago

So, I just checked: I'm using this plugin, git says I'm on the same state as this repo ("master"). My vimrc only has let g:htl_css_templates = 1 And I use this syntax for templates: /* html */`... /* css */`... And it works for me.

drschwabe commented 9 months ago

So, I just checked: I'm using this plugin, git says I'm on the same state as this repo ("master"). My vimrc only has let g:htl_css_templates = 1 And I use this syntax for templates: /* html */`... /* css */`... And it works for me.

thx, me too but for some reason it only catches if I use the html function but not / html / (ie- works for lit-html or uhtml calls but not for raw string literals). I will have to try on a fresh install.