Skip to content
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.

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

Activation through assignment to custom variable #16

Open
timonson opened this issue Jan 30, 2020 · 7 comments
Open

Activation through assignment to custom variable #16

timonson opened this issue Jan 30, 2020 · 7 comments

Comments

@timonson
Copy link

timonson commented Jan 30, 2020

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
Copy link
Owner

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
Copy link
Author

timonson commented Jan 31, 2020

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
Copy link
Author

@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
Copy link

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
Copy link

drschwabe commented Dec 3, 2023

@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:

#19

@schrotie
Copy link

schrotie commented Dec 4, 2023

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants