feat: remove unnecessary fragments (#5)

Author: tujoworker

__tests__/babelPluginReactLive.test.ts

@@ -67,11 +67,11 @@ it('babelPluginReactLive', async () => {
     }
     export const MockManyChilds = () => {
       return (
-        <ComponentBox data-test="id">{\`<>
-      <div>content 1</div>
-      <div>content 2</div>
-      <div>content 3</div>
-    </>
+        <ComponentBox data-test="id">{\`
+    <div>content 1</div>
+    <div>content 2</div>
+    <div>content 3</div>
+
     \`}</ComponentBox>
       )
     }
@@ -87,13 +87,13 @@ it('babelPluginReactLive', async () => {
     }
     export const MockText = () => {
       return (
-        <ComponentBox data-test="id">{\`<>
-      text
-      {'text'}
-      <span>content</span>
-      text
-      {'text'}
-    </>
+        <ComponentBox data-test="id">{\`
+    text
+    {'text'}
+    <span>content</span>
+    text
+    {'text'}
+
     \`}</ComponentBox>
       )
     }

babelPluginReactLive.js

@@ -8,21 +8,30 @@ function babelPluginReactLive(babel, options) {
     ? JSON.parse(fs.readFileSync(options.prettierPath, 'utf-8'))
     : {}
 
-  const wrappCodeInside = (code) => {
-    const formattedCode = prettier.format(code, {
+  const convertCodeToJSX = (children) => {
+    // So prettier can do its work,
+    // we wrap our JSX children in a fragment.
+    // But we also remvoe it afterwards.
+    let code =
+      children.length > 1
+        ? `<>${children.join('\n')}</>`
+        : children.join('\n')
+
+    code = prettier.format(code, {
       ...prettierrc,
       parser: 'babel',
     })
 
+    // Prettier adds a leading ;
+    // And we also escape `
+    code = code.replace(/^;/, '').replace(/`/g, '\\`')
+
+    if (children.length > 1) {
+      code = code.replace(/^<>|<\/>$|^\s{2}/gm, '')
+    }
+
     return t.jsxExpressionContainer(
-      t.templateLiteral(
-        [
-          t.templateElement({
-            raw: formattedCode.replace(/^;/, '').replace(/`/g, '\\`'),
-          }),
-        ],
-        []
-      )
+      t.templateLiteral([t.templateElement({ raw: code })], [])
     )
   }
 
@@ -129,13 +138,7 @@ function babelPluginReactLive(babel, options) {
               )
             }
 
-            path.node.children = [
-              wrappCodeInside(
-                children.length > 1
-                  ? `<>${children.join('\n')}</>`
-                  : children.join('\n')
-              ),
-            ]
+            path.node.children = [convertCodeToJSX(children)]
 
             path.replaceWith(t.identifier(path.toString()))
           }

package.json

@@ -13,7 +13,7 @@
     "type": "git",
     "url": "https://github.com/dnbexperience/eufemia.git"
   },
-  "version": "1.2.1",
+  "version": "1.3.0",
   "main": "babelPluginReactLive.js",
   "scripts": {
     "test": "jest",