Comments (13)
Hi, I am sure with cli are minimal problems, but I don't use Vue Cli, because, I prefer to configure code myself, rather than it to be generated automatically. With Vue 2 I have this option, but on vue 3, more attention is given to cli and I don't like this tendency.
I haven't found any loader for jsx hot reload on vue 3. This is not a big problem, except hot reload everything works fine, but still needs to noticed.
And .tsx files also don't work, typescript writes that it needs
--jsx
flag, and on this also is no information.Because of this concentration only on cli, many small details are missed out and are not properly documented.
Thanks for your issue. I will improve the documentation about TSX
and solve the problem of HMR this week.
from babel-plugin-jsx.
It seems @Amour1688 is busy working. I tried to go deep into vue-next source code to find how hmr worked. It seems impossible to keep state when hmr in component which render
function returned in setup. We can simplely add
if (module.hot) {
const api = __VUE_HMR_RUNTIME__
module.hot.accept()
if (!api.createRecord('aaabbbccc')) {
api.reload('aaabbbccc', App)
}
}
to every file to prevent page reloading, but I still can't find a way to keep state. @TrungRueta @TiBianMod will you guys accept full reload a component when hmr? Maybe I can pr to make this work.
from babel-plugin-jsx.
Hi, I am sure with cli are minimal problems, but I don't use Vue Cli, because, I prefer to configure code myself, rather than it to be generated automatically. With Vue 2 I have this option, but on vue 3, more attention is given to cli and I don't like this tendency.
I haven't found any loader for jsx hot reload on vue 3. This is not a big problem, except hot reload everything works fine, but still needs to noticed.
And .tsx files also don't work, typescript writes that it needs --jsx
flag, and on this also is no information.
Because of this concentration only on cli, many small details are missed out and are not properly documented.
from babel-plugin-jsx.
@giorgi94 i can confirm that Vue cli just a ready-to-go first state, configs will be same like own setup. But i agree for now plugins support jsx/tsx for Vue3 still mess. As i can see is default Vue Cli and your setup make project work with jsx/tsx ok, problem only from HMR stop working.
about .tsx
not work i think you need add tsconfig.json line "jsx": "preserve"
. Other choice is copy code and conver to jsx, samples above just mini code and easy to remove ts syntax.
I love working with jsx/tsx but without HMR it not feeling good
from babel-plugin-jsx.
Confirm with Vue Cli tsx/jsx work ok except one issue is losing state when update changes.
- HMR still work but only with .vue file, if create new page use .vue file then insert other tsx/jsx file as component of .vue file component then only tsx component lost state. If update .vue file then tsx component still keep state.
// -- vue file as root
<template>
<div>
this is summary 123 <parent />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import parent from '@/components/testing/parent';
export default defineComponent({
components: {
parent,
},
});
</script>
// -- tsx as parent - inserted to vue file root
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import child from './child';
export default defineComponent({
components: { child },
setup: () => {
const count = ref(0);
let loop: any;
onMounted(() => (loop = setInterval(() => count.value++, 1000)));
onBeforeUnmount(() => clearInterval(loop));
return () => (
<div>
this is parent {count.value} -+- <child />
</div>
);
},
});
// -- child component .
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
export default defineComponent(() => {
const count = ref(0);
let loop: any;
onMounted(() => (loop = setInterval(() => count.value++, 1000)));
onBeforeUnmount(() => clearInterval(loop));
return () => (
<div>
this is child
{count.value}
</div>
);
});
step to reproduce:
parent
and child
has interval number by second, see 2 values run same number as begin.
- add new text to .vue file -> 2 number no reset, still same -> HMR work
- add new text to
parent
-> 2 number reseted -> HMR or reload work on both componentsparent
andchild
. - add new text to
child
-> 2 number reseted -> HMR no working, all tsx components reseted no matter which ones change.
from babel-plugin-jsx.
@Amour1688 Hi buddy, any luck for HMR? Everything working perfect except HMR :( develop time expand a lot when waiting reload full page everytime edit ...
from babel-plugin-jsx.
@Amour1688 any progress with HMR ?
from babel-plugin-jsx.
It seems @Amour1688 is busy working. I tried to go deep into vue-next source code to find how hmr worked. It seems impossible to keep state when hmr in component which
render
function returned in setup. We can simplely addif (module.hot) { const api = __VUE_HMR_RUNTIME__ module.hot.accept() if (!api.createRecord('aaabbbccc')) { api.reload('aaabbbccc', App) } }
to every file to prevent page reloading, but I still can't find a way to keep state. @TrungRueta @TiBianMod will you guys accept full reload a component when hmr? Maybe I can pr to make this work.
Thanks. There is an experimental repo vue-jsx-hot-loader, you can PR to the repo
from babel-plugin-jsx.
@Amour1688 It seems you already did what I mentioned, so the question is: when will you publish it?
from babel-plugin-jsx.
By the way, @Amour1688 Have you find out how to keep state in setup when hmr?
from babel-plugin-jsx.
Maybe we can implement hmr in babel plugin like what did in vite ?
from babel-plugin-jsx.
Thank @Jokcy @Amour1688 ! I think until we have solution keep state, lost state in single component so far better than full page reload. <3
from babel-plugin-jsx.
from babel-plugin-jsx.
Related Issues (20)
- [Question] In the future and Object slot typing be supported by this plugin HOT 2
- [Question] How to pass function slots ? HOT 1
- [BUG] empty string transform to true
- Action Required: Fix Renovate Configuration
- [BUG] empty string transform to true HOT 2
- [Question] How to pass any attribute to the component HOT 2
- [BUG] Excluding a file will prevent it from still getting parsed as JSX causing errors
- Can this plugin be used in a browser? HOT 1
- vModel 修饰符不能动态 HOT 2
- [BUG] {} 渲染异常 HOT 1
- [BUG] tsup bundle problem HOT 2
- [BUG] Typescript typings HOT 1
- [BUG] "resolveDirective" is imported from external module "vue" but never used
- [Question] Help配置列表 HOT 1
- [Question] directives:v-model or vModel?v-show or vShow? HOT 1
- [BUG] Report bug HOT 1
- [Question] how to make vue jsx ast return to jsx HOT 1
- [Question] How to set a Symbolic Link in README.md HOT 2
- The inline style setting failed HOT 1
- When JSX is used, v-slots cause child component does unnecessary rendering during parent component re-rendering HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-jsx.