@rpcbase/eslint-config 0.18.0 → 0.20.0

package/eslint.config.js

@@ -6,6 +6,8 @@ import pluginReact from "eslint-plugin-react"
 import tseslint from "typescript-eslint"
 import reactRefresh from "eslint-plugin-react-refresh"
 
+import noLoneTextNode from "./src/rules/no-lone-text-node"
+
 
 /** @type {import('eslint').Linter.Config[]} */
 export const config = [
@@ -48,6 +50,7 @@ export const config = [
           caughtErrors: "none",
         },
       ],
+      "@typescript-eslint/no-explicit-any": "warn",
       "import/newline-after-import": ["error", { count: 2 }],
       // https://github.com/import-js/eslint-plugin-import/blob/HEAD/docs/rules/order.md
       "import/order": [
@@ -83,14 +86,26 @@ export const config = [
       ],
       "max-lines": [
         "warn",
-        { max: 160, skipBlankLines: true, skipComments: false },
+        { max: 300, skipBlankLines: true, skipComments: false },
       ],
-      quotes: ["error", "double"],
+      "quotes": ["error", "double"],
       "react/display-name": "off",
       "react/no-unescaped-entities": "off",
       "react/prop-types": "off",
       "react/react-in-jsx-scope": "off",
-      semi: ["error", "never"],
+      "semi": ["error", "never"],
+    },
+  },
+  {
+    plugins: {
+      rb: {
+        rules: {
+          ...noLoneTextNode,
+        }
+      }
+    },
+    rules: {
+      "rb/no-lone-text-node": "error",
     },
   },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/eslint-config",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "",
   "license": "MIT",
   "type": "module",
@@ -18,7 +18,8 @@
       "dependencies": [],
       "files": [
         "package.json",
-        "eslint.config.js"
+        "eslint.config.js",
+        "src/"
       ],
       "output": [],
       "env": {

package/src/rules/no-lone-text-node.ts

@@ -2,12 +2,53 @@ import { TSESTree, ESLintUtils } from "@typescript-eslint/experimental-utils"
 
 type MessageIds = "loneText"
 
+/**
+ * Options accepted by the rule.
+ * Currently only `ignoredChars` is supported.
+ */
+type RuleOptions = {
+  /**
+   * Additional characters that should be treated as "ignorable"
+   * when they appear as the only non-whitespace content of a text node.
+   */
+  ignoredChars?: string[]
+}
+
+type Options = [RuleOptions]
+
 const createRule = ESLintUtils.RuleCreator(
   name => `@rpcbase/eslint-config/rules/${name}`
 )
 
-export const rules = {
-  "no-lone-text-node": createRule<[], MessageIds>({
+const defaultIgnoredChars = ["*", ":", "·", "•", "—", "–", "…", "-", "+", "(", ")", "\"", "\'"]
+
+function isIgnoredText(text: string, ignored: string[]) {
+  // ignore if every non-whitespace char is in the list
+  return (
+    text.length > 0 &&
+    text.split("").every(ch => ch.trim().length === 0 || ignored.includes(ch))
+  )
+}
+
+function isMeaningful(child: TSESTree.JSXChild, ignored: string[]): boolean {
+  if (child.type === "JSXText") {
+    return !isIgnoredText(child.value.trim(), ignored) && child.value.trim().length > 0
+  }
+
+  if (
+    child.type === "JSXExpressionContainer" &&
+    child.expression.type === "Literal" &&
+    typeof child.expression.value === "string"
+  ) {
+    return child.expression.value.trim().length > 0
+  }
+
+  // Any non-text node counts as meaningful
+  return true
+}
+
+export default {
+  "no-lone-text-node": createRule<Options, MessageIds>({
     name: "no-lone-text-node",
     meta: {
       type: "problem",
@@ -16,41 +57,88 @@ export const rules = {
         recommended: "error"
       },
       messages: {
-        loneText: "Wrap text '{{text}}' in an element (e.g. <span>) to avoid Google Translate crashes."
+        loneText:
+          "Wrap text '{{text}}' in an element (e.g. <span>) to avoid Google Translate crashes."
       },
-      schema: []
+      schema: [
+        {
+          type: "object",
+          properties: {
+            ignoredChars: {
+              type: "array",
+              items: { type: "string" }
+            }
+          },
+          additionalProperties: false
+        }
+      ]
     },
-    defaultOptions: [],
+    defaultOptions: [{}],
     create(context) {
-      //----------------------------------------------------------------------
+      //--------------------------------------------------------------------
       // helpers
-      //----------------------------------------------------------------------
-
-      function isAllowedWrapper(node: TSESTree.JSXElement) {
-        const name = node.openingElement.name
-        return (
-          name.type === "JSXIdentifier" &&
-          ["span", "p", "label", "div", "strong", "em", "Trans", "button"].includes(
-            name.name
-          )
-        )
-      }
-
+      //--------------------------------------------------------------------
       function report(node: TSESTree.Node, value: string) {
         context.report({ node, messageId: "loneText", data: { text: value } })
       }
 
-      //----------------------------------------------------------------------
+      //--------------------------------------------------------------------
       // visitors
-      //----------------------------------------------------------------------
-
+      //--------------------------------------------------------------------
       return {
         JSXElement(node) {
-          if (isAllowedWrapper(node)) return
+          const options = context.options[0] ?? {}
+          const ignored = options.ignoredChars ?? defaultIgnoredChars
+
+          // all meaningful children (ignoring whitespace & ignored chars)
+          const meaningfulChildren = node.children.filter(child =>
+            isMeaningful(child, ignored)
+          )
+
+          const singleMeaningfulTextChild =
+            meaningfulChildren.length === 1 &&
+            (meaningfulChildren[0].type === "JSXText" ||
+              (meaningfulChildren[0].type === "JSXExpressionContainer" &&
+                meaningfulChildren[0].expression.type === "Literal" &&
+                typeof meaningfulChildren[0].expression.value === "string"))
+
+          node.children.forEach(child => {
+            // --------------------------------------------------------------
+            // raw JSX text
+            // --------------------------------------------------------------
+            if (
+              child.type === "JSXText" &&
+              !isIgnoredText(child.value.trim(), ignored) &&
+              child.value.trim().length > 0
+            ) {
+              if (singleMeaningfulTextChild) return
+              report(child, child.value.trim())
+            }
+
+            // --------------------------------------------------------------
+            // {"string literal"} expression
+            // --------------------------------------------------------------
+            if (
+              child.type === "JSXExpressionContainer" &&
+              child.expression.type === "Literal" &&
+              typeof child.expression.value === "string" &&
+              child.expression.value.trim().length > 0
+            ) {
+              if (singleMeaningfulTextChild) return
+              report(child, child.expression.value.trim())
+            }
+          })
+        },
+
+        // Fragments: always report raw text, even if it's the only child
+        JSXFragment(node) {
+          const options = context.options[0] ?? {}
+          const ignored = options.ignoredChars ?? defaultIgnoredChars
 
           node.children.forEach(child => {
             if (
               child.type === "JSXText" &&
+              !isIgnoredText(child.value.trim(), ignored) &&
               child.value.trim().length > 0
             ) {
               report(child, child.value.trim())