feat: add rule no-invalid-html-elements

Author: mikededo

README.md

@@ -387,6 +387,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-dupe-use-directives](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-use-directives/) | disallow duplicate `use:` directives |  |
 | [svelte/no-dynamic-slot-name](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dynamic-slot-name/) | disallow dynamic slot name | :star::wrench: |
 | [svelte/no-export-load-in-svelte-module-in-kit-pages](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-export-load-in-svelte-module-in-kit-pages/) | disallow exporting load functions in `*.svelte` module in SvelteKit page components. |  |
+| [svelte/no-invalid-html-elements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-invalid-html-elements/) | Disallows valid Svelte 4 tags, that no are no longer valid in Svelte 5 |  |
 | [svelte/no-not-function-handler](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-not-function-handler/) | disallow use of not function in event handler | :star: |
 | [svelte/no-object-in-text-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-object-in-text-mustaches/) | disallow objects in text mustache interpolation | :star: |
 | [svelte/no-reactive-reassign](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-reassign/) | disallow reassigning reactive values |  |

docs/rules.md

@@ -24,6 +24,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-dupe-use-directives](./rules/no-dupe-use-directives.md)                                             | disallow duplicate `use:` directives                                                                                                   |                |
 | [svelte/no-dynamic-slot-name](./rules/no-dynamic-slot-name.md)                                                 | disallow dynamic slot name                                                                                                             | :star::wrench: |
 | [svelte/no-export-load-in-svelte-module-in-kit-pages](./rules/no-export-load-in-svelte-module-in-kit-pages.md) | disallow exporting load functions in `*.svelte` module in SvelteKit page components.                                                   |                |
+| [svelte/no-invalid-html-elements](./rules/no-invalid-html-elements.md)                                         | Disallows valid Svelte 4 tags, that no are no longer valid in Svelte 5                                                                 |                |
 | [svelte/no-not-function-handler](./rules/no-not-function-handler.md)                                           | disallow use of not function in event handler                                                                                          | :star:         |
 | [svelte/no-object-in-text-mustaches](./rules/no-object-in-text-mustaches.md)                                   | disallow objects in text mustache interpolation                                                                                        | :star:         |
 | [svelte/no-reactive-reassign](./rules/no-reactive-reassign.md)                                                 | disallow reassigning reactive values                                                                                                   |                |

docs/rules/no-invalid-html-elements.md

