Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@salomvary/handlebars-to-jsx

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@salomvary/handlebars-to-jsx

Converts Handlebars template to React component

  • 0.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

Handlebars to JSX NPM Build Status

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>

Command line usage

This package comes with a command line utility:

$ handlebars-to-jsx --help

Usage: handlebars-to-jsx [path] [options]

Path must be a Handlebars file otherwise it will be read from stdin.

Options:
  -c --component         Should return JSX code wrapped as a function component.
  -m --module            Should return generated code exported as default.
  -i --include-import    Should return generated code with React import at the top.
  -h --help              Print this help text and exit.

Example usage:

$ npx handlebars-to-jsx test.hbs -c

props => <React.Fragment>{props.qux}
</React.Fragment>;

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

Keywords

FAQs

Package last updated on 20 Oct 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc