Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/danakt/handlebars-to-jsx

Converts Handlebars template to React component
https://github.com/danakt/handlebars-to-jsx

converter converting-handlebars-template handlebars handlebars-template handlebars-to-jsx handlebars-to-react jsx react

Last synced: about 2 months ago
JSON representation

Converts Handlebars template to React component

Awesome Lists containing this project

README 

        
# Handlebars to JSX [![NPM](https://img.shields.io/npm/v/handlebars-to-jsx.svg?style=flat-square)](https://www.npmjs.com/package/handlebars-to-jsx) [![Build Status](https://img.shields.io/travis/danakt/handlebars-to-jsx.svg?style=flat-square)](https://travis-ci.org/danakt/handlebars-to-jsx)



Converts Handlebars template to JSX-component. Uses [Glimmer VM](https://github.com/glimmerjs/glimmer-vm/) to parse Handlebars code to AST and [Babel](https://github.com/babel/babel/) to create JSX AST and generate code.



## Installation



```bash

# 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:



```js

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:



```js

compile('
{{variable}}
')



// Result code

// props => 
{props.variable}


```



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.



```js

compile('
{{variable}}
', { isComponent: false })



// Result

// 
{variable}


```



Also, you can have the component exported as default:



```js

compile('
{{variable}}
', { isModule: true })



// Result

// export default props => 
{props.variable}


```



Also, react can be imported:



```js

compile('
{{variable}}
', { includeImport: true, isModule: true })



// Result

// import React from "react";

// export default props => 
{props.variable}


```



## Code formatting



The output code is created from an AST tree, so it's unformatted by default. You can use tools like [Prettier](https://prettier.io/docs/en/api.html) to format the code:



```js

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

import prettier from 'prettier'



// The Handlebars input

const hbsCode = '
{{#each list}}{{item}}{{/each}}
'



const jsxCode = compile(hbsCode, { isComponent: false })

// 
{list.map((item, i) => {item.item})}
;



prettier.format(jsxCode, { parser: 'babylon' })

// 


//   {list.map((item, i) => (

//     {item.item}

//   ))}

// 
;

```



## 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](https://github.com/babel/babel):



```js

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

import babel from '@babel/core'

import pluginTransformReactJSX from '@babel/plugin-transform-react-jsx'



// The Handlebars input

const hbsCode = '
{{variable}}
'



const jsxCode = compile(hbsCode, { isComponent: false })

// 
{variable}
;



const { code } = babel.transform(jsxCode, {

  plugins: [pluginTransformReactJSX]

})

// React.createElement("div", null, variable);

```



## License



MIT licensed