@ecopages/react-router 0.2.0-alpha.8 → 0.2.1

package/src/scroll-persist.ts

@@ -1,96 +0,0 @@
-/**
- * Scroll position persistence for elements marked with `data-eco-persist="scroll"`.
- *
- * Handles two navigation scenarios:
- * - **Forward navigation**: Preserves current scroll positions for shared layout elements
- * - **Back navigation**: Restores positions from when the page was last visited
- *
- * @module scroll-persist
- */
-
-const PERSIST_SELECTOR = '[data-eco-persist="scroll"]';
-
-type ScrollPosition = { top: number; left: number };
-type ScrollMap = Map<string, ScrollPosition>;
-type UrlScrollStore = Map<string, ScrollMap>;
-
-const urlScrollStore: UrlScrollStore = new Map();
-let currentScrollSnapshot: ScrollMap | null = null;
-
-function getElementKey(el: Element): string | null {
-	return el.id || el.getAttribute('data-testid') || null;
-}
-
-function captureScrollPositions(): ScrollMap {
-	const positions = new Map<string, ScrollPosition>();
-	document.querySelectorAll(PERSIST_SELECTOR).forEach((el) => {
-		const key = getElementKey(el);
-		if (key) {
-			positions.set(key, { top: el.scrollTop, left: el.scrollLeft });
-		}
-	});
-	return positions;
-}
-
-/**
- * Captures and stores scroll positions before navigation.
- *
- * Saves positions to both:
- * - URL-keyed store (for back navigation restoration)
- * - Current snapshot (for forward navigation preservation)
- */
-export function saveScrollPositions(): void {
-	const url = `${window.location.pathname}${window.location.search}`;
-	const positions = captureScrollPositions();
-
-	if (positions.size > 0) {
-		urlScrollStore.set(url, positions);
-	}
-	currentScrollSnapshot = positions;
-}
-
-/**
- * Restores scroll positions after React render completes.
- *
- * Uses double `requestAnimationFrame` to ensure DOM is fully painted.
- *
- * @param targetUrl - The URL being navigated to
- * @param isPopState - True for back/forward navigation, false for link clicks
- */
-export function restoreScrollPositions(targetUrl: string, isPopState: boolean): void {
-	const positions = isPopState ? urlScrollStore.get(targetUrl) : currentScrollSnapshot;
-
-	if (!positions || positions.size === 0) {
-		currentScrollSnapshot = null;
-		return;
-	}
-
-	requestAnimationFrame(() => {
-		requestAnimationFrame(() => {
-			document.querySelectorAll(PERSIST_SELECTOR).forEach((el) => {
-				const key = getElementKey(el);
-				if (key && positions.has(key)) {
-					const pos = positions.get(key)!;
-					el.scrollTop = pos.top;
-					el.scrollLeft = pos.left;
-				}
-			});
-			currentScrollSnapshot = null;
-		});
-	});
-}
-
-/**
- * Returns stored scroll positions for a URL without applying them.
- */
-export function getScrollPositions(url: string): ScrollMap | undefined {
-	return urlScrollStore.get(url);
-}
-
-/**
- * Clears all stored scroll positions.
- */
-export function clearScrollPositions(): void {
-	urlScrollStore.clear();
-	currentScrollSnapshot = null;
-}

package/src/types.ts

@@ -1,64 +0,0 @@
-/**
- * Configuration options for the EcoRouter
- */
-export interface EcoRouterOptions {
-	/**
-	 * CSS selector for links to intercept
-	 * @default 'a[href]'
-	 */
-	linkSelector?: string;
-
-	/**
-	 * Attribute that forces a full page reload when present on a link
-	 * @default 'data-eco-reload'
-	 */
-	reloadAttribute?: string;
-
-	/**
-	 * Whether to use the View Transitions API for page animations.
-	 * When enabled and supported, page transitions animate using CSS view-transition pseudo-elements.
-	 * Falls back to instant swap if not supported by the browser.
-	 * @default true
-	 */
-	viewTransitions?: boolean;
-
-	/**
-	 * Enable debug logging to console
-	 * @default false
-	 */
-	debug?: boolean;
-
-	/**
-	 * Scroll behavior after navigation:
-	 * - 'top': Always scroll to top (default)
-	 * - 'preserve': Keep current scroll position
-	 * - 'auto': Scroll to top only when pathname changes
-	 */
-	scrollBehavior?: 'top' | 'preserve' | 'auto';
-
-	/**
-	 * Whether to use smooth scrolling during navigation.
-	 * If true, uses 'smooth' behavior. If false, uses 'instant' behavior.
-	 * @default false
-	 */
-	smoothScroll?: boolean;
-
-	/**
-	 * Keep layouts mounted between navigations.
-	 * When enabled, if consecutive pages share the same layout component,
-	 * the layout stays mounted and only the page content re-renders.
-	 * This preserves layout state including scroll positions.
-	 * @default true
-	 */
-	persistLayouts?: boolean;
-}
-
-export const DEFAULT_OPTIONS: Required<EcoRouterOptions> = {
-	linkSelector: 'a[href]',
-	reloadAttribute: 'data-eco-reload',
-	viewTransitions: true,
-	debug: false,
-	scrollBehavior: 'top',
-	smoothScroll: false,
-	persistLayouts: true,
-};

