Fix JSX indentation in JavaScript output (#1792)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jakebailey <5341706+jakebailey@users.noreply.github.com>

Author: Copilot

internal/printer/printer.go

@@ -783,10 +783,9 @@ func (p *Printer) shouldEmitBlockFunctionBodyOnSingleLine(body *ast.Block) bool
 }
 
 func (p *Printer) shouldEmitOnNewLine(node *ast.Node, format ListFormat) bool {
-	// !!! TODO: enable multiline emit
-	// if p.emitContext.EmitFlags(node)&EFStartOnNewLine != 0 {
-	// 	return true
-	// }
+	if p.emitContext.EmitFlags(node)&EFStartOnNewLine != 0 {
+		return true
+	}
 	return format&LFPreferNewLine != 0
 }
 

internal/transformers/jsxtransforms/jsx.go

@@ -319,8 +319,9 @@ func (tx *JSXTransformer) convertJsxChildrenToChildrenPropObject(children []*ast
 }
 
 func (tx *JSXTransformer) transformJsxChildToExpression(node *ast.Node) *ast.Node {
+	prev := tx.inJsxChild
 	tx.setInChild(true)
-	defer tx.setInChild(false)
+	defer tx.setInChild(prev)
 	return tx.Visitor().Visit(node)
 }
 
@@ -688,14 +689,18 @@ func (tx *JSXTransformer) visitJsxOpeningLikeElementCreateElement(element *ast.N
 		for _, c := range children.Nodes {
 			res := tx.transformJsxChildToExpression(c)
 			if res != nil {
-				if len(children.Nodes) > 1 {
-					tx.EmitContext().AddEmitFlags(res, printer.EFStartOnNewLine)
-				}
 				newChildren = append(newChildren, res)
 			}
 		}
 	}
 
+	// Add StartOnNewLine flag only if there are multiple actual children (after filtering)
+	if len(newChildren) > 1 {
+		for _, child := range newChildren {
+			tx.EmitContext().AddEmitFlags(child, printer.EFStartOnNewLine)
+		}
+	}
+
 	args := make([]*ast.Expression, 0, len(newChildren)+2)
 	args = append(args, tagName)
 	args = append(args, objectProperties)
@@ -725,14 +730,18 @@ func (tx *JSXTransformer) visitJsxOpeningFragmentCreateElement(fragment *ast.Jsx
 		for _, c := range children.Nodes {
 			res := tx.transformJsxChildToExpression(c)
 			if res != nil {
-				if len(children.Nodes) > 1 {
-					tx.EmitContext().AddEmitFlags(res, printer.EFStartOnNewLine)
-				}
 				newChildren = append(newChildren, res)
 			}
 		}
 	}
 
+	// Add StartOnNewLine flag only if there are multiple actual children (after filtering)
+	if len(newChildren) > 1 {
+		for _, child := range newChildren {
+			tx.EmitContext().AddEmitFlags(child, printer.EFStartOnNewLine)
+		}
+	}
+
 	args := make([]*ast.Expression, 0, len(newChildren)+2)
 	args = append(args, tagName)
 	args = append(args, tx.Factory().NewKeywordExpression(ast.KindNullKeyword))

testdata/baselines/reference/compiler/jsxNestedIndentation.js

@@ -0,0 +1,20 @@
+//// [tests/cases/compiler/jsxNestedIndentation.tsx] ////
+
+//// [jsxNestedIndentation.tsx]
+declare var React: any;
+declare function Child(props: { children?: any }): any;
+function Test() {
+    return <Child>
+        <Child>
+            <Child></Child>
+        </Child>
+    </Child>
+}
+
+
+//// [jsxNestedIndentation.js]
+function Test() {
+    return React.createElement(Child, null,
+        React.createElement(Child, null,
+            React.createElement(Child, null)));
+}

testdata/baselines/reference/compiler/jsxNestedIndentation.symbols

