How to provide support for handlebar partials ?

[danakt]

@imvetri unfortunately, partials are registered before compiling a template (Handlebars.registerPartial), meanwhile the react (jsx) has no compilation settings directly in the components. Therefore implementation of partials is not expected yet :(

[AndrewLeedham]

@danakt Is this on the roadmap? If so, Wondering if you have an idea for how this would work:

Say we have

// child.handlebars
<div class="child">{{test}}</div>
// parent.handlebars
<div class="parent">
  {{#with context}}
    {{> child }}
  {{/with}}
</div>

The 2 ways I can see this being achieved:

• Partials would be inlined, e.g:

  // parent.jsx
  props => <div class="parent"><div class="child">props.context.test</div></div>

• Partials would simply call out to other files, this would reduce repeated code, but would require isModule and isComponent to be true, there would also need to be some consideration as to how file resolution would work:

  // child.jsx
  export default props => <div class="child">props.test</div>;
  // parent.jsx
  import child from './child';
  export default props => <div class="parent"><child {...props.context}/></div>;

Happy to help with the implementation of this, thought I would start a discussion for now :)

[AndrewLeedham]

@danakt Any thoughts?

[danakt]

Oh! I apologize for not answering for so long. I have no idea to implement support for partials. This package works with syntax, converting identical constructs, whereas partials refers to functionality, and there are no alternatives for them in jsx. The above example will break the existing mechanisms in the work of the package 😟

[AndrewLeedham]

@danakt I have been revisiting this recently. I think It would be straightforward enough to fork @glimmer/syntax and add mapping for partials and partial blocks etc. However that poses the question of what partials should look like in JSX form. I would have thought the first option from https://github.com/danakt/handlebars-to-jsx/issues/3#issuecomment-488705045 would be the simplest?

[imvetri]

However that poses the question of what partials should look like in JSX form

A partial is a reference to another component, at least when we rewrite it to a react component. The best option would be to modify the path to closely match as its component name or we can pass in a transform function that can rewrite the component name.

Here is an example on how it would look like. On the left is a manually rewritten version of HBR to support partial and this gets compiled successfully using the current version of compile.

[AndrewLeedham]

I ended up moving away from handlebars on the project I wanted this for. Looks interesting though 👍

[imvetri]

Thanks for your response

[Rykus0]

I'm new to React components, but I saw there is a children property that could possibly be leveraged for this.

[imvetri]

@Rykus0 feel free to tag me if you want to try this out. I'll help as much as I can

[Rykus0]

Thank you. I will explore it if I can and let you know if I think I can help

On Mon, Oct 12, 2020 at 12:01 Vetrivel notifications@github.com wrote:

@Rykus0 https://github.com/Rykus0 feel free to tag me if you want to try this out. I'll help as much as I can

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/danakt/handlebars-to-jsx/issues/3#issuecomment-707207139, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANKGNVUX6MYCUSVFNQLDJDSKMR53ANCNFSM4GO52UIQ .