eslint-plugin-svelte 2.11.0 → 2.13.0

package/README.md

@@ -188,12 +188,6 @@ See also <https://github.com/ota-meshi/svelte-eslint-parser#readme>.
 
 You can change the behavior of this plugin with some settings.
 
-- `ignoreWarnings` (optional) ... Specifies an array of rules that ignore reports in the template.  
-  For example, set rules on the template that cannot avoid false positives.
-- `compileOptions` (optional) ... Specifies options for Svelte compile. Effects rules that use Svelte compile. The target rules are [svelte/valid-compile](https://ota-meshi.github.io/eslint-plugin-svelte/rules/valid-compile/) and [svelte/no-unused-svelte-ignore](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/). **Note that it has no effect on ESLint's custom parser**.
-  - `postcss` (optional) ... Specifies options related to PostCSS. You can disable the PostCSS process by specifying `false`.
-    - `configFilePath` (optional) ... Specifies the path of the directory containing the PostCSS configuration.
-
 e.g.
 
 ```js
@@ -210,6 +204,47 @@ module.exports = {
           configFilePath: "./path/to/my/postcss.config.js",
         },
       },
+      kit: {
+        files: {
+          routes: "src/routes",
+        },
+      },
+    },
+  },
+  // ...
+}
+```
+
+#### settings.svelte.ignoreWarnings
+
+Specifies an array of rules that ignore reports in the template.  
+For example, set rules on the template that cannot avoid false positives.
+
+#### settings.svelte.compileOptions
+
+Specifies options for Svelte compile. Effects rules that use Svelte compile. The target rules are [svelte/valid-compile](https://ota-meshi.github.io/eslint-plugin-svelte/rules/valid-compile/) and [svelte/no-unused-svelte-ignore](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/). **Note that it has no effect on ESLint's custom parser**.
+
+- `postcss` ... Specifies options related to PostCSS. You can disable the PostCSS process by specifying `false`.
+  - `configFilePath` ... Specifies the path of the directory containing the PostCSS configuration.
+
+#### settings.svelte.kit
+
+If you use SvelteKit with not default configuration, you need to set below configurations.
+The schema is subset of SvelteKit's configuration.
+Therefore please check [SvelteKit docs](https://kit.svelte.dev/docs/configuration) for more details.
+
+e.g.
+
+```js
+module.exports = {
+  // ...
+  settings: {
+    svelte: {
+      kit: {
+        files: {
+          routes: "src/routes",
+        },
+      },
     },
   },
   // ...
@@ -263,15 +298,20 @@ These rules relate to possible syntax or logic errors in Svelte code:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [svelte/no-dom-manipulating](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dom-manipulating/) | disallow DOM manipulating |  |
 | [svelte/no-dupe-else-if-blocks](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks/) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
 | [svelte/no-dupe-style-properties](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-style-properties/) | disallow duplicate style properties | :star: |
 | [svelte/no-dynamic-slot-name](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dynamic-slot-name/) | disallow dynamic slot name | :star::wrench: |
+| [svelte/no-export-load-in-svelte-module-in-kit-pages](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-export-load-in-svelte-module-in-kit-pages/) | disallow exporting load functions in `*.svelte` module in Svelte Kit page components. |  |
 | [svelte/no-not-function-handler](https://ota-meshi.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://ota-meshi.github.io/eslint-plugin-svelte/rules/no-object-in-text-mustaches/) | disallow objects in text mustache interpolation | :star: |
 | [svelte/no-shorthand-style-property-overrides](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-shorthand-style-property-overrides/) | disallow shorthand style properties that override related longhand properties | :star: |
 | [svelte/no-store-async](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-store-async/) | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features |  |
 | [svelte/no-unknown-style-directive-property](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-unknown-style-directive-property/) | disallow unknown `style:property` | :star: |
+| [svelte/require-store-callbacks-use-set-param](https://ota-meshi.github.io/eslint-plugin-svelte/rules/require-store-callbacks-use-set-param/) | store callbacks must use `set` param |  |
+| [svelte/require-store-reactive-access](https://ota-meshi.github.io/eslint-plugin-svelte/rules/require-store-reactive-access/) | disallow to use of the store itself as an operand. Need to use $ prefix or get function. | :wrench: |
 | [svelte/valid-compile](https://ota-meshi.github.io/eslint-plugin-svelte/rules/valid-compile/) | disallow warnings when compiling. | :star: |
+| [svelte/valid-prop-names-in-kit-pages](https://ota-meshi.github.io/eslint-plugin-svelte/rules/valid-prop-names-in-kit-pages/) | disallow props other than data or errors in Svelte Kit page components. |  |
 
 ## Security Vulnerability
 

package/lib/rules/html-self-closing.js

@@ -49,14 +49,14 @@ exports.default = (0, utils_1.createRule)("html-self-closing", {
             },
         ],
     },
-    create(ctx) {
+    create(context) {
         let options = {
             void: "always",
             normal: "always",
             component: "always",
             svelte: "always",
         };
-        const option = ctx.options?.[0];
+        const option = context.options?.[0];
         switch (option) {
             case "none":
                 options = {
@@ -103,16 +103,22 @@ exports.default = (0, utils_1.createRule)("html-self-closing", {
             }
             return true;
         }
-        function report(node, close) {
+        function report(node, shouldBeClosed) {
             const elementType = getElementType(node);
-            ctx.report({
+            context.report({
                 node,
-                messageId: close ? "requireClosing" : "disallowClosing",
+                loc: {
+                    start: context
+                        .getSourceCode()
+                        .getLocFromIndex(node.startTag.range[1] - (node.startTag.selfClosing ? 2 : 1)),
+                    end: node.loc.end,
+                },
+                messageId: shouldBeClosed ? "requireClosing" : "disallowClosing",
                 data: {
                     type: TYPE_MESSAGES[elementType],
                 },
                 *fix(fixer) {
-                    if (close) {
+                    if (shouldBeClosed) {
                         for (const child of node.children) {
                             yield fixer.removeRange(child.range);
                         }

package/lib/rules/indent-helpers/ast.d.ts

@@ -1,6 +1,6 @@
 import type { AST } from "svelte-eslint-parser";
-import type * as ESTree from "estree";
+import type { TSESTree } from "@typescript-eslint/types";
 declare type AnyToken = AST.Token | AST.Comment;
-export declare function isWhitespace(token: AnyToken | ESTree.Comment | null | undefined): boolean;
-export declare function isNotWhitespace(token: AnyToken | ESTree.Comment | null | undefined): boolean;
+export declare function isWhitespace(token: AnyToken | TSESTree.Comment | null | undefined): boolean;
+export declare function isNotWhitespace(token: AnyToken | TSESTree.Comment | null | undefined): boolean;
 export {};

package/lib/rules/indent-helpers/es.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.defineVisitor = void 0;
 const commons_1 = require("./commons");
 const eslint_utils_1 = require("eslint-utils");
+const ast_utils_1 = require("../../utils/ast-utils");
 function defineVisitor(context) {
     const { sourceCode, offsets, options } = context;
     function getRootLeft(node) {
         let target = node;
-        let parent = getParent(target);
+        let parent = (0, ast_utils_1.getParent)(target);
         while (parent &&
             (parent.type === "AssignmentExpression" ||
                 parent.type === "AssignmentPattern" ||
@@ -18,7 +19,7 @@ function defineVisitor(context) {
                 break;
             }
             target = parent;
-            parent = getParent(target);
+            parent = (0, ast_utils_1.getParent)(target);
         }
         return target.left;
     }
@@ -161,12 +162,12 @@ function defineVisitor(context) {
             });
             const alternateToken = sourceCode.getTokenAfter(colonToken);
             let baseNode = node;
-            let parent = getParent(baseNode);
+            let parent = (0, ast_utils_1.getParent)(baseNode);
             while (parent &&
                 parent.type === "ConditionalExpression" &&
                 parent.alternate === baseNode) {
                 baseNode = parent;
-                parent = getParent(baseNode);
+                parent = (0, ast_utils_1.getParent)(baseNode);
             }
             const baseToken = sourceCode.getFirstToken(baseNode);
             offsets.setOffsetToken([questionToken, colonToken], 1, baseToken);
@@ -335,9 +336,9 @@ function defineVisitor(context) {
                 filter: eslint_utils_1.isOpeningParenToken,
                 includeComments: false,
             });
-            let bodyBaseToken;
+            let bodyBaseToken = null;
             if (firstToken.type === "Punctuator") {
-                bodyBaseToken = sourceCode.getFirstToken(getParent(node));
+                bodyBaseToken = sourceCode.getFirstToken((0, ast_utils_1.getParent)(node));
             }
             else {
                 let tokenOffset = 0;
@@ -735,9 +736,6 @@ function defineVisitor(context) {
     };
 }
 exports.defineVisitor = defineVisitor;
-function getParent(node) {
-    return node.parent || null;
-}
 function isOptionalToken(token) {
     return token.type === "Punctuator" && token.value === "?.";
 }

package/lib/rules/no-dom-manipulating.d.ts

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

package/lib/rules/no-dom-manipulating.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../utils");
+const ast_utils_1 = require("../utils/ast-utils");
+const eslint_utils_1 = require("eslint-utils");
+const DOM_MANIPULATING_METHODS = new Set([
+    "appendChild",
+    "insertBefore",
+    "normalize",
+    "removeChild",
+    "replaceChild",
+    "after",
+    "append",
+    "before",
+    "insertAdjacentElement",
+    "insertAdjacentHTML",
+    "insertAdjacentText",
+    "prepend",
+    "remove",
+    "replaceChildren",
+    "replaceWith",
+]);
+const DOM_MANIPULATING_PROPERTIES = new Set([
+    "textContent",
+    "innerHTML",
+    "outerHTML",
+    "innerText",
+    "outerText",
+]);
+exports.default = (0, utils_1.createRule)("no-dom-manipulating", {
+    meta: {
+        docs: {
+            description: "disallow DOM manipulating",
+            category: "Possible Errors",
+            recommended: false,
+        },
+        schema: [],
+        messages: {
+            disallowManipulateDOM: "Don't manipulate the DOM directly. The Svelte runtime can get confused if there is a difference between the actual DOM and the DOM expected by the Svelte runtime.",
+        },
+        type: "problem",
+    },
+    create(context) {
+        const domVariables = new Set();
+        function verifyIdentifier(node) {
+            const member = node.parent;
+            if (member?.type !== "MemberExpression" || member.object !== node) {
+                return;
+            }
+            const name = (0, eslint_utils_1.getPropertyName)(member);
+            if (!name) {
+                return;
+            }
+            let target = member;
+            let parent = target.parent;
+            while (parent?.type === "ChainExpression") {
+                target = parent;
+                parent = parent.parent;
+            }
+            if (!parent) {
+                return;
+            }
+            if (parent.type === "CallExpression") {
+                if (parent.callee !== target || !DOM_MANIPULATING_METHODS.has(name)) {
+                    return;
+                }
+            }
+            else if (parent.type === "AssignmentExpression") {
+                if (parent.left !== target || !DOM_MANIPULATING_PROPERTIES.has(name)) {
+                    return;
+                }
+            }
+            context.report({
+                node: member,
+                messageId: "disallowManipulateDOM",
+            });
+        }
+        return {
+            "SvelteDirective[kind='Binding']"(node) {
+                if (node.key.name.name !== "this" ||
+                    !node.expression ||
+                    node.expression.type !== "Identifier") {
+                    return;
+                }
+                const element = node.parent.parent;
+                if (element.type !== "SvelteElement" || !isHTMLElement(element)) {
+                    return;
+                }
+                const variable = (0, ast_utils_1.findVariable)(context, node.expression);
+                if (!variable ||
+                    (variable.scope.type !== "module" && variable.scope.type !== "global")) {
+                    return;
+                }
+                domVariables.add(variable);
+            },
+            "Program:exit"() {
+                for (const variable of domVariables) {
+                    for (const reference of variable.references) {
+                        verifyIdentifier(reference.identifier);
+                    }
+                }
+            },
+        };
+        function isHTMLElement(node) {
+            return (node.kind === "html" ||
+                (node.kind === "special" && (0, ast_utils_1.getNodeName)(node) === "svelte:element"));
+        }
+    },
+});

package/lib/rules/no-export-load-in-svelte-module-in-kit-pages.d.ts

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

package/lib/rules/no-export-load-in-svelte-module-in-kit-pages.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../utils");
+const svelte_kit_1 = require("../utils/svelte-kit");
+exports.default = (0, utils_1.createRule)("no-export-load-in-svelte-module-in-kit-pages", {
+    meta: {
+        docs: {
+            description: "disallow exporting load functions in `*.svelte` module in Svelte Kit page components.",
+            category: "Possible Errors",
+            recommended: false,
+        },
+        schema: [],
+        messages: {
+            unexpected: "disallow exporting load functions in `*.svelte` module in Svelte Kit page components.",
+        },
+        type: "problem",
+    },
+    create(context) {
+        if (!(0, svelte_kit_1.isKitPageComponent)(context)) {
+            return {};
+        }
+        let isModule = false;
+        return {
+            [`Program > SvelteScriptElement > SvelteStartTag > SvelteAttribute[key.name="context"] > SvelteLiteral[value="module"]`]: () => {
+                isModule = true;
+            },
+            "Program > SvelteScriptElement:exit": () => {
+                isModule = false;
+            },
+            [`:matches(ExportNamedDeclaration > FunctionDeclaration, ExportNamedDeclaration > VariableDeclaration > VariableDeclarator) > Identifier.id[name="load"]`]: (node) => {
+                if (!isModule)
+                    return {};
+                return context.report({
+                    node,
+                    loc: node.loc,
+                    messageId: "unexpected",
+                });
+            },
+        };
+    },
+});

package/lib/rules/prefer-destructured-store-props.js

@@ -47,7 +47,8 @@ exports.default = (0, utils_1.createRule)("prefer-destructured-store-props", {
                 }
             }
             function isReactiveVariableDefinitionWithMemberExpression(node) {
-                return (node.parent?.type === "MemberExpression" &&
+                return (node.type === "Identifier" &&
+                    node.parent?.type === "MemberExpression" &&
                     node.parent.object === node &&
                     (0, eslint_utils_1.getPropertyName)(node.parent) === propName &&
                     node.parent.parent?.type === "AssignmentExpression" &&
@@ -58,7 +59,8 @@ exports.default = (0, utils_1.createRule)("prefer-destructured-store-props", {
                         .parent?.type === "SvelteReactiveStatement");
             }
             function isReactiveVariableDefinitionWithDestructuring(node) {
-                return (node.parent?.type === "AssignmentExpression" &&
+                return (node.type === "Identifier" &&
+                    node.parent?.type === "AssignmentExpression" &&
                     node.parent.right === node &&
                     node.parent.left.type === "ObjectPattern" &&
                     node.parent.parent?.type === "ExpressionStatement" &&

package/lib/rules/reference-helpers/svelte-store.d.ts

@@ -1,8 +1,12 @@
-import type * as ESTree from "estree";
+import type { TSESTree } from "@typescript-eslint/types";
 import type { RuleContext } from "../../types";
 declare type StoreName = "writable" | "readable" | "derived";
 export declare function extractStoreReferences(context: RuleContext, storeNames?: StoreName[]): Generator<{
-    node: ESTree.CallExpression;
+    node: TSESTree.CallExpression;
     name: string;
 }, void>;
+export declare type StoreChecker = (node: TSESTree.Expression, options?: {
+    consistent?: boolean;
+}) => boolean;
+export declare function createStoreChecker(context: RuleContext): StoreChecker;
 export {};

package/lib/rules/reference-helpers/svelte-store.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractStoreReferences = void 0;
+exports.createStoreChecker = exports.extractStoreReferences = void 0;
 const eslint_utils_1 = require("eslint-utils");
+const ts_utils_1 = require("../../utils/ts-utils");
+const ast_utils_1 = require("../../utils/ast-utils");
 function* extractStoreReferences(context, storeNames = ["writable", "readable", "derived"]) {
     const referenceTracker = new eslint_utils_1.ReferenceTracker(context.getScope());
     for (const { node, path } of referenceTracker.iterateEsmReferences({
@@ -25,3 +27,99 @@ function* extractStoreReferences(context, storeNames = ["writable", "readable",
     }
 }
 exports.extractStoreReferences = extractStoreReferences;
+function createStoreChecker(context) {
+    const tools = (0, ts_utils_1.getTypeScriptTools)(context);
+    const checker = tools
+        ? createStoreCheckerForTS(tools)
+        : createStoreCheckerForES(context);
+    return (node, options) => checker(node, {
+        consistent: options?.consistent ?? false,
+    });
+}
+exports.createStoreChecker = createStoreChecker;
+function createStoreCheckerForES(context) {
+    const storeVariables = new Map();
+    for (const { node } of extractStoreReferences(context)) {
+        const parent = (0, ast_utils_1.getParent)(node);
+        if (!parent ||
+            parent.type !== "VariableDeclarator" ||
+            parent.id.type !== "Identifier") {
+            continue;
+        }
+        const decl = (0, ast_utils_1.getParent)(parent);
+        if (!decl || decl.type !== "VariableDeclaration") {
+            continue;
+        }
+        const variable = (0, ast_utils_1.findVariable)(context, parent.id);
+        if (variable) {
+            storeVariables.set(variable, { const: decl.kind === "const" });
+        }
+    }
+    return (node, options) => {
+        if (node.type !== "Identifier" || node.name.startsWith("$")) {
+            return false;
+        }
+        const variable = (0, ast_utils_1.findVariable)(context, node);
+        if (!variable) {
+            return false;
+        }
+        const info = storeVariables.get(variable);
+        if (!info) {
+            return false;
+        }
+        return options.consistent ? info.const : true;
+    };
+}
+function createStoreCheckerForTS(tools) {
+    const { service } = tools;
+    const checker = service.program.getTypeChecker();
+    const tsNodeMap = service.esTreeNodeToTSNodeMap;
+    return (node, options) => {
+        const tsNode = tsNodeMap.get(node);
+        if (!tsNode) {
+            return false;
+        }
+        const type = checker.getTypeAtLocation(tsNode);
+        return isStoreType(checker.getApparentType(type));
+        function isStoreType(type) {
+            return eachTypeCheck(type, options, (type) => {
+                const subscribe = type.getProperty("subscribe");
+                if (!subscribe) {
+                    return false;
+                }
+                const subscribeType = checker.getTypeOfSymbolAtLocation(subscribe, tsNode);
+                return isStoreSubscribeSignatureType(subscribeType);
+            });
+        }
+        function isStoreSubscribeSignatureType(type) {
+            return eachTypeCheck(type, options, (type) => {
+                for (const signature of type.getCallSignatures()) {
+                    if (signature.parameters.length >= 2 &&
+                        maybeFunctionSymbol(signature.parameters[0]) &&
+                        maybeFunctionSymbol(signature.parameters[1])) {
+                        return true;
+                    }
+                }
+                return false;
+            });
+        }
+        function maybeFunctionSymbol(param) {
+            const type = checker.getApparentType(checker.getTypeOfSymbolAtLocation(param, tsNode));
+            return maybeFunctionType(type);
+        }
+        function maybeFunctionType(type) {
+            return eachTypeCheck(type, { consistent: false }, (type) => {
+                return type.getCallSignatures().length > 0;
+            });
+        }
+    };
+}
+function eachTypeCheck(type, options, check) {
+    if (type.isUnion()) {
+        if (options.consistent) {
+            return type.types.every((t) => eachTypeCheck(t, options, check));
+        }
+        return type.types.some((t) => eachTypeCheck(t, options, check));
+    }
+    return check(type);
+}

package/lib/rules/require-store-callbacks-use-set-param.d.ts

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

package/lib/rules/require-store-callbacks-use-set-param.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../utils");
+const svelte_store_1 = require("./reference-helpers/svelte-store");
+exports.default = (0, utils_1.createRule)("require-store-callbacks-use-set-param", {
+    meta: {
+        docs: {
+            description: "store callbacks must use `set` param",
+            category: "Possible Errors",
+            recommended: false,
+        },
+        schema: [],
+        messages: {
+            unexpected: "Store callbacks must use `set` param.",
+        },
+        type: "suggestion",
+    },
+    create(context) {
+        return {
+            Program() {
+                for (const { node } of (0, svelte_store_1.extractStoreReferences)(context, [
+                    "readable",
+                    "writable",
+                ])) {
+                    const [_, fn] = node.arguments;
+                    if (!fn ||
+                        (fn.type !== "ArrowFunctionExpression" &&
+                            fn.type !== "FunctionExpression")) {
+                        continue;
+                    }
+                    const param = fn.params[0];
+                    if (!param || (param.type === "Identifier" && param.name !== "set")) {
+                        context.report({
+                            node: fn,
+                            loc: fn.loc,
+                            messageId: "unexpected",
+                        });
+                    }
+                }
+            },
+        };
+    },
+});

package/lib/rules/require-store-reactive-access.d.ts

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