eslint-plugin-svelte 3.5.0 → 3.6.0

package/README.md

@@ -30,8 +30,8 @@
 
 ## Introduction
 
-`eslint-plugin-svelte` is the official [ESLint](https://eslint.org/) plugin for [Svelte](https://svelte.dev/).  
-It leverages the AST generated by [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) to provide custom linting for Svelte.  
+`eslint-plugin-svelte` is the official [ESLint](https://eslint.org/) plugin for [Svelte](https://svelte.dev/).\
+It leverages the AST generated by [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) to provide custom linting for Svelte.\
 Note that `eslint-plugin-svelte` and `svelte-eslint-parser` cannot be used alongside [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3).
 
 <!--USAGE_SECTION_START-->
@@ -219,8 +219,8 @@ export default [
 
 ## Editor Integrations
 
-**Visual Studio Code**  
-Install [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).  
+**Visual Studio Code**\
+Install [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).\
 Configure `.svelte` files in `.vscode/settings.json`:
 
 ```json
@@ -247,8 +247,8 @@ This project follows [Semantic Versioning](https://semver.org/). Unlike [ESLint
 <!-- prettier-ignore-start -->
 <!--RULES_SECTION_START-->
 
-:wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.  
-:bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).  
+:wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.\
+:bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).\
 :star: Indicates that the rule is included in the `plugin:svelte/recommended` config.
 
 <!--RULES_TABLE_START-->
@@ -294,6 +294,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 |:--------|:------------|:---|
 | [svelte/block-lang](https://sveltejs.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. | :bulb: |
 | [svelte/button-has-type](https://sveltejs.github.io/eslint-plugin-svelte/rules/button-has-type/) | disallow usage of button without an explicit type attribute |  |
+| [svelte/no-add-event-listener](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-add-event-listener/) | Warns against the use of `addEventListener` | :bulb: |
 | [svelte/no-at-debug-tags](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/) | disallow the use of `{@debug}` | :star::bulb: |
 | [svelte/no-ignored-unsubscribe](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-ignored-unsubscribe/) | disallow ignoring the unsubscribe method returned by the `subscribe()` on Svelte stores. |  |
 | [svelte/no-immutable-reactive-statements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-immutable-reactive-statements/) | disallow reactive statements that don't reference reactive values. | :star: |
@@ -310,6 +311,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-useless-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :star::wrench: |
 | [svelte/prefer-const](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-const/) | Require `const` declarations for variables that are never reassigned after declared | :wrench: |
 | [svelte/prefer-destructured-store-props](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-destructured-store-props/) | destructure values from object stores for better change tracking & fewer redraws | :bulb: |
+| [svelte/prefer-writable-derived](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-writable-derived/) | Prefer using writable $derived instead of $state and $effect | :star::bulb: |
 | [svelte/require-each-key](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-each-key/) | require keyed `{#each}` block | :star: |
 | [svelte/require-event-dispatcher-types](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-event-dispatcher-types/) | require type parameters for `createEventDispatcher` | :star: |
 | [svelte/require-optimized-style-attribute](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/) | require style attributes that can be optimized |  |
@@ -337,6 +339,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 | [svelte/no-spaces-around-equal-signs-in-attribute](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-spaces-around-equal-signs-in-attribute/) | disallow spaces around equal signs in attribute | :wrench: |
 | [svelte/prefer-class-directive](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-class-directive/) | require class directives instead of ternary expressions | :wrench: |
 | [svelte/prefer-style-directive](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-style-directive/) | require style directives instead of style attribute | :wrench: |
+| [svelte/require-event-prefix](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-event-prefix/) | require component event names to start with "on" |  |
 | [svelte/shorthand-attribute](https://sveltejs.github.io/eslint-plugin-svelte/rules/shorthand-attribute/) | enforce use of shorthand syntax in attribute | :wrench: |
 | [svelte/shorthand-directive](https://sveltejs.github.io/eslint-plugin-svelte/rules/shorthand-directive/) | enforce use of shorthand syntax in directives | :wrench: |
 | [svelte/sort-attributes](https://sveltejs.github.io/eslint-plugin-svelte/rules/sort-attributes/) | enforce order of attributes | :wrench: |
@@ -398,7 +401,7 @@ These rules relate to this plugin works:
 
 ## Contributing
 
-Contributions are welcome! Please open an issue or submit a PR. For more details, see [CONTRIBUTING.md](./CONTRIBUTING.md).  
+Contributions are welcome! Please open an issue or submit a PR. For more details, see [CONTRIBUTING.md](./CONTRIBUTING.md).\
 Refer to [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) for AST details.
 
 <!--DOCS_IGNORE_END-->

package/lib/configs/flat/recommended.js

@@ -33,6 +33,7 @@ const config = [
             'svelte/no-unused-svelte-ignore': 'error',
             'svelte/no-useless-children-snippet': 'error',
             'svelte/no-useless-mustaches': 'error',
+            'svelte/prefer-writable-derived': 'error',
             'svelte/require-each-key': 'error',
             'svelte/require-event-dispatcher-types': 'error',
             'svelte/require-store-reactive-access': 'error',

package/lib/main.d.ts

@@ -14,7 +14,7 @@ export declare const configs: {
 export declare const rules: Record<string, Rule.RuleModule>;
 export declare const meta: {
     name: "eslint-plugin-svelte";
-    version: "3.5.0";
+    version: "3.6.0";
 };
 export declare const processors: {
     '.svelte': typeof processor;

package/lib/meta.d.ts

@@ -1,2 +1,2 @@
-export declare const name = "eslint-plugin-svelte";
-export declare const version = "3.5.0";
+export declare const name: "eslint-plugin-svelte";
+export declare const version: "3.6.0";

package/lib/meta.js

@@ -2,4 +2,4 @@
 // This file has been automatically generated,
 // in order to update its content execute "pnpm run update"
 export const name = 'eslint-plugin-svelte';
-export const version = '3.5.0';
+export const version = '3.6.0';

package/lib/rule-types.d.ts

@@ -92,6 +92,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/mustache-spacing/
      */
     'svelte/mustache-spacing'?: Linter.RuleEntry<SvelteMustacheSpacing>;
+    /**
+     * Warns against the use of `addEventListener`
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-add-event-listener/
+     */
+    'svelte/no-add-event-listener'?: Linter.RuleEntry<[]>;
     /**
      * disallow the use of `{@debug}`
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/
@@ -299,6 +304,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-style-directive/
      */
     'svelte/prefer-style-directive'?: Linter.RuleEntry<[]>;
+    /**
+     * Prefer using writable $derived instead of $state and $effect
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-writable-derived/
+     */
+    'svelte/prefer-writable-derived'?: Linter.RuleEntry<[]>;
     /**
      * require keyed `{#each}` block
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/require-each-key/
@@ -309,6 +319,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/require-event-dispatcher-types/
      */
     'svelte/require-event-dispatcher-types'?: Linter.RuleEntry<[]>;
+    /**
+     * require component event names to start with "on"
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/require-event-prefix/
+     */
+    'svelte/require-event-prefix'?: Linter.RuleEntry<SvelteRequireEventPrefix>;
     /**
      * require style attributes that can be optimized
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/
@@ -568,6 +583,11 @@ type SveltePreferConst = [] | [
         excludedRunes?: string[];
     }
 ];
+type SvelteRequireEventPrefix = [] | [
+    {
+        checkAsyncFunctions?: boolean;
+    }
+];
 type SvelteShorthandAttribute = [] | [
     {
         prefer?: ("always" | "never");

package/lib/rules/consistent-selector-style.js

@@ -1,4 +1,5 @@
 import { findClassesInAttribute } from '../utils/ast-utils.js';
+import { extractExpressionPrefixLiteral, extractExpressionSuffixLiteral } from '../utils/expression-affixes.js';
 import { createRule } from '../utils/index.js';
 export default createRule('consistent-selector-style', {
     meta: {
@@ -49,9 +50,19 @@ export default createRule('consistent-selector-style', {
         const checkGlobal = context.options[0]?.checkGlobal ?? false;
         const style = context.options[0]?.style ?? ['type', 'id', 'class'];
         const whitelistedClasses = [];
-        const classSelections = new Map();
-        const idSelections = new Map();
-        const typeSelections = new Map();
+        const selections = {
+            class: {
+                exact: new Map(),
+                affixes: new Map(),
+                universalSelector: false
+            },
+            id: {
+                exact: new Map(),
+                affixes: new Map(),
+                universalSelector: false
+            },
+            type: new Map()
+        };
         /**
          * Checks selectors in a given PostCSS node
          */
@@ -89,10 +100,10 @@ export default createRule('consistent-selector-style', {
          * Checks a class selector
          */
         function checkClassSelector(node) {
-            if (whitelistedClasses.includes(node.value)) {
+            if (selections.class.universalSelector || whitelistedClasses.includes(node.value)) {
                 return;
             }
-            const selection = classSelections.get(node.value) ?? [];
+            const selection = matchSelection(selections.class, node.value);
             for (const styleValue of style) {
                 if (styleValue === 'class') {
                     return;
@@ -104,7 +115,7 @@ export default createRule('consistent-selector-style', {
                     });
                     return;
                 }
-                if (styleValue === 'type' && canUseTypeSelector(selection, typeSelections)) {
+                if (styleValue === 'type' && canUseTypeSelector(selection, selections.type)) {
                     context.report({
                         messageId: 'classShouldBeType',
                         loc: styleSelectorNodeLoc(node)
@@ -117,7 +128,10 @@ export default createRule('consistent-selector-style', {
          * Checks an ID selector
          */
         function checkIdSelector(node) {
-            const selection = idSelections.get(node.value) ?? [];
+            if (selections.id.universalSelector) {
+                return;
+            }
+            const selection = matchSelection(selections.id, node.value);
             for (const styleValue of style) {
                 if (styleValue === 'class') {
                     context.report({
@@ -129,7 +143,7 @@ export default createRule('consistent-selector-style', {
                 if (styleValue === 'id') {
                     return;
                 }
-                if (styleValue === 'type' && canUseTypeSelector(selection, typeSelections)) {
+                if (styleValue === 'type' && canUseTypeSelector(selection, selections.type)) {
                     context.report({
                         messageId: 'idShouldBeType',
                         loc: styleSelectorNodeLoc(node)
@@ -142,7 +156,7 @@ export default createRule('consistent-selector-style', {
          * Checks a type selector
          */
         function checkTypeSelector(node) {
-            const selection = typeSelections.get(node.value) ?? [];
+            const selection = selections.type.get(node.value) ?? [];
             for (const styleValue of style) {
                 if (styleValue === 'class') {
                     context.report({
@@ -168,21 +182,42 @@ export default createRule('consistent-selector-style', {
                 if (node.kind !== 'html') {
                     return;
                 }
-                addToArrayMap(typeSelections, node.name.name, node);
-                const classes = node.startTag.attributes.flatMap(findClassesInAttribute);
-                for (const className of classes) {
-                    addToArrayMap(classSelections, className, node);
-                }
+                addToArrayMap(selections.type, node.name.name, node);
                 for (const attribute of node.startTag.attributes) {
                     if (attribute.type === 'SvelteDirective' && attribute.kind === 'Class') {
                         whitelistedClasses.push(attribute.key.name.name);
                     }
-                    if (attribute.type !== 'SvelteAttribute' || attribute.key.name !== 'id') {
+                    for (const className of findClassesInAttribute(attribute)) {
+                        addToArrayMap(selections.class.exact, className, node);
+                    }
+                    if (attribute.type !== 'SvelteAttribute') {
                         continue;
                     }
                     for (const value of attribute.value) {
-                        if (value.type === 'SvelteLiteral') {
-                            addToArrayMap(idSelections, value.value, node);
+                        if (attribute.key.name === 'class' && value.type === 'SvelteMustacheTag') {
+                            const prefix = extractExpressionPrefixLiteral(context, value.expression);
+                            const suffix = extractExpressionSuffixLiteral(context, value.expression);
+                            if (prefix === null && suffix === null) {
+                                selections.class.universalSelector = true;
+                            }
+                            else {
+                                addToArrayMap(selections.class.affixes, [prefix, suffix], node);
+                            }
+                        }
+                        if (attribute.key.name === 'id') {
+                            if (value.type === 'SvelteLiteral') {
+                                addToArrayMap(selections.id.exact, value.value, node);
+                            }
+                            else if (value.type === 'SvelteMustacheTag') {
+                                const prefix = extractExpressionPrefixLiteral(context, value.expression);
+                                const suffix = extractExpressionSuffixLiteral(context, value.expression);
+                                if (prefix === null && suffix === null) {
+                                    selections.id.universalSelector = true;
+                                }
+                                else {
+                                    addToArrayMap(selections.id.affixes, [prefix, suffix], node);
+                                }
+                            }
                         }
                     }
                 }
@@ -204,6 +239,18 @@ export default createRule('consistent-selector-style', {
 function addToArrayMap(map, key, value) {
     map.set(key, (map.get(key) ?? []).concat(value));
 }
+/**
+ * Finds all nodes in selections that could be matched by key
+ */
+function matchSelection(selections, key) {
+    const selection = selections.exact.get(key) ?? [];
+    selections.affixes.forEach((nodes, [prefix, suffix]) => {
+        if ((prefix === null || key.startsWith(prefix)) && (suffix === null || key.endsWith(suffix))) {
+            selection.push(...nodes);
+        }
+    });
+    return selection;
+}
 /**
  * Checks whether a given selection could be obtained using an ID selector
  */

package/lib/rules/no-add-event-listener.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types.js").RuleModule;
+export default _default;

package/lib/rules/no-add-event-listener.js

@@ -0,0 +1,58 @@
+import { createRule } from '../utils/index.js';
+export default createRule('no-add-event-listener', {
+    meta: {
+        docs: {
+            description: 'Warns against the use of `addEventListener`',
+            category: 'Best Practices',
+            recommended: false
+        },
+        hasSuggestions: true,
+        schema: [],
+        messages: {
+            unexpected: 'Do not use `addEventListener`. Use the `on` function from `svelte/events` instead.'
+        },
+        type: 'suggestion',
+        conditions: [
+            {
+                svelteVersions: ['5']
+            }
+        ]
+    },
+    create(context) {
+        return {
+            CallExpression(node) {
+                const { callee } = node;
+                let target = null;
+                if (callee.type === 'MemberExpression' &&
+                    callee.property.type === 'Identifier' &&
+                    callee.property.name === 'addEventListener') {
+                    target = context.sourceCode.getText(callee.object);
+                }
+                else if (callee.type === 'Identifier' && callee.name === 'addEventListener') {
+                    target = 'window';
+                }
+                if (target === null) {
+                    return;
+                }
+                const openParen = context.sourceCode.getTokenAfter(callee);
+                const suggest = [];
+                if (openParen !== null) {
+                    suggest.push({
+                        desc: 'Use `on` from `svelte/events` instead',
+                        fix(fixer) {
+                            return [
+                                fixer.replaceText(callee, 'on'),
+                                fixer.insertTextAfter(openParen, `${target}, `)
+                            ];
+                        }
+                    });
+                }
+                context.report({
+                    node,
+                    messageId: 'unexpected',
+                    suggest
+                });
+            }
+        };
+    }
+});

package/lib/rules/no-navigation-without-base.js

@@ -1,6 +1,7 @@
 import { createRule } from '../utils/index.js';
 import { ReferenceTracker } from '@eslint-community/eslint-utils';
 import { findVariable } from '../utils/ast-utils.js';
+import { extractExpressionPrefixVariable } from '../utils/expression-affixes.js';
 export default createRule('no-navigation-without-base', {
     meta: {
         docs: {
@@ -163,57 +164,8 @@ function checkShallowNavigationCall(context, call, basePathNames, messageId) {
 }
 // Helper functions
 function expressionStartsWithBase(context, url, basePathNames) {
-    switch (url.type) {
-        case 'BinaryExpression':
-            return binaryExpressionStartsWithBase(context, url, basePathNames);
-        case 'Identifier':
-            return variableStartsWithBase(context, url, basePathNames);
-        case 'MemberExpression':
-            return memberExpressionStartsWithBase(url, basePathNames);
-        case 'TemplateLiteral':
-            return templateLiteralStartsWithBase(context, url, basePathNames);
-        default:
-            return false;
-    }
-}
-function binaryExpressionStartsWithBase(context, url, basePathNames) {
-    return (url.left.type !== 'PrivateIdentifier' &&
-        expressionStartsWithBase(context, url.left, basePathNames));
-}
-function memberExpressionStartsWithBase(url, basePathNames) {
-    return url.property.type === 'Identifier' && basePathNames.has(url.property);
-}
-function variableStartsWithBase(context, url, basePathNames) {
-    if (basePathNames.has(url)) {
-        return true;
-    }
-    const variable = findVariable(context, url);
-    if (variable === null ||
-        variable.identifiers.length !== 1 ||
-        variable.identifiers[0].parent.type !== 'VariableDeclarator' ||
-        variable.identifiers[0].parent.init === null) {
-        return false;
-    }
-    return expressionStartsWithBase(context, variable.identifiers[0].parent.init, basePathNames);
-}
-function templateLiteralStartsWithBase(context, url, basePathNames) {
-    const startingIdentifier = extractLiteralStartingExpression(url);
-    return (startingIdentifier !== undefined &&
-        expressionStartsWithBase(context, startingIdentifier, basePathNames));
-}
-function extractLiteralStartingExpression(templateLiteral) {
-    const literalParts = [...templateLiteral.expressions, ...templateLiteral.quasis].sort((a, b) => a.range[0] < b.range[0] ? -1 : 1);
-    for (const part of literalParts) {
-        if (part.type === 'TemplateElement' && part.value.raw === '') {
-            // Skip empty quasi in the begining
-            continue;
-        }
-        if (part.type !== 'TemplateElement') {
-            return part;
-        }
-        return undefined;
-    }
-    return undefined;
+    const prefixVariable = extractExpressionPrefixVariable(context, url);
+    return prefixVariable !== null && basePathNames.has(prefixVariable);
 }
 function expressionIsEmpty(url) {
     return ((url.type === 'Literal' && url.value === '') ||

package/lib/rules/no-unused-svelte-ignore.js

@@ -1,6 +1,8 @@
 import { getSvelteCompileWarnings } from '../shared/svelte-compile-warns/index.js';
 import { createRule } from '../utils/index.js';
 import { getSvelteIgnoreItems } from '../shared/svelte-compile-warns/ignore-comment.js';
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
+import semver from 'semver';
 export default createRule('no-unused-svelte-ignore', {
     meta: {
         docs: {
@@ -40,6 +42,14 @@ export default createRule('no-unused-svelte-ignore', {
             return {};
         }
         for (const unused of warnings.unusedIgnores) {
+            if (unused.code === 'reactive-component' && semver.satisfies(SVELTE_VERSION, '<5')) {
+                // Svelte v4 `reactive-component` warnings are not emitted
+                // when we use the `generate: false` compiler option.
+                // This is probably not the intended behavior of Svelte v4, but it's not going to be fixed,
+                // so as a workaround we'll ignore the `reactive-component` warnings.
+                // See https://github.com/sveltejs/eslint-plugin-svelte/issues/1192
+                continue;
+            }
             context.report({
                 loc: {
                     start: sourceCode.getLocFromIndex(unused.range[0]),

package/lib/rules/prefer-writable-derived.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types.js").RuleModule;
+export default _default;

package/lib/rules/prefer-writable-derived.js

@@ -0,0 +1,107 @@
+import { createRule } from '../utils/index.js';
+import { getScope } from '../utils/ast-utils.js';
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
+import semver from 'semver';
+// Writable derived were introduced in Svelte 5.25.0
+const shouldRun = semver.satisfies(SVELTE_VERSION, '>=5.25.0');
+function isEffectOrEffectPre(node) {
+    if (node.callee.type === 'Identifier') {
+        return node.callee.name === '$effect';
+    }
+    if (node.callee.type === 'MemberExpression') {
+        return (node.callee.object.type === 'Identifier' &&
+            node.callee.object.name === '$effect' &&
+            node.callee.property.type === 'Identifier' &&
+            node.callee.property.name === 'pre');
+    }
+    return false;
+}
+function isValidFunctionArgument(argument) {
+    if ((argument.type !== 'FunctionExpression' && argument.type !== 'ArrowFunctionExpression') ||
+        argument.params.length !== 0) {
+        return false;
+    }
+    if (argument.body.type !== 'BlockStatement') {
+        return false;
+    }
+    return argument.body.body.length === 1;
+}
+function isValidAssignment(statement) {
+    if (statement.type !== 'ExpressionStatement')
+        return false;
+    const { expression } = statement;
+    return (expression.type === 'AssignmentExpression' &&
+        expression.operator === '=' &&
+        expression.left.type === 'Identifier');
+}
+function isStateVariable(init) {
+    return (init?.type === 'CallExpression' &&
+        init.callee.type === 'Identifier' &&
+        init.callee.name === '$state');
+}
+export default createRule('prefer-writable-derived', {
+    meta: {
+        docs: {
+            description: 'Prefer using writable $derived instead of $state and $effect',
+            category: 'Best Practices',
+            recommended: true
+        },
+        schema: [],
+        messages: {
+            unexpected: 'Prefer using writable $derived instead of $state and $effect',
+            suggestRewrite: 'Rewrite $state and $effect to $derived'
+        },
+        type: 'suggestion',
+        conditions: [
+            {
+                svelteVersions: ['5'],
+                runes: [true, 'undetermined']
+            }
+        ],
+        hasSuggestions: true
+    },
+    create(context) {
+        if (!shouldRun) {
+            return {};
+        }
+        return {
+            CallExpression: (node) => {
+                if (!isEffectOrEffectPre(node) || node.arguments.length !== 1) {
+                    return;
+                }
+                const argument = node.arguments[0];
+                if (!isValidFunctionArgument(argument)) {
+                    return;
+                }
+                const statement = argument.body.body[0];
+                if (!isValidAssignment(statement)) {
+                    return;
+                }
+                const { left, right } = statement.expression;
+                const scope = getScope(context, statement);
+                const reference = scope.references.find((ref) => ref.identifier.type === 'Identifier' && ref.identifier.name === left.name);
+                const def = reference?.resolved?.defs?.[0];
+                if (!def || def.type !== 'Variable' || def.node.type !== 'VariableDeclarator') {
+                    return;
+                }
+                const { init } = def.node;
+                if (!isStateVariable(init)) {
+                    return;
+                }
+                context.report({
+                    node: def.node,
+                    messageId: 'unexpected',
+                    suggest: [
+                        {
+                            messageId: 'suggestRewrite',
+                            fix: (fixer) => {
+                                const rightCode = context.sourceCode.getText(right);
+                                return [fixer.replaceText(init, `$derived(${rightCode})`), fixer.remove(node)];
+                            }
+                        }
+                    ]
+                });
+            }
+        };
+    }
+});

package/lib/rules/require-event-prefix.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types.js").RuleModule;
+export default _default;

package/lib/rules/require-event-prefix.js

@@ -0,0 +1,93 @@
+import { createRule } from '../utils/index.js';
+import { getTypeScriptTools, isMethodSymbol, isPropertySignatureKind, isFunctionTypeKind, isMethodSignatureKind, isTypeReferenceKind, isIdentifierKind } from '../utils/ts-utils/index.js';
+export default createRule('require-event-prefix', {
+    meta: {
+        docs: {
+            description: 'require component event names to start with "on"',
+            category: 'Stylistic Issues',
+            conflictWithPrettier: false,
+            recommended: false
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    checkAsyncFunctions: {
+                        type: 'boolean'
+                    }
+                },
+                additionalProperties: false
+            }
+        ],
+        messages: {
+            nonPrefixedFunction: 'Component event name must start with "on".'
+        },
+        type: 'suggestion',
+        conditions: [
+            {
+                svelteVersions: ['5'],
+                svelteFileTypes: ['.svelte']
+            }
+        ]
+    },
+    create(context) {
+        const tsTools = getTypeScriptTools(context);
+        if (!tsTools) {
+            return {};
+        }
+        const checkAsyncFunctions = context.options[0]?.checkAsyncFunctions ?? false;
+        return {
+            CallExpression(node) {
+                const propsType = getPropsType(node, tsTools);
+                if (propsType === undefined) {
+                    return;
+                }
+                for (const property of propsType.getProperties()) {
+                    if (isFunctionLike(property, tsTools) &&
+                        !property.getName().startsWith('on') &&
+                        (checkAsyncFunctions || !isFunctionAsync(property, tsTools))) {
+                        const declarationTsNode = property.getDeclarations()?.[0];
+                        const declarationEstreeNode = declarationTsNode !== undefined
+                            ? tsTools.service.tsNodeToESTreeNodeMap.get(declarationTsNode)
+                            : undefined;
+                        context.report({
+                            node: declarationEstreeNode ?? node,
+                            messageId: 'nonPrefixedFunction'
+                        });
+                    }
+                }
+            }
+        };
+    }
+});
+function getPropsType(node, tsTools) {
+    if (node.callee.type !== 'Identifier' ||
+        node.callee.name !== '$props' ||
+        node.parent.type !== 'VariableDeclarator') {
+        return undefined;
+    }
+    const tsNode = tsTools.service.esTreeNodeToTSNodeMap.get(node.parent.id);
+    if (tsNode === undefined) {
+        return undefined;
+    }
+    return tsTools.service.program.getTypeChecker().getTypeAtLocation(tsNode);
+}
+function isFunctionLike(functionSymbol, tsTools) {
+    return (isMethodSymbol(functionSymbol, tsTools.ts) ||
+        (functionSymbol.valueDeclaration !== undefined &&
+            isPropertySignatureKind(functionSymbol.valueDeclaration, tsTools.ts) &&
+            functionSymbol.valueDeclaration.type !== undefined &&
+            isFunctionTypeKind(functionSymbol.valueDeclaration.type, tsTools.ts)));
+}
+function isFunctionAsync(functionSymbol, tsTools) {
+    return (functionSymbol.getDeclarations()?.some((declaration) => {
+        if (!isMethodSignatureKind(declaration, tsTools.ts)) {
+            return false;
+        }
+        if (declaration.type === undefined || !isTypeReferenceKind(declaration.type, tsTools.ts)) {
+            return false;
+        }
+        return (isIdentifierKind(declaration.type.typeName, tsTools.ts) &&
+            declaration.type.typeName.escapedText === 'Promise');
+    }) ?? false);
+}

package/lib/utils/expression-affixes.d.ts

@@ -0,0 +1,6 @@
+import type { TSESTree } from '@typescript-eslint/types';
+import type { RuleContext } from '../types.js';
+import type { AST } from 'svelte-eslint-parser';
+export declare function extractExpressionPrefixVariable(context: RuleContext, expression: TSESTree.Expression): TSESTree.Identifier | null;
+export declare function extractExpressionPrefixLiteral(context: RuleContext, expression: AST.SvelteLiteral | TSESTree.Node): string | null;
+export declare function extractExpressionSuffixLiteral(context: RuleContext, expression: AST.SvelteLiteral | TSESTree.Node): string | null;

package/lib/utils/expression-affixes.js

@@ -0,0 +1,138 @@
+import { findVariable } from './ast-utils.js';
+// Variable prefix extraction
+export function extractExpressionPrefixVariable(context, expression) {
+    switch (expression.type) {
+        case 'BinaryExpression':
+            return extractBinaryExpressionPrefixVariable(context, expression);
+        case 'Identifier':
+            return extractVariablePrefixVariable(context, expression);
+        case 'MemberExpression':
+            return extractMemberExpressionPrefixVariable(expression);
+        case 'TemplateLiteral':
+            return extractTemplateLiteralPrefixVariable(context, expression);
+        default:
+            return null;
+    }
+}
+function extractBinaryExpressionPrefixVariable(context, expression) {
+    return expression.left.type !== 'PrivateIdentifier'
+        ? extractExpressionPrefixVariable(context, expression.left)
+        : null;
+}
+function extractVariablePrefixVariable(context, expression) {
+    const variable = findVariable(context, expression);
+    if (variable === null ||
+        variable.identifiers.length !== 1 ||
+        variable.identifiers[0].parent.type !== 'VariableDeclarator' ||
+        variable.identifiers[0].parent.init === null) {
+        return expression;
+    }
+    return (extractExpressionPrefixVariable(context, variable.identifiers[0].parent.init) ?? expression);
+}
+function extractMemberExpressionPrefixVariable(expression) {
+    return expression.property.type === 'Identifier' ? expression.property : null;
+}
+function extractTemplateLiteralPrefixVariable(context, expression) {
+    const literalParts = [...expression.expressions, ...expression.quasis].sort((a, b) => a.range[0] < b.range[0] ? -1 : 1);
+    for (const part of literalParts) {
+        if (part.type === 'TemplateElement' && part.value.raw === '') {
+            // Skip empty quasi in the begining
+            continue;
+        }
+        if (part.type !== 'TemplateElement') {
+            return extractExpressionPrefixVariable(context, part);
+        }
+        return null;
+    }
+    return null;
+}
+// Literal prefix extraction
+export function extractExpressionPrefixLiteral(context, expression) {
+    switch (expression.type) {
+        case 'BinaryExpression':
+            return extractBinaryExpressionPrefixLiteral(context, expression);
+        case 'Identifier':
+            return extractVariablePrefixLiteral(context, expression);
+        case 'Literal':
+            return typeof expression.value === 'string' ? expression.value : null;
+        case 'SvelteLiteral':
+            return expression.value;
+        case 'TemplateLiteral':
+            return extractTemplateLiteralPrefixLiteral(context, expression);
+        default:
+            return null;
+    }
+}
+function extractBinaryExpressionPrefixLiteral(context, expression) {
+    return expression.left.type !== 'PrivateIdentifier'
+        ? extractExpressionPrefixLiteral(context, expression.left)
+        : null;
+}
+function extractVariablePrefixLiteral(context, expression) {
+    const variable = findVariable(context, expression);
+    if (variable === null ||
+        variable.identifiers.length !== 1 ||
+        variable.identifiers[0].parent.type !== 'VariableDeclarator' ||
+        variable.identifiers[0].parent.init === null) {
+        return null;
+    }
+    return extractExpressionPrefixLiteral(context, variable.identifiers[0].parent.init);
+}
+function extractTemplateLiteralPrefixLiteral(context, expression) {
+    const literalParts = [...expression.expressions, ...expression.quasis].sort((a, b) => a.range[0] < b.range[0] ? -1 : 1);
+    for (const part of literalParts) {
+        if (part.type === 'TemplateElement') {
+            if (part.value.raw === '') {
+                // Skip empty quasi
+                continue;
+            }
+            return part.value.raw;
+        }
+        return extractExpressionPrefixLiteral(context, part);
+    }
+    return null;
+}
+// Literal suffix extraction
+export function extractExpressionSuffixLiteral(context, expression) {
+    switch (expression.type) {
+        case 'BinaryExpression':
+            return extractBinaryExpressionSuffixLiteral(context, expression);
+        case 'Identifier':
+            return extractVariableSuffixLiteral(context, expression);
+        case 'Literal':
+            return typeof expression.value === 'string' ? expression.value : null;
+        case 'SvelteLiteral':
+            return expression.value;
+        case 'TemplateLiteral':
+            return extractTemplateLiteralSuffixLiteral(context, expression);
+        default:
+            return null;
+    }
+}
+function extractBinaryExpressionSuffixLiteral(context, expression) {
+    return extractExpressionSuffixLiteral(context, expression.right);
+}
+function extractVariableSuffixLiteral(context, expression) {
+    const variable = findVariable(context, expression);
+    if (variable === null ||
+        variable.identifiers.length !== 1 ||
+        variable.identifiers[0].parent.type !== 'VariableDeclarator' ||
+        variable.identifiers[0].parent.init === null) {
+        return null;
+    }
+    return extractExpressionSuffixLiteral(context, variable.identifiers[0].parent.init);
+}
+function extractTemplateLiteralSuffixLiteral(context, expression) {
+    const literalParts = [...expression.expressions, ...expression.quasis].sort((a, b) => a.range[0] < b.range[0] ? -1 : 1);
+    for (const part of literalParts.reverse()) {
+        if (part.type === 'TemplateElement') {
+            if (part.value.raw === '') {
+                // Skip empty quasi
+                continue;
+            }
+            return part.value.raw;
+        }
+        return extractExpressionSuffixLiteral(context, part);
+    }
+    return null;
+}

package/lib/utils/rules.js

@@ -15,6 +15,7 @@ import indent from '../rules/indent.js';
 import infiniteReactiveLoop from '../rules/infinite-reactive-loop.js';
 import maxAttributesPerLine from '../rules/max-attributes-per-line.js';
 import mustacheSpacing from '../rules/mustache-spacing.js';
+import noAddEventListener from '../rules/no-add-event-listener.js';
 import noAtDebugTags from '../rules/no-at-debug-tags.js';
 import noAtHtmlTags from '../rules/no-at-html-tags.js';
 import noDomManipulating from '../rules/no-dom-manipulating.js';
@@ -56,8 +57,10 @@ import preferClassDirective from '../rules/prefer-class-directive.js';
 import preferConst from '../rules/prefer-const.js';
 import preferDestructuredStoreProps from '../rules/prefer-destructured-store-props.js';
 import preferStyleDirective from '../rules/prefer-style-directive.js';
+import preferWritableDerived from '../rules/prefer-writable-derived.js';
 import requireEachKey from '../rules/require-each-key.js';
 import requireEventDispatcherTypes from '../rules/require-event-dispatcher-types.js';
+import requireEventPrefix from '../rules/require-event-prefix.js';
 import requireOptimizedStyleAttribute from '../rules/require-optimized-style-attribute.js';
 import requireStoreCallbacksUseSetParam from '../rules/require-store-callbacks-use-set-param.js';
 import requireStoreReactiveAccess from '../rules/require-store-reactive-access.js';
@@ -89,6 +92,7 @@ export const rules = [
     infiniteReactiveLoop,
     maxAttributesPerLine,
     mustacheSpacing,
+    noAddEventListener,
     noAtDebugTags,
     noAtHtmlTags,
     noDomManipulating,
@@ -130,8 +134,10 @@ export const rules = [
     preferConst,
     preferDestructuredStoreProps,
     preferStyleDirective,
+    preferWritableDerived,
     requireEachKey,
     requireEventDispatcherTypes,
+    requireEventPrefix,
     requireOptimizedStyleAttribute,
     requireStoreCallbacksUseSetParam,
     requireStoreReactiveAccess,

package/lib/utils/ts-utils/index.d.ts

@@ -112,3 +112,27 @@ export declare function getTypeName(type: TS.Type, tsTools: TSTools): string;
  * Return the type of the given property in the given type, or undefined if no such property exists
  */
 export declare function getTypeOfPropertyOfType(type: TS.Type, name: string, checker: TS.TypeChecker): TS.Type | undefined;
+/**
+ * Check whether the given symbol is a method type or not.
+ */
+export declare function isMethodSymbol(type: TS.Symbol, ts: TypeScript): boolean;
+/**
+ * Check whether the given node is a property signature kind or not.
+ */
+export declare function isPropertySignatureKind(node: TS.Node, ts: TypeScript): node is TS.PropertySignature;
+/**
+ * Check whether the given node is a function type kind or not.
+ */
+export declare function isFunctionTypeKind(node: TS.Node, ts: TypeScript): node is TS.FunctionTypeNode;
+/**
+ * Check whether the given node is a method signature kind or not.
+ */
+export declare function isMethodSignatureKind(node: TS.Node, ts: TypeScript): node is TS.MethodSignature;
+/**
+ * Check whether the given node is a type reference kind or not.
+ */
+export declare function isTypeReferenceKind(node: TS.Node, ts: TypeScript): node is TS.TypeReferenceNode;
+/**
+ * Check whether the given node is an identifier kind or not.
+ */
+export declare function isIdentifierKind(node: TS.Node, ts: TypeScript): node is TS.Identifier;

package/lib/utils/ts-utils/index.js

@@ -260,3 +260,39 @@ export function getTypeOfPropertyOfType(type, name, checker) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- getTypeOfPropertyOfType is an internal API of TS.
     return checker.getTypeOfPropertyOfType(type, name);
 }
+/**
+ * Check whether the given symbol is a method type or not.
+ */
+export function isMethodSymbol(type, ts) {
+    return (type.getFlags() & ts.SymbolFlags.Method) !== 0;
+}
+/**
+ * Check whether the given node is a property signature kind or not.
+ */
+export function isPropertySignatureKind(node, ts) {
+    return node.kind === ts.SyntaxKind.PropertySignature;
+}
+/**
+ * Check whether the given node is a function type kind or not.
+ */
+export function isFunctionTypeKind(node, ts) {
+    return node.kind === ts.SyntaxKind.FunctionType;
+}
+/**
+ * Check whether the given node is a method signature kind or not.
+ */
+export function isMethodSignatureKind(node, ts) {
+    return node.kind === ts.SyntaxKind.MethodSignature;
+}
+/**
+ * Check whether the given node is a type reference kind or not.
+ */
+export function isTypeReferenceKind(node, ts) {
+    return node.kind === ts.SyntaxKind.TypeReference;
+}
+/**
+ * Check whether the given node is an identifier kind or not.
+ */
+export function isIdentifierKind(node, ts) {
+    return node.kind === ts.SyntaxKind.Identifier;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "ESLint plugin for Svelte using AST",
   "repository": "git+https://github.com/sveltejs/eslint-plugin-svelte.git",
   "homepage": "https://sveltejs.github.io/eslint-plugin-svelte",
@@ -34,9 +34,8 @@
   "dependencies": {
     "@eslint-community/eslint-utils": "^4.4.1",
     "@jridgewell/sourcemap-codec": "^1.5.0",
-    "eslint-compat-utils": "^0.6.4",
     "esutils": "^2.0.3",
-    "known-css-properties": "^0.35.0",
+    "known-css-properties": "^0.36.0",
     "postcss": "^8.4.49",
     "postcss-load-config": "^3.1.4",
     "postcss-safe-parser": "^7.0.0",