Linting svg tag function input

NicoVogel commented 1 year ago

As far as I can see, this plugin does not further lint the svg function input from lit. But the rules that apply to the html syntax should also be appliable for svg from my point of view.

When looking at the code, then it seems to me that getting it to work at all, would require to not only check for html, but also for svg:

if (
  node.type === 'TaggedTemplateExpression' &&
  node.tag.type === 'Identifier' &&
  ['svg', 'html'].some(tag => tag === node.tag.name)
) {

Of course there is more to it, as it should be configurable if a rule should apply for both or only one. Furthermore, I have not tested it, so this might not even work.

Is there any interest in extending eslint-plugin-lit to also lint code like:

const createElement = (chars: string): SVGTemplateResult => svg`
  <text id="chars">${chars}</text>
`;

source: https://lit.dev/tutorials/svg-templates/

NicoVogel commented 1 year ago

I am also open to contribute here, but I would need some guidance as to what configuration options should be part of the first version and if you see any trouble ahead with reusing the already existing linting rules :)

43081j commented 1 year ago

we could possibly expose the template function names as a setting...

in an eslint config file, you can have:

{
  "settings": {
    "some-arbitrary-setting": "whatever"
  }
}

which then turns up on context.settings.

maybe we could:

introduce a isTemplateNode(context: Context, node: ESTree.Node): node is ESTree.TaggedTemplateExpression util to replace all the places we manually check the expression's tag name/type
have that function check for context.settings.lit.templateNames (very safely, i.e. null check the whole thing and check that its definitely an array), which falls back to ['svg', 'html']

43081j / eslint-plugin-lit

Linting svg tag function input #152