astro 3.5.6 → 3.6.0

package/dist/runtime/server/transition.js

@@ -24,6 +24,13 @@ const getAnimations = (name) => {
   if (typeof name === "object")
     return name;
 };
+const addPairs = (animations, stylesheet) => {
+  for (const [direction, images] of Object.entries(animations)) {
+    for (const [image, rules] of Object.entries(images)) {
+      stylesheet.addAnimationPair(direction, image, rules);
+    }
+  }
+};
 function renderTransition(result, hash, animationName, transitionName) {
   if (!animationName)
     animationName = "fade";
@@ -32,11 +39,7 @@ function renderTransition(result, hash, animationName, transitionName) {
   const sheet = new ViewTransitionStyleSheet(scope, name);
   const animations = getAnimations(animationName);
   if (animations) {
-    for (const [direction, images] of Object.entries(animations)) {
-      for (const [image, rules] of Object.entries(images)) {
-        sheet.addAnimationPair(direction, image, rules);
-      }
-    }
+    addPairs(animations, sheet);
   } else if (animationName === "none") {
     sheet.addFallback("old", "animation: none; mix-blend-mode: normal;");
     sheet.addModern("old", "animation: none; opacity: 0; mix-blend-mode: normal;");
@@ -45,6 +48,13 @@ function renderTransition(result, hash, animationName, transitionName) {
   result._metadata.extraHead.push(markHTMLString(`<style>${sheet.toString()}</style>`));
   return scope;
 }
+function createAnimationScope(transitionName, animations) {
+  const hash = Math.random().toString(36).slice(2, 8);
+  const scope = `astro-${hash}`;
+  const sheet = new ViewTransitionStyleSheet(scope, transitionName);
+  addPairs(animations, sheet);
+  return { scope, styles: sheet.toString().replaceAll('"', "") };
+}
 class ViewTransitionStyleSheet {
   constructor(scope, name) {
     this.scope = scope;
@@ -87,7 +97,7 @@ class ViewTransitionStyleSheet {
   addAnimationPair(direction, image, rules) {
     const { scope, name } = this;
     const animation = stringifyAnimation(rules);
-    const prefix = direction === "backwards" ? `[data-astro-transition=back]` : "";
+    const prefix = direction === "backwards" ? `[data-astro-transition=back]` : direction === "forwards" ? "" : `[data-astro-transition=${direction}]`;
     this.addRule("modern", `${prefix}::view-transition-${image}(${name}) { ${animation} }`);
     this.addRule(
       "fallback",
@@ -152,6 +162,7 @@ function toTimeValue(num) {
   return typeof num === "number" ? num + "ms" : num;
 }
 export {
+  createAnimationScope,
   createTransitionScope,
   renderTransition
 };

package/dist/transitions/events.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="@types/dom-view-transitions" />
+import type { Direction, NavigationTypeString } from './types.js';
+export declare const TRANSITION_BEFORE_PREPARATION = "astro:before-preparation";
+export declare const TRANSITION_AFTER_PREPARATION = "astro:after-preparation";
+export declare const TRANSITION_BEFORE_SWAP = "astro:before-swap";
+export declare const TRANSITION_AFTER_SWAP = "astro:after-swap";
+export declare const TRANSITION_PAGE_LOAD = "astro:page-load";
+type Events = typeof TRANSITION_AFTER_PREPARATION | typeof TRANSITION_AFTER_SWAP | typeof TRANSITION_PAGE_LOAD;
+export declare const triggerEvent: (name: Events) => boolean;
+export declare const onPageLoad: () => boolean;
+declare class BeforeEvent extends Event {
+    readonly from: URL;
+    to: URL;
+    direction: Direction | string;
+    readonly navigationType: NavigationTypeString;
+    readonly sourceElement: Element | undefined;
+    readonly info: any;
+    newDocument: Document;
+    constructor(type: string, eventInitDict: EventInit | undefined, from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, newDocument: Document);
+}
+export declare const isTransitionBeforePreparationEvent: (value: any) => value is TransitionBeforePreparationEvent;
+export declare class TransitionBeforePreparationEvent extends BeforeEvent {
+    formData: FormData | undefined;
+    loader: () => Promise<void>;
+    constructor(from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, newDocument: Document, formData: FormData | undefined, loader: (event: TransitionBeforePreparationEvent) => Promise<void>);
+}
+export declare const isTransitionBeforeSwapEvent: (value: any) => value is TransitionBeforeSwapEvent;
+export declare class TransitionBeforeSwapEvent extends BeforeEvent {
+    readonly direction: Direction | string;
+    readonly viewTransition: ViewTransition;
+    swap: () => void;
+    constructor(afterPreparation: BeforeEvent, viewTransition: ViewTransition, swap: (event: TransitionBeforeSwapEvent) => void);
+}
+export declare function doPreparation(from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, formData: FormData | undefined, defaultLoader: (event: TransitionBeforePreparationEvent) => Promise<void>): Promise<TransitionBeforePreparationEvent>;
+export declare function doSwap(afterPreparation: BeforeEvent, viewTransition: ViewTransition, defaultSwap: (event: TransitionBeforeSwapEvent) => void): Promise<TransitionBeforeSwapEvent>;
+export {};

package/dist/transitions/events.js

@@ -0,0 +1,131 @@
+import { updateScrollPosition } from "./router.js";
+const TRANSITION_BEFORE_PREPARATION = "astro:before-preparation";
+const TRANSITION_AFTER_PREPARATION = "astro:after-preparation";
+const TRANSITION_BEFORE_SWAP = "astro:before-swap";
+const TRANSITION_AFTER_SWAP = "astro:after-swap";
+const TRANSITION_PAGE_LOAD = "astro:page-load";
+const triggerEvent = (name) => document.dispatchEvent(new Event(name));
+const onPageLoad = () => triggerEvent(TRANSITION_PAGE_LOAD);
+class BeforeEvent extends Event {
+  from;
+  to;
+  direction;
+  navigationType;
+  sourceElement;
+  info;
+  newDocument;
+  constructor(type, eventInitDict, from, to, direction, navigationType, sourceElement, info, newDocument) {
+    super(type, eventInitDict);
+    this.from = from;
+    this.to = to;
+    this.direction = direction;
+    this.navigationType = navigationType;
+    this.sourceElement = sourceElement;
+    this.info = info;
+    this.newDocument = newDocument;
+    Object.defineProperties(this, {
+      from: { enumerable: true },
+      to: { enumerable: true, writable: true },
+      direction: { enumerable: true, writable: true },
+      navigationType: { enumerable: true },
+      sourceElement: { enumerable: true },
+      info: { enumerable: true },
+      newDocument: { enumerable: true, writable: true }
+    });
+  }
+}
+const isTransitionBeforePreparationEvent = (value) => value.type === TRANSITION_BEFORE_PREPARATION;
+class TransitionBeforePreparationEvent extends BeforeEvent {
+  formData;
+  loader;
+  constructor(from, to, direction, navigationType, sourceElement, info, newDocument, formData, loader) {
+    super(
+      TRANSITION_BEFORE_PREPARATION,
+      { cancelable: true },
+      from,
+      to,
+      direction,
+      navigationType,
+      sourceElement,
+      info,
+      newDocument
+    );
+    this.formData = formData;
+    this.loader = loader.bind(this, this);
+    Object.defineProperties(this, {
+      formData: { enumerable: true },
+      loader: { enumerable: true, writable: true }
+    });
+  }
+}
+const isTransitionBeforeSwapEvent = (value) => value.type === TRANSITION_BEFORE_SWAP;
+class TransitionBeforeSwapEvent extends BeforeEvent {
+  direction;
+  viewTransition;
+  swap;
+  constructor(afterPreparation, viewTransition, swap) {
+    super(
+      TRANSITION_BEFORE_SWAP,
+      void 0,
+      afterPreparation.from,
+      afterPreparation.to,
+      afterPreparation.direction,
+      afterPreparation.navigationType,
+      afterPreparation.sourceElement,
+      afterPreparation.info,
+      afterPreparation.newDocument
+    );
+    this.direction = afterPreparation.direction;
+    this.viewTransition = viewTransition;
+    this.swap = swap.bind(this, this);
+    Object.defineProperties(this, {
+      direction: { enumerable: true },
+      viewTransition: { enumerable: true },
+      swap: { enumerable: true, writable: true }
+    });
+  }
+}
+async function doPreparation(from, to, direction, navigationType, sourceElement, info, formData, defaultLoader) {
+  const event = new TransitionBeforePreparationEvent(
+    from,
+    to,
+    direction,
+    navigationType,
+    sourceElement,
+    info,
+    window.document,
+    formData,
+    defaultLoader
+  );
+  if (document.dispatchEvent(event)) {
+    await event.loader();
+    if (!event.defaultPrevented) {
+      triggerEvent(TRANSITION_AFTER_PREPARATION);
+      if (event.navigationType !== "traverse") {
+        updateScrollPosition({ scrollX, scrollY });
+      }
+    }
+  }
+  return event;
+}
+async function doSwap(afterPreparation, viewTransition, defaultSwap) {
+  const event = new TransitionBeforeSwapEvent(afterPreparation, viewTransition, defaultSwap);
+  document.dispatchEvent(event);
+  event.swap();
+  return event;
+}
+export {
+  TRANSITION_AFTER_PREPARATION,
+  TRANSITION_AFTER_SWAP,
+  TRANSITION_BEFORE_PREPARATION,
+  TRANSITION_BEFORE_SWAP,
+  TRANSITION_PAGE_LOAD,
+  TransitionBeforePreparationEvent,
+  TransitionBeforeSwapEvent,
+  doPreparation,
+  doSwap,
+  isTransitionBeforePreparationEvent,
+  isTransitionBeforeSwapEvent,
+  onPageLoad,
+  triggerEvent
+};

package/dist/transitions/index.d.ts

@@ -1,4 +1,5 @@
 import type { TransitionDirectionalAnimations } from '../@types/astro.js';
+export { createAnimationScope } from '../runtime/server/transition.js';
 export declare function slide({ duration, }?: {
     duration?: string | number;
 }): TransitionDirectionalAnimations;

package/dist/transitions/index.js

@@ -1,3 +1,4 @@
+import { createAnimationScope } from "../runtime/server/transition.js";
 const EASE_IN_OUT_QUART = "cubic-bezier(0.76, 0, 0.24, 1)";
 function slide({
   duration
@@ -63,6 +64,7 @@ function fade({
   };
 }
 export {
+  createAnimationScope,
   fade,
   slide
 };

package/dist/transitions/router.d.ts

@@ -1,9 +1,8 @@
-export type Fallback = 'none' | 'animate' | 'swap';
-export type Direction = 'forward' | 'back';
-export type Options = {
-    history?: 'auto' | 'push' | 'replace';
-    formData?: FormData;
-};
+import type { Options } from './types.js';
+export declare const updateScrollPosition: (positions: {
+    scrollX: number;
+    scrollY: number;
+}) => void;
 export declare const supportsViewTransitions: boolean;
 export declare const transitionEnabledOnThisPage: () => boolean;
-export declare function navigate(href: string, options?: Options): void;
+export declare function navigate(href: string, options?: Options): Promise<void>;