adding solid hydration and HMR tests

This commit is contained in:
Tony Sullivan 2022-05-15 14:00:56 -06:00
parent 2481a5a389
commit 54e4ee2cd9
5 changed files with 93 additions and 0 deletions

View file

@ -0,0 +1,7 @@
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
// https://astro.build/config
export default defineConfig({
integrations: [vue()],
});

View file

@ -0,0 +1,10 @@
{
"name": "@e2e/vue",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/vue": "workspace:*",
"astro": "workspace:*",
"vue": "^3.2.33"
}
}

View file

@ -0,0 +1,40 @@
<template>
<div class="counter">
<button @click="subtract()">-</button>
<pre>{{ count }}</pre>
<button @click="add()">+</button>
</div>
<div class="counter-message">
<slot />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const add = () => (count.value = count.value + 1);
const subtract = () => (count.value = count.value - 1);
return {
count,
add,
subtract,
};
},
};
</script>
<style>
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.counter-message {
text-align: center;
}
</style>

View file

@ -0,0 +1,26 @@
---
import Counter from '../components/Counter.vue';
const someProps = {
count: 0,
};
---
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<Counter id="counter-idle" {...someProps} client:idle>
<h1>Hello, client:idle!</h1>
</Counter>
<Counter id="counter-load" {...someProps} client:load>
<h1>Hello, client:load!</h1>
</Counter>
<Counter id="counter-visible" {...someProps} client:visible>
<h1>Hello, client:visible!</h1>
</Counter>
</body>
</html>

View file

@ -711,6 +711,16 @@ importers:
'@astrojs/tailwind': link:../../../../integrations/tailwind
astro: link:../../..
packages/astro/e2e/fixtures/vue:
specifiers:
'@astrojs/vue': workspace:*
astro: workspace:*
vue: ^3.2.33
dependencies:
'@astrojs/vue': link:../../../../integrations/vue
astro: link:../../..
vue: 3.2.33
packages/astro/test/fixtures/0-css:
specifiers:
'@astrojs/react': workspace:*