transition.ts — astro Source File

Source Code

import cssesc from 'cssesc';
import { fade, slide } from '../../transitions/index.js';
import type { SSRResult } from '../../types/public/internal.js';
import type {
	TransitionAnimation,
	TransitionAnimationPair,
	TransitionAnimationValue,
	TransitionDirectionalAnimations,
} from '../../types/public/view-transitions.js';
import { markHTMLString } from './escape.js';

const transitionNameMap = new WeakMap<SSRResult, number>();
function incrementTransitionNumber(result: SSRResult) {
	let num = 1;
	if (transitionNameMap.has(result)) {
		num = transitionNameMap.get(result)! + 1;
	}
	transitionNameMap.set(result, num);
	return num;
}

export function createTransitionScope(result: SSRResult, hash: string) {
	const num = incrementTransitionNumber(result);
	return `astro-${hash}-${num}`;
}

type Entries<T extends Record<string, any>> = Iterable<[keyof T, T[keyof T]]>;

const getAnimations = (name: TransitionAnimationValue) => {
	if (name === 'fade') return fade();
	if (name === 'slide') return slide();
	if (typeof name === 'object') return name;
};

const addPairs = (
	animations: TransitionDirectionalAnimations | Record<string, TransitionAnimationPair>,
	stylesheet: ViewTransitionStyleSheet,
) => {
	for (const [direction, images] of Object.entries(animations) as Entries<typeof animations>) {
		for (const [image, rules] of Object.entries(images) as Entries<
			(typeof animations)[typeof direction]
		>) {
			stylesheet.addAnimationPair(direction, image, rules);
		}
	}
};

// Chrome (121) accepts custom-idents for view-transition-names as generated by cssesc,
// but it just ignores them during view transitions if they contain escaped 7-bit ASCII characters
// like \<space> or \. A special case are digits and minus at the beginning of the string,
// which cssesc also encodes as \xx
const reEncodeValidChars: string[] =
	'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_'
		.split('')
		.reduce((v, c) => ((v[c.charCodeAt(0)] = c), v), [] as string[]);
const reEncodeInValidStart: string[] = '-0123456789_'
	.split('')
	.reduce((v, c) => ((v[c.charCodeAt(0)] = c), v), [] as string[]);

function reEncode(s: string) {
// ... (206 more lines)