feat: Added the experimental-require-strict-events rule (#365)

Author: marekdedic

.changeset/tasty-houses-behave.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+Added the experimental-require-strict-events rule

README.md

@@ -373,6 +373,14 @@ These rules extend the rules provided by ESLint itself, or other plugins to work
 | [svelte/no-inner-declarations](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-inner-declarations/) | disallow variable or `function` declarations in nested blocks | :star: |
 | [svelte/no-trailing-spaces](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-trailing-spaces/) | disallow trailing whitespace at the end of lines | :wrench: |
 
+## Experimental
+
+:warning: These rules are considered experimental and may change or be removed in the future:
+
+| Rule ID | Description | |
+|:--------|:------------|:---|
+| [svelte/experimental-require-strict-events](https://ota-meshi.github.io/eslint-plugin-svelte/rules/experimental-require-strict-events/) | require the strictEvents attribute on <script> tags | |
+
 ## System
 
 These rules relate to this plugin works:

docs/rules.md

@@ -92,6 +92,14 @@ These rules extend the rules provided by ESLint itself, or other plugins to work
 | [svelte/no-inner-declarations](./rules/no-inner-declarations.md) | disallow variable or `function` declarations in nested blocks | :star: |
 | [svelte/no-trailing-spaces](./rules/no-trailing-spaces.md) | disallow trailing whitespace at the end of lines | :wrench: |
 
+## Experimental
+
+:warning: These rules are considered experimental and may change or be removed in the future:
+
+| Rule ID | Description | |
+|:--------|:------------|:---|
+| [svelte/experimental-require-strict-events](./rules/experimental-require-strict-events.md) | require the strictEvents attribute on <script> tags | |
+
 ## System
 
 These rules relate to this plugin works:

docs/rules/experimental-require-strict-events.md

@@ -0,0 +1,47 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "svelte/experimental-require-strict-events"
+description: "require the strictEvents attribute on <script> tags"
+---
+
+# svelte/experimental-require-strict-events
+
+> require the strictEvents attribute on <script> tags
+
+- :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 enforces the presence of the `strictEvents` attribute on the main `<script>` tag of all components. This attributes enforces typechecking of events dispatched by the component, e.g. making it a typescript error to listen to any non-existent events. Alternatively, the event types may be defined manually by declaring the `$$Events` interface. The `strictEvents` attribute and the `$$Events` interface are experimental and are documented in [svelte RFC #38](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md#typing-events).
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<!-- eslint svelte/experimental-require-strict-events: "error" -->
+
+<!-- ✓ GOOD -->
+<script lang="ts" strictEvents>
+</script>
+
+<script lang="ts">
+ interface $$Events {}
+</script>
+
+<!-- ✗ BAD -->
+<script lang="ts">
+</script>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/experimental-require-strict-events.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/experimental-require-strict-events.ts)

src/rules/experimental-require-strict-events.ts

@@ -0,0 +1,46 @@
+import type { AST } from "svelte-eslint-parser"
+
+import { createRule } from "../utils"
+import { findAttribute, getLangValue } from "../utils/ast-utils"
+
+export default createRule("experimental-require-strict-events", {
+ meta: {
+ docs: {
+ description: "require the strictEvents attribute on <script> tags",
+ category: "Experimental",
+ recommended: false,
+ },
+ schema: [],
+ messages: {
+ missingStrictEvents: `The component must have the strictEvents attribute on its <script> tag or it must define the $$Events interface.`,
+ },
+ type: "suggestion",
+ },
+ create(context) {
+ let isTs = false
+ let hasAttribute = false
+ let hasInterface = false
+ let scriptNode: AST.SvelteScriptElement
+ return {
+ SvelteScriptElement(node) {
+ const lang = getLangValue(node)?.toLowerCase()
+ isTs = lang === "ts" || lang === "typescript"
+ hasAttribute = findAttribute(node, "strictEvents") !== null
+ scriptNode = node
+ },
+ TSInterfaceDeclaration(node) {
+ if (node.id.name === "$$Events") {
+ hasInterface = true
+ }
+ },
+ "Program:exit"() {
+ if (isTs && !hasAttribute && !hasInterface) {
+ context.report({
+ node: scriptNode,
+ messageId: "missingStrictEvents",
+ })
+ }
+ },
+ }
+ },
+})

src/types.ts

@@ -53,6 +53,7 @@ export type RuleCategory =
  | "Best Practices"
  | "Stylistic Issues"
  | "Extension Rules"
+ | "Experimental"
  | "System"
 
 export interface RuleMetaData {

src/utils/rules.ts

@@ -3,6 +3,7 @@ import typescriptEslintNoUnnecessaryCondition from "../rules/@typescript-eslint/
 import buttonHasType from "../rules/button-has-type"
 import commentDirective from "../rules/comment-directive"
 import derivedHasSameInputsOutputs from "../rules/derived-has-same-inputs-outputs"
+import experimentalRequireStrictEvents from "../rules/experimental-require-strict-events"
 import firstAttributeLinebreak from "../rules/first-attribute-linebreak"
 import htmlClosingBracketSpacing from "../rules/html-closing-bracket-spacing"
 import htmlQuotes from "../rules/html-quotes"
@@ -55,6 +56,7 @@ export const rules = [
  buttonHasType,
  commentDirective,
  derivedHasSameInputsOutputs,
+ experimentalRequireStrictEvents,
  firstAttributeLinebreak,
  htmlClosingBracketSpacing,
  htmlQuotes,

tests/fixtures/rules/experimental-require-strict-events/invalid/no-strict-events01-errors.yaml

@@ -0,0 +1,6 @@
+- message:
+ The component must have the strictEvents attribute on its <script> tag
+ or it must define the $$Events interface.
+ line: 1
+ column: 1
+ suggestions: null

tests/fixtures/rules/experimental-require-strict-events/invalid/no-strict-events01-input.svelte

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

tests/fixtures/rules/experimental-require-strict-events/valid/has-events-interface01-input.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+ interface $$Events {}
+</script>