Fixes for translation lint where punctuation and HTML entities are side by side (#142)

This case came up running lint across our larger code base, where strings like "{var1}: {var2}" were incorrectly flagged when both punctuation and HTML entities were allowed.

Author: praxxis

src/rules/jsxUseTranslationFunctionRule.ts

@@ -24,6 +24,8 @@ interface IOptions {
     allowHtmlEntities: boolean;
 }
 
+const htmlEntityRegex = /(&(?:#[0-9]+|[a-zA-Z]+);)/;
+
 export class Rule extends Lint.Rules.AbstractRule {
     /* tslint:disable:object-literal-sort-keys */
     public static metadata: Lint.IRuleMetadata = {
@@ -99,17 +101,23 @@ function isInvalidText(text: string, options: Readonly<IOptions>) {
         return false;
     }
 
-    let invalid = true;
-
-    if (options.allowPunctuation) {
-        invalid = /\w/.test(t);
+    if (options.allowPunctuation && t.indexOf("&") === -1) {
+        // fast path: any punctuation that is not potentially an HTML entity
+        return /\w/.test(t);
     }
 
-    if (options.allowHtmlEntities && t.indexOf("&") !== -1) {
-        invalid = t.split("&")
-            .filter((entity) => entity !== "")
-            .some((entity) => /^&(?:#[0-9]+|[a-zA-Z]+);$/.test(`&${entity}`) !== true);
-    }
+    // split the text into HTML entities and everything else so we can test each part of the string individually
+    const parts = t.split(htmlEntityRegex).filter((entity) => entity !== "");
+
+    return parts.some((entity) => {
+        if (options.allowHtmlEntities && htmlEntityRegex.test(entity)) {
+            return false;
+        }
+
+        if (options.allowPunctuation) {
+            return /\w/.test(entity);
+        }
 
-    return invalid;
+        return true;
+    });
 }

test/rules/jsx-use-translation-function/allow-both/test.tsx.lint

@@ -0,0 +1,66 @@
+<div>Hello world!</div>
+     ~~~~~~~~~~~~         [0]
+
+<div>{'Hello world!'}</div>
+     ~~~~~~~~~~~~~~~~       [0]
+
+<div>{translate('hello-world')}</div>
+
+<input placeholder={translate('name')} />
+<input placeholder="Name" />
+                   ~~~~~~ [1]
+
+<input placeholder={translate('name')} />
+<input placeholder={"Name"} />
+                   ~~~~~~~~  [1]
+
+<div>
+    <div>{translate('hi')}</div>
+</div>
+
+<div>
+    <span>{translate('this')}</span>is bad<span>
+                                    ~~~~~~       [0]
+</div>
+
+<div>{`foo`}</div>
+     ~~~~~~~       [0]
+
+<div>{`foo ${1}`}</div>
+
+<ul>
+    <li>{translate('one')}</li>
+    Two
+    ~~~
+    <li>Three</li>
+~~~~               [0]
+        ~~~~~      [0]
+</ul>
+
+<div> - </div>
+
+<div> & </div>
+
+<div>:&nbsp;</div>
+
+<div>:&nbsp</div>
+     ~~~~~~       [0]
+
+<div>{' - '}</div>
+
+<input placeholder="-" />
+
+<div>&nbsp;</div>
+
+<div>{'&nbsp;'}</div>
+
+<input placeholder="&nbsp;" />
+
+<div>hello - world</div>
+     ~~~~~~~~~~~~~       [0]
+
+<div>hello&nbsp;world</div>
+     ~~~~~~~~~~~~~~~~       [0]
+
+[0]: String literals are disallowed as JSX. Use a translation function
+[1]: String literal is not allowed for value of placeholder. Use a translation function

test/rules/jsx-use-translation-function/allow-both/tslint.json

@@ -0,0 +1,7 @@
+{
+    "rules": {
+        "jsx-use-translation-function": {
+            "options": ["allow-punctuation", "allow-htmlentities"]
+        }
+    }
+}

test/rules/jsx-use-translation-function/allow-htmlentities/test.tsx.lint

@@ -48,9 +48,17 @@
 
 <div>&nbsp;</div>
 
+<div>&nbsp;&nbsp;</div>
+
 <div>{'&nbsp;'}</div>
 
 <input placeholder="&nbsp;" />
 
+<div>hello - world</div>
+     ~~~~~~~~~~~~~       [0]
+
+<div>hello&nbsp;world</div>
+     ~~~~~~~~~~~~~~~~       [0]
+
 [0]: String literals are disallowed as JSX. Use a translation function
 [1]: String literal is not allowed for value of placeholder. Use a translation function

test/rules/jsx-use-translation-function/allow-punctuation/test.tsx.lint

@@ -39,6 +39,11 @@
 
 <div> - </div>
 
+<div> & </div>
+
+<div>:&nbsp;</div>
+     ~~~~~~~       [0]
+
 <div>{' - '}</div>
 
 <input placeholder="-" />
@@ -52,5 +57,11 @@
 <input placeholder="&nbsp;" />
                    ~~~~~~~~ [1]
 
+<div>hello - world</div>
+     ~~~~~~~~~~~~~       [0]
+
+<div>hello&nbsp;world</div>
+     ~~~~~~~~~~~~~~~~       [0]
+
 [0]: String literals are disallowed as JSX. Use a translation function
 [1]: String literal is not allowed for value of placeholder. Use a translation function