@@ -0,0 +1,31 @@
+//// [tests/cases/compiler/jsxNestedIndentation.tsx] ////
+
+=== jsxNestedIndentation.tsx ===
+declare var React: any;
+>React : Symbol(React, Decl(jsxNestedIndentation.tsx, 0, 11))
+
+declare function Child(props: { children?: any }): any;
+>Child : Symbol(Child, Decl(jsxNestedIndentation.tsx, 0, 23))
+>props : Symbol(props, Decl(jsxNestedIndentation.tsx, 1, 23))
+>children : Symbol(children, Decl(jsxNestedIndentation.tsx, 1, 31))
+
+function Test() {
+>Test : Symbol(Test, Decl(jsxNestedIndentation.tsx, 1, 55))
+
+    return <Child>
+>Child : Symbol(Child, Decl(jsxNestedIndentation.tsx, 0, 23))
+
+        <Child>
+>Child : Symbol(Child, Decl(jsxNestedIndentation.tsx, 0, 23))
+
+            <Child></Child>
+>Child : Symbol(Child, Decl(jsxNestedIndentation.tsx, 0, 23))
+>Child : Symbol(Child, Decl(jsxNestedIndentation.tsx, 0, 23))
+
+        </Child>
+>Child : Symbol(Child, Decl(jsxNestedIndentation.tsx, 0, 23))
+
+    </Child>
+>Child : Symbol(Child, Decl(jsxNestedIndentation.tsx, 0, 23))
+}
+

testdata/baselines/reference/compiler/jsxNestedIndentation.types

@@ -0,0 +1,34 @@
+//// [tests/cases/compiler/jsxNestedIndentation.tsx] ////
+
+=== jsxNestedIndentation.tsx ===
+declare var React: any;
+>React : any
+
+declare function Child(props: { children?: any }): any;
+>Child : (props: { children?: any; }) => any
+>props : { children?: any; }
+>children : any
+
+function Test() {
+>Test : () => any
+
+    return <Child>
+><Child>        <Child>            <Child></Child>        </Child>    </Child> : any
+>Child : (props: { children?: any; }) => any
+
+        <Child>
+><Child>            <Child></Child>        </Child> : any
+>Child : (props: { children?: any; }) => any
+
+            <Child></Child>
+><Child></Child> : any
+>Child : (props: { children?: any; }) => any
+>Child : (props: { children?: any; }) => any
+
+        </Child>
+>Child : (props: { children?: any; }) => any
+
+    </Child>
+>Child : (props: { children?: any; }) => any
+}
+

testdata/baselines/reference/compiler/jsxUnicodeEscapeSequence.js

@@ -34,7 +34,9 @@ export const InlineUnicodeChar = () => {
 };
 export const StandaloneUnicodeChar = () => {
     // This should reproduce the issue - unicode character on its own line
-    return (_jsxs("div", { children: [_jsx("span", { children: "\u26A0" }), "\u26A0"] }));
+    return (_jsxs("div", { children: [
+            _jsx("span", { children: "\u26A0" }),
+            "\u26A0"] }));
 };
 export const MultipleUnicodeChars = () => {
     // Test multiple unicode characters

testdata/baselines/reference/submodule/compiler/errorSpanForUnclosedJsxTag.js

@@ -18,4 +18,6 @@ let Foo = {
     Bar() { }
 };
 let Baz = () => { };
-let x = React.createElement(Foo.Bar, null, "Hello let y = ", React.createElement(Baz, null, "Hello"));
+let x = React.createElement(Foo.Bar, null,
+    "Hello let y = ",
+    React.createElement(Baz, null, "Hello"));

testdata/baselines/reference/submodule/compiler/errorSpanForUnclosedJsxTag.js.diff

@@ -48,6 +48,8 @@ configureStore({
 });
 const Component = () => {
     const categories = ['Fruit', 'Vegetables'];
-    return (React.createElement("ul", null, React.createElement("li", null, "All"), categories.map((category) => (React.createElement("li", { key: category }, category) // Error about 'key' only
-    ))));
+    return (React.createElement("ul", null,
+        React.createElement("li", null, "All"),
+        categories.map((category) => (React.createElement("li", { key: category }, category) // Error about 'key' only
+        ))));
 };