Fix JSX indentation in JavaScript output

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/excessiveStackDepthFlatArray.js

@@ -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
+        ))));
 };

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

@@ -11,4 +11,5 @@ declare var React: any;
 
 
 //// [jsxAttributeWithoutExpressionReact.js]
-React.createElement(View, null, React.createElement(ListView, { refreshControl: React.createElement(RefreshControl, { onRefresh: true, refreshing: true }), dataSource: this.state.ds, renderRow: true }));
+React.createElement(View, null,
+    React.createElement(ListView, { refreshControl: React.createElement(RefreshControl, { onRefresh: true, refreshing: true }), dataSource: this.state.ds, renderRow: true }));

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

@@ -15,4 +15,6 @@ const a = (
 //// [index.js]
 /// <reference path="react18/react18.d.ts" />
 /// <reference path="react18/global.d.ts" />
-const a = (React.createElement("main", null, (React.createElement("div", null)), React.createElement("span", null)));
+const a = (React.createElement("main", null,
+    (React.createElement("div", null)),
+    React.createElement("span", null)));

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

@@ -7,7 +7,4 @@
 -"use strict";
  /// <reference path="react18/react18.d.ts" />
  /// <reference path="react18/global.d.ts" />
--const a = (React.createElement("main", null,
--    (React.createElement("div", null)),
--    React.createElement("span", null)));
-+const a = (React.createElement("main", null, (React.createElement("div", null)), React.createElement("span", null)));
+ const a = (React.createElement("main", null,

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

@@ -20,4 +20,6 @@ const b = (
 //// [index.js]
 /// <reference path="react18/react18.d.ts" />
 /// <reference path="react18/global.d.ts" />
-const b = (React.createElement(Foo, null, React.createElement("div", null), "aa"));
+const b = (React.createElement(Foo, null,
+    React.createElement("div", null),
+    "aa"));

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

@@ -7,7 +7,4 @@
 -"use strict";
  /// <reference path="react18/react18.d.ts" />
  /// <reference path="react18/global.d.ts" />
--const b = (React.createElement(Foo, null,
--    React.createElement("div", null),
--    "aa"));
-+const b = (React.createElement(Foo, null, React.createElement("div", null), "aa"));
+ const b = (React.createElement(Foo, null,

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

@@ -94,7 +94,9 @@ var a = React.createElement(Blah, null, x => x);
 // Blah components don't accept text as child elements
 var a = React.createElement(Blah, null, "Hello unexpected text!");
 // Blah components don't accept multiple children.
-var a = React.createElement(Blah, null, x => "" + x, x => "" + x);
+var a = React.createElement(Blah, null,
+    x => "" + x,
+    x => "" + x);
 function Blah2(props) {
     return React.createElement(React.Fragment, null);
 }
@@ -103,7 +105,9 @@ var a = React.createElement(Blah2, null, x => x);
 // Blah2 components don't accept text as child elements
 var a = React.createElement(Blah2, null, "Hello unexpected text!");
 // Blah2 components don't accept multiple children of the wrong type.
-var a = React.createElement(Blah2, null, x => x, x => x);
+var a = React.createElement(Blah2, null,
+    x => x,
+    x => x);
 function Blah3(props) {
     return React.createElement(React.Fragment, null);
 }
@@ -112,4 +116,6 @@ var a = React.createElement(Blah3, null, x => x);
 // Blah3 components don't accept text as child elements
 var a = React.createElement(Blah3, null, "Hello unexpected text!");
 // Blah3 components don't accept multiple children of the wrong type.
-var a = React.createElement(Blah3, null, x => x, x => x);
+var a = React.createElement(Blah3, null,
+    x => x,
+    x => x);

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

@@ -8,34 +8,4 @@
 +const React = require("react");
  function Blah(props) {
      return React.createElement(React.Fragment, null);
- }
-@@= skipped -9, +9 lines =@@
- // Blah components don't accept text as child elements
- var a = React.createElement(Blah, null, "Hello unexpected text!");
- // Blah components don't accept multiple children.
--var a = React.createElement(Blah, null,
--    x => "" + x,
--    x => "" + x);
-+var a = React.createElement(Blah, null, x => "" + x, x => "" + x);
- function Blah2(props) {
-     return React.createElement(React.Fragment, null);
- }
-@@= skipped -11, +9 lines =@@
- // Blah2 components don't accept text as child elements
- var a = React.createElement(Blah2, null, "Hello unexpected text!");
- // Blah2 components don't accept multiple children of the wrong type.
--var a = React.createElement(Blah2, null,
--    x => x,
--    x => x);
-+var a = React.createElement(Blah2, null, x => x, x => x);
- function Blah3(props) {
-     return React.createElement(React.Fragment, null);
- }
-@@= skipped -11, +9 lines =@@
- // Blah3 components don't accept text as child elements
- var a = React.createElement(Blah3, null, "Hello unexpected text!");
- // Blah3 components don't accept multiple children of the wrong type.
--var a = React.createElement(Blah3, null,
--    x => x,
--    x => x);
-+var a = React.createElement(Blah3, null, x => x, x => x);
+ }

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

@@ -19,4 +19,6 @@ const b = (
 //// [other.js]
 /// <reference path="react18/react18.d.ts" />
 /// <reference path="react18/global.d.ts" />
-const b = (React.createElement(Foo, null, React.createElement("div", null), "aa"));
+const b = (React.createElement(Foo, null,
+    React.createElement("div", null),
+    "aa"));

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

@@ -7,7 +7,4 @@
 -"use strict";
  /// <reference path="react18/react18.d.ts" />
  /// <reference path="react18/global.d.ts" />
--const b = (React.createElement(Foo, null,
--    React.createElement("div", null),
--    "aa"));
-+const b = (React.createElement(Foo, null, React.createElement("div", null), "aa"));
+ const b = (React.createElement(Foo, null,

testdata/baselines/reference/submodule/compiler/jsxEmptyExpressionNotCountedAsChild(jsx=react).js

@@ -27,4 +27,5 @@ const React = require("react");
 function Wrapper(props) {
     return React.createElement("div", null, props.children);
 }
-const element = (React.createElement(Wrapper, null, React.createElement("div", null, "Hello")));
+const element = (React.createElement(Wrapper, null,
+    React.createElement("div", null, "Hello")));

testdata/baselines/reference/submodule/compiler/jsxEmptyExpressionNotCountedAsChild(jsx=react).js.diff

@@ -8,7 +8,4 @@
 +const React = require("react");
  function Wrapper(props) {
      return React.createElement("div", null, props.children);
- }
--const element = (React.createElement(Wrapper, null,
--    React.createElement("div", null, "Hello")));
-+const element = (React.createElement(Wrapper, null, React.createElement("div", null, "Hello")));
+ }

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

@@ -9,4 +9,8 @@ declare var Frag: any;
 
 //// [jsxFactoryAndJsxFragmentFactory.js]
 h(Frag, null);
-h(Frag, null, h("span", null, "1"), h(Frag, null, h("span", null, "2.1"), h("span", null, "2.2")));
+h(Frag, null,
+    h("span", null, "1"),
+    h(Frag, null,
+        h("span", null, "2.1"),
+        h("span", null, "2.2")));