feat: use Babel Generator to extract code (#6)

This fixes an issue where `console.log(e)` would get additional code from Babel, which executed a runtime exception.

Author: tujoworker

__mocks__/Examples.tsx

@@ -69,3 +69,15 @@ export const MockText = () => {
     </ComponentBox>
   )
 }
+
+export const MockEvents = () => {
+  return (
+    <ComponentBox data-test="id">
+      <DemoComponent
+        onChange={(e) => {
+          console.log(e)
+        }}
+      />
+    </ComponentBox>
+  )
+}

__tests__/babelPluginReactLive.test.ts

@@ -94,13 +94,23 @@ it('babelPluginReactLive', async () => {
     text
     {'text'}
 
+    \`}</ComponentBox>
+      )
+    }
+    export const MockEvents = () => {
+      return (
+        <ComponentBox data-test="id">{\`<DemoComponent
+      onChange={(e) => {
+        console.log(e)
+      }}
+    />
     \`}</ComponentBox>
       )
     }
     "
   `)
 
   expect(formattedCode.match(/noInline/g)).toHaveLength(2)
-  expect(formattedCode.match(/\{`/g)).toHaveLength(6)
-  expect(formattedCode.match(/`\}/g)).toHaveLength(6)
+  expect(formattedCode.match(/\{`/g)).toHaveLength(7)
+  expect(formattedCode.match(/`\}/g)).toHaveLength(7)
 })

babelPluginReactLive.js

@@ -1,5 +1,6 @@
 const fs = require('fs')
 const prettier = require('prettier')
