fix(es/codegen): Skip space if jsx attrs is empty (#6823)

Author: westhide

crates/swc_ecma_codegen/src/jsx.rs

@@ -28,13 +28,15 @@ where
         punct!("<");
         emit!(node.name);
 
-        space!();
-
-        self.emit_list(
-            node.span(),
-            Some(&node.attrs),
-            ListFormat::JsxElementAttributes,
-        )?;
+        if !node.attrs.is_empty() {
+            space!();
+
+            self.emit_list(
+                node.span(),
+                Some(&node.attrs),
+                ListFormat::JsxElementAttributes,
+            )?;
+        }
 
         if node.self_closing {
             punct!("/");

crates/swc_ecma_codegen/tests/fixture/next-36251/output.tsx

@@ -3,7 +3,7 @@ type ü = {
     value: string;
 };
 export const SomeComponent = ({ name , value  }: ü)=>{
-    return (<div >
+    return (<div>
 
             {name} {value}
 

crates/swc_ecma_transforms_base/tests/resolver/issues/2854/1/output.js

@@ -1,5 +1,5 @@
 export function App__1() {
-    return <Form__1 />;
+    return <Form__1/>;
 }
 export function Form__1({ onChange__2 =function() {}  }) {
     return <input onChange__0={function() {

crates/swc_ecma_transforms_base/tests/resolver/vercel/next/server/render/1/output.js

@@ -221,7 +221,7 @@ export async function renderToHTML__1(req__8, res__8, pathname__8, query__8, ren
         locales: renderOpts__8.locales,
         defaultLocale: renderOpts__8.defaultLocale,
         AppTree: (props__16)=>{
-            return <AppContainer__8 >
+            return <AppContainer__8>
 
                     <App__8 {...props__16} Component__0={Component__8} router__0={router__8}/>
 
@@ -503,7 +503,7 @@ export async function renderToHTML__1(req__8, res__8, pathname__8, query__8, ren
                     throw new Error(`'router' and 'Component' can not be returned in getInitialProps from _app.js https://nextjs.org/docs/messages/cant-override-next-props`);
                 }
                 const { App: EnhancedApp__35 , Component: EnhancedComponent__35  } = enhanceComponents__1(options__35, App__8, Component__8);
-                const html__35 = ReactDOMServer__1.renderToString(<AppContainer__8 >
+                const html__35 = ReactDOMServer__1.renderToString(<AppContainer__8>
 
                         <EnhancedApp__35 Component__0={EnhancedComponent__35} router__0={router__8} {...props__8}/>
 
@@ -533,7 +533,7 @@ export async function renderToHTML__1(req__8, res__8, pathname__8, query__8, ren
                 styles: docProps__34.styles
             };
         } else {
-            const content__39 = ctx__8.err && ErrorDebug__8 ? <ErrorDebug__8 error__0={ctx__8.err}/> : <AppContainer__8 >
+            const content__39 = ctx__8.err && ErrorDebug__8 ? <ErrorDebug__8 error__0={ctx__8.err}/> : <AppContainer__8>
 
                         <App__8 {...props__8} Component__0={Component__8} router__0={router__8}/>
 

crates/swc_ecma_transforms_typescript/tests/fixture/next/server/render/1/output.js

@@ -232,7 +232,7 @@ export async function renderToHTML(req, res, pathname, query, renderOpts) {
         locales: renderOpts.locales,
         defaultLocale: renderOpts.defaultLocale,
         AppTree: (props)=>{
-            return <AppContainer >
+            return <AppContainer>
 
                     <App {...props} Component={Component} router={router}/>
 
@@ -552,7 +552,7 @@ export async function renderToHTML(req, res, pathname, query, renderOpts) {
                     throw new Error(`'router' and 'Component' can not be returned in getInitialProps from _app.js https://nextjs.org/docs/messages/cant-override-next-props`);
                 }
                 const { App: EnhancedApp , Component: EnhancedComponent  } = enhanceComponents(options, App, Component);
-                const html = ReactDOMServer.renderToString(<AppContainer >
+                const html = ReactDOMServer.renderToString(<AppContainer>
 
                         <EnhancedApp Component={EnhancedComponent} router={router} {...props}/>
 
@@ -583,7 +583,7 @@ export async function renderToHTML(req, res, pathname, query, renderOpts) {
                 styles: docProps.styles
             };
         } else {
-            const content = ctx.err && ErrorDebug ? <ErrorDebug error={ctx.err}/> : <AppContainer >
+            const content = ctx.err && ErrorDebug ? <ErrorDebug error={ctx.err}/> : <AppContainer>
 
                         <App {...props} Component={Component} router={router}/>