diff options
| author |  Matthew Phillips <matthew@matthewphillips.info>
| 2021-12-30 09:01:00 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-12-30 09:01:00 -0500 |
| commit | ae5255dd25e36da2ce03f515af7b8f1ec6fcac91 (patch) | |
| tree | abbf33ef08438c351f558514f4ce1dc7740c394d /examples/fast-build/src | |
| parent | 8b34bd90f8b967942ef5d0f0d50e9f9e52cdbe10 (diff) | |
| download | astro-ae5255dd25e36da2ce03f515af7b8f1ec6fcac91.tar.gz astro-ae5255dd25e36da2ce03f515af7b8f1ec6fcac91.tar.zst astro-ae5255dd25e36da2ce03f515af7b8f1ec6fcac91.zip | |
Implement hydrated components in the static build (#2260)
* Work on removing vite-postprocess
* Gets hydration totally working
* Formatting
* Update based on PR comments
* Bring back vite transform for non-static builds
* Upgrade compiler version
* Update the client-only test
* Add debugging for windows
* More debugging
* Pass pathname into the markdown plugin as well
* Include vite changes
* Revert "Include vite changes"
This reverts commit dee6348b233b6d6c6fea1e4dcc41c98c0452846c.
Diffstat (limited to 'examples/fast-build/src')
| -rw-r--r-- | examples/fast-build/src/components/Counter.vue | 24 | ||||
| -rw-r--r-- | examples/fast-build/src/pages/[pokemon].astro | 20 | ||||
| -rw-r--r-- | examples/fast-build/src/pages/index.astro | 18 |
3 files changed, 56 insertions, 6 deletions
diff --git a/examples/fast-build/src/components/Counter.vue b/examples/fast-build/src/components/Counter.vue new file mode 100644 index 000000000..599bcf615 --- /dev/null +++ b/examples/fast-build/src/components/Counter.vue @@ -0,0 +1,24 @@ +<template> + <div id="vue" class="counter"> + <button @click="subtract()">-</button> + <pre>{{ count }}</pre> + <button @click="add()">+</button> + </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> diff --git a/examples/fast-build/src/pages/[pokemon].astro b/examples/fast-build/src/pages/[pokemon].astro new file mode 100644 index 000000000..ea01cc4f7 --- /dev/null +++ b/examples/fast-build/src/pages/[pokemon].astro @@ -0,0 +1,20 @@ +--- +import Greeting from '../components/Greeting.vue'; + +export async function getStaticPaths() { + const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=2000`); + const result = await response.json(); + const allPokemon = result.results; + return allPokemon.map(pokemon => ({params: {pokemon: pokemon.name}, props: {pokemon}})); +} +--- +<html lang="en"> + <head> + <title>Hello</title> + </head> + + <body> + <h1>{Astro.props.pokemon.name}</h1> + <Greeting client:load /> + </body> +</html>
\ No newline at end of file diff --git a/examples/fast-build/src/pages/index.astro b/examples/fast-build/src/pages/index.astro index 2bdadbf5b..ee228aa19 100644 --- a/examples/fast-build/src/pages/index.astro +++ b/examples/fast-build/src/pages/index.astro @@ -2,6 +2,7 @@ import imgUrl from '../images/penguin.jpg'; import grayscaleUrl from '../images/random.jpg?grayscale=true'; import Greeting from '../components/Greeting.vue'; +import Counter from '../components/Counter.vue'; --- <html> @@ -26,9 +27,14 @@ import Greeting from '../components/Greeting.vue'; <Greeting /> </section> - <section> - <h1>ImageTools</h1> - <img src={grayscaleUrl} /> - </section> - </body> -</html> + <section> + <h1>ImageTools</h1> + <img src={grayscaleUrl} /> + </section> + + <section> + <h1>Hydrated component</h1> + <Counter client:idle /> + </section> +</body> +</html>
\ No newline at end of file |