Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue and JSX #551

Closed
Kocal opened this Issue Apr 3, 2019 · 5 comments

Comments

Projects
None yet
2 participants
@Kocal
Copy link
Contributor

Kocal commented Apr 3, 2019

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

This comment has been minimized.

Copy link
Collaborator

Lyrkan commented Apr 3, 2019

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

This comment has been minimized.

Copy link
Contributor Author

Kocal commented Apr 3, 2019

Ah yep, even better! :)

@Kocal

This comment has been minimized.

Copy link
Contributor Author

Kocal commented Apr 3, 2019

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#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

This comment has been minimized.

Copy link
Collaborator

Lyrkan commented Apr 4, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

Kocal commented Apr 7, 2019

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

EDIT: I'm working on it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.