jsx: pretty-print single-line JSX elements

evanw · Nov 23, 2022 · ef348a3 · ef348a3
1 parent 478062d
commit ef348a3
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 191 deletions.
diff --git a/internal/bundler/snapshots/snapshots_default.txt b/internal/bundler/snapshots/snapshots_default.txt
@@ -553,16 +553,10 @@ console.log(123);
 TestDuplicatePropertyWarning
 ---------- /out/entry.js ----------
 // outside-node-modules/index.jsx
-console.log({ a: 1, a: 2 }, /* @__PURE__ */ React.createElement("div", {
-  a2: true,
-  a2: 3
-}));
+console.log({ a: 1, a: 2 }, /* @__PURE__ */ React.createElement("div", { a2: true, a2: 3 }));
 
 // node_modules/inside-node-modules/index.jsx
-console.log({ c: 1, c: 2 }, /* @__PURE__ */ React.createElement("div", {
-  c2: true,
-  c2: 3
-}));
+console.log({ c: 1, c: 2 }, /* @__PURE__ */ React.createElement("div", { c2: true, c2: 3 }));
 
 ================================================================================
 TestDynamicImportWithExpressionCJS
@@ -1439,11 +1433,7 @@ var require_custom_react = __commonJS({
 // entry.jsx
 var import_custom_react = __toESM(require_custom_react());
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
-console.log(/* @__PURE__ */ jsx2("div", {
-  jsx: import_custom_react.jsx
-}), /* @__PURE__ */ jsx2(Fragment2, {
-  children: /* @__PURE__ */ jsx2(import_custom_react.Fragment, {})
-}));
+console.log(/* @__PURE__ */ jsx2("div", { jsx: import_custom_react.jsx }), /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(import_custom_react.Fragment, {}) }));
 
 ================================================================================
 TestJSXAutomaticImportsES6
@@ -1456,21 +1446,14 @@ function Fragment() {
 
 // entry.jsx
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
-console.log(/* @__PURE__ */ jsx2("div", {
-  jsx
-}), /* @__PURE__ */ jsx2(Fragment2, {
-  children: /* @__PURE__ */ jsx2(Fragment, {})
-}));
+console.log(/* @__PURE__ */ jsx2("div", { jsx }), /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(Fragment, {}) }));
 
 ================================================================================
 TestJSXAutomaticNoNameCollision
 ---------- /out.js ----------
 var import_react = require("react");
 var import_react2 = require("@remix-run/react");
-const x = /* @__PURE__ */ (0, import_react.createElement)(import_react2.Link, {
-  ...y,
-  key: z
-});
+const x = /* @__PURE__ */ (0, import_react.createElement)(import_react2.Link, { ...y, key: z });
 
 ================================================================================
 TestJSXConstantFragments

diff --git a/internal/bundler/snapshots/snapshots_loader.txt b/internal/bundler/snapshots/snapshots_loader.txt
@@ -643,19 +643,15 @@ let Foo = {
     console.log("Fragment", ...args);
   }
 };
-export default /* @__PURE__ */ Foo.a(Foo.b, {
-  c: Foo.e
-});
+export default /* @__PURE__ */ Foo.a(Foo.b, { c: Foo.e });
 
 ================================================================================
 TestManglePropsJSXTransformNamespace
 ---------- /out.js ----------
 export default [
   /* @__PURE__ */ React.createElement(KEEP_THIS_, null),
   /* @__PURE__ */ React.createElement("KEEP:THIS_", null),
-  /* @__PURE__ */ React.createElement("foo", {
-    "KEEP:THIS_": true
-  })
+  /* @__PURE__ */ React.createElement("foo", { "KEEP:THIS_": true })
 ];
 
 ================================================================================

diff --git a/internal/bundler/snapshots/snapshots_lower.txt b/internal/bundler/snapshots/snapshots_lower.txt
@@ -800,29 +800,10 @@ let tests = [
 ];
 let jsx = [
   /* @__PURE__ */ React.createElement("div", __spreadValues(__spreadValues({}, a), b)),
-  /* @__PURE__ */ React.createElement("div", __spreadValues({
-    a: true,
-    b: true
-  }, c)),
-  /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, a), {
-    b: true,
-    c: true
-  })),
-  /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
-    a: true
-  }, b), {
-    c: true
-  })),
-  /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
-    a: true,
-    b: true
-  }, c), d), {
-    e: true,
-    f: true
-  }), g), h), {
-    i: true,
-    j: true
-  }))
+  /* @__PURE__ */ React.createElement("div", __spreadValues({ a: true, b: true }, c)),
+  /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, a), { b: true, c: true })),
+  /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({ a: true }, b), { c: true })),
+  /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({ a: true, b: true }, c), d), { e: true, f: true }), g), h), { i: true, j: true }))
 ];
 
 ================================================================================

diff --git a/internal/bundler/snapshots/snapshots_tsconfig.txt b/internal/bundler/snapshots/snapshots_tsconfig.txt
@@ -319,32 +319,28 @@ TestTsConfigReactJSX
 ---------- /Users/user/project/out.js ----------
 // Users/user/project/entry.tsx
 import { Fragment, jsx, jsxs } from "notreact/jsx-runtime";
-console.log(/* @__PURE__ */ jsxs(Fragment, {
-  children: [
-    /* @__PURE__ */ jsx("div", {}),
-    /* @__PURE__ */ jsx("div", {})
-  ]
-}));
+console.log(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("div", {}),
+  /* @__PURE__ */ jsx("div", {})
+] }));
 
 ================================================================================
 TestTsConfigReactJSXDev
 ---------- /Users/user/project/out.js ----------
 // Users/user/project/entry.tsx
 import { Fragment, jsxDEV } from "react/jsx-dev-runtime";
