eslint-plugin-svelte 2.9.0 → 2.10.0

package/README.md

@@ -294,6 +294,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-reactive-literals](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-reactive-literals/) | don't assign literal values in reactive statements | :bulb: |
 | [svelte/no-unused-svelte-ignore](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/) | disallow unused svelte-ignore comments | :star: |
 | [svelte/no-useless-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :wrench: |
+| [svelte/prefer-destructured-store-props](https://ota-meshi.github.io/eslint-plugin-svelte/rules/prefer-destructured-store-props/) | destructure values from object stores for better change tracking & fewer redraws | :bulb: |
 | [svelte/require-optimized-style-attribute](https://ota-meshi.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/) | require style attributes that can be optimized |  |
 | [svelte/require-stores-init](https://ota-meshi.github.io/eslint-plugin-svelte/rules/require-stores-init/) | require initial value in store |  |
 

package/lib/rules/prefer-destructured-store-props.d.ts

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

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

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const eslint_utils_1 = require("eslint-utils");
+const esutils_1 = require("esutils");
+const utils_1 = require("../utils");
+const ast_utils_1 = require("../utils/ast-utils");
+exports.default = (0, utils_1.createRule)("prefer-destructured-store-props", {
+    meta: {
+        docs: {
+            description: "destructure values from object stores for better change tracking & fewer redraws",
+            category: "Best Practices",
+            recommended: false,
+        },
+        hasSuggestions: true,
+        schema: [],
+        messages: {
+            useDestructuring: `Destructure {{property}} from {{store}} for better change tracking & fewer redraws`,
+            fixUseDestructuring: `Using destructuring like $: ({ {{property}} } = {{store}}); will run faster`,
+            fixUseVariable: `Using the predefined reactive variable {{variable}}`,
+        },
+        type: "suggestion",
+    },
+    create(context) {
+        let mainScript = null;
+        const reports = [];
+        let inScriptElement = false;
+        const storeMemberAccessStack = [];
+        function* findReactiveVariable(object, propName) {
+            const storeVar = (0, ast_utils_1.findVariable)(context, object);
+            if (!storeVar) {
+                return;
+            }
+            for (const reference of storeVar.references) {
+                const id = reference.identifier;
+                if (id.name !== object.name)
+                    continue;
+                if (isReactiveVariableDefinitionWithMemberExpression(id)) {
+                    yield id.parent.parent.left;
+                }
+                else if (isReactiveVariableDefinitionWithDestructuring(id)) {
+                    const prop = id.parent.left.properties.find((prop) => prop.type === "Property" &&
+                        prop.value.type === "Identifier" &&
+                        (0, eslint_utils_1.getPropertyName)(prop) === propName);
+                    if (prop) {
+                        yield prop.value;
+                    }
+                }
+            }
+            function isReactiveVariableDefinitionWithMemberExpression(node) {
+                return (node.parent?.type === "MemberExpression" &&
+                    node.parent.object === node &&
+                    (0, eslint_utils_1.getPropertyName)(node.parent) === propName &&
+                    node.parent.parent?.type === "AssignmentExpression" &&
+                    node.parent.parent.right === node.parent &&
+                    node.parent.parent.left.type === "Identifier" &&
+                    node.parent.parent.parent?.type === "ExpressionStatement" &&
+                    node.parent.parent.parent
+                        .parent?.type === "SvelteReactiveStatement");
+            }
+            function isReactiveVariableDefinitionWithDestructuring(node) {
+                return (node.parent?.type === "AssignmentExpression" &&
+                    node.parent.right === node &&
+                    node.parent.left.type === "ObjectPattern" &&
+                    node.parent.parent?.type === "ExpressionStatement" &&
+                    node.parent.parent.parent
+                        ?.type === "SvelteReactiveStatement");
+            }
+        }
+        function hasTopLevelVariable(name) {
+            const scopeManager = context.getSourceCode().scopeManager;
+            if (scopeManager.globalScope?.set.has(name)) {
+                return true;
+            }
+            const moduleScope = scopeManager.globalScope?.childScopes.find((s) => s.type === "module");
+            return moduleScope?.set.has(name) || false;
+        }
+        return {
+            SvelteScriptElement(node) {
+                inScriptElement = true;
+                const scriptContext = (0, ast_utils_1.findAttribute)(node, "context");
+                const contextValue = scriptContext?.value.length === 1 && scriptContext.value[0];
+                if (contextValue &&
+                    contextValue.type === "SvelteLiteral" &&
+                    contextValue.value === "module") {
+                    return;
+                }
+                mainScript = node;
+            },
+            "SvelteScriptElement:exit"() {
+                inScriptElement = false;
+            },
+            "MemberExpression[object.type='Identifier'][object.name=/^\\$/]"(node) {
+                if (inScriptElement)
+                    return;
+                storeMemberAccessStack.unshift({ node, identifiers: [] });
+            },
+            Identifier(node) {
+                storeMemberAccessStack[0]?.identifiers.push(node);
+            },
+            "MemberExpression[object.type='Identifier'][object.name=/^\\$/]:exit"(node) {
+                if (storeMemberAccessStack[0]?.node !== node)
+                    return;
+                const { identifiers } = storeMemberAccessStack.shift();
+                for (const id of identifiers) {
+                    if (!(0, ast_utils_1.isExpressionIdentifier)(id))
+                        continue;
+                    const variable = (0, ast_utils_1.findVariable)(context, id);
+                    const isTopLevel = !variable ||
+                        variable.scope.type === "module" ||
+                        variable.scope.type === "global";
+                    if (!isTopLevel) {
+                        return;
+                    }
+                }
+                reports.push(node);
+            },
+            "Program:exit"() {
+                const scriptEndTag = mainScript && mainScript.endTag;
+                for (const node of reports) {
+                    const store = node.object.name;
+                    const suggest = [];
+                    if (!node.computed) {
+                        for (const variable of findReactiveVariable(node.object, node.property.name)) {
+                            suggest.push({
+                                messageId: "fixUseVariable",
+                                data: {
+                                    variable: variable.name,
+                                },
+                                fix(fixer) {
+                                    return fixer.replaceText(node, variable.name);
+                                },
+                            });
+                        }
+                        if (scriptEndTag) {
+                            suggest.push({
+                                messageId: "fixUseDestructuring",
+                                data: {
+                                    store,
+                                    property: node.property.name,
+                                },
+                                fix(fixer) {
+                                    const propName = node.property.name;
+                                    let varName = propName;
+                                    if (varName.startsWith("$")) {
+                                        varName = varName.slice(1);
+                                    }
+                                    const baseName = varName;
+                                    let suffix = 0;
+                                    if (esutils_1.keyword.isReservedWordES6(varName, true) ||
+                                        esutils_1.keyword.isRestrictedWord(varName)) {
+                                        varName = `${baseName}${++suffix}`;
+                                    }
+                                    while (hasTopLevelVariable(varName)) {
+                                        varName = `${baseName}${++suffix}`;
+                                    }
+                                    return [
+                                        fixer.insertTextAfterRange([scriptEndTag.range[0], scriptEndTag.range[0]], `$: ({ ${propName}${propName !== varName ? `: ${varName}` : ""} } = ${store});\n`),
+                                        fixer.replaceText(node, varName),
+                                    ];
+                                },
+                            });
+                        }
+                    }
+                    context.report({
+                        node,
+                        messageId: "useDestructuring",
+                        data: {
+                            store,
+                            property: !node.computed
+                                ? node.property.name
+                                : context
+                                    .getSourceCode()
+                                    .getText(node.property)
+                                    .replace(/\s+/g, " "),
+                        },
+                        suggest,
+                    });
+                }
+            },
+        };
+    },
+});

package/lib/shared/svelte-compile-warns/transform/babel.js

@@ -33,7 +33,7 @@ function transform(node, context) {
             mappings: output.map.mappings,
         };
     }
-    catch (e) {
+    catch (_e) {
         return null;
     }
 }

package/lib/shared/svelte-compile-warns/transform/less.js

@@ -35,7 +35,7 @@ function transform(node, context) {
             mappings: JSON.parse(output.map).mappings,
         };
     }
-    catch (e) {
+    catch (_e) {
         return null;
     }
 }

package/lib/shared/svelte-compile-warns/transform/postcss.js

@@ -38,7 +38,7 @@ function transform(node, context) {
             mappings: result.map.toJSON().mappings,
         };
     }
-    catch (e) {
+    catch (_e) {
         return null;
     }
 }

package/lib/shared/svelte-compile-warns/transform/sass.js

@@ -29,7 +29,7 @@ function transform(node, context, type) {
             mappings: output.sourceMap.mappings,
         };
     }
