eslint-plugin-svelte 2.1.0 → 2.1.1

package/README.md

@@ -331,9 +331,40 @@ Please use GitHub's Issues/PRs.
 
 ### Development Tools
 
-- `yarn test` runs tests and measures coverage.
+- `yarn test` runs tests.
+- `yarn cover` runs tests and measures coverage.
 - `yarn update` runs in order to update readme and recommended configuration.
 
+### Test the Rule
+
+Rule testing almost always uses fixtures.  
+For example, for an `indent` rule, the `.ts` file that runs the test is `tests/src/rules/indent.ts` and the fixture is in `tests/fixtures/rules/indent`.  
+The fixture directory has an `invalid` directory and a `valid` directory.
+
+- The `invalid` directory contains test cases where the rule reports problems.
+- The `valid` directory contains test cases where the rule does not report a problem.
+
+The fixture input file should be named `*-input.svelte`. It is automatically collected and tested.  
+If your test requires configuration, you need to add a json file with the configuration.
+
+- If you want to apply a configuration to `my-test-input.svelte`, add `my-test-config.json`.
+- If you want to apply the same configuration to all the fixtures in that directory, add `_config.json`.
+
+To verify the output of invalid test cases requires `*-errors.json`, and `*-output.svelte` (for auto-fix). However, you don't have to add them yourself. If they do not exist, they will be automatically generated when you run the test. In other words, delete them manually when you want to recreate them.
+
+**Tips**:
+
+If you want to test only one rule, run the following command (for `indent` rule):
+
+```sh
+yarn test -g indent
+```
+
+Take https://stackoverflow.com/questions/10832031/how-to-run-a-single-test-with-mocha as reference for details.
+
+If you want to test only `my-test-input.svelte`, add `my-test-config.json` and save `{"only": true}`.  
+(Note that `{"only": true}` must be removed before making a pull request.)
+
 ### Working With Rules
 
 This plugin uses [svelte-eslint-parser](https://github.com/ota-meshi/svelte-eslint-parser) for the parser. Check [here](https://ota-meshi.github.io/svelte-eslint-parser/) to find out about AST.

package/lib/rules/prefer-class-directive.js

@@ -229,8 +229,9 @@ exports.default = (0, utils_1.createRule)("prefer-class-directive", {
             report(node, map, attr);
         }
         return {
-            "SvelteElement > SvelteStartTag > SvelteAttribute"(node) {
-                if (node.key.name !== "class") {
+            "SvelteStartTag > SvelteAttribute"(node) {
+                if (!(0, ast_utils_1.isHTMLElementLike)(node.parent.parent) ||
+                    node.key.name !== "class") {
                     return;
                 }
                 for (let index = 0; index < node.value.length; index++) {

package/lib/rules/prefer-style-directive.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../utils");
 const css_utils_1 = require("../utils/css-utils");
+const ast_utils_1 = require("../utils/ast-utils");
 function isStringLiteral(node) {
     return node.type === "Literal" && typeof node.value === "string";
 }
@@ -140,7 +141,8 @@ exports.default = (0, utils_1.createRule)("prefer-style-directive", {
         }
         return {
             "SvelteStartTag > SvelteAttribute"(node) {
-                if (!isHTMLElement(node.parent.parent) || node.key.name !== "style") {
+                if (!(0, ast_utils_1.isHTMLElementLike)(node.parent.parent) ||
+                    node.key.name !== "style") {
                     return;
                 }
                 const root = (0, css_utils_1.parseStyleAttributeValue)(node, context);
@@ -149,16 +151,5 @@ exports.default = (0, utils_1.createRule)("prefer-style-directive", {
                 }
             },
         };
-        function isHTMLElement(node) {
-            if (node.type === "SvelteElement") {
-                if (node.kind === "html") {
-                    return true;
-                }
-                if (node.kind === "special") {
-                    return node.name.name === "svelte:element";
-                }
-            }
-            return false;
-        }
     },
 });

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

@@ -5,6 +5,11 @@ 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 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 & {
+        name: "svelte:element";
+    };
+});
 export declare function findAttribute<N extends string>(node: SvAST.SvelteElement | SvAST.SvelteScriptElement | SvAST.SvelteStyleElement | SvAST.SvelteStartTag, name: N): (SvAST.SvelteAttribute & {
     key: SvAST.SvelteAttribute["key"] & {
         name: N;

package/lib/utils/ast-utils.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMustacheTokens = exports.getAttributeValueQuoteAndRange = exports.getScope = exports.findVariable = exports.getLangValue = exports.getStaticAttributeValue = exports.findBindDirective = exports.findShorthandAttribute = exports.findAttribute = exports.needParentheses = exports.getStringIfConstant = exports.equalTokens = void 0;
+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"));
 function equalTokens(left, right, sourceCode) {
     const tokensL = sourceCode.getTokens(left);
@@ -95,6 +95,20 @@ function needParentheses(node, kind) {
     return false;
 }
 exports.needParentheses = needParentheses;
+function isHTMLElementLike(node) {
+    if (node.type !== "SvelteElement") {
+        return false;
+    }
+    switch (node.kind) {
+        case "html":
+            return true;
+        case "special":
+            return node.name.name === "svelte:element";
+        default:
+            return false;
+    }
+}
+exports.isHTMLElementLike = isHTMLElementLike;
 function findAttribute(node, name) {
     const startTag = node.type === "SvelteStartTag" ? node : node.startTag;
     for (const attr of startTag.attributes) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "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",
@@ -77,7 +77,7 @@
     "@ota-meshi/eslint-plugin": "^0.11.0",
     "@sindresorhus/slugify": "^2.1.0",
     "@sveltejs/adapter-static": "^1.0.0-next.26",
-    "@sveltejs/kit": "^1.0.0-next.240",
+    "@sveltejs/kit": "1.0.0-next.358",
     "@types/babel__core": "^7.1.19",
     "@types/eslint": "^8.0.0",
     "@types/eslint-scope": "^3.7.0",
@@ -122,7 +122,7 @@
     "pirates": "^4.0.1",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.2.1",
-    "prettier-plugin-pkg": "^0.15.0",
+    "prettier-plugin-pkg": "^0.16.0",
     "prettier-plugin-svelte": "^2.6.0",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.25.0",