@kws3/eslint-plugin-svelte4 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 KWS3 Media Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@kws3/eslint-plugin-svelte4",
+  "version": "1.0.0",
+  "description": "Kws3 specific svelte4 eslint rules",
+  "main": "src/index.js",
+  "author": "Khaled Ahmed <me.khaled@gmail.com>",
+  "contributors": [
+    "Sabir Mohammed <sabirveli@gmail.com>",
+    "Suneesh S K <suneeshsk3@gmail.com>"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "eslint",
+    "rules",
+    "svelte",
+    "svelte4"
+  ],
+  "peerDependencies": {
+    "eslint": "^7.0.0 || ^8.0.0-0",
+    "svelte": "^4.0.0",
+    "svelte-eslint-parser": "0.33.1"
+  },
+  "gitHead": "1f27bb086a10679e03f1657dd1f86800fffe1ab5"
+}

package/src/index.js

@@ -0,0 +1,28 @@
+const noDateStringArg = require("./rules/no-date-string-arg");
+const noDatalistScaffold = require("./rules/no-datalist-scaffold");
+const noRawtext = require("./rules/no-raw-text");
+
+const allRules = [noDateStringArg, noDatalistScaffold, noRawtext];
+
+const configs = {
+  base: {
+    plugins: ["@kws3/svelte3"],
+    overrides: [
+      {
+        files: ["*.svelte"],
+        parser: require.resolve("svelte-eslint-parser"),
+        rules: allRules.reduce((obj, r) => {
+          obj[r.meta.docs.ruleId] = r.meta.recommended ? "error" : "off";
+          return obj;
+        }, {}),
+      },
+    ],
+  },
+};
+
+const rules = allRules.reduce((obj, r) => {
+  obj[r.meta.docs.ruleName] = r;
+  return obj;
+}, {});
+
+module.exports = { configs, rules };

package/src/rules/no-datalist-scaffold.js

@@ -0,0 +1,33 @@
+const createRule = require("../utils");
+
+module.exports = createRule("no-datalist-scaffold", {
+  meta: {
+    docs: {
+      description: "Disallow wrapping DataList with ViewScaffold",
+    },
+    recommended: true,
+    schema: [],
+  },
+  create: function (context) {
+    return {
+      SvelteElement(node) {
+        if (node.kind === "component" && node.name.name === "ViewScaffold") {
+          if (checkChildComponent(node.children, "DataList")) {
+            context.report(node, "Do not use Viewscaffold to wrap DataList");
+          }
+        }
+      },
+    };
+  },
+});
+
+function checkChildComponent(node, childComponentName) {
+  return node.some(
+    (item) =>
+      item.type === "SvelteElement" &&
+      item.name &&
+      item.name.name === childComponentName
+  )
+    ? true
+    : false;
+}

package/src/rules/no-date-string-arg.js

@@ -0,0 +1,23 @@
+const createRule = require("../utils");
+
+module.exports = createRule("no-date-string-arg", {
+  meta: {
+    docs: {
+      description: "Disallow Date constructor with string argument",
+    },
+    recommended: true,
+    schema: [],
+  },
+  create: function (context) {
+    return {
+      NewExpression(node) {
+        if (node.callee.name === "Date" && node.arguments.length > 0) {
+          context.report(
+            node,
+            "Use createDate() instead because Safari parses string dates differently"
+          );
+        }
+      },
+    };
+  },
+});

package/src/rules/no-raw-text.js

