eslint-plugin-svelte 3.17.0 → 3.18.0

package/README.md

@@ -301,6 +301,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-dupe-on-directives](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-on-directives/) | disallow duplicate `on:` directives | :star: |
 | [svelte/no-dupe-style-properties](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-style-properties/) | disallow duplicate style properties | :star: |
 | [svelte/no-dupe-use-directives](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-use-directives/) | disallow duplicate `use:` directives | :star: |
+| [svelte/no-nested-style-tag](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-nested-style-tag/) | disallow `<style>` elements nested inside other elements or blocks |  |
 | [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-raw-special-elements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-raw-special-elements/) | Checks for invalid raw HTML elements | :star::wrench: |
@@ -348,6 +349,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-useless-children-snippet](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-children-snippet/) | disallow explicit children snippet where it's not needed | :star: |
 | [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-derived-over-derived-by](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-derived-over-derived-by/) | disallow unnecessary `$derived.by()` when `$derived()` is sufficient | :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: |

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.17.0";
+    version: "3.18.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.17.0";
+export declare const version: "3.18.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.17.0';
+export const version = '3.18.0';

package/lib/rule-types.d.ts

@@ -193,6 +193,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-navigation-without-resolve/
      */
     'svelte/no-navigation-without-resolve'?: Linter.RuleEntry<SvelteNoNavigationWithoutResolve>;
+    /**
+     * disallow `<style>` elements nested inside other elements or blocks
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-nested-style-tag/
+     */
+    'svelte/no-nested-style-tag'?: Linter.RuleEntry<[]>;
     /**
      * disallow use of not function in event handler
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-not-function-handler/
@@ -308,6 +313,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-const/
      */
     'svelte/prefer-const'?: Linter.RuleEntry<SveltePreferConst>;
