Add attributes option to no-raw-text rule (#4)

* Add `attributes` option to `no-raw-text` rule

* fix

Author: ota-meshi

docs/rules/no-raw-text.md

@@ -55,6 +55,17 @@ This rule encourage i18n in about the application needs to be localized.
   "@intlify/svelte/no-raw-text": [
     "error",
     {
+      "attributes": {
+        "/.+/": [
+          "title",
+          "aria-label",
+          "aria-placeholder",
+          "aria-roledescription",
+          "aria-valuetext"
+        ],
+        "input": ["placeholder"],
+        "img": ["alt"]
+      },
       "ignoreNodes": ["md-icon", "v-icon"],
       "ignorePattern": "^[-#:()&]+$",
       "ignoreText": ["EUR", "HKD", "USD"]
@@ -63,10 +74,44 @@ This rule encourage i18n in about the application needs to be localized.
 }
 ```
 
+- `attributes`: An object whose keys are tag name or patterns and value is an array of attributes to check for that tag name. Default empty.
 - `ignoreNodes`: specify nodes to ignore such as icon components
 - `ignorePattern`: specify a regexp pattern that matches strings to ignore
 - `ignoreText`: specify an array of strings to ignore
 
+### `attributes`
+
+<eslint-code-block>
+
+<!-- eslint-skip -->
+
+```svelte
+<script>
+  /* eslint @intlify/svelte/no-raw-text: ['error', {attributes: { '/.+/': ['label'] }}] */
+</script>
+<!-- ✗ BAD -->
+<MyInput label="hello" />
+<AnyComponent label="hello" />
+```
+
+</eslint-code-block>
+
+<eslint-code-block>
+
+<!-- eslint-skip -->
+
+```svelte
+<script>
+  /* eslint @intlify/svelte/no-raw-text: ['error', {attributes: { 'MyInput': ['label'] }}] */
+</script>
+<!-- ✗ BAD -->
+<MyInput label="hello" />
+<!-- ✓ GOOD -->
+<OtherComponent label="hello" />
+```
+
+</eslint-code-block>
+
 ## :rocket: Version
 
 This rule was introduced in `@intlify/eslint-plugin-svelte` v0.0.1

lib/rules/no-raw-text.ts

@@ -6,23 +6,63 @@ import type ESTree from 'estree'
 import type { RuleContext, RuleListener } from '../types'
 import { defineRule } from '../utils'
 
-type AnyValue = ESTree.Literal['value']
+type LiteralValue = ESTree.Literal['value']
+type StaticTemplateLiteral = ESTree.TemplateLiteral & {
+  quasis: [ESTree.TemplateElement]
+  expressions: [/* empty */]
+}
+type TargetAttrs = { name: RegExp; attrs: Set<string> }
 type Config = {
+  attributes: TargetAttrs[]
   ignorePattern: RegExp
   ignoreNodes: string[]
   ignoreText: string[]
 }
+const RE_REGEXP_STR = /^\/(.+)\/(.*)$/u
+function toRegExp(str: string): RegExp {
+  const parts = RE_REGEXP_STR.exec(str)
+  if (parts) {
+    return new RegExp(parts[1], parts[2])
+  }
+  return new RegExp(`^${escape(str)}$`)
+}
 const hasOnlyWhitespace = (value: string) => /^[\r\n\s\t\f\v]+$/.test(value)
 
-function isValidValue(value: AnyValue, config: Config) {
-  return (
-    typeof value !== 'string' ||
-    hasOnlyWhitespace(value) ||
-    config.ignorePattern.test(value.trim()) ||
-    config.ignoreText.includes(value.trim())
+/**
+ * Get the attribute to be verified from the element name.
+ */
+function getTargetAttrs(tagName: string, config: Config): Set<string> {
+  const result = []
+  for (const { name, attrs } of config.attributes) {
+    name.lastIndex = 0
+    if (name.test(tagName)) {
+      result.push(...attrs)
+    }
+  }
+
+  return new Set(result)
+}
+
+function isStaticTemplateLiteral(
+  node: ESTree.Expression | ESTree.Pattern
+): node is StaticTemplateLiteral {
+  return Boolean(
+    node && node.type === 'TemplateLiteral' && node.expressions.length === 0
   )
 }
 
+function testValue(value: LiteralValue, config: Config): boolean {
+  if (typeof value === 'string') {
+    return (
+      hasOnlyWhitespace(value) ||
+      config.ignorePattern.test(value.trim()) ||
+      config.ignoreText.includes(value.trim())
+    )
+  } else {
+    return false
+  }
+}
+
 function checkSvelteMustacheTagText(
   context: RuleContext,
   node: SvAST.SvelteMustacheTag,
@@ -34,56 +74,106 @@ function checkSvelteMustacheTagText(
 
   if (node.parent.type === 'SvelteElement') {
     // parent is element (e.g. <p>{ ... }</p>)
-    if (node.expression.type === 'Literal') {
-      const literalNode = node.expression
-      if (isValidValue(literalNode.value, config)) {
-        return
+    checkExpressionText(context, node.expression, config)
+  }
+}
+
+function checkExpressionText(
+  context: RuleContext,
+  expression: ESTree.Expression,
+  config: 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)
       }
+    })
+  }
+}
 
-      context.report({
-        node: literalNode,
-        message: `raw text '${literalNode.value}' is used`
-      })
-    } else if (node.expression.type === 'ConditionalExpression') {
-      for (const target of [
-        node.expression.consequent,
-        node.expression.alternate
-      ]) {
-        if (target.type !== 'Literal') {
-          continue
-        }
-        if (isValidValue(target.value, config)) {
-          continue
-        }
+function checkSvelteLiteralOrText(
+  context: RuleContext,
+  literal: SvAST.SvelteLiteral | SvAST.SvelteText,
+  config: Config
+) {
+  if (testValue(literal.value, config)) {
+    return
+  }
 
-        context.report({
-          node: target,
-          message: `raw text '${target.value}' is used`
-        })
-      }
-    }
+  const loc = literal.loc!
+  context.report({
+    loc,
+    message: `raw text '${literal.value}' is used`
+  })
+}
+
+function checkLiteral(
+  context: RuleContext,
+  literal: ESTree.Literal | StaticTemplateLiteral,
+  config: 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}' is used`
+  })
+}
+/**
+ * Parse attributes option
+ */
+function parseTargetAttrs(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options: any
+) {
+  const regexps: TargetAttrs[] = []
+  for (const tagName of Object.keys(options)) {
+    const attrs: Set<string> = new Set(options[tagName])
+    regexps.push({
+      name: toRegExp(tagName),
+      attrs
+    })
   }
+  return regexps
 }
 
 function create(context: RuleContext): RuleListener {
   const sourceCode = context.getSourceCode()
   const config: Config = {
-    ignorePattern: /^[^\S\s]$/,
+    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: SvAST.SvelteMustacheTag | SvAST.SvelteText) {
     const element = getElement(node)
@@ -98,7 +188,8 @@ function create(context: RuleContext): RuleListener {
       | SvAST.SvelteText['parent']
       | SvAST.SvelteMustacheTag['parent']
       | SvAST.SvelteElement
-      | SvAST.SvelteAwaitBlock = node.parent
+      | SvAST.SvelteAwaitBlock
+      | SvAST.SvelteElseBlockElseIf = node.parent
     while (
       target.type === 'SvelteIfBlock' ||
       target.type === 'SvelteElseBlock' ||
@@ -118,6 +209,19 @@ function create(context: RuleContext): RuleListener {
   }
 
   return {
+    SvelteAttribute(node: SvAST.SvelteAttribute) {
+      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: SvAST.SvelteMustacheTag) {
       if (isIgnore(node)) {
         return
@@ -129,15 +233,7 @@ function create(context: RuleContext): RuleListener {
       if (isIgnore(node)) {
         return
       }
-
-      if (isValidValue(node.value, config)) {
-        return
-      }
-
-      context.report({
-        node,
-        message: `raw text '${node.value}' is used`
-      })
+      checkSvelteLiteralOrText(context, node, config)
     }
   }
 }
@@ -154,6 +250,17 @@ export = defineRule('no-raw-text', {
       {
         type: 'object',
         properties: {
+          attributes: {
+            type: 'object',
+            patternProperties: {
+              '^(?:\\S+|/.*/[a-z]*)$': {
+                type: 'array',
+                items: { type: 'string' },
+                uniqueItems: true
+              }
+            },
+            additionalProperties: false
+          },
           ignoreNodes: {
             type: 'array'
           },

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "debug": "^4.3.1",
-    "svelte-eslint-parser": "^0.4.1"
+    "svelte-eslint-parser": "^0.8.0"
   },
   "peerDependencies": {
     "eslint": "^7.0.0 || ^8.0.0-0",
@@ -94,6 +94,7 @@
     "generate": "ts-node --transpile-only scripts/update.ts && prettier . --write",
     "lint": "eslint . --ext js,ts,vue,md --ignore-pattern \"/tests/fixtures\"",
     "lint:docs": "prettier docs --check",
+    "format:docs": "prettier docs --write",
     "release:prepare": "shipjs prepare",
     "release:trigger": "shipjs trigger",
     "test": "mocha --require ts-node/register \"./tests/**/*.ts\"",