jonsmithers / vim-html-template-literals

Syntax highlighting for html template literals in javascript (as in lit-html and polymer 3)

HTML Template Literals

Syntax highlighting and indentation for html inside of tagged template literals, as seen in lit-html and Polymer 3.

Supported Syntaxes inside html`...`

• HTML (including CSS embedded in <style> tags)
• JavaScript string interpolation (${...})
• nested templates (html`${html`${}`}`)

See Configuration for support for css tagged literals (css`...` ).

Installation

This plugin requires vim-javascript (or typescript-vim if you're using typescript). If you use vim-plug for package management, installation looks like this:

Plug 'jonsmithers/vim-html-template-literals'
Plug 'pangloss/vim-javascript'

NOTE: it's generally a good idea to have let g:html_indent_style1 = "inc" in your vimrc for reasonable indentation of <style> tags. See :help html-indenting.

Configuration

Flag	Description
g:htl_css_templates	Enable css syntax inside css-tagged template literals (css`...`). Indentation behavior is currently not implemented.
g:htl_all_templates	(Experimental) Enable html syntax inside all template literals (`...`).

Known Issues

• Indentation in general still has some kinks. If you see an issue, please report it.
• This plugin conflicts a bit with vim-jsx. Having both installed simultaneously may result in undesired indentation behaviors.
• A patch in vim 8.1 introduced native typescript support in Vim. However, its region definitions are less precise and it's not easy to translate vim-html-template-literals indentation behavior to work with Vim's native typescript region definitions.

Tips

• You can configure the vim-closetag plugin to work inside html template literals:

  let g:closetag_filetypes = 'html,xhtml,phtml,javascript,typescript'
  let g:closetag_regions = {
        \ 'typescript.tsx': 'jsxRegion,tsxRegion,litHtmlRegion',
        \ 'javascript.jsx': 'jsxRegion,litHtmlRegion',
        \ 'javascript':     'litHtmlRegion',
        \ 'typescript':     'litHtmlRegion',
        \ }

vim-html-template-literals's Issues

Request for htmlStartTag

Hello,

for syntax object parsing in the html, there is a htmlEndtag but not a htmlStartTag. This is a request for a htmlStartTag, please. This will allow theming <> </> to match.

Thanks!
-Darin

Using a < or > within CSS inside an HTML template string breaks highlighting.

Example strings:

const s1 = html`<style>p:before { content: "<"; }</style>`;
const s2 = html`<style>p:after { content: ">"; }</style>`;

In the first string, the < appears to be interpreted as the beginning on an html tag, which breaks the highlighting in the remainder of the string.

In the second string, the > is highlighted as a syntax error.

A workaround is to use unicode codepoints instead. E.g.

const s1 = html`<style>p:before { content: "\\3c"; }</style>`;
const s2 = html`<style>p:after { content: "\\3e"; }</style>`;

Indentation edge case tests

It's pretty easy to find edge cases where auto-indentation is incorrect.

I bet it would be cool to introduce some vimscript tests. I'm aware that vader.vim exists and it can test indentation. That's probably the best way to go about finding and fixing edge cases.

Highlighting not reset in some cases

Hi @jonsmithers, in some cases the plugin doesn't reset the highlighting, it seems. For example in the following code, the function declaration is highlighted incorrectly.

/*
 * @param {{ interval?: number, timeout?: number }} [options] timeout and polling interval
 */
function waitForPredicate() {}

When I disable the plugin, it works correctly again.
I have noticed similar effects at some other occasions, as well. On one accasion I had a file where I put a template literal at the top and the rest of the javascript code was incorrectly highlighted after that. If you want me to give you any more information, please let me know.

Indention Regression found from experimental to v1

I noticed on the latest version indention is broken where

              <paper-input
                name="zipcode" 
hitting enter returns
 HERE

Where a old version of experimental

             <paper-input
               name="zipcode" 
              hitting enter returns 
              HERE

Here is the current after/indent/javascript.vim with broken indention
Here is a old version where indention is working

NOTE: Also found indention breakage in CSS that did not exist in old version

Activation through assignment to custom variable

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!

CSS within <style> elements is not highlighted.

Example template string:

const s = html`<style>p { font-weight: bold; }</style>`;

The content of the style tag does not get highlighted as CSS.

Using a separate css tagged template is a workaround, but it would be a nice feature if this worked within an html template string.

Unmaintainable indentation code

The indentation code (indent/javascript.vim) is rather obtuse, sloppy, and poorly tested. I think there's a lot of room for cleanup and testing.

Support for CSS template literals

Hi there! Thanks for this awesome plugin, it's been invaluable at my job.

I've just started using LitElement, and the standard (at least at our company) for that is to return the styles separate from the render function. There would be a method like this:

static get styles() {
		return css`
			:host {
				display: inline-block;
			}
			:host([hidden]) {
				display: none;
			}
		`;
	}

Is it possible and/or not too difficult to be able to have CSS syntax highlighting in there?

Integrate othree html5 plugin for the HTML highlighting?

Thanks for the effort in this.

The highlighting is a bit off... for instance, a opening <div> tag would be a different color than the closing </div> tag.

Looking at the source code it is pulling all of it coloring from vim-javascript(which is great for Js...it is my favorite plugin).

Is there a way to also integrate https://github.com/othree/html5.vim for the HTML highlighting portion? The html5 plugin is much cleaner and does a better job on the HTML portion than the JS does.

I spent about 5 hours trying to make it work with no success.

Improve indentation

I think utilizing vim's searchpair() function would help a lot with implementing proper implementation at the seams of html`...` and ${...} expressions. It'd also be good to take a step back and rework the basic outline of the indent algorithm.

Compatibility with coc.nvim

How can i make it work with https://github.com/neoclide/coc.nvim and https://github.com/neoclide/coc-tsserver?