feat: Add fixes for block-lang rule

packages/eslint-plugin-svelte/src/rules/block-lang.ts

@@ -1,5 +1,5 @@
 import { createRule } from '../utils/index.js';
-import { getLangValue } from '../utils/ast-utils.js';
+import { findAttribute, getLangValue } from '../utils/ast-utils.js';
 import type { SvelteScriptElement, SvelteStyleElement } from 'svelte-eslint-parser/lib/ast';
 import { getSourceCode } from '../utils/compat.js';
 
@@ -54,7 +54,8 @@ export default createRule('block-lang', {
 			}
 		],
 		messages: {},
-		type: 'suggestion'
+		type: 'suggestion',
+		hasSuggestions: true
 	},
 	create(context) {
 		if (!getSourceCode(context).parserServices.isSvelte) {
@@ -88,34 +89,109 @@ export default createRule('block-lang', {
 						loc: { line: 1, column: 1 },
 						message: `The <script> block should be present and its lang attribute should be ${prettyPrintLangs(
 							allowedScriptLangs
-						)}.`
+						)}.`,
+						suggest: allowedScriptLangs
+							.filter((lang) => lang != null && lang !== '')
+							.map((lang) => {
+								return {
+									desc: `Add a <script> block with the lang attribute set to "${lang}".`,
+									fix: (fixer) => {
+										const langAttributeText = getLangAttributeText(lang ?? '', true);
+										return fixer.insertTextAfterRange(
+											[0, 0],
+											`<script${langAttributeText}>\n</script>\n\n`
+										);
+									}
+								};
+							})
 					});
 				}
 				for (const scriptNode of scriptNodes) {
 					if (!allowedScriptLangs.includes(getLangValue(scriptNode)?.toLowerCase() ?? null)) {
+						const langAttribute = findAttribute(scriptNode, 'lang');
 						context.report({
 							node: scriptNode,
 							message: `The lang attribute of the <script> block should be ${prettyPrintLangs(
 								allowedScriptLangs
-							)}.`
+							)}.`,
+							suggest: allowedScriptLangs
+								.filter((lang) => lang != null && lang !== '')
+								.map((lang) => {
+									const langAttributeText = getLangAttributeText(lang ?? '', true);
+									if (langAttribute) {
+										return {
+											desc: `Add a <script> block with the lang attribute set to "${lang}".`,
+											fix: (fixer) => {
+												return fixer.replaceText(langAttribute, langAttributeText.trim());
+											}
+										};
+									}
+									return {
+										desc: `Add a <script> block with the lang attribute set to "${lang}".`,
+										fix: (fixer) => {
+											return fixer.insertTextBeforeRange(
+												[scriptNode.startTag.range[0] + 7, 0],
+												langAttributeText
+											);
+										}
+									};
+								})
 						});
 					}
 				}
 				if (styleNodes.length === 0 && enforceStylePresent) {
+					const sourceCode = getSourceCode(context);
 					context.report({
 						loc: { line: 1, column: 1 },
 						message: `The <style> block should be present and its lang attribute should be ${prettyPrintLangs(
 							allowedStyleLangs
-						)}.`
+						)}.`,
+						suggest: allowedStyleLangs
+							.filter((lang) => lang != null && lang !== '')
+							.map((lang) => {
+								return {
+									desc: `Add a <style> block with the lang attribute set to "${lang}".`,
+									fix: (fixer) => {
+										const langAttributeText = getLangAttributeText(lang ?? '', true);
+										return fixer.insertTextAfterRange(
+											[sourceCode.text.length, sourceCode.text.length],
+											`<style${langAttributeText}>\n</style>\n\n`
+										);
+									}
+								};
+							})
 					});
 				}
 				for (const styleNode of styleNodes) {
 					if (!allowedStyleLangs.includes(getLangValue(styleNode)?.toLowerCase() ?? null)) {
+						const langAttribute = findAttribute(styleNode, 'lang');
 						context.report({
 							node: styleNode,
 							message: `The lang attribute of the <style> block should be ${prettyPrintLangs(
 								allowedStyleLangs
-							)}.`
+							)}.`,
+							suggest: allowedStyleLangs
+								.filter((lang) => lang != null && lang !== '')
+								.map((lang) => {
+									const langAttributeText = getLangAttributeText(lang ?? '', true);
+									if (langAttribute) {
+										return {
+											desc: `Add a <style> block with the lang attribute set to "${lang}".`,
+											fix: (fixer) => {
+												return fixer.replaceText(langAttribute, langAttributeText.trim());
+											}
+										};
+									}
+									return {
+										desc: `Add a <style> block with the lang attribute set to "${lang}".`,
+										fix: (fixer) => {
+											return fixer.insertTextBeforeRange(
+												[styleNode.startTag.range[0] + 6, 0],
+												langAttributeText
+											);
+										}
+									};
+								})
 						});
 					}
 				}
@@ -131,11 +207,18 @@ function prettyPrintLangs(langs: (string | null)[]): string {
 	const hasNull = langs.includes(null);
 	const nonNullLangs = langs.filter((lang) => lang !== null).map((lang) => `"${lang}"`);
 	if (nonNullLangs.length === 0) {
-		// No special behaviour for `hasNull`, because that can never happen.
+		// No special behavior for `hasNull`, because that can never happen.
 		return 'omitted';
 	}
 	const hasNullText = hasNull ? 'either omitted or ' : '';
 	const nonNullText =
 		nonNullLangs.length === 1 ? nonNullLangs[0] : `one of ${nonNullLangs.join(', ')}`;
 	return hasNullText + nonNullText;
 }
+
+/**
+ * Returns the lang attribute text, with special handling of the `null` lang option with respect to the `prependWhitespace` argument.
+ */
+function getLangAttributeText(lang: string, prependWhitespace: boolean): string {
+	return `${prependWhitespace ? ' ' : ''}lang="${lang}"`;
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/javascript/javascript-as-style-lang01-errors.yaml

@@ -1,4 +1,9 @@
 - message: The lang attribute of the <script> block should be "javascript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "javascript".
+      output: |
+        <script lang="javascript"></script>
+
+        <style lang="javascript"></style>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/javascript/js01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "javascript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "javascript".
+      output: |
+        <script lang="javascript"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/javascript/null01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "javascript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "javascript".
+      output: |
+        <script lang="javascript"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/javascript/ts01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "javascript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "javascript".
+      output: |
+        <script lang="javascript"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/javascript/typescript01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "javascript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "javascript".
+      output: |
+        <script lang="javascript"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/js/javascript01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "js".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "js".
+      output: |
+        <script lang="js"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/js/js-as-style-lang01-errors.yaml

@@ -1,4 +1,9 @@
 - message: The lang attribute of the <script> block should be "js".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "js".
+      output: |
+        <script lang="js"></script>
+
+        <style lang="js"></style>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/js/null01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "js".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "js".
+      output: |
+        <script lang="js"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/js/ts01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "js".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "js".
+      output: |
+        <script lang="js"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/js/typescript01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "js".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "js".
+      output: |
+        <script lang="js"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/module-context/javascript01-errors.yaml

@@ -1,4 +1,9 @@
 - message: The lang attribute of the <script> block should be "ts".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script context="module" lang="ts"></script>
+
+        <script lang="ts"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/module-context/js01-errors.yaml

@@ -1,4 +1,9 @@
 - message: The lang attribute of the <script> block should be "ts".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script context="module" lang="ts"></script>
+
+        <script lang="ts"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/module-context/null01-errors.yaml

@@ -1,4 +1,9 @@
 - message: The lang attribute of the <script> block should be "ts".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts" context="module"></script>
+
+        <script lang="ts"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/module-context/ts-as-style-lang01-errors.yaml

@@ -1,4 +1,11 @@
 - message: The lang attribute of the <script> block should be "ts".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts" context="module"></script>
+
+        <script lang="ts"></script>
+
+        <style lang="ts"></style>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/module-context/typescript01-errors.yaml

@@ -1,4 +1,9 @@
 - message: The lang attribute of the <script> block should be "ts".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script context="module" lang="ts"></script>
+
+        <script lang="ts"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/multiple/javascript01-errors.yaml

@@ -2,4 +2,10 @@
     one of "ts", "typescript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts"></script>
+    - desc: Add a <script> block with the lang attribute set to "typescript".
+      output: |
+        <script lang="typescript"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/multiple/js01-errors.yaml

@@ -2,4 +2,10 @@
     one of "ts", "typescript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts"></script>
+    - desc: Add a <script> block with the lang attribute set to "typescript".
+      output: |
+        <script lang="typescript"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/multiple/null-as-style-lang01-errors.yaml

@@ -2,4 +2,14 @@
     one of "ts", "typescript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts"></script>
+
+        <style></style>
+    - desc: Add a <script> block with the lang attribute set to "typescript".
+      output: |
+        <script lang="typescript"></script>
+
+        <style></style>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/multiple/ts-as-style-lang01-errors.yaml

@@ -2,4 +2,14 @@
     one of "ts", "typescript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts"></script>
+
+        <style lang="ts"></style>
+    - desc: Add a <script> block with the lang attribute set to "typescript".
+      output: |
+        <script lang="typescript"></script>
+
+        <style lang="ts"></style>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/multiple/typescript-as-style-lang01-errors.yaml

@@ -2,4 +2,14 @@
     one of "ts", "typescript".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts"></script>
+
+        <style lang="typescript"></style>
+    - desc: Add a <script> block with the lang attribute set to "typescript".
+      output: |
+        <script lang="typescript"></script>
+
+        <style lang="typescript"></style>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/shorthand/javascript01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "ts".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts"></script>

packages/eslint-plugin-svelte/tests/fixtures/rules/block-lang/invalid/script/shorthand/js01-errors.yaml

@@ -1,4 +1,7 @@
 - message: The lang attribute of the <script> block should be "ts".
   line: 1
   column: 1
-  suggestions: null
+  suggestions:
+    - desc: Add a <script> block with the lang attribute set to "ts".
+      output: |
+        <script lang="ts"></script>