chore(example): add spa example

examples/spa/.gitignore

@@ -0,0 +1,17 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/spa/.npmrc

@@ -0,0 +1,2 @@
+# Expose Astro dependencies for `pnpm` users
+shamefully-hoist=true

examples/spa/.stackblitzrc

@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}

examples/spa/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/spa/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/spa/README.md

@@ -0,0 +1,43 @@
+# Astro Starter Kit: Minimal
+
+```
+npm init astro -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command           | Action                                       |
+|:----------------  |:-------------------------------------------- |
+| `npm install`     | Installs dependencies                        |
+| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).

examples/spa/astro.config.mjs

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

examples/spa/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@example/spa",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "@astrojs/vue": "^0.0.2",
+    "@astrojs/spa": "^0.0.1",
+    "astro": "^0.25.2",
+    "vue": "^3.2.30"
+  }
+}

examples/spa/sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}

examples/spa/src/components/Counter.vue

@@ -0,0 +1,52 @@
+<template>
+	<div id="vue" class="counter">
+		<p><slot /></p>
+		<div>
+			<button @click="subtract()">-</button>
+			<pre>{{ count }}</pre>
+			<button @click="add()">+</button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+	.counter {
+		display: flex;
+		text-align: center;
+		flex-direction: column;
+		padding: 0.5rem;
+		margin: 0.25rem;
+		border: 1px solid red;
+		min-width: 12em;
+		font-size: 1.25rem;
+	}
+	p {
+		flex: 1;
+	}
+	.counter > div {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+	}
+</style>
+
+<script>
+import { ref } from 'vue';
+export default {
+	props: {
+		initialCount: Number,
+	},
+	setup({ initialCount = 0 }) {
+		const count = ref(initialCount);
+		const add = () => (count.value = count.value + 1);
+		const subtract = () => (count.value = count.value - 1);
+		return {
+			count,
+			add,
+			subtract,
+		};
+	},
+};
+</script>

examples/spa/src/pages/[pokemon].astro

@@ -0,0 +1,40 @@
+---
+import Counter from '../components/Counter.vue';
+
+export async function getStaticPaths() {
+  const { results: allPokemon } = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=2000`).then(res => res.json());
+  return allPokemon.map((pokemon, i, all) => ({
+		params: { pokemon: pokemon.name },
+		props: {
+			prev: `/${all[i - 1]?.name ?? ''}`,
+			index: i,
+			pokemon,
+			next: `/${all[i + 1]?.name ?? ''}`,
+		}
+	}));
+}
+
+const { pokemon, prev, next } = Astro.props;
+---
+<html lang="en">
+  <head>
+    <title>{pokemon.name}</title>
+		<style>
+			main {
+				display: flex;
+			}
+		</style>
+  </head>
+
+  <body>
+    <h1>{pokemon.name}</h1>
+
+		<main>
+			<Counter client:visible>
+				Persistent!
+			</Counter>
+		</main>
+
+		<p><a href={prev}>Previous</a> / <a href={next}>Next</a></p>
+  </body>
+</html>

examples/spa/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node"
+  }
+}