Fix whitespace trimming behavior for JSX

devoxa · Jun 25, 2021 · 503503b · 503503b
1 parent 6013e7d
commit 503503b
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 10 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,16 @@
+# Compiled Output
+dist/
+.next/
+
+# Tests
+coverage/
+__snapshots__/
+example/pages/index.tsx
+
+# Dependencies
+node_modules/
+yarn-debug.log*
+yarn-error.log*
+
+# Development Environments
+.history/
diff --git a/example/__snapshots__/de.expected.html b/example/__snapshots__/de.expected.html
@@ -109,4 +109,13 @@
    Alles Gute zum Geburtstag, Sam!
   </li>
  </ul>
+ <ul>
+  <li>
+   Wir haben deine E-Mail Adresse und/oder dein Passwort nicht erkannt. Bitte versuche es noch einmal oder
+   <a href="/sign-in/request-reset-password">
+    stelle dein Passwort wieder her
+   </a>
+   .
+  </li>
+ </ul>
 </div>
diff --git a/example/__snapshots__/en.expected.html b/example/__snapshots__/en.expected.html
@@ -109,4 +109,13 @@
    Happy birthday, Sam!
   </li>
  </ul>
+ <ul>
+  <li>
+   We did not recognize your email and/or password. Please try again or
+   <a href="/sign-in/request-reset-password">
+    recover your password
+   </a>
+   .
+  </li>
+ </ul>
 </div>
diff --git a/example/next-env.d.ts b/example/next-env.d.ts
@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -82,14 +82,26 @@ export default function Home() {
             libero quis finibus hendrerit.
           </Trans>
         </li>
-        {/* prettier-ignore */}
         <li>
           13: <Trans t={t}>Happy birthday, {{name}}!</Trans>
         </li>
         <li>
           14: <Trans t={t}>Happy birthday, {{ name }}!</Trans>
         </li>
       </ul>
+
+      {/* These are regression tests */}
+      <ul>
+        <li>
+          <Trans t={t}>
+            We did not recognize your email and/or password. Please try again or{' '}
+            <a href='/sign-in/request-reset-password'>
+              recover your password
+            </a>
+            .
+          </Trans>
+        </li>
+      </ul>
     </>
   )
 }

diff --git a/example/public/locales/de/common.json b/example/public/locales/de/common.json
@@ -6,5 +6,6 @@
   "Hello <1>world</1>": "Hallo <1>Welt</1>",
   "<0></0> Hello world": "<0></0> Hallo Welt",
   "MySpecialKey": "Hallo <1>Welt</1>",
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam, tellus ut vulputate venenatis, ipsum mi efficitur est, vel ornare ex enim eget orci. Nam mattis libero quis finibus hendrerit.": "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. INTEGER ALIQUAM, TELLUS UT VULPUTATE VENENATIS, IPSUM MI EFFICITUR EST, VEL ORNARE EX ENIM EGET ORCI. NAM MATTIS LIBERO QUIS FINIBUS HENDRERIT."
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam, tellus ut vulputate venenatis, ipsum mi efficitur est, vel ornare ex enim eget orci. Nam mattis libero quis finibus hendrerit.": "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. INTEGER ALIQUAM, TELLUS UT VULPUTATE VENENATIS, IPSUM MI EFFICITUR EST, VEL ORNARE EX ENIM EGET ORCI. NAM MATTIS LIBERO QUIS FINIBUS HENDRERIT.",
+  "We did not recognize your email and/or password. Please try again or <2>recover your password</2>.": "Wir haben deine E-Mail Adresse und/oder dein Passwort nicht erkannt. Bitte versuche es noch einmal oder <2>stelle dein Passwort wieder her</2>."
 }
diff --git a/example/public/locales/en/common.json b/example/public/locales/en/common.json
@@ -6,5 +6,6 @@
   "Hello <1>world</1>": "Hello <1>world</1>",
   "<0></0> Hello world": "<0></0> Hello world",
   "MySpecialKey": "Hello <1>world</1>",
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam, tellus ut vulputate venenatis, ipsum mi efficitur est, vel ornare ex enim eget orci. Nam mattis libero quis finibus hendrerit.": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam, tellus ut vulputate venenatis, ipsum mi efficitur est, vel ornare ex enim eget orci. Nam mattis libero quis finibus hendrerit."
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam, tellus ut vulputate venenatis, ipsum mi efficitur est, vel ornare ex enim eget orci. Nam mattis libero quis finibus hendrerit.": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam, tellus ut vulputate venenatis, ipsum mi efficitur est, vel ornare ex enim eget orci. Nam mattis libero quis finibus hendrerit.",
+  "We did not recognize your email and/or password. Please try again or <2>recover your password</2>.": "We did not recognize your email and/or password. Please try again or <2>recover your password</2>."
 }
diff --git a/package.json b/package.json
@@ -8,9 +8,9 @@
   },
   "scripts": {
     "test": "jest",
-    "format": "prettier --ignore-path='.gitignore' --list-different --write .",
-    "format:check": "prettier --ignore-path='.gitignore' --check .",
-    "lint": "eslint --ignore-path='.gitignore' '{src,tests}/**/*.ts'",
+    "format": "prettier --ignore-path='.prettierignore' --list-different --write .",
+    "format:check": "prettier --ignore-path='.prettierignore' --check .",
+    "lint": "eslint --ignore-path='.prettierignore' '{src,tests}/**/*.ts'",
     "build": "rm -rf dist/ && tsc",
     "preversion": "yarn build"
   },

diff --git a/src/astToKey.ts b/src/astToKey.ts
@@ -58,10 +58,11 @@ export function astToKey(ast: AbstractSyntaxTree, options: AstToKeyOptions): str
     if (astNode.type === 'JSXText') {
       let value = astNode.value
 
-      value = value.replace(/\n *$/g, '') // Ignore trailing newlines
-      value = value.replace(/\n */g, ' ') // Turn remaining newlines into spaces
-      if (i === 0) value = value.trimStart() // Trim the start if this is the first node
-      if (i === ast.length - 1) value = value.trimEnd() // Trim the end if this is the last node
+      // Strip leading and trailing newlines
+      value = value.replace(/^\n */g, '').replace(/\n *$/g, '')
+
+      // Turn remaining newlines into spaces
+      value = value.replace(/\n */g, ' ')
 
       key += value
       continue

diff --git a/tests/astToKey.spec.ts b/tests/astToKey.spec.ts
@@ -171,6 +171,22 @@ describe('astToKey (JSX)', () => {
     expect(key).toEqual('Happy birthday, <1>birthday person {{name}}</1>!')
   })
 
+  it('(regression) correctly handles whitespace for trailing string literals', () => {
+    const key = astToKeyFromCode(`
+      <Trans t={t}>
+        We did not recognize your email and/or password. Please try again or{' '}
+        <a href='/sign-in/request-reset-password'>
+          recover your password
+        </a>
+        .
+      </Trans>
+    `)
+
+    expect(key).toEqual(
+      `We did not recognize your email and/or password. Please try again or <2>recover your password</2>.`
+    )
+  })
+
   it('errors on interpolated expression', () => {
     expect(() =>
       astToKeyFromCode(`