<p dir="auto">Hi !</p>
<p dir="auto">Could it be possible to add a transformer for JSX that outputs a Javascript "normal" string ?<br>
For example, this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let foo = &quot;Hello world !&quot;;
let bar = (
    &lt;div&gt;
        {foo}
    &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">foo</span> <span class="pl-c1">=</span> <span class="pl-s">"Hello world !"</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">bar</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span>
    <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">{</span>foo<span class="pl-kos">}</span>
    <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>div&gt;</span><span class="pl-c1"></span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">would be transformed to:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let foo = &quot;Hello world&quot;;
let test = &quot;&lt;div&gt;&quot; +  foo + &quot;&lt;/div&gt;&quot;;"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">foo</span> <span class="pl-c1">=</span> <span class="pl-s">"Hello world"</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">test</span> <span class="pl-c1">=</span> <span class="pl-s">"&lt;div&gt;"</span> <span class="pl-c1">+</span>  <span class="pl-s1">foo</span> <span class="pl-c1">+</span> <span class="pl-s">"&lt;/div&gt;"</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I'm not sure if it goes into the scope of the project, since one could use the <code class="notranslate">preserve</code> option and use an additional transpiler, but I think it could help users write components &amp; templates for any library (Vuejs, Ractive, ...), instead of just React.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface A 
{
    func(arg: string): boolean;
    func(arg: number): string;
} // OK!

interface B 
{
    func: (arg: string) =&gt; boolean;
    func: (arg: number) =&gt; string;
} // Error! Duplicate identifier 'func'."><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">A</span> 
<span class="pl-kos">{</span>
    <span class="pl-c1">func</span><span class="pl-kos">(</span><span class="pl-s1">arg</span>: <span class="pl-smi">string</span><span class="pl-kos">)</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>
    <span class="pl-c1">func</span><span class="pl-kos">(</span><span class="pl-s1">arg</span>: <span class="pl-smi">number</span><span class="pl-kos">)</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span> <span class="pl-c">// OK!</span>

<span class="pl-k">interface</span> <span class="pl-smi">B</span> 
<span class="pl-kos">{</span>
    <span class="pl-c1">func</span>: <span class="pl-kos">(</span><span class="pl-s1">arg</span>: <span class="pl-smi">string</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">boolean</span><span class="pl-kos">;</span>
    <span class="pl-c1">func</span>: <span class="pl-kos">(</span><span class="pl-s1">arg</span>: <span class="pl-smi">number</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span> <span class="pl-c">// Error! Duplicate identifier 'func'.</span></pre></div>
<p dir="auto">?</p>