feat: Added the block-lang rule

.changeset/slimy-donkeys-pump.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat: added the `svelte/block-lang` rule

README.md

@@ -330,6 +330,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [svelte/block-lang](https://ota-meshi.github.io/eslint-plugin-svelte/rules/block-lang/) | disallows the use of languages other than those specified in the configuration for the lang attribute of `<script>` and `<style>` blocks. |  |
 | [svelte/button-has-type](https://ota-meshi.github.io/eslint-plugin-svelte/rules/button-has-type/) | disallow usage of button without an explicit type attribute |  |
 | [svelte/no-at-debug-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/) | disallow the use of `{@debug}` | :star: |
 | [svelte/no-reactive-functions](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-reactive-functions/) | it's not necessary to define functions in reactive statements | :bulb: |

docs/rules.md

@@ -49,6 +49,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [svelte/block-lang](./rules/block-lang.md) | disallows the use of languages other than those specified in the configuration for the lang attribute of `<script>` and `<style>` blocks. |  |
 | [svelte/button-has-type](./rules/button-has-type.md) | disallow usage of button without an explicit type attribute |  |
 | [svelte/no-at-debug-tags](./rules/no-at-debug-tags.md) | disallow the use of `{@debug}` | :star: |
 | [svelte/no-reactive-functions](./rules/no-reactive-functions.md) | it's not necessary to define functions in reactive statements | :bulb: |

docs/rules/block-lang.md

@@ -0,0 +1,88 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "svelte/block-lang"
+description: "disallows the use of languages other than those specified in the configuration for the lang attribute of `<script>` and `<style>` blocks."
+since: "v2.18.0"
+---
+
+# svelte/block-lang
+
+> disallows the use of languages other than those specified in the configuration for the lang attribute of `<script>` and `<style>` blocks.
+
+## :book: Rule Details
+
+This rule enforces all svelte components to use the same set of languages for their scripts and styles.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<!-- ✓ GOOD -->
+<script lang="ts">
+/* eslint svelte/block-lang: {"error", { "script": "ts" }} */
+</script>
+```
+
+</ESLintCodeBlock>
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<!-- ✓ GOOD -->
+<script>
+/* eslint svelte/block-lang: {"error", { "script": ["ts", null], "style": "scss" }} */
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+</ESLintCodeBlock>
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<!-- ✗ BAD -->
+<script>
+/* eslint svelte/block-lang: {"error", { "script": ["ts"] }} */
+</script>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+```json
+{
+  "svelte/block-lang": [
+    "error",
+    {
+      "enforceScriptPresent": true,
+      "enforceStylePresent": false,
+      "script": ["ts", null], // a list of languages or null to signify no language specified
+      "style": "scss" // same as for script, a single value can be used instead of an array.
+    }
+  ]
+}
+```
+
+- `enforceScriptPresent` ... Whether to enforce the presence of a `<script>` block with one of the given languages. This may be useful as for example TypeScript checks some uses of a component if it is defined as being TypeScript. Default `false`.
+- `enforceStylePresent` ... Whether to enforce the presence of a `<style>` block with one of the given languages. Default `false`.
+- `script` ... A list of languages allowed for the `<script>` block. If `null` is included, no `lang` attribute is also allowed. A plain string or `null` can be used instead of one-item array. Default `null`.
+- `style` ... A list of languages allowed for the `<style>` block. If `null` is included, no `lang` attribute is also allowed. A plain string or `null` can be used instead of one-item array. Default `null`.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-svelte v2.18.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/block-lang.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/block-lang.ts)

src/rules/block-lang.ts

@@ -0,0 +1,152 @@
+import { createRule } from "../utils"
+import { getLangValue } from "../utils/ast-utils"
+import type {
+  SvelteScriptElement,
+  SvelteStyleElement,
+} from "svelte-eslint-parser/lib/ast"
+
+export default createRule("block-lang", {
+  meta: {
+    docs: {
+      description:
+        "disallows the use of languages other than those specified in the configuration for the lang attribute of `<script>` and `<style>` blocks.",
+      category: "Best Practices",
+      recommended: false,
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          enforceScriptPresent: {
+            type: "boolean",
+          },
+          enforceStylePresent: {
+            type: "boolean",
+          },
+          script: {
+            oneOf: [
+              {
+                type: ["string", "null"],
+              },
+              {
+                type: "array",
+                items: {
+                  type: ["string", "null"],
+                },
+                minItems: 1,
+              },
+            ],
+          },
+          style: {
+            oneOf: [
+              {
+                type: ["string", "null"],
+              },
+              {
+                type: "array",
+                items: {
+                  type: ["string", "null"],
+                },
+                minItems: 1,
+              },
+            ],
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {},
+    type: "suggestion",
+  },
+  create(context) {
+    const enforceScriptPresent: boolean =
+      context.options[0]?.enforceScriptPresent ?? false
+    const enforceStylePresent: boolean =
+      context.options[0]?.enforceStylePresent ?? false
+
+    const scriptOption: string | null | (string | null)[] =
+      context.options[0]?.script ?? null
+    const allowedScriptLangs: (string | null)[] = Array.isArray(scriptOption)
+      ? scriptOption
+      : [scriptOption]
+    let scriptLang: string | null = null
+    let scriptNode: SvelteScriptElement | undefined = undefined
+
+    const styleOption: string | null | (string | null)[] =
+      context.options[0]?.style ?? null
+    const allowedStyleLangs: (string | null)[] = Array.isArray(styleOption)
+      ? styleOption
+      : [styleOption]
+    let styleLang: string | null = null
+    let styleNode: SvelteStyleElement | undefined = undefined
+
+    return {
+      SvelteScriptElement(node) {
+        scriptNode = node
+        scriptLang = getLangValue(node)?.toLowerCase() ?? null
+      },
+      SvelteStyleElement(node) {
+        styleNode = node
+        styleLang = getLangValue(node)?.toLowerCase() ?? null
+      },
+      "Program:exit"() {
+        if (!allowedScriptLangs.includes(scriptLang)) {
+          if (scriptNode !== undefined) {
+            context.report({
+              node: scriptNode,
+              message: `The lang attribute of the <script> block should be ${prettyPrintLangs(
+                allowedScriptLangs,
+              )}.`,
+            })
+          }
+        }
+        if (scriptNode === undefined && enforceScriptPresent) {
+          context.report({
+            loc: { line: 1, column: 1 },
+            message: `The <script> block should be present and its lang attribute should be ${prettyPrintLangs(
+              allowedScriptLangs,
+            )}.`,
+          })
+        }
+        if (!allowedStyleLangs.includes(styleLang)) {
+          if (styleNode !== undefined) {
+            context.report({
+              node: styleNode,
+              message: `The lang attribute of the <style> block should be ${prettyPrintLangs(
+                allowedStyleLangs,
+              )}.`,
+            })
+          }
+        }
+        if (styleNode === undefined && enforceStylePresent) {
+          context.report({
+            loc: { line: 1, column: 1 },
+            message: `The <style> block should be present and its lang attribute should be ${prettyPrintLangs(
+              allowedStyleLangs,
+            )}.`,
+          })
+        }
+      },
+    }
+  },
+})
+
+/**
+ * Prints the list of allowed languages, with special handling of the `null` option.
+ */
+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.
+    return "omitted"
+  }
+  const hasNullText = hasNull ? "either omitted or " : ""
+  const nonNullText =
+    nonNullLangs.length === 1
+      ? nonNullLangs[0]
+      : `one of ${nonNullLangs.join(", ")}`
+  return hasNullText + nonNullText
+}

src/utils/rules.ts

@@ -1,5 +1,6 @@
 import type { RuleModule } from "../types"
 import typescriptEslintNoUnnecessaryCondition from "../rules/@typescript-eslint/no-unnecessary-condition"
+import blockLang from "../rules/block-lang"
 import buttonHasType from "../rules/button-has-type"
 import commentDirective from "../rules/comment-directive"
 import derivedHasSameInputsOutputs from "../rules/derived-has-same-inputs-outputs"
@@ -54,6 +55,7 @@ import validPropNamesInKitPages from "../rules/valid-prop-names-in-kit-pages"
 
 export const rules = [
   typescriptEslintNoUnnecessaryCondition,
+  blockLang,
   buttonHasType,
   commentDirective,
   derivedHasSameInputsOutputs,

tests/fixtures/rules/block-lang/invalid/script/enforce/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "enforceScriptPresent": true }]
+}

tests/fixtures/rules/block-lang/invalid/script/enforce/no-script01-errors.yaml

@@ -0,0 +1,5 @@
+- message: The <script> block should be present and its lang attribute should be
+    omitted.
+  line: 1
+  column: 2
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/enforce/no-script01-input.svelte

@@ -0,0 +1,3 @@
+<b>Hello World!</b>
+
+<style></style>

tests/fixtures/rules/block-lang/invalid/script/javascript/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "script": ["javascript"], "style": ["javascript", null] }]
+}

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

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "javascript".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/javascript/javascript-as-style-lang01-input.svelte

@@ -0,0 +1,3 @@
+<script></script>
+
+<style lang="javascript"></style>

tests/fixtures/rules/block-lang/invalid/script/javascript/js01-errors.yaml

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "javascript".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/javascript/js01-input.svelte

@@ -0,0 +1 @@
+<script lang="js"></script>

tests/fixtures/rules/block-lang/invalid/script/javascript/null01-errors.yaml

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "javascript".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/javascript/null01-input.svelte

@@ -0,0 +1 @@
+<script></script>

tests/fixtures/rules/block-lang/invalid/script/javascript/ts01-errors.yaml

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "javascript".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/javascript/ts01-input.svelte

@@ -0,0 +1 @@
+<script lang="ts"></script>

tests/fixtures/rules/block-lang/invalid/script/javascript/typescript01-errors.yaml

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "javascript".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/javascript/typescript01-input.svelte

@@ -0,0 +1 @@
+<script lang="typescript"></script>

tests/fixtures/rules/block-lang/invalid/script/js/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "script": ["js"], "style": ["js", null] }]
+}

tests/fixtures/rules/block-lang/invalid/script/js/javascript01-errors.yaml

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "js".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/js/javascript01-input.svelte

@@ -0,0 +1 @@
+<script lang="javascript"></script>

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

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "js".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/js/js-as-style-lang01-input.svelte

@@ -0,0 +1,3 @@
+<script></script>
+
+<style lang="js"></style>

tests/fixtures/rules/block-lang/invalid/script/js/null01-errors.yaml

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "js".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/js/null01-input.svelte

@@ -0,0 +1 @@
+<script></script>

tests/fixtures/rules/block-lang/invalid/script/js/ts01-errors.yaml

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "js".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/js/ts01-input.svelte

@@ -0,0 +1 @@
+<script lang="ts"></script>

tests/fixtures/rules/block-lang/invalid/script/js/typescript01-errors.yaml

@@ -0,0 +1,4 @@
+- message: The lang attribute of the <script> block should be "js".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/js/typescript01-input.svelte

@@ -0,0 +1 @@
+<script lang="typescript"></script>

tests/fixtures/rules/block-lang/invalid/script/multiple/_config.json

@@ -0,0 +1,8 @@
+{
+  "options": [
+    {
+      "script": ["ts", "typescript", null],
+      "style": ["ts", "typescript", null]
+    }
+  ]
+}

tests/fixtures/rules/block-lang/invalid/script/multiple/javascript01-errors.yaml

@@ -0,0 +1,5 @@
+- message: The lang attribute of the <script> block should be either omitted or
+    one of "ts", "typescript".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/multiple/javascript01-input.svelte

@@ -0,0 +1 @@
+<script lang="javascript"></script>

tests/fixtures/rules/block-lang/invalid/script/multiple/js01-errors.yaml

@@ -0,0 +1,5 @@
+- message: The lang attribute of the <script> block should be either omitted or
+    one of "ts", "typescript".
+  line: 1
+  column: 1
+  suggestions: null

tests/fixtures/rules/block-lang/invalid/script/multiple/js01-input.svelte

@@ -0,0 +1 @@
+<script lang="js"></script>