+    /**
+     * disallow unnecessary `$derived.by()` when `$derived()` is sufficient
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-derived-over-derived-by/
+     */
+    'svelte/prefer-derived-over-derived-by'?: Linter.RuleEntry<[]>;
     /**
      * destructure values from object stores for better change tracking & fewer redraws
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-destructured-store-props/

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

@@ -2,6 +2,7 @@ import { createRule } from '../utils/index.js';
 import { ReferenceTracker } from '@eslint-community/eslint-utils';
 import { FindVariableContext } from '../utils/ast-utils.js';
 import { findVariable } from '../utils/ast-utils.js';
+import { getTypeScriptTools, isNullType, isUndefinedType } from '../utils/ts-utils/index.js';
 export default createRule('no-navigation-without-resolve', {
     meta: {
         docs: {
@@ -43,6 +44,7 @@ export default createRule('no-navigation-without-resolve', {
         ]
     },
     create(context) {
+        const tsTools = getTypeScriptTools(context);
         let resolveReferences = new Set();
         const ignoreGoto = context.options[0]?.ignoreGoto ?? false;
         const ignorePushState = context.options[0]?.ignorePushState ?? false;
@@ -55,27 +57,27 @@ export default createRule('no-navigation-without-resolve', {
                 const { goto: gotoCalls, pushState: pushStateCalls, replaceState: replaceStateCalls } = extractFunctionCallReferences(referenceTracker);
                 if (!ignoreGoto) {
                     for (const gotoCall of gotoCalls) {
-                        checkGotoCall(context, gotoCall, resolveReferences);
+                        checkGotoCall(context, gotoCall, resolveReferences, tsTools);
                     }
                 }
                 if (!ignorePushState) {
                     for (const pushStateCall of pushStateCalls) {
-                        checkShallowNavigationCall(context, pushStateCall, resolveReferences, 'pushStateWithoutResolve');
+                        checkShallowNavigationCall(context, pushStateCall, resolveReferences, tsTools, 'pushStateWithoutResolve');
                     }
                 }
                 if (!ignoreReplaceState) {
                     for (const replaceStateCall of replaceStateCalls) {
-                        checkShallowNavigationCall(context, replaceStateCall, resolveReferences, 'replaceStateWithoutResolve');
+                        checkShallowNavigationCall(context, replaceStateCall, resolveReferences, tsTools, 'replaceStateWithoutResolve');
                     }
                 }
             },
             ...(!ignoreLinks && {
                 SvelteShorthandAttribute(node) {
-                    checkLinkAttribute(context, node, node.value, resolveReferences);
+                    checkLinkAttribute(context, node, node.value, resolveReferences, tsTools);
                 },
                 SvelteAttribute(node) {
                     if (node.value.length > 0) {
-                        checkLinkAttribute(context, node, node.value[0].type === 'SvelteMustacheTag' ? node.value[0].expression : node.value[0], resolveReferences);
+                        checkLinkAttribute(context, node, node.value[0].type === 'SvelteMustacheTag' ? node.value[0].expression : node.value[0], resolveReferences, tsTools);
                     }
                 }
             })
@@ -143,28 +145,28 @@ function extractFunctionCallReferences(referenceTracker) {
     };
 }
 // Actual function checking
-function checkGotoCall(context, call, resolveReferences) {
+function checkGotoCall(context, call, resolveReferences, tsTools) {
     if (call.arguments.length > 0 &&
-        !isValueAllowed(new FindVariableContext(context), call.arguments[0], resolveReferences, {})) {
+        !isValueAllowed(new FindVariableContext(context), call.arguments[0], resolveReferences, tsTools, {})) {
         context.report({ loc: call.arguments[0].loc, messageId: 'gotoWithoutResolve' });
     }
 }
-function checkShallowNavigationCall(context, call, resolveReferences, messageId) {
+function checkShallowNavigationCall(context, call, resolveReferences, tsTools, messageId) {
     if (call.arguments.length > 0 &&
-        !isValueAllowed(new FindVariableContext(context), call.arguments[0], resolveReferences, {
+        !isValueAllowed(new FindVariableContext(context), call.arguments[0], resolveReferences, tsTools, {
             allowEmpty: true
         })) {
         context.report({ loc: call.arguments[0].loc, messageId });
     }
 }
-function checkLinkAttribute(context, attribute, value, resolveReferences) {
+function checkLinkAttribute(context, attribute, value, resolveReferences, tsTools) {
     if (attribute.parent.parent.type === 'SvelteElement' &&
         attribute.parent.parent.kind === 'html' &&
         attribute.parent.parent.name.type === 'SvelteName' &&
         attribute.parent.parent.name.name === 'a' &&
         attribute.key.name === 'href' &&
         !hasRelExternal(new FindVariableContext(context), attribute.parent) &&
-        !isValueAllowed(new FindVariableContext(context), value, resolveReferences, {
+        !isValueAllowed(new FindVariableContext(context), value, resolveReferences, tsTools, {
             allowAbsolute: true,
             allowFragment: true,
             allowNullish: true
@@ -201,30 +203,66 @@ function hasRelExternal(ctx, element) {
     }
     return false;
 }
-function isValueAllowed(ctx, value, resolveReferences, config) {
+function isValueAllowed(ctx, value, resolveReferences, tsTools, config) {
     if (value.type === 'Identifier') {
         const variable = ctx.findVariable(value);
         if (variable !== null &&
             variable.identifiers.length > 0 &&
-            variable.identifiers[0].parent.type === 'VariableDeclarator' &&
-            variable.identifiers[0].parent.init !== null) {
-            return isValueAllowed(ctx, variable.identifiers[0].parent.init, resolveReferences, config);
+            variable.identifiers[0].parent.type === 'VariableDeclarator') {
+            if (expressionIsAllowedType(variable.identifiers[0], config.allowNullish, tsTools)) {
+                return true;
+            }
+            if (variable.identifiers[0].parent.init !== null) {
+                return isValueAllowed(ctx, variable.identifiers[0].parent.init, resolveReferences, tsTools, config);
+            }
         }
     }
     if (value.type === 'ConditionalExpression') {
-        return (isValueAllowed(ctx, value.consequent, resolveReferences, config) &&
-            isValueAllowed(ctx, value.alternate, resolveReferences, config));
+        return (isValueAllowed(ctx, value.consequent, resolveReferences, tsTools, config) &&
+            isValueAllowed(ctx, value.alternate, resolveReferences, tsTools, config));
     }
     if ((config.allowAbsolute && expressionIsAbsoluteUrl(ctx, value)) ||
         (config.allowEmpty && expressionIsEmpty(value)) ||
         (config.allowFragment && expressionStartsWith(ctx, value, '#')) ||
         (config.allowNullish && expressionIsNullish(value)) ||
+        expressionIsAllowedType(value, config.allowNullish, tsTools) ||
         expressionIsResolveCall(ctx, value, resolveReferences)) {
         return true;
     }
     return false;
 }
 // Helper functions
+function expressionIsAllowedType(value, allowNullish, tsTools) {
+    if (tsTools === null) {
+        return false;
+    }
+    const checker = tsTools.service.program.getTypeChecker();
+    const tsNode = tsTools.service.esTreeNodeToTSNodeMap.get(value);
+    if (tsNode === undefined) {
+        return false;
+    }
+    let nodeType = checker.getTypeAtLocation(tsNode);
+    if (allowNullish === true) {
+        if (isNullType(nodeType, tsTools.ts) || isUndefinedType(nodeType, tsTools.ts)) {
+            return true;
+        }
+        nodeType = checker.getNonNullableType(nodeType);
+    }
+    const appTypesModule = checker.getAmbientModules().find((m) => m.name === '"$app/types"');
+    if (!appTypesModule) {
+        return false;
+    }
+    const resolvedPathnameSymbol = checker
+        .getExportsOfModule(appTypesModule)
+        .find((e) => e.name === 'ResolvedPathname');
+    if (!resolvedPathnameSymbol) {
+        return false;
+    }
+    const resolvedPathnameType = checker.getDeclaredTypeOfSymbol(resolvedPathnameSymbol);
+    // getTypeAtLocation returns the resolved (structural) type without alias information, so we cannot compare aliasSymbols directly. Instead we check structural equivalence by testing assignability in both directions: this correctly rejects strict subtypes like Pathname (Pathname ⊂ ResolvedPathname, so only one direction holds).
+    return (checker.isTypeAssignableTo(nodeType, resolvedPathnameType) &&
+        checker.isTypeAssignableTo(resolvedPathnameType, nodeType));
+}
 function expressionIsResolveCall(ctx, node, resolveReferences) {
     if (node.type === 'CallExpression' &&
         ((node.callee.type === 'Identifier' && resolveReferences.has(node.callee)) ||

package/lib/rules/no-nested-style-tag.d.ts

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

package/lib/rules/no-nested-style-tag.js

@@ -0,0 +1,25 @@
+import { createRule } from '../utils/index.js';
+export default createRule('no-nested-style-tag', {
+    meta: {
+        docs: {
+            description: 'disallow `<style>` elements nested inside other elements or blocks',
+            category: 'Possible Errors',
+            recommended: false
+        },
+        schema: [],
+        messages: {
+            nestedStyle: 'Nested `<style>` elements are not scoped and may lead to unintended styles being applied.'
+        },
+        type: 'problem'
+    },
+    create(context) {
+        return {
+            SvelteElement(node) {
+                if (node.kind !== 'html' || node.name.type !== 'SvelteName' || node.name.name !== 'style') {
+                    return;
+                }
+                context.report({ node, messageId: 'nestedStyle' });
+            }
+        };
+    }
+});

package/lib/rules/prefer-derived-over-derived-by.d.ts

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

package/lib/rules/prefer-derived-over-derived-by.js

@@ -0,0 +1,68 @@
+import { createRule } from '../utils/index.js';
+export default createRule('prefer-derived-over-derived-by', {
+    meta: {
+        docs: {
+            description: 'disallow unnecessary `$derived.by()` when `$derived()` is sufficient',
+            category: 'Best Practices',
+            recommended: false
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            unnecessary: 'Unnecessary use of `$derived.by()`. Use `$derived()` directly for simple expressions.'
+        },
+        type: 'suggestion',
+        conditions: [
+            {
+                svelteVersions: ['5'],
+                runes: [true, 'undetermined']
+            }
+        ]
+    },
+    create(context) {
+        return {
+            CallExpression(node) {
+                const { callee } = node;
+                if (callee.type !== 'MemberExpression' ||
+                    callee.computed ||
+                    callee.object.type !== 'Identifier' ||
+                    callee.object.name !== '$derived' ||
+                    callee.property.type !== 'Identifier' ||
+                    callee.property.name !== 'by') {
+                    return;
+                }
+                if (node.arguments.length !== 1) {
+                    return;
+                }
+                const arg = node.arguments[0];
+                if (arg.type !== 'ArrowFunctionExpression' && arg.type !== 'FunctionExpression') {
+                    return;
+                }
+                if (arg.params.length !== 0 || arg.async || arg.generator) {
+                    return;
+                }
+                let expressionNode = null;
+                if (arg.type === 'ArrowFunctionExpression' && arg.body.type !== 'BlockStatement') {
+                    expressionNode = arg.body;
+                }
+                else if (arg.body.type === 'BlockStatement' &&
+                    arg.body.body.length === 1 &&
+                    arg.body.body[0].type === 'ReturnStatement' &&
+                    arg.body.body[0].argument !== null) {
+                    expressionNode = arg.body.body[0].argument;
+                }
+                if (expressionNode === null) {
+                    return;
+                }
+                context.report({
+                    node,
+                    messageId: 'unnecessary',
+                    fix(fixer) {
+                        const expressionText = context.sourceCode.getText(expressionNode);
+                        return fixer.replaceText(node, `$derived(${expressionText})`);
+                    }
+                });
+            }
+        };
+    }
+});

package/lib/utils/rules.js

@@ -35,6 +35,7 @@ import noInnerDeclarations from '../rules/no-inner-declarations.js';
 import noInspect from '../rules/no-inspect.js';
 import noNavigationWithoutBase from '../rules/no-navigation-without-base.js';
 import noNavigationWithoutResolve from '../rules/no-navigation-without-resolve.js';
+import noNestedStyleTag from '../rules/no-nested-style-tag.js';
 import noNotFunctionHandler from '../rules/no-not-function-handler.js';
 import noObjectInTextMustaches from '../rules/no-object-in-text-mustaches.js';
 import noRawSpecialElements from '../rules/no-raw-special-elements.js';
@@ -58,6 +59,7 @@ import noUselessChildrenSnippet from '../rules/no-useless-children-snippet.js';
 import noUselessMustaches from '../rules/no-useless-mustaches.js';
 import preferClassDirective from '../rules/prefer-class-directive.js';
 import preferConst from '../rules/prefer-const.js';
+import preferDerivedOverDerivedBy from '../rules/prefer-derived-over-derived-by.js';
 import preferDestructuredStoreProps from '../rules/prefer-destructured-store-props.js';
 import preferStyleDirective from '../rules/prefer-style-directive.js';
 import preferSvelteReactivity from '../rules/prefer-svelte-reactivity.js';
@@ -116,6 +118,7 @@ export const rules = [
     noInspect,
     noNavigationWithoutBase,
     noNavigationWithoutResolve,
+    noNestedStyleTag,
     noNotFunctionHandler,
     noObjectInTextMustaches,
     noRawSpecialElements,
@@ -139,6 +142,7 @@ export const rules = [
     noUselessMustaches,
     preferClassDirective,
     preferConst,
+    preferDerivedOverDerivedBy,
     preferDestructuredStoreProps,
     preferStyleDirective,
     preferSvelteReactivity,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "ESLint plugin for Svelte using AST",
   "repository": {
     "type": "git",
@@ -66,7 +66,7 @@
     "@typescript-eslint/types": "^8.48.1",
     "acorn": "^8.15.0",
     "assert": "^2.1.0",
-    "esbuild": "^0.27.0",
+    "esbuild": "^0.28.0",
     "eslint-scope": "^9.0.0",
     "eslint-typegen": "^2.3.0",
     "eslint-visitor-keys": "^5.0.0",