Disallow certain HTML elements from being used

[dkrutsko]

Motivation

Svelte can be used as a strongly component-based system where most of the elements used are components. Therefore, it makes sense that an error is raised whenever an element is specified but should not be used.

Description

Disallows certain built-in HTML elements from being used, instead there's likely a component that should be used in its place. For example, instead of using the h1 element, import and use the Heading element.

Examples

<script>
import Heading from 'heading.svelte';
import Code from 'code.svelte';
</script>

<!-- ✓ GOOD -->
<!-- [ 'error', { disallow: [ 'h1', 'code' ] } ] -->
<div />
<Heading type={1}>H1</Heading>
<Code>code</Code>

<!-- ✗ BAD -->
<h1>H1</h1>
<code>code</code>

Additional comments

No response

[ota-meshi]

Thank you for positing issue.
That rule sounds good to me.
I think the new rule is similar to the vue/no-restricted-html-elements rule, so its implementation may be helpful.
https://eslint.vuejs.org/rules/no-restricted-html-elements.html

I think you can also use the no-restricted-syntax rule if you want to get it right now.
https://eslint.org/docs/latest/rules/no-restricted-syntax

  "rules": {
    "no-restricted-syntax": ["error", "SvelteElement[kind='html'] > SvelteName.name[name=/^(?:h1|code)$/]"]
  }

[dkrutsko]

@ota-meshi This is a good reference, what I would add, however, is the ability to specify an array of elements when using the { element, message } syntax.

{
	'svelte/no-restricted-html-elements':
	[
		'error',
		{
			element: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
			message: 'Prefer use of our custom <Heading /> component'
		}
	]
}

[ota-meshi]

Welcome pull requests.

[dkrutsko]

I'll see if I can find some time to work on this!