danakt/handlebars-to-jsx

Converts Handlebars template to React component

handlebars-to-jsx's Issues

Online tool to convert from Handlebars to JSX or html tagged template

Uses handlebars-to-jsx under the hood

Here: https://blikblum.github.io/to-htm/web/dist/
Repository: https://github.com/blikblum/to-htm

For anyone interested

Convert expressions in styles to style object with expression fields

Module not found: Error: Can't resolve './program' in

Hi,

I think the published package is not built correctly. Here is the error I'm facing when I tried to use the tool.

Thanks,
Vetri

[RFC] Switch @glimmer/syntax with handlebars

After having a conversation with some of the @glimmer/syntax maintainers (glimmerjs/glimmer-vm#948), it seems they do not support partials in any form, and the module is specific to Ember's handlebars flavour. Therefore in order to support #3, and to move away from the Ember specific stuff, I think it would make sense to convert this module to use https://github.com/wycats/handlebars.js which provides a .parse function to generate an AST. @danakt is this something you considered when writing the module, and do you have any reservations?

Reserved words

Need to escape reserved javascript words in handlebars expressions

Support the `unless` block helper

Currently {{#if}} is handled but not {{#unless}}

Example tests (there are formatting options for sure - I'm not super opinionated about that):

    test('should convert condition unless-then ', () => {
      expect(compile('<div>{{#unless variable}}<div/>{{/unless}}</div>')).toBe(
        recompile('props => <div>{!Boolean(props.variable) && <div />}</div>;')
      )
    })

    test('should convert condition unless-then-else ', () => {
      expect(compile('<div>{{#unless variable}}<div/>{{else}}<span/>{{/unless}}</div>')).toBe(
        recompile('props => <div>{!Boolean(props.variable) ? <div /> : <span />}</div>;')
      )
    })

How to provide support for handlebar partials ?

Escaping JSX constructs in handlebars templates

Hbs code like this:

<div>Some {text}</div>

must be compiled to JSX code like this:

<div>Some {'{'}text{'}'}</div>;