fix(compiler): fix remove whitespaces from inside the element (#997)

Author: VAIBHAVSING

.changeset/large-zoos-explain.md

@@ -0,0 +1,10 @@
+---
+"@lingo.dev/_compiler": minor
+---
+
+### Whitespace Normalization Fix
+
+- Improved `normalizeJsxWhitespace` logic to preserve leading spaces inside JSX elements while removing unnecessary formatting whitespace and extra lines.
+- Ensured explicit whitespace (e.g., `{" "}`) is handled correctly without introducing double spaces.
+- Added targeted tests (`jsx-content-whitespace.spec.ts`) to verify whitespace handling.
+- Cleaned up unnecessary debug/test files created during development.

packages/compiler/src/utils/jsx-content-whitespace.spec.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from "vitest";
+import { extractJsxContent } from "./jsx-content";
+import * as t from "@babel/types";
+import traverse, { NodePath } from "@babel/traverse";
+import { parse } from "@babel/parser";
+
+describe("Whitespace Issue Test", () => {
+  function parseJSX(code: string): t.File {
+    return parse(code, {
+      plugins: ["jsx"],
+      sourceType: "module",
+    });
+  }
+
+  function getJSXElementPath(code: string): NodePath<t.JSXElement> {
+    const ast = parseJSX(code);
+    let result: NodePath<t.JSXElement>;
+
+    traverse(ast, {
+      JSXElement(path) {
+        result = path;
+        path.stop();
+      },
+    });
+
+    return result!;
+  }
+
+  it("should preserve leading space in nested elements", () => {
+    const path = getJSXElementPath(`
+      <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
+        Hello World
+        <span className="bg-gradient-to-r from-purple-400 via-pink-400 to-yellow-400 bg-clip-text text-transparent"> From Lingo.dev Compiler</span>
+      </h1>
+    `);
+
+    const content = extractJsxContent(path);
+    console.log("Extracted content:", JSON.stringify(content));
+
+    // Let's also check the raw JSX structure to understand what's happening
+    let jsxTexts: string[] = [];
+    path.traverse({
+      JSXText(textPath) {
+        jsxTexts.push(JSON.stringify(textPath.node.value));
+      },
+    });
+    console.log("JSXText nodes found:", jsxTexts);
+
+    // The span should have " From Lingo.dev Compiler" with the leading space
+    expect(content).toContain(
+      "<element:span> From Lingo.dev Compiler</element:span>",
+    );
+  });
+
+  it("should handle explicit whitespace correctly", () => {
+    const path = getJSXElementPath(`
+      <div>
+        Hello{" "}
+        <span> World</span>
+      </div>
+    `);
+
+    const content = extractJsxContent(path);
+    console.log("Explicit whitespace test:", JSON.stringify(content));
+
+    // Should preserve both the explicit space and the leading space in span
+    expect(content).toContain("Hello <element:span> World</element:span>");
+  });
+
+  it("should preserve space before nested bold element like in HeroSubtitle", () => {
+    const path = getJSXElementPath(`
+      <p className="text-lg sm:text-xl text-gray-600 mb-10 max-w-xl mx-auto leading-relaxed">
+        Localize your React app in every language in minutes. Scale to millions
+        <b> from day one</b>.
+      </p>
+    `);
+
+    const content = extractJsxContent(path);
+    console.log("HeroSubtitle test content:", JSON.stringify(content));
+
+    // Let's also check the raw JSX structure
+    let jsxTexts: string[] = [];
+    path.traverse({
+      JSXText(textPath) {
+        jsxTexts.push(JSON.stringify(textPath.node.value));
+      },
+    });
+    console.log("HeroSubtitle JSXText nodes found:", jsxTexts);
+
+    // The bold element should have " from day one" with the leading space
+    expect(content).toContain("<element:b> from day one</element:b>");
+    // The full content should preserve the space between "millions" and the bold element
+    expect(content).toContain("millions <element:b> from day one</element:b>");
+  });
+});

packages/compiler/src/utils/jsx-content.ts

@@ -126,25 +126,85 @@ function isWhitespace(nodePath: NodePath<t.JSXExpressionContainer>) {
 }
 
 function normalizeJsxWhitespace(input: string) {
+  // Handle single-line content
+  if (!input.includes("\n")) {
+    // For single-line content, only trim if it appears to be formatting whitespace
+    // (e.g., "   hello world   " should be trimmed to "hello world")
+    // But preserve meaningful leading/trailing spaces (e.g., " hello" should stay " hello")
+
+    // If the content is mostly whitespace with some text, it's likely formatting
+    const trimmed = input.trim();
+    if (trimmed.length === 0) return "";
+
+    // Check if we have excessive whitespace (more than 1 space on each side)
+    const leadingMatch = input.match(/^\s*/);
+    const trailingMatch = input.match(/\s*$/);
+    const leadingSpaces = leadingMatch ? leadingMatch[0].length : 0;
+    const trailingSpaces = trailingMatch ? trailingMatch[0].length : 0;
+
+    if (leadingSpaces > 1 || trailingSpaces > 1) {
+      // This looks like formatting whitespace, collapse it
+      return input.replace(/\s+/g, " ").trim();
+    } else {
+      // This looks like meaningful whitespace, preserve it but collapse internal spaces
+      return input.replace(/\s{2,}/g, " ");
+    }
+  }
+
+  // Handle multi-line content
   const lines = input.split("\n");
   let result = "";
+
   for (let i = 0; i < lines.length; i++) {
-    const line = lines[i].trim();
-    if (line === "") continue;
-    if (
-      i > 0 &&
-      (line.startsWith("<element:") ||
-        line.startsWith("<function:") ||
-        line.startsWith("{") ||
-        line.startsWith("<expression/>"))
+    const line = lines[i];
+    const trimmedLine = line.trim();
+
+    // Skip empty lines
+    if (trimmedLine === "") continue;
+
+    // Check if this line contains a placeholder (explicit whitespace)
+    if (trimmedLine.includes(WHITESPACE_PLACEHOLDER)) {
+      // For lines with placeholders, preserve the original spacing
+      result += trimmedLine;
+    } else if (
+      trimmedLine.startsWith("<element:") ||
+      trimmedLine.startsWith("<function:") ||
+      trimmedLine.startsWith("{") ||
+      trimmedLine.startsWith("<expression/>")
     ) {
-      result += line;
+      // When we encounter an element/function/expression
+      // Add space only when:
+      // 1. We have existing content AND
+      // 2. Result doesn't already end with space or placeholder AND
+      // 3. The result ends with a word character (indicating text) AND
+      // 4. The element content starts with a space (indicating word continuation)
+      const shouldAddSpace =
+        result &&
+        !result.endsWith(" ") &&
+        !result.endsWith(WHITESPACE_PLACEHOLDER) &&
+        /\w$/.test(result) &&
+        // Check if element content starts with space by looking for "> " pattern
+        trimmedLine.includes("> ");
+
+      if (shouldAddSpace) {
+        result += " ";
+      }
+      result += trimmedLine;
     } else {
-      if (result && !result.endsWith(" ")) result += " ";
-      result += line;
+      // For regular text content, ensure proper spacing
+      // Only add space if the result doesn't already end with a space or placeholder
+      if (
+        result &&
+        !result.endsWith(" ") &&
+        !result.endsWith(WHITESPACE_PLACEHOLDER)
+      ) {
+        result += " ";
+      }
+      result += trimmedLine;
     }
   }
-  // Collapse multiple spaces
-  result = result.replace(/\s+/g, " ");
+
+  // Collapse multiple spaces but preserve single spaces around placeholders
+  result = result.replace(/\s{2,}/g, " ");
   return result.trim();
 }