feat: add new JSXInterpolation node

Author: gregberge

packages/h2x-plugin-jsx/src/JSXInterpolation.js

@@ -0,0 +1,10 @@
+import { NODE_TYPE, VISITOR_KEYS } from 'h2x-types'
+
+class JSXInterpolation {
+  static [NODE_TYPE] = 'JSXInterpolation';
+  static [VISITOR_KEYS] = null
+
+  value = null
+}
+
+export default JSXInterpolation

packages/h2x-plugin-jsx/src/generator.js

@@ -47,4 +47,9 @@ export default {
       if (trimmedText) generator.writeLine(`{\`${formatText(path.node)}\`}`)
     },
   },
+  JSXInterpolation: {
+    enter(path, generator) {
+      generator.writeLine(`{${path.node.value}}`)
+    },
+  },
 }

packages/h2x-plugin-jsx/src/index.js

@@ -5,6 +5,7 @@ export { default as JSXElement } from './JSXElement'
 export { default as JSXAttribute } from './JSXAttribute'
 export { default as JSXComment } from './JSXComment'
 export { default as JSXText } from './JSXText'
+export { default as JSXInterpolation } from './JSXInterpolation'
 
 export default function transformJsx() {
   return { visitor, generator }

packages/h2x-plugin-jsx/src/index.test.js

@@ -1,5 +1,5 @@
 import { transform } from 'h2x-core'
-import transformJsx from '.'
+import transformJsx, { JSXInterpolation } from '.'
 
 describe('transformJsx', () => {
   it('should transform into jsx', () => {
@@ -108,4 +108,24 @@ describe('transformJsx', () => {
       '<svg autoReverse="false" externalResourcesRequired="true" focusable="true" preserveAlpha="false" />',
     )
   })
+
+  it('should handle interpolation', () => {
+    const code = `<div></div>`
+    const addInterpolation = () => ({
+      visitor: {
+        JSXElement: {
+          enter(path) {
+            const interpolation = new JSXInterpolation()
+            interpolation.value = 'title'
+            path.node.children.push(interpolation)
+          },
+        },
+      },
+    })
+    expect(
+      transform(code, { plugins: [transformJsx, addInterpolation] }).trim(),
+    ).toBe(`<div>
+  {title}
+</div>`)
+  })
 })