@@ -0,0 +1,235 @@
+const createRule = require("../utils");
+
+const RE_REGEXP_STR = /^\/(.+)\/(.*)$/u;
+
+const hasOnlyWhitespace = (value) => /^[\r\n\s\t\f\v]+$/.test(value);
+
+function parseTargetAttrs(options) {
+  const regexps = [];
+  for (const tagName of Object.keys(options)) {
+    const attrs = new Set(options[tagName]);
+    regexps.push({
+      name: toRegExp(tagName),
+      attrs,
+    });
+  }
+  return regexps;
+}
+
+function toRegExp(str) {
+  const parts = RE_REGEXP_STR.exec(str);
+  if (parts) {
+    return new RegExp(parts[1], parts[2]);
+  }
+  return new RegExp(`^${encodeURI(str)}$`);
+}
+
+function getTargetAttrs(tagName, config) {
+  const result = [];
+  for (const { name, attrs } of config.attributes) {
+    name.lastIndex = 0;
+    if (name.test(tagName)) {
+      result.push(...attrs);
+    }
+  }
+
+  return new Set(result);
+}
+
+function checkSvelteLiteralOrText(context, literal, config) {
+  if (testValue(literal.value, config)) {
+    return;
+  }
+
+  const loc = literal.loc;
+  context.report({
+    loc,
+    message: `Raw text '${literal.value.trim()}' is used. Use {$T.Something()}`,
+  });
+}
+
+function testValue(value, config) {
+  if (typeof value === "string") {
+    return (
+      hasOnlyWhitespace(value) ||
+      config.ignorePattern.test(value.trim()) ||
+      config.ignoreText.includes(value.trim())
+    );
+  } else {
+    return false;
+  }
+}
+
+function checkSvelteMustacheTagText(context, node, config) {
+  if (!node.expression || !node.parent) {
+    return;
+  }
+
+  if (node.parent.type === "SvelteElement") {
+    checkExpressionText(context, node.expression, config);
+  }
+}
+
+function checkExpressionText(context, expression, config) {
+  if (expression.type === "Literal") {
+    checkLiteral(context, expression, config);
+  } else if (isStaticTemplateLiteral(expression)) {
+    checkLiteral(context, expression, config);
+  } else if (expression.type === "ConditionalExpression") {
+    const targets = [expression.consequent, expression.alternate];
+    targets.forEach((target) => {
+      if (target.type === "Literal") {
+        checkLiteral(context, target, config);
+      } else if (isStaticTemplateLiteral(target)) {
+        checkLiteral(context, target, config);
+      }
+    });
+  }
+}
+
+function checkLiteral(context, literal, config) {
+  const value =
+    literal.type !== "TemplateLiteral"
+      ? literal.value
+      : literal.quasis[0].value.cooked;
+
+  if (testValue(value, config)) {
+    return;
+  }
+
+  const loc = literal.loc;
+  context.report({
+    loc,
+    message: `Raw text '${value.trim()}' is used. Use {$T.Something()}`,
+  });
+}
+
+function isStaticTemplateLiteral(node) {
+  return Boolean(
+    node && node.type === "TemplateLiteral" && node.expressions.length === 0
+  );
+}
+
+function create(context) {
+  const sourceCode = context.getSourceCode(),
+    config = {
+      attributes: [],
+      ignorePattern: /^$/,
+      ignoreNodes: [],
+      ignoreText: [],
+    };
+
+  if (context.options[0]?.ignorePattern) {
+    config.ignorePattern = new RegExp(context.options[0].ignorePattern, "u");
+  }
+
+  if (context.options[0]?.ignoreNodes) {
+    config.ignoreNodes = context.options[0].ignoreNodes;
+  }
+
+  if (context.options[0]?.ignoreText) {
+    config.ignoreText = context.options[0].ignoreText;
+  }
+
+  if (context.options[0]?.attributes) {
+    config.attributes = parseTargetAttrs(context.options[0].attributes);
+  }
+
+  function isIgnore(node) {
+    const element = getElement(node);
+
+    return (
+      !element ||
+      config.ignoreNodes.includes(sourceCode.text.slice(...element.name.range))
+    );
+  }
+
+  function getElement(node) {
+    let target = node.parent;
+    while (
+      target.type === "SvelteIfBlock" ||
+      target.type === "SvelteElseBlock" ||
+      target.type === "SvelteEachBlock" ||
+      target.type === "SvelteAwaitBlock" ||
+      target.type === "SvelteAwaitPendingBlock" ||
+      target.type === "SvelteAwaitThenBlock" ||
+      target.type === "SvelteAwaitCatchBlock" ||
+      target.type === "SvelteKeyBlock"
+    ) {
+      target = target.parent;
+    }
+
+    if (target.type === "SvelteElement") {
+      return target;
+    }
+
+    return null;
+  }
+
+  return {
+    SvelteAttribute(node) {
+      if (node.value.length !== 1 || node.value[0].type !== "SvelteLiteral") {
+        return;
+      }
+
+      const nameNode = node.parent.parent.name;
+      const tagName = sourceCode.text.slice(...nameNode.range);
+      const attrName = node.key.name;
+
+      if (!getTargetAttrs(tagName, config).has(attrName)) {
+        return;
+      }
+
+      checkSvelteLiteralOrText(context, node.value[0], config);
+    },
+    SvelteMustacheTag(node) {
+      if (isIgnore(node)) {
+        return;
+      }
+      checkSvelteMustacheTagText(context, node, config);
+    },
+    SvelteText(node) {
+      if (isIgnore(node)) {
+        return;
+      }
+      checkSvelteLiteralOrText(context, node, config);
+    },
+  };
+}
+
+module.exports = createRule("no-raw-text", {
+  meta: {
+    docs: {
+      description: "Disallow string literals and enforce translatable strings",
+    },
+    recommended: false,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          attributes: {
+            type: "object",
+            patternProperties: {
+              "^(?:\\S+|/.*/[a-z]*)$": {
+                type: "array",
+                items: { type: "string" },
+                uniqueItems: true,
+              },
+            },
+            additionalProperties: false,
+          },
+          ignoreNodes: {
+            type: "array",
+          },
+          ignorePattern: {
+            type: "string",
+          },
+          ignoreText: {
+            type: "array",
+          },
+        },
+      },
+    ],
+  },
+  create,
+});

package/src/utils/index.js

@@ -0,0 +1,13 @@
+module.exports = function createRule(ruleName, rule) {
+  return {
+    meta: {
+      ...rule.meta,
+      docs: {
+        ...rule.meta.docs,
+        ruleId: `@kws3/svelte3/${ruleName}`,
+        ruleName,
+      },
+    },
+    create: rule.create,
+  };
+};