eslint-plugin-svelte 3.17.1 → 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.1";
+    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.1";
+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.1';
+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,7 +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 } from '../utils/ts-utils/index.js';
+import { getTypeScriptTools, isNullType, isUndefinedType } from '../utils/ts-utils/index.js';
 export default createRule('no-navigation-without-resolve', {
     meta: {
         docs: {
@@ -209,7 +209,7 @@ function isValueAllowed(ctx, value, resolveReferences, tsTools, config) {
         if (variable !== null &&
             variable.identifiers.length > 0 &&
             variable.identifiers[0].parent.type === 'VariableDeclarator') {
-            if (expressionIsResolvedPathname(variable.identifiers[0], tsTools)) {
+            if (expressionIsAllowedType(variable.identifiers[0], config.allowNullish, tsTools)) {
                 return true;
             }
             if (variable.identifiers[0].parent.init !== null) {
@@ -225,14 +225,14 @@ function isValueAllowed(ctx, value, resolveReferences, tsTools, config) {
         (config.allowEmpty && expressionIsEmpty(value)) ||
         (config.allowFragment && expressionStartsWith(ctx, value, '#')) ||
         (config.allowNullish && expressionIsNullish(value)) ||
-        expressionIsResolvedPathname(value, tsTools) ||
+        expressionIsAllowedType(value, config.allowNullish, tsTools) ||
         expressionIsResolveCall(ctx, value, resolveReferences)) {
         return true;
     }
     return false;
 }
 // Helper functions
-function expressionIsResolvedPathname(value, tsTools) {
+function expressionIsAllowedType(value, allowNullish, tsTools) {
     if (tsTools === null) {
         return false;
     }
@@ -241,7 +241,13 @@ function expressionIsResolvedPathname(value, tsTools) {
     if (tsNode === undefined) {
         return false;
     }
-    const nodeType = checker.getTypeAtLocation(tsNode);
+    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;

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.1",
+  "version": "3.18.0",
   "description": "ESLint plugin for Svelte using AST",
   "repository": {
     "type": "git",