-console.log(/* @__PURE__ */ jsxDEV(Fragment, {
-  children: [
-    /* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
-      fileName: "Users/user/project/entry.tsx",
-      lineNumber: 2,
-      columnNumber: 19
-    }, this),
-    /* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
-      fileName: "Users/user/project/entry.tsx",
-      lineNumber: 2,
-      columnNumber: 25
-    }, this)
-  ]
-}, void 0, true, {
+console.log(/* @__PURE__ */ jsxDEV(Fragment, { children: [
+  /* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
+    fileName: "Users/user/project/entry.tsx",
+    lineNumber: 2,
+    columnNumber: 19
+  }, this),
+  /* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
+    fileName: "Users/user/project/entry.tsx",
+    lineNumber: 2,
+    columnNumber: 25
+  }, this)
+] }, void 0, true, {
   fileName: "Users/user/project/entry.tsx",
   lineNumber: 2,
   columnNumber: 17
@@ -355,20 +351,18 @@ TestTsConfigReactJSXWithDevInMainConfig
 ---------- /Users/user/project/out.js ----------
 // Users/user/project/entry.tsx
 import { Fragment, jsxDEV } from "react/jsx-dev-runtime";
-console.log(/* @__PURE__ */ jsxDEV(Fragment, {
-  children: [
-    /* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
-      fileName: "Users/user/project/entry.tsx",
-      lineNumber: 2,
-      columnNumber: 19
-    }, this),
-    /* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
-      fileName: "Users/user/project/entry.tsx",
-      lineNumber: 2,
-      columnNumber: 25
-    }, this)
-  ]
-}, void 0, true, {
+console.log(/* @__PURE__ */ jsxDEV(Fragment, { children: [
+  /* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
+    fileName: "Users/user/project/entry.tsx",
+    lineNumber: 2,
+    columnNumber: 19
+  }, this),
+  /* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
+    fileName: "Users/user/project/entry.tsx",
+    lineNumber: 2,
+    columnNumber: 25
+  }, this)
+] }, void 0, true, {
   fileName: "Users/user/project/entry.tsx",
   lineNumber: 2,
   columnNumber: 17

diff --git a/internal/js_ast/js_ast.go b/internal/js_ast/js_ast.go
@@ -660,10 +660,11 @@ type EMangledProp struct {
 }
 
 type EJSXElement struct {
-	TagOrNil   Expr
-	Properties []Property
-	Children   []Expr
-	CloseLoc   logger.Loc
+	TagOrNil        Expr
+	Properties      []Property
+	Children        []Expr
+	CloseLoc        logger.Loc
+	IsTagSingleLine bool
 }
 
 type ENumber struct{ Value float64 }

diff --git a/internal/js_parser/js_parser.go b/internal/js_parser/js_parser.go
@@ -4608,9 +4608,14 @@ func (p *parser) parseJSXElement(loc logger.Loc) js_ast.Expr {
 	// Parse attributes
 	var previousStringWithBackslashLoc logger.Loc
 	properties := []js_ast.Property{}
+	isSingleLine := true
 	if startTagOrNil.Data != nil {
 	parseAttributes:
 		for {
+			if p.lexer.HasNewlineBefore {
+				isSingleLine = false
+			}
+
 			switch p.lexer.Token {
 			case js_lexer.TIdentifier:
 				// Parse the key
@@ -4749,9 +4754,10 @@ func (p *parser) parseJSXElement(loc logger.Loc) js_ast.Expr {
 			p.lexer.Expected(js_lexer.TGreaterThan)
 		}
 		return js_ast.Expr{Loc: loc, Data: &js_ast.EJSXElement{
-			TagOrNil:   startTagOrNil,
-			Properties: properties,
-			CloseLoc:   closeLoc,
+			TagOrNil:        startTagOrNil,
+			Properties:      properties,
+			CloseLoc:        closeLoc,
+			IsTagSingleLine: isSingleLine,
 		}}
 	}
 
@@ -4841,10 +4847,11 @@ func (p *parser) parseJSXElement(loc logger.Loc) js_ast.Expr {
 			}
 
 			return js_ast.Expr{Loc: loc, Data: &js_ast.EJSXElement{
-				TagOrNil:   startTagOrNil,
-				Properties: properties,
-				Children:   children,
-				CloseLoc:   lessThanLoc,
+				TagOrNil:        startTagOrNil,
+				Properties:      properties,
+				Children:        children,
+				CloseLoc:        lessThanLoc,
+				IsTagSingleLine: isSingleLine,
 			}}
 
 		default:
@@ -12394,7 +12401,8 @@ func (p *parser) visitExprInOut(expr js_ast.Expr, in exprIn) (js_ast.Expr, exprO
 				args := []js_ast.Expr{e.TagOrNil}
 				if len(e.Properties) > 0 {
 					args = append(args, p.lowerObjectSpread(propsLoc, &js_ast.EObject{
-						Properties: e.Properties,
+						Properties:   e.Properties,
+						IsSingleLine: e.IsTagSingleLine,
 					}))
 				} else {
 					args = append(args, js_ast.Expr{Loc: propsLoc, Data: js_ast.ENullShared})
@@ -12418,6 +12426,7 @@ func (p *parser) visitExprInOut(expr js_ast.Expr, in exprIn) (js_ast.Expr, exprO
 					Target:        target,
 					Args:          args,
 					CloseParenLoc: e.CloseLoc,
+					IsMultiLine:   !e.IsTagSingleLine,
 
 					// Enable tree shaking
 					CanBeUnwrappedIfUnused: !p.options.ignoreDCEAnnotations && !p.options.jsx.SideEffects,
@@ -12496,7 +12505,8 @@ func (p *parser) visitExprInOut(expr js_ast.Expr, in exprIn) (js_ast.Expr, exprO
 				}
 
 				args = append(args, p.lowerObjectSpread(propsLoc, &js_ast.EObject{
-					Properties: properties,
+					Properties:   properties,
+					IsSingleLine: e.IsTagSingleLine,
 				}))
 
 				// "key"
@@ -12546,6 +12556,7 @@ func (p *parser) visitExprInOut(expr js_ast.Expr, in exprIn) (js_ast.Expr, exprO
 					Target:        p.importJSXSymbol(expr.Loc, jsx),
 					Args:          args,
 					CloseParenLoc: e.CloseLoc,
+					IsMultiLine:   !e.IsTagSingleLine,
 
 					// Enable tree shaking
 					CanBeUnwrappedIfUnused: !p.options.ignoreDCEAnnotations && !p.options.jsx.SideEffects,