eslint-plugin-svelte 2.26.0 → 2.27.1

package/README.md

@@ -1,6 +1,6 @@
 # Introduction
 
-`eslint-plugin-svelte` is [ESLint] plugin for [Svelte].  
+`eslint-plugin-svelte` is the official [ESLint] plugin for [Svelte].  
 It provides many unique check rules by using the template AST.  
 You can check on the [Online DEMO](https://sveltejs.github.io/eslint-plugin-svelte/playground/).
 
@@ -23,12 +23,6 @@ You can check on the [Online DEMO](https://sveltejs.github.io/eslint-plugin-svel
 [ESLint] plugin for [Svelte].  
 It provides many unique check rules using the AST generated by [svelte-eslint-parser].
 
-### ❓ Why?
-
-[Svelte] has the official [ESLint] plugin the [eslint-plugin-svelte3]. The [eslint-plugin-svelte3] works well enough to check scripts. However, it does not handle the AST of the template, which makes it very difficult for third parties to create their own the [ESLint] rules for the [Svelte].
-
-The [svelte-eslint-parser] aims to make it easy to create your own rules for the [Svelte] by allowing the template AST to be used in the rules.
-
 ### ❗ Attention
 
 The [svelte-eslint-parser] and the `eslint-plugin-svelte` can not be used with the [eslint-plugin-svelte3].
@@ -319,6 +313,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [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 Svelte Kit page components. |  |
 | [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-reactive-reassign](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-reassign/) | disallow reassigning reactive values |  |
 | [svelte/no-shorthand-style-property-overrides](https://sveltejs.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://sveltejs.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://sveltejs.github.io/eslint-plugin-svelte/rules/no-unknown-style-directive-property/) | disallow unknown `style:property` | :star: |
@@ -345,6 +340,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. |  |
 | [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-at-debug-tags](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/) | disallow the use of `{@debug}` | :star: |
+| [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. |  |
 | [svelte/no-reactive-functions](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-functions/) | it's not necessary to define functions in reactive statements | :bulb: |
 | [svelte/no-reactive-literals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-literals/) | don't assign literal values in reactive statements | :bulb: |
 | [svelte/no-unused-svelte-ignore](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/) | disallow unused svelte-ignore comments | :star: |

package/lib/rules/no-immutable-reactive-statements.d.ts

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

package/lib/rules/no-immutable-reactive-statements.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../utils");
+exports.default = (0, utils_1.createRule)("no-immutable-reactive-statements", {
+    meta: {
+        docs: {
+            description: "disallow reactive statements that don't reference reactive values.",
+            category: "Best Practices",
+            recommended: false,
+        },
+        schema: [],
+        messages: {
+            immutable: "This statement is not reactive because all variables referenced in the reactive statement are immutable.",
+        },
+        type: "suggestion",
+    },
+    create(context) {
+        const scopeManager = context.getSourceCode().scopeManager;
+        const globalScope = scopeManager.globalScope;
+        const toplevelScope = globalScope?.childScopes.find((scope) => scope.type === "module") ||
+            globalScope;
+        if (!globalScope || !toplevelScope) {
+            return {};
+        }
+        const cacheMutableVariable = new WeakMap();
+        function isMutableVariableReference(reference) {
+            if (reference.identifier.name.startsWith("$")) {
+                return true;
+            }
+            if (!reference.resolved) {
+                return true;
+            }
+            return isMutableVariable(reference.resolved);
+        }
+        function isMutableVariable(variable) {
+            const cache = cacheMutableVariable.get(variable);
+            if (cache != null) {
+                return cache;
+            }
+            if (variable.defs.length === 0) {
+                return true;
+            }
+            const isMutable = variable.defs.some((def) => {
+                if (def.type === "Variable") {
+                    const parent = def.parent;
+                    if (parent.kind === "const") {
+                        return false;
+                    }
+                    const pp = parent.parent;
+                    if (pp &&
+                        pp.type === "ExportNamedDeclaration" &&
+                        pp.declaration === parent) {
+                        return true;
+                    }
+                    return hasWrite(variable);
+                }
+                if (def.type === "ImportBinding") {
+                    return false;
+                }
+                if (def.node.type === "AssignmentExpression") {
+                    return true;
+                }
+                return false;
+            });
+            cacheMutableVariable.set(variable, isMutable);
+            return isMutable;
+        }
+        function hasWrite(variable) {
+            const defIds = variable.defs.map((def) => def.name);
+            return variable.references.some((reference) => reference.isWrite() &&
+                !defIds.some((defId) => defId.range[0] <= reference.identifier.range[0] &&
+                    reference.identifier.range[1] <= defId.range[1]));
+        }
+        function* iterateRangeReferences(scope, range) {
+            for (const variable of scope.variables) {
+                for (const reference of variable.references) {
+                    if (range[0] <= reference.identifier.range[0] &&
+                        reference.identifier.range[1] <= range[1]) {
+                        yield reference;
+                    }
+                }
+            }
+        }
+        return {
+            SvelteReactiveStatement(node) {
+                for (const reference of iterateRangeReferences(toplevelScope, node.range)) {
+                    if (reference.isWriteOnly()) {
+                        continue;
+                    }
+                    if (isMutableVariableReference(reference)) {
+                        return;
+                    }
+                }
+                if (globalScope.through.some((reference) => node.range[0] <= reference.identifier.range[0] &&
+                    reference.identifier.range[1] <= node.range[1])) {
+                    return;
+                }
+                context.report({
+                    node: node.body.type === "ExpressionStatement" &&
+                        node.body.expression.type === "AssignmentExpression" &&
+                        node.body.expression.operator === "="
+                        ? node.body.expression.right
+                        : node.body,
+                    messageId: "immutable",
+                });
+            },
+        };
+    },
+});

package/lib/rules/no-reactive-reassign.d.ts

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

package/lib/rules/no-reactive-reassign.js

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../utils");
+const eslint_utils_1 = require("@eslint-community/eslint-utils");
+exports.default = (0, utils_1.createRule)("no-reactive-reassign", {
+    meta: {
+        docs: {
+            description: "disallow reassigning reactive values",
+            category: "Possible Errors",
+            recommended: false,
+        },
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    props: {
+                        type: "boolean",
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            assignmentToReactiveValue: "Assignment to reactive value '{{name}}'.",
+            assignmentToReactiveValueProp: "Assignment to property of reactive value '{{name}}'.",
+        },
+        type: "problem",
+    },
+    create(context) {
+        const props = context.options[0]?.props !== false;
+        const sourceCode = context.getSourceCode();
+        const scopeManager = sourceCode.scopeManager;
+        const globalScope = scopeManager.globalScope;
+        const toplevelScope = globalScope?.childScopes.find((scope) => scope.type === "module") ||
+            globalScope;
+        if (!globalScope || !toplevelScope) {
+            return {};
+        }
+        const CHECK_REASSIGN = {
+            UpdateExpression: ({ parent }) => ({ type: "reassign", node: parent }),
+            UnaryExpression: ({ parent }) => {
+                if (parent.operator === "delete") {
+                    return { type: "reassign", node: parent };
+                }
+                return null;
+            },
+            AssignmentExpression: ({ node, parent, }) => {
+                if (parent.left === node) {
+                    return { type: "reassign", node: parent };
+                }
+                return null;
+            },
+            ForInStatement: ({ node, parent, }) => {
+                if (parent.left === node) {
+                    return { type: "reassign", node: parent };
+                }
+                return null;
+            },
+            ForOfStatement: ({ node, parent, }) => {
+                if (parent.left === node) {
+                    return { type: "reassign", node: parent };
+                }
+                return null;
+            },
+            CallExpression: ({ node, parent, pathNodes, }) => {
+                if (pathNodes.length > 0 && parent.callee === node) {
+                    const mem = pathNodes[pathNodes.length - 1];
+                    const callName = (0, eslint_utils_1.getPropertyName)(mem);
+                    if (callName &&
+                        /^(?:push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill)$/u.test(callName)) {
+                        return {
+                            type: "reassign",
+                            node: parent,
+                            pathNodes: pathNodes.slice(0, -1),
+                        };
+                    }
+                }
+                return null;
+            },
+            MemberExpression: ({ node, parent, pathNodes, }) => {
+                if (parent.object === node) {
+                    return {
+                        type: "check",
+                        node: parent,
+                        pathNodes: [...pathNodes, parent],
+                    };
+                }
+                return null;
+            },
+            ChainExpression: ({ parent }) => {
+                return { type: "check", node: parent };
+            },
+            ConditionalExpression: ({ node, parent, }) => {
+                if (parent.test === node) {
+                    return null;
+                }
+                return { type: "check", node: parent };
+            },
+            Property: ({ node, parent }) => {
+                if (parent.value === node &&
+                    parent.parent &&
+                    parent.parent.type === "ObjectPattern") {
+                    return { type: "check", node: parent.parent };
+                }
+                return null;
+            },
+            ArrayPattern: ({ node, parent }) => {
+                if (parent.elements.includes(node)) {
+                    return { type: "check", node: parent };
+                }
+                return null;
+            },
+            RestElement: ({ node, parent }) => {
+                if (parent.argument === node && parent.parent) {
+                    return {
+                        type: "check",
+                        node: parent.parent,
+                    };
+                }
+                return null;
+            },
+            SvelteDirective: ({ node, parent, }) => {
+                if (parent.kind !== "Binding") {
+                    return null;
+                }
+                if (parent.shorthand || parent.expression === node) {
+                    return {
+                        type: "reassign",
+                        node: parent,
+                    };
+                }
+                return null;
+            },
+        };
+        function getReassignData(expr) {
+            let pathNodes = [];
+            let node = expr;
+            let parent;
+            while ((parent = node.parent)) {
+                const check = CHECK_REASSIGN[parent.type];
+                if (!check) {
+                    return null;
+                }
+                const result = check({ node, parent, pathNodes });
+                if (!result) {
+                    return null;
+                }
+                pathNodes = result.pathNodes || pathNodes;
+                if (result.type === "reassign") {
+                    return {
+                        node: result.node,
+                        pathNodes,
+                    };
+                }
+                node = result.node;
+            }
+            return null;
+        }
+        return {
+            SvelteReactiveStatement(node) {
+                if (node.body.type !== "ExpressionStatement" ||
+                    node.body.expression.type !== "AssignmentExpression" ||
+                    node.body.expression.operator !== "=") {
+                    return;
+                }
+                const assignment = node.body.expression;
+                for (const variable of toplevelScope.variables) {
+                    if (!variable.defs.some((def) => def.node === assignment)) {
+                        continue;
+                    }
+                    for (const reference of variable.references) {
+                        const id = reference.identifier;
+                        if ((assignment.left.range[0] <= id.range[0] &&
+                            id.range[1] <= assignment.left.range[1]) ||
+                            id.type === "JSXIdentifier") {
+                            continue;
+                        }
+                        const reassign = getReassignData(id);
+                        if (!reassign) {
+                            continue;
+                        }
+                        if (!props && reassign.pathNodes.length > 0)
+                            continue;
+                        context.report({
+                            node: reassign.node,
+                            messageId: reassign.pathNodes.length === 0
+                                ? "assignmentToReactiveValue"
+                                : "assignmentToReactiveValueProp",
+                            data: {
+                                name: id.name,
+                            },
+                        });
+                    }
+                }
+            },
+        };
+    },
+});

package/lib/utils/rules.js

@@ -29,11 +29,13 @@ const no_dupe_use_directives_1 = __importDefault(require("../rules/no-dupe-use-d
 const no_dynamic_slot_name_1 = __importDefault(require("../rules/no-dynamic-slot-name"));
 const no_export_load_in_svelte_module_in_kit_pages_1 = __importDefault(require("../rules/no-export-load-in-svelte-module-in-kit-pages"));
 const no_extra_reactive_curlies_1 = __importDefault(require("../rules/no-extra-reactive-curlies"));
+const no_immutable_reactive_statements_1 = __importDefault(require("../rules/no-immutable-reactive-statements"));
 const no_inner_declarations_1 = __importDefault(require("../rules/no-inner-declarations"));
 const no_not_function_handler_1 = __importDefault(require("../rules/no-not-function-handler"));
 const no_object_in_text_mustaches_1 = __importDefault(require("../rules/no-object-in-text-mustaches"));
 const no_reactive_functions_1 = __importDefault(require("../rules/no-reactive-functions"));
 const no_reactive_literals_1 = __importDefault(require("../rules/no-reactive-literals"));
+const no_reactive_reassign_1 = __importDefault(require("../rules/no-reactive-reassign"));
 const no_shorthand_style_property_overrides_1 = __importDefault(require("../rules/no-shorthand-style-property-overrides"));
 const no_spaces_around_equal_signs_in_attribute_1 = __importDefault(require("../rules/no-spaces-around-equal-signs-in-attribute"));
 const no_store_async_1 = __importDefault(require("../rules/no-store-async"));
@@ -83,11 +85,13 @@ exports.rules = [
     no_dynamic_slot_name_1.default,
     no_export_load_in_svelte_module_in_kit_pages_1.default,
     no_extra_reactive_curlies_1.default,
+    no_immutable_reactive_statements_1.default,
     no_inner_declarations_1.default,
     no_not_function_handler_1.default,
     no_object_in_text_mustaches_1.default,
     no_reactive_functions_1.default,
     no_reactive_literals_1.default,
+    no_reactive_reassign_1.default,
     no_shorthand_style_property_overrides_1.default,
     no_spaces_around_equal_signs_in_attribute_1.default,
     no_store_async_1.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "2.26.0",
+  "version": "2.27.1",
   "description": "ESLint plugin for Svelte using AST",
   "repository": "git+https://github.com/sveltejs/eslint-plugin-svelte.git",
   "homepage": "https://sveltejs.github.io/eslint-plugin-svelte",
@@ -73,7 +73,7 @@
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.4",
     "postcss-safe-parser": "^6.0.0",
-    "svelte-eslint-parser": "^0.26.0"
+    "svelte-eslint-parser": "^0.27.0"
   },
   "devDependencies": {
     "@1stg/browserslist-config": "^1.2.3",
@@ -81,7 +81,7 @@
     "@1stg/lint-staged": "^3.3.0",
     "@1stg/remark-config": "^4.0.3",
     "@1stg/simple-git-hooks": "^0.2.1",
-    "@1stg/stylelint-config": "^4.6.1",
+    "@1stg/stylelint-config": "^5.0.0",
     "@babel/core": "^7.16.0",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-function-bind": "^7.16.7",
@@ -158,7 +158,7 @@
     "semver": "^7.3.5",
     "simple-git-hooks": "^2.8.0",
     "stylelint": "^15.0.0",
-    "stylelint-config-standard": "^32.0.0",
+    "stylelint-config-standard": "^33.0.0",
     "stylus": "^0.59.0",
     "svelte": "^3.46.1",
     "svelte-adapter-ghpages": "0.1.0",