+const { default: generate } = require('@babel/generator')
 
 function babelPluginReactLive(babel, options) {
   const { types: t } = babel
@@ -26,6 +27,7 @@ function babelPluginReactLive(babel, options) {
     // And we also escape `
     code = code.replace(/^;/, '').replace(/`/g, '\\`')
 
+    // Remove fragments we added in the first place
     if (children.length > 1) {
       code = code.replace(/^<>|<\/>$|^\s{2}/gm, '')
     }
@@ -65,24 +67,21 @@ function babelPluginReactLive(babel, options) {
                 path.traverse({
                   ReturnStatement(path) {
                     if (currentReturnStatement === path.node) {
-                      const code = path
-                        .getSource()
-                        .replace(/return ((.|\n|\r)*)/, 'render($1)')
+                      const code = astToCode(path.node)
 
-                      const node = t.identifier(code)
+                      const node = t.identifier(
+                        code.replace(/return ((.|\n|\r)*)/, 'render($1)')
+                      )
                       path.replaceWith(node)
 
                       path.stop()
                     }
                   },
                 })
 
-                const code = path
-                  .toString()
-                  .replace(/^\{/, '')
-                  .replace(/\}$/, '')
+                const code = astToCode(path.node)
 
-                children.push(code)
+                children.push(code.replace(/^\{/, '').replace(/\}$/, ''))
 
                 path.stop()
 
@@ -91,21 +90,21 @@ function babelPluginReactLive(babel, options) {
             },
             JSXElement(path) {
               if (rootPath === path.parentPath) {
-                const code = path.getSource()
+                const code = astToCode(path.node)
 
                 children.push(code)
               }
             },
             JSXFragment(path) {
               if (rootPath === path.parentPath) {
-                const code = path.getSource()
+                const code = astToCode(path.node)
 
                 children.push(code)
               }
             },
             JSXText(path) {
               if (rootPath === path.parentPath) {
-                const code = path.getSource()
+                const code = astToCode(path.node)
 
                 if (code.trim().length) {
                   children.push(code)
@@ -117,7 +116,7 @@ function babelPluginReactLive(babel, options) {
                 rootPath === path.parentPath &&
                 path.node.expression.type !== 'ArrowFunctionExpression'
               ) {
-                const code = path.getSource()
+                const code = astToCode(path.node)
 
                 if (code.length) {
                   children.push(code)
@@ -140,7 +139,8 @@ function babelPluginReactLive(babel, options) {
 
             path.node.children = [convertCodeToJSX(children)]
 
-            path.replaceWith(t.identifier(path.toString()))
+            const code = astToCode(path.node)
+            path.replaceWith(t.identifier(code))
           }
         }
       },
@@ -161,4 +161,10 @@ function babelPluginReactLive(babel, options) {
   }
 }
 
+function astToCode(ast) {
+  const { code } = generate(ast)
+
+  return code.replace(/;$/, '')
+}
+
 module.exports = babelPluginReactLive

package.json

@@ -13,21 +13,24 @@
     "type": "git",
     "url": "https://github.com/dnbexperience/eufemia.git"
   },
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "babelPluginReactLive.js",
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch"
   },
+  "dependencies": {
+    "@babel/generator": "7.21.5",
+    "prettier": "2.8.0"
+  },
   "devDependencies": {
     "@babel/core": "7.20.5",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@types/jest": "29.2.3",
     "babel-jest": "29.3.1",
-    "jest": "29.3.1",
-    "prettier": "2.8.0"
+    "jest": "29.3.1"
   },
   "publishConfig": {
     "access": "public"

yarn.lock

@@ -54,6 +54,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:7.21.5":
+  version: 7.21.5
+  resolution: "@babel/generator@npm:7.21.5"
+  dependencies:
+    "@babel/types": ^7.21.5
+    "@jridgewell/gen-mapping": ^0.3.2
+    "@jridgewell/trace-mapping": ^0.3.17
+    jsesc: ^2.5.1
+  checksum: 78af737b9dd701d4c657f9731880430fa1c177767b562f4e8a330a7fe72a4abe857e3d24de4e6d9dafc1f6a11f894162d27e523d7e5948ff9e3925a0ce9867c4
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:^7.20.5, @babel/generator@npm:^7.7.2":
   version: 7.20.5
   resolution: "@babel/generator@npm:7.20.5"
@@ -289,6 +301,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.21.5":
+  version: 7.21.5
+  resolution: "@babel/helper-string-parser@npm:7.21.5"
+  checksum: 36c0ded452f3858e67634b81960d4bde1d1cd2a56b82f4ba2926e97864816021c885f111a7cf81de88a0ed025f49d84a393256700e9acbca2d99462d648705d8
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.18.6, @babel/helper-validator-identifier@npm:^7.19.1":
   version: 7.19.1
   resolution: "@babel/helper-validator-identifier@npm:7.19.1"
@@ -1386,6 +1405,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.21.5":
+  version: 7.21.5
+  resolution: "@babel/types@npm:7.21.5"
+  dependencies:
+    "@babel/helper-string-parser": ^7.21.5
+    "@babel/helper-validator-identifier": ^7.19.1
+    to-fast-properties: ^2.0.0
+  checksum: 43242a99c612d13285ee4af46cc0f1066bcb6ffd38307daef7a76e8c70f36cfc3255eb9e75c8e768b40e761176c313aec4d5c0b9d97a21e494d49d5fd123a9f7
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -1702,6 +1732,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/trace-mapping@npm:^0.3.17":
+  version: 0.3.18
+  resolution: "@jridgewell/trace-mapping@npm:0.3.18"
+  dependencies:
+    "@jridgewell/resolve-uri": 3.1.0
+    "@jridgewell/sourcemap-codec": 1.4.14
+  checksum: 0572669f855260808c16fe8f78f5f1b4356463b11d3f2c7c0b5580c8ba1cbf4ae53efe9f627595830856e57dbac2325ac17eb0c3dd0ec42102e6f227cc289c02
+  languageName: node
+  linkType: hard
+
 "@npmcli/fs@npm:^2.1.0":
   version: 2.1.2
   resolution: "@npmcli/fs@npm:2.1.2"
@@ -2073,6 +2113,7 @@ __metadata:
   resolution: "babel-plugin-react-live@workspace:."
   dependencies:
     "@babel/core": 7.20.5
+    "@babel/generator": 7.21.5
     "@babel/preset-env": 7.20.2
     "@babel/preset-react": 7.18.6
     "@babel/preset-typescript": 7.18.6