michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[ci] format

Browse source
This commit is contained in:
natemoo-re 2023-08-24 18:44:16 +00:00 committed by astrobot-houston
parent e45f302934
commit d87837e32b
3 changed files with 44 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/astro/src/@types/astro.ts
View file

@ -77,7 +77,12 @@ export interface TransitionDirectionalAnimations {
backwards: TransitionAnimationPair;
}
export type TransitionAnimationValue = 'initial' | 'slide' | 'fade' | 'none' | TransitionDirectionalAnimations;
export type TransitionAnimationValue =
| 'initial'
| 'slide'
| 'fade'
| 'none'
| TransitionDirectionalAnimations;
// Allow users to extend this for astro-jsx.d.ts
// eslint-disable-next-line @typescript-eslint/no-empty-interface

59
packages/astro/src/runtime/server/transition.ts
View file

@ -1,8 +1,4 @@
import type {
SSRResult,
TransitionAnimation,
TransitionAnimationValue,
} from '../../@types/astro';
import type { SSRResult, TransitionAnimation, TransitionAnimationValue } from '../../@types/astro';
import { fade, slide } from '../../transitions/index.js';
import { markHTMLString } from './escape.js';
@ -23,16 +19,16 @@ export function createTransitionScope(result: SSRResult, hash: string) {
// Ensure animationName is a valid CSS identifier
function toValidIdent(name: string): string {
return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, '')
return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, '');
}
type Entries<T extends Record<string, any>> = Iterable<[keyof T, T[keyof T]]>
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;
}
};
export function renderTransition(
result: SSRResult,
@ -45,17 +41,19 @@ export function renderTransition(
const scope = createTransitionScope(result, hash);
const name = transitionName ? toValidIdent(transitionName) : scope;
const sheet = new ViewTransitionStyleSheet(scope, name);
const animations = getAnimations(animationName);
if (animations) {
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]>) {
for (const [image, rules] of Object.entries(images) as Entries<
(typeof animations)[typeof direction]
>) {
sheet.addAnimationPair(direction, image, rules);
}
}
} else if (animationName === 'none') {
sheet.addAnimationRaw('old', 'animation: none; opacity: 0; mix-blend-mode: normal;')
sheet.addAnimationRaw('new', 'animation: none; mix-blend-mode: normal;')
sheet.addAnimationRaw('old', 'animation: none; opacity: 0; mix-blend-mode: normal;');
sheet.addAnimationRaw('new', 'animation: none; mix-blend-mode: normal;');
}
result._metadata.extraHead.push(markHTMLString(`<style>${sheet.toString()}</style>`));
@ -63,15 +61,22 @@ export function renderTransition(
}
class ViewTransitionStyleSheet {
private modern: string[] = []
private fallback: string[] = []
private modern: string[] = [];
private fallback: string[] = [];
constructor(private scope: string, private name: string) {}
constructor(
private scope: string,
private name: string
) {}
toString() {
const { scope, name } = this;
const [modern, fallback] = [this.modern, this.fallback].map(rules => rules.join(''));
return [`[data-astro-transition-scope="${scope}"] { view-transition-name: ${name}; }`, this.layer(modern), fallback].join('')
const [modern, fallback] = [this.modern, this.fallback].map((rules) => rules.join(''));
return [
`[data-astro-transition-scope="${scope}"] { view-transition-name: ${name}; }`,
this.layer(modern),
fallback,
].join('');
}
private layer(cssText: string) {
@ -84,16 +89,26 @@ class ViewTransitionStyleSheet {
addAnimationRaw(image: 'old' | 'new' | 'group', animation: string) {
const { scope, name } = this;
this.addRule('modern', `::view-transition-${image}(${name}) { ${animation} }`)
this.addRule('fallback', `[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }`)
this.addRule('modern', `::view-transition-${image}(${name}) { ${animation} }`);
this.addRule(
'fallback',
`[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }`
);
}
addAnimationPair(direction: 'forwards' | 'backwards', image: 'old' | 'new', rules: TransitionAnimation | TransitionAnimation[]) {
addAnimationPair(
direction: 'forwards' | 'backwards',
image: 'old' | 'new',
rules: TransitionAnimation | TransitionAnimation[]
) {
const { scope, name } = this;
const animation = stringifyAnimation(rules);
const prefix = direction === 'backwards' ? `[data-astro-transition=back]` : '';
this.addRule('modern', `${prefix}::view-transition-${image}(${name}) { ${animation} }`)
this.addRule('fallback', `${prefix}[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }`)
this.addRule('modern', `${prefix}::view-transition-${image}(${name}) { ${animation} }`);
this.addRule(
'fallback',
`${prefix}[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }`
);
}
}

2
packages/astro/src/transitions/index.ts
View file

@ -47,7 +47,7 @@ export function slide({
}
export function fade({
duration
duration,
}: {
duration?: string | number;
} = {}): TransitionDirectionalAnimations {