Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-06 22:10:10 -05:00
Code Issues Activity

Fix Vue HMR for script tags (#8860)

Browse source
This commit is contained in:
Bjorn Lu 2023-10-18 21:23:19 +08:00 committed by GitHub
parent c6e0d8e1cd
commit 65c7bd149c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/seven-brooms-trade.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/vue': patch
---
Fix Vue component HMR when updating the script tag

9
packages/astro/e2e/fixtures/vue-component/src/components/State.vue Normal file
View file

@ -0,0 +1,9 @@
<script setup>
import { ref } from 'vue'
const props = defineProps(['id'])
const count = ref(1)
</script>
<template>
<span :id="props.id">Count is {{ count }}</span>
</template>

2
packages/astro/e2e/fixtures/vue-component/src/pages/index.astro
View file

@ -2,6 +2,7 @@
import Counter from '../components/Counter.vue';
import VueComponent from '../components/VueComponent.vue';
import AsyncTest from '../components/Test.vue'
import State from '../components/State.vue'
const someProps = {
count: 0,
@ -35,5 +36,6 @@ const someProps = {
<VueComponent id="client-only" client:only="vue" />
<AsyncTest id="client-test" client:only="vue" />
<State id="state" client:load />
</body>
</html>

13
packages/astro/e2e/vue-component.test.js
View file

@ -39,3 +39,16 @@ test('test the async vue component in mdx', async ({ page, astro }) => {
await expect(label, 'component not hydrated').toHaveText('2');
});
test('hmr works', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const span = page.locator('#state');
await expect(span).toHaveText('Count is 1');
await astro.editFile('./src/components/State.vue', (content) =>
content.replace('ref(1)', 'ref(2)')
);
await expect(span).toHaveText('Count is 2');
});

22
packages/integrations/vue/client.js
View file

@ -14,16 +14,20 @@ export default (element) =>
slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key });
}
let content = h(Component, props, slots);
// related to https://github.com/withastro/astro/issues/6549
// if the component is async, wrap it in a Suspense component
if (isAsync(Component.setup)) {
content = h(Suspense, null, content);
}
const isHydrate = client !== 'only';
const boostrap = isHydrate ? createSSRApp : createApp;
const app = boostrap({ name, render: () => content });
const bootstrap = isHydrate ? createSSRApp : createApp;
const app = bootstrap({
name,
render() {
let content = h(Component, props, slots);
// related to https://github.com/withastro/astro/issues/6549
// if the component is async, wrap it in a Suspense component
if (isAsync(Component.setup)) {
content = h(Suspense, null, content);
}
return content;
},
});
await setup(app);
app.mount(element, isHydrate);