Add builtin animations and namespaced module

examples/blog/src/components/BaseHead.astro

@@ -2,7 +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/components';
+import { ViewTransitions } from 'astro:transitions';
 
 export interface Props {
 	title: string;

examples/blog/src/components/Header.astro

@@ -1,4 +1,5 @@
 ---
+import { slide } from 'astro:transitions';
 import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE } from '../consts';
 ---

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'];

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"

packages/astro/src/@types/astro.ts

@@ -55,6 +55,25 @@ 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;
+}
+
 // Allow users to extend this for astro-jsx.d.ts
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface AstroClientDirectives {}
@@ -69,7 +88,7 @@ export interface AstroBuiltinAttributes {
 	'set:html'?: any;
 	'set:text'?: any;
 	'is:raw'?: boolean;
-	'transition:animate'?: 'morph' | 'slide' | 'fade';
+	'transition:animate'?: 'morph' | 'slide' | 'fade' | TransitionDirectionalAnimations;
 	'transition:name'?: string;
 }
 

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),

packages/astro/src/transitions/index.ts

@@ -0,0 +1,65 @@
+import type { TransitionDirectionalAnimations, TransitionAnimationPair } from '../@types/astro';
+
+export function slide({
+	duration
+}: {
+	duration?: string | number;
+} = {}): TransitionDirectionalAnimations {
+	return {
+		forwards: {
+			old: [{
+				name: 'astroFadeOut',
+				duration: duration ?? '90ms',
+				easing: 'cubic-bezier(0.4, 0, 1, 1)',
+				fillMode: 'both'
+			}, {
+				name: 'astroSlideToLeft',
+				duration: duration ?? '300ms',
+				easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+				fillMode: 'both'
+			}],
+			new: [{
+				name: 'astroFadeIn',
+				duration: duration ?? '210ms',
+				easing: 'cubic-bezier(0, 0, 0.2, 1)',
+				delay: '90ms',
+				fillMode: 'both'
+			}, {
+				name: 'astroSlideFromRight',
+				duration: duration ?? '300ms',
+				easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+				fillMode: 'both'
+			}]
+		},
+		backwards: {
+			old: [{ name: 'astroFadeOut' }, { name: 'astroSlideToRight' }],
+			new: [{ name: 'astroFadeIn' }, { name: 'astroSlideFromLeft' }]
+		}
+	};
+}
+
+export function fade({
+	duration
+}: {
+	duration?: string | number;
+}): TransitionDirectionalAnimations {
+	const anim = {
+		old: {
+			name: 'astroFadeInOut',
+			duration: duration ?? '0.2s',
+			easing: 'linear',
+			direction: 'forwards',
+		},
+		new: {
+			name: 'astroFadeInOut',
+			duration: duration ?? '0.3s',
+			easing: 'linear',
+			direction: 'backwards',
+		}
+	} satisfies TransitionAnimationPair;
+
+	return {
+		forwards: anim,
+		backwards: anim,
+	};
+}

packages/astro/src/transitions/vite-plugin-transitions.ts

@@ -0,0 +1,25 @@
+import * as vite from 'vite';
+
+const virtualModuleId = 'astro:transitions';
+
+// The virtual module for the astro:transitions namespace
+export default function astroTransitions(): vite.Plugin {
+	const resolvedVirtualModuleId = '\0' + virtualModuleId;
+
+	return {
+		name: 'astro:transitions',
+		async resolveId(id) {
+			if (id === virtualModuleId) {
+				return resolvedVirtualModuleId;
+			}
+		},
+		load(id) {
+			if (id === resolvedVirtualModuleId) {
+				return `
+				export * from "astro/transitions";
+				export { default as ViewTransitions } from "astro/components/ViewTransitions.astro";
+			`;
+			}
+		},
+	};
+}

packages/astro/tsconfig.json

@@ -6,6 +6,7 @@
     "declarationDir": "./dist",
     "module": "ES2022",
     "outDir": "./dist",
-    "target": "ES2021"
+    "target": "ES2021",
+    "jsx": "preserve"
   }
 }