diff --git a/packages/h2x-plugin-jsx/src/JSXInterpolation.js b/packages/h2x-plugin-jsx/src/JSXInterpolation.js new file mode 100644 index 0000000..1de0a56 --- /dev/null +++ b/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 diff --git a/packages/h2x-plugin-jsx/src/generator.js b/packages/h2x-plugin-jsx/src/generator.js index 31348ca..575f7f9 100644 --- a/packages/h2x-plugin-jsx/src/generator.js +++ b/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}}`) + }, + }, } diff --git a/packages/h2x-plugin-jsx/src/index.js b/packages/h2x-plugin-jsx/src/index.js index 97eb94f..0b398d6 100644 --- a/packages/h2x-plugin-jsx/src/index.js +++ b/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 } diff --git a/packages/h2x-plugin-jsx/src/index.test.js b/packages/h2x-plugin-jsx/src/index.test.js index fc7d051..d59aef2 100644 --- a/packages/h2x-plugin-jsx/src/index.test.js +++ b/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', () => { '', ) }) + + it('should handle interpolation', () => { + const code = `
` + 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(`
+ {title} +
`) + }) })