eslint-plugin-svelte 3.19.0 → 3.20.0

package/README.md

@@ -334,6 +334,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-const-tags](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-const-tags/) | disallow the use of `{@const}` in favor of `{const ...}` declaration tags | :wrench: |
 | [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: |
@@ -403,7 +404,7 @@ These rules relate to SvelteKit and its best Practices.
 |:--------|:------------|:---|
 | [svelte/no-export-load-in-svelte-module-in-kit-pages](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-export-load-in-svelte-module-in-kit-pages/) | disallow exporting load functions in `*.svelte` module in SvelteKit page components. | :star: |
 | [svelte/no-navigation-without-resolve](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-navigation-without-resolve/) | disallow internal navigation (links, `goto()`, `pushState()`, `replaceState()`) without a `resolve()` | :star: |
-| [svelte/valid-prop-names-in-kit-pages](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-prop-names-in-kit-pages/) | disallow props other than data or errors in SvelteKit page components. | :star: |
+| [svelte/valid-prop-names-in-kit-pages](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-prop-names-in-kit-pages/) | disallow invalid props in SvelteKit route components. | :star: |
 
 ## Experimental
 

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.19.0";
+    version: "3.20.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.19.0";
+export declare const version: "3.20.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.19.0';
+export const version = '3.20.0';

package/lib/rule-types.d.ts

@@ -100,6 +100,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-add-event-listener/
      */
     'svelte/no-add-event-listener'?: Linter.RuleEntry<[]>;
+    /**
+     * disallow the use of `{@const}` in favor of `{const ...}` declaration tags
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-const-tags/
+     */
+    'svelte/no-at-const-tags'?: Linter.RuleEntry<[]>;
     /**
      * disallow the use of `{@debug}`
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/
@@ -409,7 +414,7 @@ export interface RuleOptions {
      */
     'svelte/valid-each-key'?: Linter.RuleEntry<[]>;
     /**
-     * disallow props other than data or errors in SvelteKit page components.
+     * disallow invalid props in SvelteKit route components.
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-prop-names-in-kit-pages/
      */
     'svelte/valid-prop-names-in-kit-pages'?: Linter.RuleEntry<[]>;

package/lib/rules/no-at-const-tags.d.ts

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

package/lib/rules/no-at-const-tags.js

@@ -0,0 +1,67 @@
+import { createRule } from '../utils/index.js';
+import { getSvelteContext } from '../utils/svelte-context.js';
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
+import semver from 'semver';
+const shouldRun = semver.satisfies(SVELTE_VERSION, '>=5.56.0');
+export default createRule('no-at-const-tags', {
+    meta: {
+        docs: {
+            description: 'disallow the use of `{@const}` in favor of `{const ...}` declaration tags',
+            category: 'Best Practices',
+            recommended: false
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            unexpected: 'Use `{const ...}` declaration tag instead of legacy `{@const ...}`.'
+        },
+        type: 'suggestion',
+        conditions: [
+            {
+                svelteVersions: ['5']
+            }
+        ]
+    },
+    create(context) {
+        if (!shouldRun) {
+            return {};
+        }
+        const sourceCode = context.sourceCode;
+        const runes = getSvelteContext(context)?.runes;
+        // Only report and fix in runes mode, since preserving reactivity requires
+        // `$derived(...)`, which is unavailable outside runes mode.
+        if (runes !== true) {
+            return {};
+        }
+        return {
+            SvelteConstTag(node) {
+                context.report({
+                    node,
+                    messageId: 'unexpected',
+                    *fix(fixer) {
+                        const text = sourceCode.getText(node);
+                        const match = /^\{(\s*)@const\b/u.exec(text);
+                        if (!match) {
+                            return;
+                        }
+                        const atOffset = node.range[0] + 1 + match[1].length;
+                        yield fixer.removeRange([atOffset, atOffset + 1]);
+                        const init = node.declarations[0].init;
+                        if (init == null) {
+                            return;
+                        }
+                        // Preserve the reactivity of legacy `{@const}` by wrapping the
+                        // initializer in `$derived(...)`. Skip when already wrapped.
+                        if (init.type === 'CallExpression' &&
+                            init.callee.type === 'Identifier' &&
+                            init.callee.name === '$derived') {
+                            return;
+                        }
+                        yield fixer.insertTextBefore(init, '$derived(');
+                        yield fixer.insertTextAfter(init, ')');
+                    }
+                });
+            }
+        };
+    }
+});

package/lib/rules/valid-prop-names-in-kit-pages.js

@@ -1,7 +1,9 @@
 import { createRule } from '../utils/index.js';
-import { getSvelteVersion } from '../utils/svelte-context.js';
-const EXPECTED_PROP_NAMES = ['data', 'errors', 'form', 'params', 'snapshot'];
-const EXPECTED_PROP_NAMES_SVELTE5 = [...EXPECTED_PROP_NAMES, 'children'];
+import { getSvelteContext, getSvelteVersion } from '../utils/svelte-context.js';
+const PAGE_PROP_NAMES = ['data', 'form', 'params', 'snapshot'];
+const LEGACY_PAGE_PROP_NAMES = [...PAGE_PROP_NAMES, 'errors'];
+const LAYOUT_PROP_NAMES = [...PAGE_PROP_NAMES, 'children'];
+const ERROR_PROP_NAMES = ['error'];
 function checkProp(node, context, expectedPropNames) {
     if (node.id.type !== 'ObjectPattern')
         return;
@@ -32,25 +34,35 @@ function isModuleScript(node) {
 export default createRule('valid-prop-names-in-kit-pages', {
     meta: {
         docs: {
-            description: 'disallow props other than data or errors in SvelteKit page components.',
+            description: 'disallow invalid props in SvelteKit route components.',
             category: 'SvelteKit',
             recommended: true
         },
         schema: [],
         messages: {
-            unexpected: 'disallow props other than data or errors in SvelteKit page components.'
+            unexpected: 'disallow invalid props in SvelteKit route components.'
         },
         type: 'problem',
         conditions: [
             {
-                svelteKitFileTypes: ['+page.svelte', '+error.svelte', '+layout.svelte']
+                svelteKitFileTypes: ['+page.svelte', '+layout.svelte', '+error.svelte']
             }
         ]
     },
     create(context) {
         let isScript = false;
         const isSvelte5 = getSvelteVersion() === '5';
-        const expectedPropNames = isSvelte5 ? EXPECTED_PROP_NAMES_SVELTE5 : EXPECTED_PROP_NAMES;
+        const svelteContext = getSvelteContext(context);
+        const fileType = svelteContext?.svelteKitFileType;
+        let expectedPropNames = PAGE_PROP_NAMES;
+        if (isSvelte5) {
+            if (fileType === '+layout.svelte') {
+                expectedPropNames = LAYOUT_PROP_NAMES;
+            }
+            else if (fileType === '+error.svelte') {
+                expectedPropNames = ERROR_PROP_NAMES;
+            }
+        }
         return {
             // <script>
             'Program > SvelteScriptElement > SvelteStartTag': (node) => {
@@ -67,7 +79,7 @@ export default createRule('valid-prop-names-in-kit-pages', {
                     return;
                 // export let foo
                 if (node.id.type === 'Identifier') {
-                    if (!expectedPropNames.includes(node.id.name)) {
+                    if (!LEGACY_PAGE_PROP_NAMES.includes(node.id.name)) {
                         context.report({
                             node,
                             loc: node.loc,
@@ -77,7 +89,7 @@ export default createRule('valid-prop-names-in-kit-pages', {
                     return;
                 }
                 // export let { xxx, yyy } = zzz
-                checkProp(node, context, expectedPropNames);
+                checkProp(node, context, LEGACY_PAGE_PROP_NAMES);
             },
             // Svelte5
             // let { foo, bar } = $props();

package/lib/utils/rules.js

@@ -17,6 +17,7 @@ import maxAttributesPerLine from '../rules/max-attributes-per-line.js';
 import maxLinesPerBlock from '../rules/max-lines-per-block.js';
 import mustacheSpacing from '../rules/mustache-spacing.js';
 import noAddEventListener from '../rules/no-add-event-listener.js';
+import noAtConstTags from '../rules/no-at-const-tags.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';
@@ -100,6 +101,7 @@ export const rules = [
     maxLinesPerBlock,
     mustacheSpacing,
     noAddEventListener,
+    noAtConstTags,
     noAtDebugTags,
     noAtHtmlTags,
     noDomManipulating,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "3.19.0",
+  "version": "3.20.0",
   "description": "ESLint plugin for Svelte using AST",
   "repository": {
     "type": "git",