-    catch (e) {
+    catch (_e) {
         return null;
     }
 }

package/lib/shared/svelte-compile-warns/transform/stylus.js

@@ -34,7 +34,7 @@ function transform(node, context) {
                 .mappings,
         };
     }
-    catch (e) {
+    catch (_e) {
         return null;
     }
 }

package/lib/types.d.ts

@@ -114,7 +114,7 @@ declare type SuggestionDescriptorMessage = {
 } | {
     messageId: string;
 };
-declare type SuggestionReportDescriptor = SuggestionDescriptorMessage & ReportDescriptorOptionsBase;
+export declare type SuggestionReportDescriptor = SuggestionDescriptorMessage & ReportDescriptorOptionsBase;
 interface ReportDescriptorOptions extends ReportDescriptorOptionsBase {
     suggest?: SuggestionReportDescriptor[] | null;
 }

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

@@ -1,9 +1,10 @@
 import type { ASTNode, RuleContext, SourceCode } from "../types";
 import type * as ESTree from "estree";
+import type { TSESTree } from "@typescript-eslint/types";
 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: ESTree.Expression): string | null;
+export declare function getStringIfConstant(node: ESTree.Expression | TSESTree.Expression): string | null;
 export declare function needParentheses(node: ESTree.Expression, kind: "not" | "logical"): boolean;
 export declare function isHTMLElementLike(node: SvAST.SvelteElement | SvAST.SvelteScriptElement | SvAST.SvelteStyleElement): node is SvAST.SvelteHTMLElement | (SvAST.SvelteSpecialElement & {
     name: SvAST.SvelteName & {
@@ -29,7 +30,7 @@ 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: ESTree.Identifier): Scope.Variable | null;
+export declare function findVariable(context: RuleContext, node: ESTree.Identifier | TSESTree.Identifier): Scope.Variable | null;
 export declare function getScope(context: RuleContext, currentNode: ESTree.Node): Scope.Scope;
 export declare type QuoteAndRange = {
     quote: "unquoted" | "double" | "single";
@@ -50,3 +51,4 @@ export declare function getAttributeKeyText(node: SvAST.SvelteAttribute | SvAST.
 export declare function getDirectiveName(node: SvAST.SvelteDirective): string;
 export declare function getNodeName(node: SvAST.SvelteElement): string;
 export declare function isVoidHtmlElement(node: SvAST.SvelteElement): boolean;
+export declare function isExpressionIdentifier(node: TSESTree.Identifier): boolean;

package/lib/utils/ast-utils.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isVoidHtmlElement = exports.getNodeName = exports.getDirectiveName = exports.getAttributeKeyText = exports.getMustacheTokens = exports.getAttributeValueQuoteAndRange = exports.getScope = exports.findVariable = exports.getLangValue = exports.getStaticAttributeValue = exports.findBindDirective = exports.findShorthandAttribute = exports.findAttribute = exports.isHTMLElementLike = exports.needParentheses = exports.getStringIfConstant = exports.equalTokens = void 0;
+exports.isExpressionIdentifier = exports.isVoidHtmlElement = exports.getNodeName = exports.getDirectiveName = exports.getAttributeKeyText = exports.getMustacheTokens = exports.getAttributeValueQuoteAndRange = exports.getScope = exports.findVariable = exports.getLangValue = exports.getStaticAttributeValue = exports.findBindDirective = exports.findShorthandAttribute = exports.findAttribute = exports.isHTMLElementLike = exports.needParentheses = exports.getStringIfConstant = exports.equalTokens = void 0;
 const eslintUtils = __importStar(require("eslint-utils"));
 const void_elements_1 = __importDefault(require("./void-elements"));
 function equalTokens(left, right, sourceCode) {
@@ -168,7 +168,15 @@ function getLangValue(node) {
 }
 exports.getLangValue = getLangValue;
 function findVariable(context, node) {
-    return eslintUtils.findVariable(getScope(context, node), node);
+    const initialScope = eslintUtils.getInnermostScope(getScope(context, node), node);
+    const variable = eslintUtils.findVariable(initialScope, node);
+    if (variable) {
+        return variable;
+    }
+    if (!node.name.startsWith("$")) {
+        return variable;
+    }
+    return eslintUtils.findVariable(initialScope, node.name.slice(1));
 }
 exports.findVariable = findVariable;
 function getScope(context, currentNode) {
@@ -346,3 +354,39 @@ function isVoidHtmlElement(node) {
     return void_elements_1.default.includes(getNodeName(node));
 }
 exports.isVoidHtmlElement = isVoidHtmlElement;
+function isExpressionIdentifier(node) {
+    const parent = node.parent;
+    if (!parent) {
+        return true;
+    }
+    if (parent.type === "MemberExpression") {
+        return !parent.computed || parent.property !== node;
+    }
+    if (parent.type === "Property" ||
+        parent.type === "MethodDefinition" ||
+        parent.type === "PropertyDefinition") {
+        return !parent.computed || parent.key !== node;
+    }
+    if (parent.type === "FunctionDeclaration" ||
+        parent.type === "FunctionExpression" ||
+        parent.type === "ClassDeclaration" ||
+        parent.type === "ClassExpression") {
+        return parent.id !== node;
+    }
+    if (parent.type === "LabeledStatement" ||
+        parent.type === "BreakStatement" ||
+        parent.type === "ContinueStatement") {
+        return parent.label !== node;
+    }
+    if (parent.type === "MetaProperty") {
+        return parent.property !== node;
+    }
+    if (parent.type === "ImportSpecifier") {
+        return parent.imported !== node;
+    }
+    if (parent.type === "ExportSpecifier") {
+        return parent.exported !== node;
+    }
+    return true;
+}
+exports.isExpressionIdentifier = isExpressionIdentifier;

package/lib/utils/rules.js

@@ -35,6 +35,7 @@ const no_unknown_style_directive_property_1 = __importDefault(require("../rules/
 const no_unused_svelte_ignore_1 = __importDefault(require("../rules/no-unused-svelte-ignore"));
 const no_useless_mustaches_1 = __importDefault(require("../rules/no-useless-mustaches"));
 const prefer_class_directive_1 = __importDefault(require("../rules/prefer-class-directive"));
+const prefer_destructured_store_props_1 = __importDefault(require("../rules/prefer-destructured-store-props"));
 const prefer_style_directive_1 = __importDefault(require("../rules/prefer-style-directive"));
 const require_optimized_style_attribute_1 = __importDefault(require("../rules/require-optimized-style-attribute"));
 const require_stores_init_1 = __importDefault(require("../rules/require-stores-init"));
@@ -76,6 +77,7 @@ exports.rules = [
     no_unused_svelte_ignore_1.default,
     no_useless_mustaches_1.default,
     prefer_class_directive_1.default,
+    prefer_destructured_store_props_1.default,
     prefer_style_directive_1.default,
     require_optimized_style_attribute_1.default,
     require_stores_init_1.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "2.9.0",
+  "version": "2.10.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",
@@ -67,6 +67,7 @@
   "dependencies": {
     "debug": "^4.3.1",
     "eslint-utils": "^3.0.0",
+    "esutils": "^2.0.3",
     "known-css-properties": "^0.25.0",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.4",
@@ -88,7 +89,7 @@
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.2",
     "@fontsource/fira-mono": "^4.5.0",
-    "@ota-meshi/eslint-plugin": "^0.12.0",
+    "@ota-meshi/eslint-plugin": "^0.13.0",
     "@sindresorhus/slugify": "^2.1.0",
     "@sveltejs/adapter-static": "^1.0.0-next.40",
     "@sveltejs/kit": "^1.0.0-next.456",
@@ -100,11 +101,12 @@
     "@types/eslint-utils": "^3.0.1",
     "@types/eslint-visitor-keys": "^1.0.0",
     "@types/estree": "^1.0.0",
+    "@types/esutils": "^2.0.0",
     "@types/less": "^3.0.3",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.5",
     "@types/markdown-it-emoji": "^2.0.2",
-    "@types/mocha": "^9.0.0",
+    "@types/mocha": "^10.0.0",
     "@types/node": "^16.0.0",
     "@types/postcss-safe-parser": "^5.0.1",
     "@types/prismjs": "^1.26.0",
@@ -172,7 +174,7 @@
     "access": "public"
   },
   "typeCoverage": {
-    "atLeast": 98.64,
+    "atLeast": 98.71,
     "cache": true,
     "detail": true,
     "ignoreAsAssertion": true,