title: Generating Handlebars from a React Abstract Syntax
body: <p>As a proof of concept, I'm trying to generate Handlebars code from a simple React component. For example, I'd like to transform something like this.</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  
  const HelloWorld = ({ name, items }) =&gt; {
    return (
      &lt;h1&gt;
       Hello {name}!
       &lt;ul&gt;
         {items.map((item, i) =&gt; (
           &lt;li key={i}&gt; {item} &lt;/li&gt;
         ))}
       &lt;/ul&gt;
      &lt;/h1&gt;
    )
  }
  
  export default HelloWorld;
  </code></pre>
  <p>To something like this.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;
   Hello {{ name }}!
   &lt;ul&gt;
    {{#each items}}
      &lt;li key=&quot;{{@index}}&quot;&gt;{{ this }}&lt;/li&gt;
    {{/each}}
   &lt;/ul&gt;
  &lt;/h1&gt;
  </code></pre>
  <p>My original idea was to use babel, typescript or another AST generator to generate an AST and then traverse it building out the handlebars output. Starting with the default export, traversing the nodes and outputting the return JSX Statements into a resultant string. Has anybody seen something similar where a handlebars template is generated programmatically?</p>