fix: update to astro-island

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.1.5",
+    "@astrojs/spa": "^0.0.1",
+    "astro": "^1.0.0-beta.38",
+    "vue": "^3.2.36"
+  }
+}

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"
+  }
+}

packages/astro/src/runtime/client/media.ts

@@ -14,5 +14,6 @@
 		} else {
 			mql.addEventListener('change', cb, { once: true });
 		}
+		window.addEventListener('astro:locationchange', media, { once: true })
 	}
 };

packages/integrations/spa/client.js

@@ -0,0 +1,21 @@
+import listen from 'micromorph/nav';
+
+export default () =>
+	listen({
+		beforeDiff(doc) {
+			for (const island of doc.querySelectorAll('astro-root')) {
+				const uid = island.getAttribute('uid');
+				const current = document.querySelector(`astro-island[uid="${uid}"]`);
+				if (current) {
+					current.dataset.persist = true;
+					island.replaceWith(current);
+				}
+			}
+		},
+		afterDiff() {
+			for (const island of document.querySelectorAll('astro-island')) {
+				delete island.dataset.persist;
+			}
+			window.dispatchEvent(new CustomEvent('astro:hydrate'));
+		},
+	});

packages/integrations/spa/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@astrojs/spa",
+  "description": "SPA Astro Integrations",
+  "version": "0.0.1",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "author": "withastro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/withastro/astro.git",
+    "directory": "packages/integrations/turbolinks"
+  },
+  "keywords": [
+    "astro-component",
+    "performance"
+  ],
+  "bugs": "https://github.com/withastro/astro/issues",
+  "homepage": "https://astro.build",
+  "exports": {
+    ".": "./dist/index.js",
+    "./client.js": "./client.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
+    "build:ci": "astro-scripts build \"src/**/*.ts\"",
+    "dev": "astro-scripts dev \"src/**/*.ts\""
+  },
+  "dependencies": {
+    "micromorph": "^0.3.1"
+  },
+  "devDependencies": {
+    "astro": "workspace:*",
+    "astro-scripts": "workspace:*"
+  }
+}

packages/integrations/spa/src/index.ts

@@ -0,0 +1,19 @@
+import type { AstroIntegration } from 'astro';
+
+export interface SpaOptions {
+	persistent?: boolean;
+}
+
+export default function createPlugin({ persistent = true }: SpaOptions = {}): AstroIntegration {
+	return {
+		name: '@astrojs/spa',
+		hooks: {
+			'astro:config:setup': ({ injectScript }) => {
+				// This gets injected into the user's page, so we need to re-export Turbolinks
+				// from our own package so that package managers like pnpm don't get mad and
+				// can follow the import correctly.
+				injectScript('page', `import listen from "@astrojs/spa/client.js"; listen();`);
+			},
+		},
+	};
+}

packages/integrations/spa/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "ES2020",
+    "outDir": "./dist",
+    "target": "ES2020"
+  }
+}

pnpm-lock.yaml

@@ -259,6 +259,18 @@ importers:
       astro: link:../../packages/astro
       sass: 1.54.4
 
+  examples/spa:
+    specifiers:
+      '@astrojs/spa': ^0.0.1
+      '@astrojs/vue': ^0.1.5
+      astro: ^1.0.0-beta.38
+      vue: ^3.2.36
+    devDependencies:
+      '@astrojs/spa': link:../../packages/integrations/spa
+      '@astrojs/vue': 0.1.5_vue@3.2.37
+      astro: link:../../packages/astro
+      vue: 3.2.37
+
   examples/ssr:
     specifiers:
       '@astrojs/node': ^1.0.0
@@ -2512,6 +2524,17 @@ importers:
       astro-scripts: link:../../../scripts
       solid-js: 1.4.8
 
+  packages/integrations/spa:
+    specifiers:
+      astro: workspace:*
+      astro-scripts: workspace:*
+      micromorph: ^0.3.1
+    dependencies:
+      micromorph: 0.3.1
+    devDependencies:
+      astro: link:../../astro
+      astro-scripts: link:../../../scripts
+
   packages/integrations/svelte:
     specifiers:
       '@sveltejs/vite-plugin-svelte': ^1.0.1
@@ -3143,6 +3166,21 @@ packages:
       vfile-message: 3.1.2
     dev: false
 
+  /@astrojs/vue/0.1.5_vue@3.2.37:
+    resolution: {integrity: sha512-U2J9ymxj6tiKxXBvFAFjgea6g7MHOUUMGPuJqrgWmX25Od+Pm+VfEETn9t6T3DqW5Tt2qCai9nd0k6WrhZCeGA==}
+    engines: {node: ^14.15.0 || >=16.0.0}
+    peerDependencies:
+      vue: ^3.2.30
+    dependencies:
+      '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.37
+      vite: 2.9.15
+      vue: 3.2.37
+    transitivePeerDependencies:
+      - less
+      - sass
+      - stylus
+    dev: true
+
   /@babel/code-frame/7.18.6:
     resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
     engines: {node: '>=6.9.0'}
@@ -9083,6 +9121,20 @@ packages:
       - supports-color
     dev: false
 
+  /@vitejs/plugin-vue/2.3.4_vite@2.9.15+vue@3.2.37:
+    resolution: {integrity: sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      vite: ^2.5.10
+      vue: ^3.2.25
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      vite: 2.9.15
+      vue: 3.2.37
+    dev: true
+
   /@vitejs/plugin-vue/3.0.1_vite@3.0.5+vue@3.2.37:
     resolution: {integrity: sha512-Ll9JgxG7ONIz/XZv3dssfoMUDu9qAnlJ+km+pBA0teYSXzwPCIzS/e1bmwNYl5dcQGs677D21amgfYAnzMl17A==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -13296,6 +13348,10 @@ packages:
       braces: 3.0.2
       picomatch: 2.3.1
 
+  /micromorph/0.3.1:
+    resolution: {integrity: sha512-dbX4sz405e/QQtbHFMJj0SaVP+xuBBpSpR44AQYTjsrPek8oKyeRXkbtYN1XyFVdV7WjHp5DZMwxJOJiBfH1Jw==}
+    dev: false
+
   /mime-db/1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -16644,6 +16700,30 @@ packages:
       - supports-color
     dev: true
 
+  /vite/2.9.15:
+    resolution: {integrity: sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==}
+    engines: {node: '>=12.2.0'}
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+    dependencies:
+      esbuild: 0.14.54
+      postcss: 8.4.16
+      resolve: 1.22.1
+      rollup: 2.77.3
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vite/3.0.5:
     resolution: {integrity: sha512-bRvrt9Tw8EGW4jj64aYFTnVg134E8hgDxyl/eEHnxiGqYk7/pTPss6CWlurqPOUzqvEoZkZ58Ws+Iu8MB87iMA==}
     engines: {node: ^14.18.0 || >=16.0.0}