feat: enable fragments and text as valid children (#1)

Author: tujoworker

__mocks__/Examples.tsx

@@ -43,3 +43,25 @@ export const MockManyChilds = () => {
     </ComponentBox>
   )
 }
+
+export const MockFragment = () => {
+  return (
+    <ComponentBox data-test="id">
+      <>
+        <span>content 1</span>
+        <span>content 2</span>
+        <span>content 3</span>
+      </>
+    </ComponentBox>
+  )
+}
+
+export const MockText = () => {
+  return (
+    <ComponentBox data-test="id">
+      text
+      <span>content</span>
+      text
+    </ComponentBox>
+  )
+}

__tests__/babelPluginReactLive.test.ts

@@ -39,42 +39,62 @@ it('babelPluginReactLive', async () => {
   })
 
   expect(formattedCode).toMatchInlineSnapshot(`
-      "const ComponentBox = ({ children }) => children
-      export const MockNoInlineWithComponent = () => {
-        return (
-          <ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
-        return <>content</>
-      }
-      render(<DemoComponent />)
-      \`}</ComponentBox>
-        )
-      }
-      export const MockNoInlineWithText = () => {
-        return (
-          <ComponentBox data-test="id" noInline>{\`render(<>content</>)
-      \`}</ComponentBox>
-        )
-      }
-      export const MockOneChilds = () => {
-        return (
-          <ComponentBox data-test="id">{\`<div>content</div>
-      \`}</ComponentBox>
-        )
-      }
-      export const MockManyChilds = () => {
-        return (
-          <ComponentBox data-test="id">{\`<>
-        <div>content 1</div>
-        <div>content 2</div>
-        <div>content 3</div>
-      </>
-      \`}</ComponentBox>
-        )
-      }
-      "
-    `)
+    "const ComponentBox = ({ children }) => children
+    export const MockNoInlineWithComponent = () => {
+      return (
+        <ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
+      return <>content</>
+    }
+    render(<DemoComponent />)
+    \`}</ComponentBox>
+      )
+    }
+    export const MockNoInlineWithText = () => {
+      return (
+        <ComponentBox data-test="id" noInline>{\`render(<>content</>)
+    \`}</ComponentBox>
+      )
+    }
+    export const MockOneChilds = () => {
+      return (
+        <ComponentBox data-test="id">{\`<div>content</div>
+    \`}</ComponentBox>
+      )
+    }
+    export const MockManyChilds = () => {
+      return (
+        <ComponentBox data-test="id">{\`<>
+      <div>content 1</div>
+      <div>content 2</div>
+      <div>content 3</div>
+    </>
+    \`}</ComponentBox>
+      )
+    }
+    export const MockFragment = () => {
+      return (
+        <ComponentBox data-test="id">{\`<>
+      <span>content 1</span>
+      <span>content 2</span>
+      <span>content 3</span>
+    </>
+    \`}</ComponentBox>
+      )
+    }
+    export const MockText = () => {
+      return (
+        <ComponentBox data-test="id">{\`<>
+      text
+      <span>content</span>
+      text
+    </>
+    \`}</ComponentBox>
+      )
+    }
+    "
+  `)
 
   expect(formattedCode.match(/noInline/g)).toHaveLength(2)
-  expect(formattedCode.match(/\{`/g)).toHaveLength(4)
-  expect(formattedCode.match(/`\}/g)).toHaveLength(4)
+  expect(formattedCode.match(/\{`/g)).toHaveLength(6)
+  expect(formattedCode.match(/`\}/g)).toHaveLength(6)
 })

babelPluginReactLive.js

@@ -91,6 +91,22 @@ function babelPluginReactLive(babel, options) {
                 children.push(code)
               }
             },
+            JSXFragment(path) {
+              if (rootPath === path.parentPath) {
+                const code = path.getSource()
+
+                children.push(code)
+              }
+            },
+            JSXText(path) {
+              if (rootPath === path.parentPath) {
+                const code = path.getSource()
+
+                if (code.trim().length) {
+                  children.push(code)
+                }
+              }
+            },
           })
 
           if (children.length > 0) {

jest.config.js

@@ -2,4 +2,5 @@ module.exports = {
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
   },
+  testPathIgnorePatterns: ['<rootDir>/.history'],
 }

package.json

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

yarn.lock

@@ -1520,7 +1520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/globals@npm:29.3.1, @jest/globals@npm:^29.3.1":
+"@jest/globals@npm:^29.3.1":
   version: 29.3.1
   resolution: "@jest/globals@npm:29.3.1"
   dependencies:
@@ -2076,7 +2076,6 @@ __metadata:
     "@babel/preset-env": 7.20.2
     "@babel/preset-react": 7.18.6
     "@babel/preset-typescript": 7.18.6
-    "@jest/globals": 29.3.1
     "@types/jest": 29.2.3
     babel-jest: 29.3.1
     jest: 29.3.1