eslint-plugin-svelte 2.12.0 → 2.13.0

package/README.md

@@ -298,6 +298,7 @@ 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: |

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/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/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/types.d.ts

@@ -1,7 +1,8 @@
 import type { JSONSchema4 } from "json-schema";
-import type { Linter, Rule, Scope, SourceCode as ESLintSourceCode } from "eslint";
+import type { Linter, Rule, SourceCode as ESLintSourceCode } from "eslint";
 import type { AST } from "svelte-eslint-parser";
 import type { TSESTree } from "@typescript-eslint/types";
+import type { ScopeManager, Scope, Variable } from "@typescript-eslint/scope-manager";
 import type { ASTNode, ASTNodeWithParent, ASTNodeListener } from "./types-for-node";
 export type { ASTNode, ASTNodeWithParent, ASTNodeListener };
 export interface RuleListener extends ASTNodeListener {
@@ -99,9 +100,9 @@ export declare type RuleContext = {
     parserOptions: Linter.ParserOptions;
     parserServices: ESLintSourceCode.ParserServices;
     getAncestors(): ASTNode[];
-    getDeclaredVariables(node: TSESTree.Node): Scope.Variable[];
+    getDeclaredVariables(node: TSESTree.Node): Variable[];
     getFilename(): string;
-    getScope(): Scope.Scope;
+    getScope(): Scope;
     getSourceCode(): SourceCode;
     markVariableAsUsed(name: string): boolean;
     report(descriptor: ReportDescriptor): void;
@@ -160,7 +161,7 @@ export interface SourceCode {
     lines: string[];
     hasBOM: boolean;
     parserServices: ESLintSourceCode.ParserServices;
-    scopeManager: Scope.ScopeManager;
+    scopeManager: ScopeManager;
     visitorKeys: ESLintSourceCode.VisitorKeys;
     getText(node?: NodeOrToken, beforeCount?: number, afterCount?: number): string;
     getLines(): string[];

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

@@ -1,7 +1,7 @@
 import type { ASTNode, RuleContext, SourceCode } from "../types";
 import type { TSESTree } from "@typescript-eslint/types";
+import type { Scope, Variable } from "@typescript-eslint/scope-manager";
 import type { AST as SvAST } from "svelte-eslint-parser";
-import type { Scope } from "eslint";
 export declare function equalTokens(left: ASTNode, right: ASTNode, sourceCode: SourceCode): boolean;
 export declare function getStringIfConstant(node: TSESTree.Expression | TSESTree.PrivateIdentifier): string | null;
 export declare function needParentheses(node: TSESTree.Expression, kind: "not" | "logical"): boolean;
@@ -29,8 +29,8 @@ export declare function findBindDirective<N extends string>(node: SvAST.SvelteEl
 }) | null;
 export declare function getStaticAttributeValue(node: SvAST.SvelteAttribute): string | null;
 export declare function getLangValue(node: SvAST.SvelteScriptElement | SvAST.SvelteStyleElement): string | null;
-export declare function findVariable(context: RuleContext, node: TSESTree.Identifier): Scope.Variable | null;
-export declare function getScope(context: RuleContext, currentNode: TSESTree.Node): Scope.Scope;
+export declare function findVariable(context: RuleContext, node: TSESTree.Identifier): Variable | null;
+export declare function getScope(context: RuleContext, currentNode: TSESTree.Node): Scope;
 export declare function getParent(node: TSESTree.Node): TSESTree.Node | null;
 export declare type QuoteAndRange = {
     quote: "unquoted" | "double" | "single";

package/lib/utils/ast-utils.js

@@ -339,19 +339,17 @@ function getAttributeValueRangeTokens(attr, sourceCode) {
     };
 }
 function getNodeName(node) {
-    if ("name" in node.name) {
+    if (node.name.type === "Identifier" || node.name.type === "SvelteName") {
         return node.name.name;
     }
-    let object = "";
+    const memberPath = [node.name.property.name];
     let currentObject = node.name.object;
-    while ("object" in currentObject) {
-        object = `${currentObject.property.name}.${object}`;
+    while (currentObject.type === "SvelteMemberExpressionName") {
+        memberPath.unshift(currentObject.property.name);
         currentObject = currentObject.object;
     }
-    if ("name" in currentObject) {
-        object = `${currentObject.name}.${object}`;
-    }
-    return object + node.name.property.name;
+    memberPath.unshift(currentObject.name);
+    return memberPath.join(".");
 }
 exports.getNodeName = getNodeName;
 function isVoidHtmlElement(node) {

package/lib/utils/rules.js

@@ -17,6 +17,7 @@ const max_attributes_per_line_1 = __importDefault(require("../rules/max-attribut
 const mustache_spacing_1 = __importDefault(require("../rules/mustache-spacing"));
 const no_at_debug_tags_1 = __importDefault(require("../rules/no-at-debug-tags"));
 const no_at_html_tags_1 = __importDefault(require("../rules/no-at-html-tags"));
+const no_dom_manipulating_1 = __importDefault(require("../rules/no-dom-manipulating"));
 const no_dupe_else_if_blocks_1 = __importDefault(require("../rules/no-dupe-else-if-blocks"));
 const no_dupe_style_properties_1 = __importDefault(require("../rules/no-dupe-style-properties"));
 const no_dynamic_slot_name_1 = __importDefault(require("../rules/no-dynamic-slot-name"));
@@ -63,6 +64,7 @@ exports.rules = [
     mustache_spacing_1.default,
     no_at_debug_tags_1.default,
     no_at_html_tags_1.default,
+    no_dom_manipulating_1.default,
     no_dupe_else_if_blocks_1.default,
     no_dupe_style_properties_1.default,
     no_dynamic_slot_name_1.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "ESLint plugin for Svelte using AST",
   "repository": "git+https://github.com/ota-meshi/eslint-plugin-svelte.git",
   "homepage": "https://ota-meshi.github.io/eslint-plugin-svelte",
@@ -73,7 +73,7 @@
     "postcss-load-config": "^3.1.4",
     "postcss-safe-parser": "^6.0.0",
     "sourcemap-codec": "^1.4.8",
-    "svelte-eslint-parser": "^0.20.0"
+    "svelte-eslint-parser": "^0.21.0"
   },
   "devDependencies": {
     "@1stg/browserslist-config": "^1.2.3",