@@ -0,0 +1,57 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/no-invalid-html-elements'
+description: 'Disallows valid Svelte 4 tags, that no are no longer valid in Svelte 5'
+---
+
+# svelte/no-invalid-html-elements
+
+> Disallows valid Svelte 4 tags, that no are no longer valid in Svelte 5
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+This rule reports the invalid usage of `head`, `body`, `window`, `document`, `element` and `options` HTML elements, **in Svelte 5**. These elements were valid in Svelte 4, but since Svelte 5 they must be used with `svelte:`.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/no-invalid-html-elements: "error" */
+</script>
+
+<!-- ✓ GOOD -->
+<svelte:head>
+  <title>Invalid HTML Elements</title>
+</svelte:head>
+
+<!-- ✗ BAD -->
+<head>
+  <title>Invalid HTML Elements</title>
+</head>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+```json
+{
+  "svelte/no-invalid-html-elements": ["error", {}]
+}
+```
+
+-
+
+## :books: Further Reading
+
+- See special elements section in [Svelte docs](https://svelte.dev/docs/svelte/svelte-window)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-invalid-html-elements.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/no-invalid-html-elements.ts)

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -174,6 +174,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-inspect/
    */
   'svelte/no-inspect'?: Linter.RuleEntry<[]>
+  /**
+   * Disallows valid Svelte 4 tags, that no are no longer valid in Svelte 5
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-invalid-html-elements/
+   */
+  'svelte/no-invalid-html-elements'?: Linter.RuleEntry<[]>
   /**
    * disallow use of not function in event handler
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-not-function-handler/

packages/eslint-plugin-svelte/src/rules/no-invalid-html-elements.ts

@@ -0,0 +1,54 @@
+import type { AST } from 'svelte-eslint-parser';
+import { createRule } from '../utils';
+import { getSourceCode } from '../utils/compat';
+
+const INVALID_HTML_ELEMENTS = ['head', 'body', 'window', 'document', 'element', 'options'];
+const VALID_PREFIX = 'svelte:';
+
+export default createRule('no-invalid-html-elements', {
+	meta: {
+		docs: {
+			description: 'Disallows valid Svelte 4 tags, that no are no longer valid in Svelte 5',
+			category: 'Possible Errors',
+			// TODO: Switch to recommended in the major version
+			recommended: false
+		},
+		schema: [],
+		messages: {
+			invalidElement: 'Invalid {{name}} element, use svelte:{{name}} instead.'
+		},
+		type: 'problem', // 'problem', or 'layout',
+		fixable: 'code'
+	},
+	create(context) {
+		const sourceCode = getSourceCode(context);
+		const ctx = sourceCode.parserServices.svelteParseContext;
+		if (!(ctx?.compilerVersion ?? '').startsWith('5')) {
+			// Only applies to Svelte 5
+			return {};
+		}
+
+		return {
+			'SvelteElement[kind="html"]'(node: AST.SvelteHTMLElement) {
+				const { name } = node.name;
+				if (INVALID_HTML_ELEMENTS.includes(name)) {
+					context.report({
+						node,
+						messageId: 'invalidElement',
+						data: { name },
+						*fix(fixer) {
+							const { endTag } = node;
+							yield fixer.insertTextBeforeRange([node.range[0] + 1, node.range[1]], VALID_PREFIX);
+							if (endTag) {
+								yield fixer.insertTextBeforeRange(
+									[endTag.range[0] + 2, endTag.range[1]],
+									VALID_PREFIX
+								);
+							}
+						}
+					});
+				}
+			}
+		};
+	}
+});

packages/eslint-plugin-svelte/src/utils/rules.ts

@@ -34,6 +34,7 @@ import noImmutableReactiveStatements from '../rules/no-immutable-reactive-statem
 import noInlineStyles from '../rules/no-inline-styles';
 import noInnerDeclarations from '../rules/no-inner-declarations';
 import noInspect from '../rules/no-inspect';
+import noInvalidHtmlElements from '../rules/no-invalid-html-elements';
 import noNotFunctionHandler from '../rules/no-not-function-handler';
 import noObjectInTextMustaches from '../rules/no-object-in-text-mustaches';
 import noReactiveFunctions from '../rules/no-reactive-functions';
@@ -101,6 +102,7 @@ export const rules = [
 	noInlineStyles,
 	noInnerDeclarations,
 	noInspect,
+	noInvalidHtmlElements,
 	noNotFunctionHandler,
 	noObjectInTextMustaches,
 	noReactiveFunctions,

packages/eslint-plugin-svelte/tests/fixtures/rules/no-invalid-html-elements/invalid/test01-errors.yaml

@@ -0,0 +1,24 @@
+- message: Invalid head element, use svelte:head instead.
+  line: 1
+  column: 1
+  suggestions: null
+- message: Invalid body element, use svelte:body instead.
+  line: 2
+  column: 1
+  suggestions: null
+- message: Invalid window element, use svelte:window instead.
+  line: 3
+  column: 1
+  suggestions: null
+- message: Invalid document element, use svelte:document instead.
+  line: 4
+  column: 1
+  suggestions: null
+- message: Invalid element element, use svelte:element instead.
+  line: 5
+  column: 1
+  suggestions: null
+- message: Invalid options element, use svelte:options instead.
+  line: 6
+  column: 1
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-invalid-html-elements/invalid/test01-input.svelte

@@ -0,0 +1,6 @@
+<head></head>
+<body></body>
+<window></window>
+<document></document>
+<element this={{}}></element>
+<options></options>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-invalid-html-elements/invalid/test01-output.svelte

@@ -0,0 +1,6 @@
+<svelte:head></svelte:head>
+<svelte:body></svelte:body>
+<svelte:window></svelte:window>
+<svelte:document></svelte:document>
+<svelte:element this={{}}></svelte:element>
+<svelte:options></svelte:options>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-invalid-html-elements/valid/test01-input.svelte

@@ -0,0 +1,8 @@
+<svelte:options />
+
+<svelte:body />
+<svelte:document />
+<svelte:element this={{}}></svelte:element>
+<svelte:head></svelte:head>
+
+<svelte:window />

packages/eslint-plugin-svelte/tests/src/rules/no-invalid-html-elements.ts

@@ -0,0 +1,12 @@
+import { RuleTester } from '../../utils/eslint-compat';
+import rule from '../../../src/rules/no-invalid-html-elements';
+import { loadTestCases } from '../../utils/utils';
+
+const tester = new RuleTester({
+	languageOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module'
+	}
+});
+
+tester.run('no-invalid-html-elements', rule as any, loadTestCases('no-invalid-html-elements'));