Vue and JSX

[Kocal]

Actually that's not an issue, but just an help if some people want to write JSX code with their Vue components. I'm planning to open a PR on symfony/symfony-docs aswell.

The Vue team created a repo (vuejs/jsx) that explains how to use JSX with Vue.

We should start to install dependencies:

$ npm install --save-dev @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# with yarn
$ yarn add -D @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

And then configure Babel to use the preset @vue/babel-preset-jsx, this is how we do that with Encore:

Encore.configureBabel(babelConfig => {
  babelConfig.presets.push('@vue/babel-preset-jsx')
}

And that's all. 😄

By the way, like it has been done for React (.enableReactPreset()) maybe we should consider adding a new method to Encore, like .enableVueJSX() that will mutate Babel config?

[Lyrkan]

Hi @Kocal,

By the way, like it has been done for React (.enableReactPreset()) maybe we should consider adding a new method to Encore, like .enableVueJSX() that will mutate Babel config?

Wouldn't it be better to add that directly to .enableVueLoader()?
For instance:

Encore.enableVueLoader(() => {}, {
  useJsx: true,
});

[Kocal]

Ah yep, even better! :)

[Kocal]

Oh also, I've just seen that the dev-server with HMR does not really work anymore when using JSX (or the render function in general?)

There is an issue vuejs/jsx-vue2#13 which suggests to use vue-jsx-hot-loader. I will try it and put a feedback here.

---

EDIT: The HMR with JSX works fine, unless you modify a props that is used in the render, the reload is not called. I'm opening an issue on the repo.

---

EDIT 2: Ok, so I wasn't able to reproduce the HRM issue on a custom repo.
If I try to update the items prop from App.vue or the render function from MyComponent.jsx, everything works without the need of vue-jsx-hot-loader.

I did the same thing on my project (still without vue-jsx-hot-loader) and it works...

Weird 🤔

---

EDIT 3: ok so the issue comes back on my project. In fact it works for the first update, but it does not work anymore unless I reboot Webpack Encore dev-server.
My project uses nested .jsx components and (scoped) slots, I will try to reproduce the issue with vue-cli and open an issue on vuejs/jsx or vue/vue-loader repos.
Sorry for the spam, but we should be sure to provide the better experience for the user 😋

---

EDIT 4: I was able to reproduce the reload issue on another repo, I think the problem happens because of render/slots usage.
But the thing is... sometimes HMR does not work, sometimes it works. 🤷‍♂️
This has definitly nothing related to Webpack Encore, so let's stop here for the HMR issue.

[Lyrkan]

@Kocal That HMR issue is really weird, I couldn't reproduce it at all with your last repo.

But yeah, not related to Encore, so we should be fine without any additional loader :)

[Kocal]

Can I work on this or you already planned to? :)

EDIT: I'm working on it