Fix JSX comment duplication in both React and preserve modes

src/compiler/emitter.ts

@@ -3896,8 +3896,11 @@ export function createPrinter(printerOptions: PrinterOptions = {}, handlers: Pri
         writePunctuation(">");
     }
 
-    function emitJsxText(node: JsxText) {
-        writer.writeLiteral(node.text);
+    function emitJsxText(node: JsxText) {
+        // Strip comments from JSX text content to prevent duplication
+        // Comments like /* comment */ should not be treated as text content in JSX
+        const textWithoutComments = node.text.replace(/\/\*[\s\S]*?\*\//g, '');
+        writer.writeLiteral(textWithoutComments);
     }
 
     function emitJsxClosingElementOrFragment(node: JsxClosingElement | JsxClosingFragment) {

src/compiler/transformers/jsx.ts

@@ -554,22 +554,37 @@ export function transformJsx(context: TransformationContext): (x: SourceFile | B
         return fixed === undefined ? undefined : factory.createStringLiteral(fixed);
     }
 
-    /**
-     * JSX trims whitespace at the end and beginning of lines, except that the
-     * start/end of a tag is considered a start/end of a line only if that line is
-     * on the same line as the closing tag. See examples in
-     * tests/cases/conformance/jsx/tsxReactEmitWhitespace.tsx
-     * See also https://www.w3.org/TR/html4/struct/text.html#h-9.1 and https://www.w3.org/TR/CSS2/text.html#white-space-model
-     *
-     * An equivalent algorithm would be:
-     * - If there is only one line, return it.
-     * - If there is only whitespace (but multiple lines), return `undefined`.
-     * - Split the text into lines.
-     * - 'trimRight' the first line, 'trimLeft' the last line, 'trim' middle lines.
-     * - Decode entities on each line (individually).
-     * - Remove empty lines and join the rest with " ".
-     */
-    function fixupWhitespaceAndDecodeEntities(text: string): string | undefined {
+    /**
+     * Remove comments from JSX text content.
+     * Comments like slash-star comment star-slash should not be treated as text content in JSX.
+     */
+    function stripCommentsFromJsxText(text: string): string {
+        // Only strip comments when not in preserve mode
+        if (compilerOptions.jsx === JsxEmit.Preserve) {
+            return text;
+        }
+        // Remove /* ... */ style comments from JSX text
+        return text.replace(/\/\*[\s\S]*?\*\//g, '');
+    }
+
+    /**
+     * JSX trims whitespace at the end and beginning of lines, except that the
+     * start/end of a tag is considered a start/end of a line only if that line is
+     * on the same line as the closing tag. See examples in
+     * tests/cases/conformance/jsx/tsxReactEmitWhitespace.tsx
+     * See also https://www.w3.org/TR/html4/struct/text.html#h-9.1 and https://www.w3.org/TR/CSS2/text.html#white-space-model
+     *
+     * An equivalent algorithm would be:
+     * - If there is only one line, return it.
+     * - If there is only whitespace (but multiple lines), return `undefined`.
+     * - Split the text into lines.
+     * - 'trimRight' the first line, 'trimLeft' the last line, 'trim' middle lines.
+     * - Decode entities on each line (individually).
+     * - Remove empty lines and join the rest with " ".
+     */
+    function fixupWhitespaceAndDecodeEntities(text: string): string | undefined {
+        // First, strip comments from the text
+        text = stripCommentsFromJsxText(text);
         let acc: string | undefined;
         // First non-whitespace character on this line.
         let firstNonWhitespace = 0;

tests/baselines/reference/jsxCommentDuplication(jsx=preserve).js

@@ -0,0 +1,9 @@
+//// [tests/cases/compiler/jsxCommentDuplication.tsx] ////
+
+//// [jsxCommentDuplication.tsx]
+function App() {}
+const jsx = <App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App>;
+
+//// [jsxCommentDuplication.jsx]
+function App() { }
+var jsx = <App> /* no */{/* 1 */123 /* 2 */} /* no */</App>;

tests/baselines/reference/jsxCommentDuplication(jsx=preserve).symbols

@@ -0,0 +1,11 @@
+//// [tests/cases/compiler/jsxCommentDuplication.tsx] ////
+
+=== jsxCommentDuplication.tsx ===
+function App() {}
+>App : Symbol(App, Decl(jsxCommentDuplication.tsx, 0, 0))
+
+const jsx = <App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App>;
+>jsx : Symbol(jsx, Decl(jsxCommentDuplication.tsx, 1, 5))
+>App : Symbol(App, Decl(jsxCommentDuplication.tsx, 0, 0))
+>App : Symbol(App, Decl(jsxCommentDuplication.tsx, 0, 0))
+

tests/baselines/reference/jsxCommentDuplication(jsx=preserve).types

@@ -0,0 +1,17 @@
+//// [tests/cases/compiler/jsxCommentDuplication.tsx] ////
+
+=== jsxCommentDuplication.tsx ===
+function App() {}
+>App : () => void
+>    : ^^^^^^^^^^
+
+const jsx = <App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App>;
+>jsx : error
+><App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App> : error
+>App : () => void
+>    : ^^^^^^^^^^
+>123 : 123
+>    : ^^^
+>App : () => void
+>    : ^^^^^^^^^^
+

tests/baselines/reference/jsxCommentDuplication(jsx=react).errors.txt

@@ -0,0 +1,8 @@
+jsxCommentDuplication.tsx(2,14): error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
+
+
+==== jsxCommentDuplication.tsx (1 errors) ====
+    function App() {}
+    const jsx = <App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App>;
+                 ~~~
+!!! error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.

tests/baselines/reference/jsxCommentDuplication(jsx=react).js

@@ -0,0 +1,12 @@
+//// [tests/cases/compiler/jsxCommentDuplication.tsx] ////
+
+//// [jsxCommentDuplication.tsx]
+function App() {}
+const jsx = <App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App>;
+
+//// [jsxCommentDuplication.js]
+function App() { }
+var jsx = React.createElement(App, null,
+    "", /* 1 */
+    123 /* 2 */,
+    "");

tests/baselines/reference/jsxCommentDuplication(jsx=react).symbols

@@ -0,0 +1,11 @@
+//// [tests/cases/compiler/jsxCommentDuplication.tsx] ////
+
+=== jsxCommentDuplication.tsx ===
+function App() {}
+>App : Symbol(App, Decl(jsxCommentDuplication.tsx, 0, 0))
+
+const jsx = <App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App>;
+>jsx : Symbol(jsx, Decl(jsxCommentDuplication.tsx, 1, 5))
+>App : Symbol(App, Decl(jsxCommentDuplication.tsx, 0, 0))
+>App : Symbol(App, Decl(jsxCommentDuplication.tsx, 0, 0))
+

tests/baselines/reference/jsxCommentDuplication(jsx=react).types

@@ -0,0 +1,19 @@
+//// [tests/cases/compiler/jsxCommentDuplication.tsx] ////
+
+=== jsxCommentDuplication.tsx ===
+function App() {}
+>App : () => void
+>    : ^^^^^^^^^^
+
+const jsx = <App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App>;
+>jsx : any
+>    : ^^^
+><App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App> : any
+>                                                 : ^^^
+>App : () => void
+>    : ^^^^^^^^^^
+>123 : 123
+>    : ^^^
+>App : () => void
+>    : ^^^^^^^^^^
+

tests/cases/compiler/jsxCommentDuplication.tsx

@@ -0,0 +1,5 @@
+// @jsx: react,preserve
+// @module: commonjs
+
+function App() {}
+const jsx = <App>/* no */{/* 1 */ 123 /* 2 */}/* no */</App>;