package/src/view-transition-manager.ts

@@ -1,30 +0,0 @@
-/**
- * Manages View Transition API integration
- * @module
- */
-
-type ViewTransitionDocument = Document & {
-	startViewTransition: (callback: () => void | Promise<void>) => {
-		finished: Promise<void>;
-		ready: Promise<void>;
-		updateCallbackDone: Promise<void>;
-		skipTransition(): void;
-	};
-};
-
-function isViewTransitionSupported(): boolean {
-	return 'startViewTransition' in document;
-}
-
-export async function withViewTransition(callback: () => void): Promise<void> {
-	if (!isViewTransitionSupported()) {
-		callback();
-		return;
-	}
-
-	const transition = (document as ViewTransitionDocument).startViewTransition(() => {
-		callback();
-	});
-
-	await transition.finished;
-}

package/src/view-transition-utils.ts

@@ -1,95 +0,0 @@
-/**
- * View transition utilities for applying transition names from data attributes.
- * @module
- */
-
-const VIEW_TRANSITION_ATTR = 'data-view-transition';
-const VIEW_TRANSITION_ANIMATE_ATTR = 'data-view-transition-animate';
-const VIEW_TRANSITION_DURATION_ATTR = 'data-view-transition-duration';
-
-/**
- * Applies view-transition-name CSS property to elements with data-view-transition attribute.
- * Also handles data-view-transition-animate="morph" (default) logic and custom duration.
- */
-export function applyViewTransitionNames(): void {
-	const elements = document.querySelectorAll(`[${VIEW_TRANSITION_ATTR}]`);
-	const morphNames: string[] = [];
-	const customDurations: { name: string; duration: string }[] = [];
-
-	elements.forEach((el) => {
-		const name = el.getAttribute(VIEW_TRANSITION_ATTR);
-		if (name) {
-			(el as HTMLElement).style.viewTransitionName = name;
-			/**
-			 * By default, we apply a clean geometric morph (no cross-fade/ghosting).
-			 * The 'fade' value is reserved for opting out of this behavior.
-			 */
-			const animate = el.getAttribute(VIEW_TRANSITION_ANIMATE_ATTR);
-			if (animate !== 'fade') {
-				morphNames.push(name);
-			}
-
-			const duration = el.getAttribute(VIEW_TRANSITION_DURATION_ATTR);
-			if (duration) {
-				customDurations.push({ name, duration });
-			}
-		}
-	});
-
-	if (morphNames.length > 0 || customDurations.length > 0) {
-		injectDynamicStyles(morphNames, customDurations);
-	}
-}
-
-/**
- * Injects dynamic CSS to hide old snapshots and apply custom durations.
- */
-function injectDynamicStyles(morphNames: string[], customDurations: { name: string; duration: string }[]) {
-	let styleEl = document.getElementById('eco-vt-dynamic-styles');
-	if (!styleEl) {
-		styleEl = document.createElement('style');
-		styleEl.id = 'eco-vt-dynamic-styles';
-		/**
-		 * Persistence is required to prevent the head-morpher from removing this style tag during navigation.
-		 */
-		styleEl.setAttribute('data-eco-persist', '');
-		document.head.appendChild(styleEl);
-	}
-
-	const morphCss = morphNames
-		.map(
-			(name) => `
-		::view-transition-old(${name}) { display: none !important; }
-		::view-transition-new(${name}) { animation: none !important; opacity: 1 !important; }
-	`,
-		)
-		.join('\n');
-
-	const durationCss = customDurations
-		.map(
-			({ name, duration }) => `
-		::view-transition-group(${name}) { animation-duration: ${duration} !important; }
-	`,
-		)
-		.join('\n');
-
-	styleEl.textContent = morphCss + '\n' + durationCss;
-}
-
-/**
- * Clears view-transition-name CSS property from all elements.
- */
-export function clearViewTransitionNames(): void {
-	const elements = document.querySelectorAll(`[${VIEW_TRANSITION_ATTR}]`);
-	elements.forEach((el) => {
-		(el as HTMLElement).style.viewTransitionName = '';
-	});
-
-	/**
-	 * Cleanup dynamic styles to ensure a clean slate for the next transition.
-	 */
-	const styleEl = document.getElementById('eco-vt-dynamic-styles');
-	if (styleEl) {
-		styleEl.textContent = '';
-	}
-}