handlebars-to-jsx

Handlebars to JSX

Converts Handlebars template to JSX-component. Uses Glimmer VM to parse Handlebars code to AST and Babel to create JSX AST and generate code.

Installation

# via NPM
npm install handlebars-to-jsx

# or Yarn
yarn add handlebars-to-jsx

Usage

The package only has one method compile. You can import it the following way:

import { compile } from 'handlebars-to-jsx'

The method has the following syntax:

compile(input[, options])

• input
  The Handlebars template which should be converted to JSX code.
• options Optional
  Options is optional and can have the following properties:
  • isComponent Optional
    The default is true. Should return JSX code wrapped as a function component.
  • isModule Optional
    The default is false. Should return generated code exported as default.
  • includeImport Optional
    The default is false. Should return generated code with React import at the top. Requires isModule to be true.

Use it for simply converting Handlebars template to JSX code:

compile('<div>{{variable}}</div>')

// Result code
// props => <div>{props.variable}</div>

By default the compile function returns a function component. You can convert Handlebars templates to JSX without wrapping them as arrow functions. In this variant, props is not added to the path of variables.

compile('<div>{{variable}}</div>', { isComponent: false })

// Result
// <div>{variable}</div>

Also, you can have the component exported as default:

compile('<div>{{variable}}</div>', { isModule: true })

// Result
// export default props => <div>{props.variable}</div>

Also, react can be imported:

compile('<div>{{variable}}</div>', { includeImport: true, isModule: true })

// Result
// import React from "react";
// export default props => <div>{props.variable}</div>

Code formatting

The output code is created from an AST tree, so it's unformatted by default. You can use tools like Prettier to format the code:

import { compile } from 'handlebars-to-jsx'
import prettier from 'prettier'

// The Handlebars input
const hbsCode = '<div>{{#each list}}<span>{{item}}</span>{{/each}}</div>'

const jsxCode = compile(hbsCode, { isComponent: false })
// <div>{list.map((item, i) => <span key={i}>{item.item}</span>)}</div>;

prettier.format(jsxCode, { parser: 'babylon' })
// <div>
//   {list.map((item, i) => (
//     <span key={i}>{item.item}</span>
//   ))}
// </div>;

Transpilation

If you want to have code lower than ES6, or you want to have the React source JS code without JSX, you can use babel:

import { compile } from 'handlebars-to-jsx'
import babel from '@babel/core'
import pluginTransformReactJSX from '@babel/plugin-transform-react-jsx'

// The Handlebars input
const hbsCode = '<div>{{variable}}</div>'

const jsxCode = compile(hbsCode, { isComponent: false })
// <div>{variable}</div>;

const { code } = babel.transform(jsxCode, {
  plugins: [pluginTransformReactJSX]
})
// React.createElement("div", null, variable);

License

MIT licensed