diff options
| author |  Matthew Phillips <matthew@matthewphillips.info>
| 2022-01-04 09:35:07 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-01-04 09:35:07 -0500 |
| commit | 9db22b97b604e2ab1908b28e3461aefb222dcf97 (patch) | |
| tree | 3dc843c263aedf5569222f807626507bb5660a11 /examples/fast-build/src | |
| parent | 523f93a3d89115b23e198a1cde35fe984b46b316 (diff) | |
| download | astro-9db22b97b604e2ab1908b28e3461aefb222dcf97.tar.gz astro-9db22b97b604e2ab1908b28e3461aefb222dcf97.tar.zst astro-9db22b97b604e2ab1908b28e3461aefb222dcf97.zip | |
Only resolve inline script specifiers in the static build (#2302)
* Revert "Revert "Implement hydrated components in the static build (#2260)""
This reverts commit 17ac18e88c2b5a916c23ff7abc630fb98e313906.
* Only resolve specifiers in the static build
* Adding a changeset
* Fix the client-only test
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 |