withastro · matthewp · Jul 19, 2023 · Jun 28, 2023 · Jun 28, 2023 · Jun 28, 2023
diff --git a/.changeset/silly-garlics-live.md b/.changeset/silly-garlics-live.md
@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+View Transitions
diff --git a/examples/basics/src/layouts/Layout.astro b/examples/basics/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
+
 export interface Props {
 	title: string;
 }
@@ -15,8 +17,9 @@ const { title } = Astro.props;
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
+		<ViewTransitions />
 	</head>
-	<body>
+	<body transition:animate="fade">
 		<slot />
 	</body>
 </html>

diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro
@@ -2,6 +2,7 @@
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
+import { ViewTransitions } from 'astro:transitions';
 
 export interface Props {
 	title: string;
@@ -41,3 +42,4 @@ const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
+<ViewTransitions />
diff --git a/examples/blog/src/components/Header.astro b/examples/blog/src/components/Header.astro
@@ -1,9 +1,10 @@
 ---
+import { slide } from 'astro:transitions';
 import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE } from '../consts';
 ---
 
-<header>
+<header transition:animate="morph">
 	<h2>
 		{SITE_TITLE}
 	</h2>

diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
@@ -27,8 +27,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			}
 		</style>
 	</head>
-
-	<body>
+	<body transition:animate="slide">
 		<Header />
 		<main>
 			<article>

diff --git a/examples/blog/src/pages/blog/index.astro b/examples/blog/src/pages/blog/index.astro
@@ -33,7 +33,7 @@ const posts = (await getCollection('blog')).sort(
 			}
 		</style>
 	</head>
-	<body>
+	<body transition:animate="slide">
 		<Header />
 		<main>
 			<section>

diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro
@@ -10,7 +10,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 	</head>
-	<body>
+	<body transition:animate="slide">
 		<Header title={SITE_TITLE} />
 		<main>
 			<h1>🧑‍🚀 Hello, Astronaut!</h1>

diff --git a/examples/hackernews/src/layouts/Layout.astro b/examples/hackernews/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 import Nav from '../components/Nav.astro';
 ---
 
@@ -10,8 +11,9 @@ import Nav from '../components/Nav.astro';
 		<meta name="generator" content={Astro.generator} />
 		<title>Astro - Hacker News</title>
 		<meta name="description" content="Hacker News Clone built with Astro" />
+		<ViewTransitions />
 	</head>
-	<body>
+	<body transition:animate="fade">
 		<Nav />
 		<slot />
 		<style is:global>

diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 import '../styles/global.css';
 
 interface Props {
@@ -25,7 +26,7 @@ const {
 	href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400&family=Rubik:wght@500;600&display=swap"
 	rel="stylesheet"
 />
-
+<ViewTransitions />
 <script is:inline>
 	// This code is inlined in the head to make dark mode instant & blocking.
 	const getThemePreference = () => {

diff --git a/examples/portfolio/src/layouts/BaseLayout.astro b/examples/portfolio/src/layouts/BaseLayout.astro
@@ -19,7 +19,7 @@ const { title, description } = Astro.props;
 	<head>
 		<MainHead title={title} description={description} />
 	</head>
-	<body>
+	<body transition:animate="morph">
 		<div class="stack backgrounds">
 			<Nav />
 			<slot />

diff --git a/examples/with-tailwindcss/src/layouts/main.astro b/examples/with-tailwindcss/src/layouts/main.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 const { content } = Astro.props;
 ---
 
@@ -8,8 +9,9 @@ const { content } = Astro.props;
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<title>{content.title}</title>
+		<ViewTransitions />
 	</head>
-	<body>
+	<body transition:animate="morph">
 		<slot />
 	</body>
 </html>
diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 // Component Imports
 import Button from '../components/Button.astro';
+import { ViewTransitions } from 'astro:transitions';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
@@ -13,9 +14,9 @@ import Button from '../components/Button.astro';
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>Astro + TailwindCSS</title>
+		<ViewTransitions />
 	</head>
-
-	<body>
+	<body transition:animate="morph">
 		<div class="grid place-items-center h-screen content-center">
 			<Button>Tailwind Button in Astro!</Button>
 			<a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a>

diff --git a/packages/astro/client-base.d.ts b/packages/astro/client-base.d.ts
@@ -70,6 +70,15 @@ declare module 'astro:assets' {
 	export const { getImage, getConfiguredImageService, Image }: AstroAssets;
 }
 
+declare module 'astro:transitions' {
+	type TransitionModule = typeof import('./dist/transitions/index.js');
+	export const slide: TransitionModule['slide'];
+	export const fade: TransitionModule['fade'];
+
+	type ViewTransitionsModule = typeof import('./components/ViewTransitions.astro');
+	export const ViewTransitions: ViewTransitionsModule['default'];
+}
+
 type MD = import('./dist/@types/astro').MarkdownInstance<Record<string, any>>;
 interface ExportedMarkdownModuleEntities {
 	frontmatter: MD['frontmatter'];

diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
@@ -0,0 +1,89 @@
+<script>
+	type Direction = 'forward' | 'back';
+
+	let currentIndex = history.state?.index || 0;
+	if(!history.state) {
+		history.replaceState({index: currentIndex}, document.title);
+	}
+
+  async function getHTML(href: string) {
+    let res = await fetch(href)
+    let html = await res.text();
+    return html;
+  }
+
+	const parser = new DOMParser();
+
+  async function updateDOM(dir: Direction, html: string) {
+    const doc = parser.parseFromString(html, 'text/html');
+		doc.documentElement.dataset.astroTransition = dir;
+    document.documentElement.replaceWith(doc.documentElement);
+  }
+
+	async function navigate(dir: Direction, href: string) {
+		let htmlPromise = getHTML(href);
+		let finished: Promise<void>;
+		document.documentElement.dataset.astroTransition = dir;
+		const html = await htmlPromise;
+		if(document.startViewTransition) {
+			finished = document.startViewTransition(() => updateDOM(dir, html)).finished;
+		} else {
+			finished = updateDOM(dir, html);
+		}
+		try {
+			await finished;
+		} finally {
+			document.documentElement.removeAttribute('data-astro-transition');
+		}
+	}
+
+  document.addEventListener('click', (ev) => {
+		let link = ev.target;
+		if (link instanceof HTMLAnchorElement &&
+			link.href &&
+			(!link.target || link.target === '_self') &&
+			link.origin === location.origin &&
+			ev.button === 0 && // left clicks only
+			!ev.metaKey && // new tab (mac)
+			!ev.ctrlKey && // new tab (windows)
+			!ev.altKey && // download
+			!ev.shiftKey &&
+			!ev.defaultPrevented
+			) {
+			ev.preventDefault();
+    	navigate('forward', link.href);
+			history.pushState({index: currentIndex + 1}, '', link.href);
+			currentIndex++;
+		}
+  });
+	window.addEventListener('popstate', ev => {
+		const index = history.state?.index ?? (currentIndex + 1);
+		const direction: Direction = index > currentIndex ? 'forward' : 'back';
+		navigate(direction, location.href);
+		currentIndex = index;
+	});
+
+	// Prefetching
+	function maybePrefetch(pathname: string) {
+		if(document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
+		if(navigator.connection){
+			let conn = navigator.connection;
+			if(conn.saveData || /(2|3)g/.test(conn.effectiveType || '')) return;
+		}
+		let link = document.createElement('link');
+		link.setAttribute('rel', 'prefetch');
+		link.setAttribute('href', pathname);
+		document.head.append(link);
+	}
+
+	['mouseenter', 'touchstart', 'focus'].forEach(evName => {
+		document.addEventListener(evName, ev => {
+			if(ev.target instanceof HTMLAnchorElement) {
+				let el = ev.target;
+				if(el.origin === location.origin && el.pathname !== location.pathname) {
+					maybePrefetch(el.pathname);
+				}
+			}
+		}, { passive: true, capture: true });
+	});
+</script>
diff --git a/packages/astro/components/index.ts b/packages/astro/components/index.ts
@@ -1,2 +1,3 @@
 export { default as Code } from './Code.astro';
 export { default as Debug } from './Debug.astro';
+export { default as ViewTransitions } from './ViewTransitions.astro';
diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css
@@ -0,0 +1,32 @@
+@keyframes astroFadeInOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes astroFadeIn {
+	from { opacity: 0; }
+}
+
+@keyframes astroFadeOut {
+	to { opacity: 0; }
+}
+
+@keyframes astroSlideFromRight {
+	from { transform: translateX(100%); }
+}
+
+@keyframes astroSlideFromLeft {
+	from { transform: translateX(-100%); }
+}
+
+@keyframes astroSlideToRight {
+	to { transform: translateX(100%); }
+}
+
+@keyframes astroSlideToLeft {
+	to { transform: translateX(-100%); }
+}
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -70,7 +70,8 @@
     "./middleware": {
       "types": "./dist/core/middleware/index.d.ts",
       "default": "./dist/core/middleware/index.js"
-    }
+    },
+    "./transitions": "./dist/transitions/index.js"
   },
   "imports": {
     "#astro/*": "./dist/*.js"
@@ -113,7 +114,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^1.5.3",
+    "@astrojs/compiler": "1.6.0-pre.10",
     "@astrojs/internal-helpers": "^0.1.1",
     "@astrojs/language-server": "^1.0.0",
     "@astrojs/markdown-remark": "^2.2.1",
@@ -126,6 +127,7 @@
     "@babel/traverse": "^7.22.5",
     "@babel/types": "^7.22.5",
     "@types/babel__core": "^7.20.1",
+    "@types/dom-view-transitions": "^1.0.1",
     "@types/yargs-parser": "^21.0.0",
     "acorn": "^8.9.0",
     "boxen": "^6.2.1",
@@ -149,6 +151,7 @@
     "kleur": "^4.1.4",
     "magic-string": "^0.27.0",
     "mime": "^3.0.0",
+    "network-information-types": "^0.1.1",
     "ora": "^6.3.1",
     "p-limit": "^4.0.0",
     "path-to-regexp": "^6.2.1",

diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -55,6 +55,27 @@ export interface AstroBuiltinProps {
 	'client:only'?: boolean | string;
 }
 
+export interface TransitionAnimation {
+  name: string; // The name of the keyframe
+  delay?: number | string;
+  duration?: number | string;
+  easing?: string;
+	fillMode?: string;
+	direction?: string;
+}
+
+export interface TransitionAnimationPair {
+	old: TransitionAnimation | TransitionAnimation[];
+	new: TransitionAnimation | TransitionAnimation[];
+}
+
+export interface TransitionDirectionalAnimations {
+	forwards: TransitionAnimationPair;
+	backwards: TransitionAnimationPair;
+}
+
+export type TransitionAnimationValue = 'morph' | 'slide' | 'fade' | TransitionDirectionalAnimations;
+
 // Allow users to extend this for astro-jsx.d.ts
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface AstroClientDirectives {}
@@ -69,6 +90,8 @@ export interface AstroBuiltinAttributes {
 	'set:html'?: any;
 	'set:text'?: any;
 	'is:raw'?: boolean;
+	'transition:animate'?: 'morph' | 'slide' | 'fade' | TransitionDirectionalAnimations;
+	'transition:name'?: string;
 }
 
 export interface AstroDefineVarsAttribute {

diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts
@@ -27,6 +27,7 @@ import astroScannerPlugin from '../vite-plugin-scanner/index.js';
 import astroScriptsPlugin from '../vite-plugin-scripts/index.js';
 import astroScriptsPageSSRPlugin from '../vite-plugin-scripts/page-ssr.js';
 import { vitePluginSSRManifest } from '../vite-plugin-ssr-manifest/index.js';
+import astroTransitions from '../transitions/vite-plugin-transitions.js';
 import { joinPaths } from './path.js';
 
 interface CreateViteOptions {
@@ -132,6 +133,7 @@ export async function createVite(
 			astroContentAssetPropagationPlugin({ mode, settings }),
 			vitePluginSSRManifest(),
 			settings.config.experimental.assets ? [astroAssetsPlugin({ settings, logging, mode })] : [],
+			astroTransitions(),
 		],
 		publicDir: fileURLToPath(settings.config.publicDir),
 		root: fileURLToPath(settings.config.root),