feat: js template tags

[bennypowers]

closes #32

const ex = html`<div`
//                  ^ cursor

Pressing > in insert mode produces:

const ex = html`<div></div>`
//                   ^ cursor

then, escbciwpesc produces:

const ex = html`<p></p>`

also refactors attach function to use lua apis instead of vim.cmd

[colepeters]

Thanks for this update!

I've tried this out locally, and tags do complete and update as expected, but I'm getting the following error on tag completion:

E5108: Error executing lua: ...r/start/nvim-ts-autotag/lua/nvim-ts-autotag/internal.lua:450: attempt to index field 'cmd' (a function value)
stack traceback:
        ...r/start/nvim-ts-autotag/lua/nvim-ts-autotag/internal.lua:450: in function <...r/start/nvim-ts-autotag/lua/nvim-ts-autotag/internal.lua:446>

Not sure if this is an issue on my end or something with the update, but wanted to flag this in case.

[bennypowers]

you'll need nvim>=0.7 for that

[colepeters]

Already there! 😅

NVIM v0.7.2
Build type: Release
LuaJIT 2.1.0-beta3
Compiled by brew@BigSur

[bennypowers]

pull and try now

[colepeters]

Boom! Problem solved. Thanks so much!

[thekaganugur]

This is great but doesn't work for me. Can you maybe take a look? @bennypowers

https://user-images.githubusercontent.com/28161197/197333233-9c2fe985-68dc-4b5e-86e4-92713a8f1c57.mov

• Nvim version: 0.8.0
• Used plugin like: use { 'bennypowers/nvim-ts-autotag', { branch = 'template-tags' } }
• Normal HTML file still works.
• Not using lit, rather fast

[bennypowers]

the video you uploaded doesn't play, can you describe the error, and provide a source file?

[thekaganugur]

You can clone and try the example below.

I'm using fast not lit

import {html} from "@microsoft/fast-element";

https://github.com/thekaganugur/vite-fast-typescript-starter/blob/main/src/my-counter.ts#L9-L13

[bennypowers]

yeah that'll be on account of the generic assertion, probably

[bennypowers]

@thekaganugur I wasn't able to reproduce. I pasted this into a typescript file

    const template = html<MyCounter>`
        <button @click="${x => (x.count = Math.max(0, x.count - 1))}">-</button>
        <span>${x => x.count}</span>
        <button @click="${x => x.count++}">+</button>
    `;

then, with cursor on <button, I did o<div>, and received:

    const template = html<MyCounter>`
        <button @click="${x => (x.count = Math.max(0, x.count - 1))}">-</button>
        <span>${x => x.count}</span>
        <button @click="${x => x.count++}">+</button>
          <div></div>
    `;

[thekaganugur]

@bennypowers My bad, there was something wrong with my config. It works as expected. Thanks.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[bennypowers]

not stale

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[bennypowers]

Not stale

[windwp]

sorry can you rebase

[bennypowers]

Will take a look p.g. in the next few days/weeks, thanks for the 👀

[windwp]

hey you forgot to add default value for bufnr

diff --git i/lua/nvim-ts-autotag/internal.lua w/lua/nvim-ts-autotag/internal.lua
index 1bf9b07..501acb6 100644
--- i/lua/nvim-ts-autotag/internal.lua
+++ w/lua/nvim-ts-autotag/internal.lua
@@ -528,7 +528,7 @@ M.attach = function(bufnr, lang)
     if is_in_table(M.tbl_filetypes, vim.bo.filetype) then
         setup_ts_tag()
         if M.enable_close == true then
-        vim.api.nvim_buf_set_keymap(bufnr, 'i', ">", ">", {
+        vim.api.nvim_buf_set_keymap(bufnr or 0, 'i', ">", ">", {
           noremap = true,
           silent = true,
           callback = function()

it still not working on svelte because svelte use element tag maybe you can ignore check template with svelte and can you add test case.

[windwp]

ok thanks