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: 8 months ago
JSON representation
Converts Handlebars template to React component
- Host: GitHub
- URL: https://github.com/danakt/handlebars-to-jsx
- Owner: danakt
- License: mit
- Created: 2018-11-07T23:14:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-19T05:56:17.000Z (over 2 years ago)
- Last Synced: 2024-12-09T04:51:26.106Z (over 1 year ago)
- Topics: converter, converting-handlebars-template, handlebars, handlebars-template, handlebars-to-jsx, handlebars-to-react, jsx, react
- Language: TypeScript
- Size: 573 KB
- Stars: 57
- Watchers: 2
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Handlebars to JSX [](https://www.npmjs.com/package/handlebars-to-jsx) [](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