<p dir="auto">After upgrading to vue 1.0.11 I am still experiencing the same class attribute merging problems as in previous versions.</p>
<p dir="auto">This is a duplicate of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="119706579" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/1946" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/1946/hovercard" href="https://github.com/vuejs/vue/issues/1946">#1946</a>.</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">See <a href="https://babeljs.io/docs/en/babel-plugin-transform-react-jsx" rel="nofollow">https://babeljs.io/docs/en/babel-plugin-transform-react-jsx</a> for more details.</p>
<p dir="auto">We can have a better JSX experience.</p>
<p dir="auto">Even we can process all the directives/ref/slot features with vue/jsx functions.</p>
<p dir="auto">Transform original <code class="notranslate">jsx(...)</code> input to <code class="notranslate">vue.h(...)</code></p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">In:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/** @jsxImportSource vue */

const profile = (
  &lt;div&gt;
    &lt;img src=&quot;avatar.png&quot; class=&quot;profile&quot; /&gt;
    &lt;h3&gt;{[user.firstName, user.lastName].join(&quot; &quot;)}&lt;/h3&gt;
  &lt;/div&gt;
)"><pre class="notranslate"><span class="pl-c">/** <span class="pl-k">@jsxImportSource</span> vue */</span>

<span class="pl-k">const</span> <span class="pl-s1">profile</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-s">"avatar.png"</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"profile"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">h3</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-kos">[</span><span class="pl-s1">user</span><span class="pl-kos">.</span><span class="pl-c1">firstName</span><span class="pl-kos">,</span> <span class="pl-s1">user</span><span class="pl-kos">.</span><span class="pl-c1">lastName</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">" "</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h3</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">Out:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { jsx as _jsx } from &quot;vue/jsx-runtime&quot;;
import { jsxs as _jsxs } from &quot;vue/jsx-runtime&quot;;

const profile = _jsxs(&quot;div&quot;, {
  children: [
    _jsx(&quot;img&quot;, {
      src: &quot;avatar.png&quot;,
      class: &quot;profile&quot;,
    }),
    _jsx(&quot;h3&quot;, {
      children: [user.firstName, user.lastName].join(&quot; &quot;),
    }),
  ],
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">jsx</span> <span class="pl-k">as</span> <span class="pl-s1">_jsx</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"vue/jsx-runtime"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">jsxs</span> <span class="pl-k">as</span> <span class="pl-s1">_jsxs</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"vue/jsx-runtime"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">profile</span> <span class="pl-c1">=</span> <span class="pl-en">_jsxs</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">children</span>: <span class="pl-kos">[</span>
    <span class="pl-en">_jsx</span><span class="pl-kos">(</span><span class="pl-s">"img"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">src</span>: <span class="pl-s">"avatar.png"</span><span class="pl-kos">,</span>
      <span class="pl-c1">class</span>: <span class="pl-s">"profile"</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-en">_jsx</span><span class="pl-kos">(</span><span class="pl-s">"h3"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">children</span>: <span class="pl-kos">[</span><span class="pl-s1">user</span><span class="pl-kos">.</span><span class="pl-c1">firstName</span><span class="pl-kos">,</span> <span class="pl-s1">user</span><span class="pl-kos">.</span><span class="pl-c1">lastName</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">" "</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>