<p dir="auto">We currently have two <code class="notranslate">jsx</code> modes, <code class="notranslate">preserve</code> and <code class="notranslate">react</code>. Using <code class="notranslate">preserve</code> leaves the <code class="notranslate">&lt;Something /&gt;</code> for an additional compilation step, and <code class="notranslate">react</code> ties you into using the <code class="notranslate">React</code> library. I want to propose a compiler option which allows you to define the emitted types. For example setting:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;jsx&quot;: {createElement: &quot;el&quot;}"><pre class="notranslate"><code class="notranslate">"jsx": {createElement: "el"}
</code></pre></div>
<p dir="auto">Which would transform this code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="let test = &lt;div&gt;&lt;span /&gt;&lt;span /&gt;&lt;/div&gt;;"><pre class="notranslate"><code class="notranslate">let test = &lt;div&gt;&lt;span /&gt;&lt;span /&gt;&lt;/div&gt;;
</code></pre></div>
<p dir="auto">Into this result:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var test = el(&quot;div&quot;, null, el(&quot;span&quot;, null), el(&quot;span&quot;, null));"><pre class="notranslate"><code class="notranslate">var test = el("div", null, el("span", null), el("span", null));
</code></pre></div>
<p dir="auto">Essentially, replacing <code class="notranslate">React.createElement</code> with <code class="notranslate">el</code>. Now I can define an <code class="notranslate">el</code> function like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(name: string, properties: {[key: string]: string}, ...children: MyElement[]) =&gt; MyElement"><pre class="notranslate"><code class="notranslate">(name: string, properties: {[key: string]: string}, ...children: MyElement[]) =&gt; MyElement
</code></pre></div>
<p dir="auto">To implement an own library. Why? Because some of us don't like being forced into using <code class="notranslate">React</code>, and this would allow us to either create our own libraries or use an existing DSL such as <code class="notranslate">virtual-hyperscript</code> (perhaps with some minor modifications there).</p>
<p dir="auto">Seems like Babel supports other JSX factories other than <code class="notranslate">React.createElement(...)</code>:</p>
<p dir="auto">Here is docs from <code class="notranslate">deku</code> another JSX framework from Segment.io<br>
Using <code class="notranslate">.babelrc</code>:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;jsxPragma&quot;: &quot;element&quot;
}"><pre class="notranslate">{
  <span class="pl-ent">"jsxPragma"</span>: <span class="pl-s"><span class="pl-pds">"</span>element<span class="pl-pds">"</span></span>
}</pre></div>
<p dir="auto">Source: <a href="https://github.com/dekujs/deku/blob/master/docs/guides/jsx.md#babelrc">https://github.com/dekujs/deku/blob/master/docs/guides/jsx.md#babelrc</a></p>
<p dir="auto">I propose we add something similar to the TS compiler options. Letting people to do a post build of preserved JSX element is not the nicest solution.</p>