crelte 0.4.8 → 0.5.0-alpha.2

package/src/routing/ClientRouter.ts

@@ -0,0 +1,329 @@
+import CrelteRequest from '../CrelteRequest.js';
+import BaseRouter, { BaseRouterOptions } from './BaseRouter.js';
+import { Request, RequestOptions } from './index.js';
+import Route from './Route.js';
+import { SiteFromGraphQl } from './Site.js';
+
+export type ClientRouterOptions = {
+	preloadOnMouseOver: boolean;
+} & BaseRouterOptions;
+
+export default class ClientRouter extends BaseRouter {
+	private scrollDebounceTimeout: any | null;
+	private preloadOnMouseOver: boolean;
+
+	onError: (e: any) => void;
+
+	constructor(sites: SiteFromGraphQl[], opts: ClientRouterOptions) {
+		super(sites, opts);
+
+		this.scrollDebounceTimeout = null;
+		this.preloadOnMouseOver = opts.preloadOnMouseOver;
+		this.onError = () => {};
+	}
+
+	/**
+	 * ## Throws
+	 */
+	async init() {
+		this.listen();
+
+		// let's first try to load from the state
+		const req = this.targetToRequest(window.location.href);
+		req._fillFromState(window.history.state);
+
+		req.origin = 'init';
+		window.history.scrollRestoration = 'manual';
+
+		return await this.handleRequest(req, () => {});
+	}
+
+	/**
+	 * Do not call this with origin push or replace
+	 */
+	async openRequest(req: Request): Promise<Route | void> {
+		if (['push', 'replace'].includes(req.origin)) {
+			throw new Error('Do not use open with push or replace');
+		}
+
+		const current = this.route.get();
+		// store scrollY
+		if (current) {
+			// if the scrollY would still be updated we clear the timeout
+			// since we should have the latest scrollY
+			if (this.scrollDebounceTimeout) {
+				clearTimeout(this.scrollDebounceTimeout);
+				this.scrollDebounceTimeout = null;
+			}
+
+			// store the scroll position
+			const scrollY = window.scrollY;
+			if (typeof scrollY === 'number') {
+				current.scrollY = scrollY;
+				window.history.replaceState(current._toState(), '');
+			}
+		}
+
+		// if the domain of the current site is different than the domain of the
+		// new site we need to do a window.location.href call
+		if (
+			(current && current.url.origin !== req.url.origin) ||
+			// @ts-ignore
+			import.meta.env.SSR
+		) {
+			window.location.href = req.url.href;
+			return;
+		}
+
+		req.index = (current?.index ?? 0) + 1;
+		return await this.handleRequestAndError(req, route => {
+			const url = route.url;
+			window.history.pushState(
+				route._toState(),
+				'',
+				url.pathname + url.search + url.hash,
+			);
+		});
+	}
+
+	async pushRequest(req: Request, _opts: RequestOptions = {}) {
+		const url = req.url;
+		// todo a push should also store the previous scrollY
+
+		let nReq = req;
+		if (req.scrollY === null) {
+			// if there is no scrollY stored we store the current scrollY
+			// since a push does not cause a scroll top
+			// todo: probably should refactor something probably
+			// should not be here
+			nReq = req.clone();
+			nReq.scrollY = window.scrollY;
+
+			// todo this does not work? nReq is never used
+			// why not assign it without a clone?
+		}
+
+		return await this.handleRequest(req, route => {
+			window.history.pushState(
+				route._toState(),
+				url.pathname + url.search + url.hash,
+			);
+		});
+	}
+
+	async replaceRequest(req: Request, _opts: RequestOptions = {}) {
+		const url = req.url;
+
+		let nReq = req;
+		if (req.scrollY === null) {
+			// if there is no scrollY stored we store the current scrollY
+			// since a replace does not cause a scrollTo and we wan't
+			// history back to work as intended
+			// todo: probably should refactor something probably
+			// should not be here
+			nReq = req.clone();
+			nReq.scrollY = window.scrollY;
+
+			// todo this does not work? nReq is never used
+			// why not assign it without a clone?
+		}
+
+		try {
+			return await this.handleRequest(req, () => {
+				window.history.replaceState(
+					req._toState(),
+					url.pathname + url.search + url.hash,
+				);
+			});
+		} catch (e) {
+			console.warn('replacing route failed', e);
+			throw e;
+		}
+	}
+
+	/**
+	 * This returns a route if it was handled else if an error occured
+	 * or the request was cancelled returns void
+	 */
+	async handleRequestAndError(
+		req: Request,
+		updateHistory: (route: Route) => void,
+	): Promise<Route | void> {
+		try {
+			return await this.handleRequest(req, updateHistory);
+		} catch (e) {
+			console.error('request failed', e);
+			this.onError(e);
+		}
+	}
+
+	listen() {
+		window.addEventListener('click', async e => {
+			// @ts-ignore
+			const link = e.target.closest('a');
+			const openInNewTab = e.metaKey || e.ctrlKey || e.shiftKey;
+			const saveLink = e.altKey;
+			if (!link || !link.href || openInNewTab || saveLink) return;
+			if (link.target.toLowerCase() === '_blank') return;
+			if (!link.href.startsWith('http')) return;
+
+			e.preventDefault();
+
+			const req = this.targetToRequest(link.href, { origin: 'click' });
+			const currRoute = this.route.get();
+			const routeEq =
+				currRoute && currRoute.eqUrl(req) && currRoute.eqSearch(req);
+
+			// this means the route is the same maybe with a different hash
+			// so it is not necessary to load the data again
+			if (routeEq) {
+				req.disableLoadData = true;
+			}
+
+			this.openRequest(req);
+		});
+
+		if (this.preloadOnMouseOver) {
+			let currentMouseOver: any = null;
+			window.addEventListener('mouseover', e => {
+				// @ts-ignore
+				const link = e.target.closest('a');
+
+				if (currentMouseOver && link === currentMouseOver) return;
+				if (link && link.target.toLowerCase() === '_blank') return;
+
+				if (
+					link &&
+					!link.hasAttribute('data-no-preload') &&
+					link.href
+				) {
+					this.preload(link.href);
+				}
+
+				currentMouseOver = link;
+			});
+		}
+
+		// store the scrollY position every 200ms
+		// we can't do this at the time of the open call since the pop event
+		// has already changed to a new history state so we can't update our
+		// current/previous state
+		// eslint-disable-next-line no-constant-condition
+		if (true) {
+			window.addEventListener('scroll', () => {
+				const current = this.route.get();
+				if (!current) return;
+
+				// store the scroll position
+				current.scrollY = window.scrollY;
+
+				if (this.scrollDebounceTimeout) return;
+
+				// this might cause `Attempt to use history.replaceState() more than
+				// 100 times per 30 seconds` in safari
+				// since we wait a moment we should almost ever be fine
+				this.scrollDebounceTimeout = setTimeout(() => {
+					const routerRoute = this.route.get();
+					if (!routerRoute || !current.eq(routerRoute)) return;
+
+					// use the latest state
+					window.history.replaceState(routerRoute._toState(), '');
+
+					if (current.inLivePreview()) {
+						sessionStorage.setItem(
+							'live-preview-scroll',
+							// use the latest scrollY
+							routerRoute.scrollY + '',
+						);
+					}
+
+					this.scrollDebounceTimeout = null;
+				}, 280);
+			});
+		}
+
+		window.addEventListener('popstate', async e => {
+			if (!e.state?.route) return;
+
+			const req = this.targetToRequest(window.location.href);
+			req._fillFromState(e.state);
+			req.origin = 'pop';
+
+			// todo handle errors
+			this.handleRequest(req, () => {});
+		});
+	}
+
+	updateScroll(cr: CrelteRequest, _route: Route): void {
+		const req = cr.req;
+
+		if (req.disableScroll) return;
+
+		// scroll to target
+		let scrollTo:
+			| { top: number; behavior: ScrollBehavior }
+			| { intoView: HTMLElement; behavior: ScrollBehavior }
+			| null = null;
+
+		// if the route is a live preview init and we have a scrollY stored
+		// scroll to that
+		if (req.inLivePreview()) {
+			const scrollY = sessionStorage.getItem('live-preview-scroll');
+			if (scrollY) {
+				scrollTo = {
+					top: parseInt(scrollY),
+					behavior: 'instant',
+				};
+			}
+			// if we have a hash and the route was not visited
+		} else if (
+			req.hash &&
+			((req.origin === 'init' && typeof req.scrollY !== 'number') ||
+				req.origin === 'click')
+		) {
+			const el = document.getElementById(req.hash.substring(1));
+			if (el) {
+				scrollTo = {
+					intoView: el,
+					behavior: 'smooth',
+				};
+			}
+		}
+
+		// restore scroll position
+		if (
+			!scrollTo &&
+			req.origin !== 'click' &&
+			typeof req.scrollY === 'number'
+		) {
+			scrollTo = {
+				top: req.scrollY,
+				behavior: 'instant',
+			};
+		}
+
+		// make sure push and replace don't cause a scroll if it is not intended
+		if (!scrollTo && (req.origin === 'push' || req.origin === 'replace'))
+			return;
+
+		// scroll to the top if nothing else matches
+		if (!scrollTo) {
+			scrollTo = {
+				top: 0,
+				behavior: 'instant',
+			};
+		}
+
+		if ('top' in scrollTo) {
+			window.scrollTo({
+				top: scrollTo.top,
+				behavior: scrollTo.behavior,
+			});
+		} else {
+			scrollTo.intoView.scrollIntoView({
+				behavior: scrollTo.behavior,
+				block: 'start',
+			});
+		}
+	}
+}

package/src/routing/{PageLoader.ts → LoadRunner.ts}

@@ -1,30 +1,28 @@
-import Request from './Request.js';
+import { type CrelteRequest } from '../index.js';
 
-export type PageLoaderOptions = {
+export type LoadRunnerOptions = {
 	debugTiming: boolean;
 };
 
-export type LoadResponse = {
-	success: boolean;
-	data: any;
-};
-
-export type LoadFn = (req: Request, opts: LoadOptions) => Promise<any> | any;
+export type LoadFn = (
+	cr: CrelteRequest,
+	opts: LoadOptions,
+) => Promise<void> | void;
 
 export type LoadOptions = {
 	setProgress: (num: number) => void;
+	isCanceled: () => boolean;
 };
 
 /**
  * The PageLoader which is responsible for loading page Data
  */
-export default class PageLoader<More> {
+export default class LoadRunner {
 	private debugTiming: boolean;
 	private preloadedUrls: Set<string>;
 
 	private loadingVersion: number;
 
-	onLoaded: (resp: LoadResponse, req: Request, more: More) => void;
 	onProgress: (loading: boolean, progress?: number) => void;
 	loadFn: LoadFn;
 
@@ -33,13 +31,12 @@ export default class PageLoader<More> {
 	 *
 	 * @param {Object} options `{debugTiming}`
 	 */
-	constructor(options: PageLoaderOptions) {
+	constructor(options: LoadRunnerOptions) {
 		this.debugTiming = options.debugTiming;
 		this.preloadedUrls = new Set();
 
 		this.loadingVersion = 0;
 
-		this.onLoaded = () => null!;
 		this.onProgress = () => null!;
 		this.loadFn = () => null!;
 	}
@@ -52,49 +49,65 @@ export default class PageLoader<More> {
 		this.onProgress(false);
 	}
 
-	async load(req: Request, more: More) {
+	/**
+	 * @returns true if the load was completed
+	 *
+	 * ## Throws
+	 * if there was an error but not if the request
+	 * was cancelled before
+	 */
+	async load(req: CrelteRequest): Promise<boolean> {
 		this.onProgress(true);
 
 		const version = ++this.loadingVersion;
 		const startTime = this.debugTiming ? Date.now() : null;
 
+		const isCanceled = () => this.loadingVersion !== version;
+
 		const setProgress = (num: number) => {
-			if (this.loadingVersion !== version) return;
+			if (isCanceled()) return;
 
 			this.onProgress(true, num);
 		};
 
-		const resp: LoadResponse = { success: false, data: null };
+		// a function which should return the response
+		let resp: () => void;
 		try {
-			resp.data = await this.loadFn(req, { setProgress });
-			resp.success = true;
+			const data = await this.loadFn(req, { isCanceled, setProgress });
+			resp = () => data;
 		} catch (e) {
-			resp.success = false;
-			resp.data = e;
+			resp = () => {
+				throw e;
+			};
 		}
 
+		if (isCanceled()) {
+			console.log('route changed quickly, ignoring response');
+			return false;
+		}
+
+		this.onProgress(false);
+
 		if (startTime)
 			console.log('page load took ' + (Date.now() - startTime) + 'ms');
 
-		// if were the last that called loading, trigger the loaded event
-		if (this.loadingVersion !== version)
-			return console.log('route changed quickly, ignoring response');
-
-		this.onProgress(false);
-		this.onLoaded(resp, req, more);
+		return (resp(), true);
 	}
 
 	// you don't need to wait on this call
-	async preload(req: Request) {
-		const url = req.url.origin + req.url.pathname;
+	async preload(cr: CrelteRequest) {
+		const url = cr.req.url.origin + cr.req.url.pathname;
 		if (this.preloadedUrls.has(url)) return;
 
 		this.preloadedUrls.add(url);
 
 		try {
-			await this.loadFn(req, { setProgress: () => null });
-		} catch (_e) {
-			console.log('preload failed');
+			await this.loadFn(cr, {
+				isCanceled: () => false,
+				setProgress: () => null,
+			});
+		} catch (e) {
+			console.log('preload failed', e);
 			// retry at another time
 			this.preloadedUrls.delete(url);
 		}

package/src/routing/Request.ts

@@ -1,12 +1,17 @@
 import { Barrier } from 'crelte-std/sync';
-import Route, { RouteOrigin } from './Route.js';
 import Site from './Site.js';
 import { objClone } from '../utils.js';
+import { Entry } from '../entry/index.js';
+import BaseRoute, { RouteOrigin } from './BaseRoute.js';
+import Route, { TemplateModule } from './Route.js';
 
 /**
  * Options to create a Request
  */
 export type RequestOptions = {
+	entry?: Entry;
+	template?: TemplateModule;
+	loadedData?: Record<string, any>;
 	scrollY?: number;
 	index?: number;
 	origin?: RouteOrigin;
@@ -22,7 +27,22 @@ export type RequestOptions = {
  * you get a Request from the onRequest event or
  * in a loadGlobal function.
  */
-export default class Request extends Route {
+export default class Request extends BaseRoute {
+	/**
+	 * The entry of the request once loaded
+	 */
+	entry: Entry | null;
+
+	/**
+	 * The template module of the request once loaded
+	 */
+	template: TemplateModule | null;
+
+	/**
+	 * The loaded data of the request
+	 */
+	loadedData: Record<string, any> | null;
+
 	/**
 	 * Disable scrolling for this request
 	 * @default false
@@ -43,20 +63,29 @@ export default class Request extends Route {
 	/** @hidden */
 	_renderBarrier: RenderBarrier;
 
+	private _cancelled: boolean;
+
 	/**
 	 * Create a new Request
 	 */
 	constructor(url: string | URL, site: Site, opts: RequestOptions = {}) {
 		super(url, site, opts);
 
+		this.entry = opts.entry ?? null;
+		this.template = opts.template ?? null;
+		this.loadedData = opts.loadedData ?? null;
 		this.disableScroll = opts.disableScroll ?? false;
 		this.disableLoadData = opts.disableLoadData ?? false;
 		this.statusCode = opts.statusCode ?? null;
 		this._renderBarrier = new RenderBarrier();
+		this._cancelled = false;
 	}
 
 	/**
 	 * Create a Request from a Route
+	 *
+	 * Clears the entry, template, and loadedData
+	 * todo should it?
 	 */
 	static fromRoute(route: Route, opts: RequestOptions = {}) {
 		return new Request(route.url.href, route.site, {
@@ -69,6 +98,10 @@ export default class Request extends Route {
 		});
 	}
 
+	get cancelled(): boolean {
+		return this._cancelled;
+	}
+
 	/**
 	 * With delayRender you can make sure that the render waits
 	 * until you are ready. This is useful for building page transitions.
@@ -103,9 +136,20 @@ export default class Request extends Route {
 
 	/**
 	 * Create a copy of the request
+	 *
+	 * without including the entry, template, loadedData or cancelled state
+	 *
+	 * Is this what we wan't, maybe it should copy everything
 	 */
 	clone() {
-		return new Request(this.url.href, this.site, {
+		// todo should this clone the entry
+		// the route for example does not do it
+		//
+		// todo should this clone keep the entry?
+		const req = new Request(this.url.href, this.site, {
+			// entry: objClone(this.entry),
+			// template: this.template ?? undefined,
+			// loadedData: objClone(this.loadedData),
 			scrollY: this.scrollY ?? undefined,
 			index: this.index,
 			origin: this.origin,
@@ -115,23 +159,55 @@ export default class Request extends Route {
 			disableLoadData: this.disableLoadData,
 			statusCode: this.statusCode ?? undefined,
 		});
+
+		return req;
 	}
 
 	/**
 	 * Create a Route from the Request
+	 *
+	 * ## Throws
+	 * if the entry, template or loadedData is missing
+	 * or the request was cancelled
 	 */
 	toRoute() {
-		return new Route(this.url.href, this.site, {
-			scrollY: this.scrollY ?? undefined,
-			index: this.index,
-			origin: this.origin,
-			state: objClone(this._state),
-			context: this._context,
-		});
+		if (this.cancelled)
+			throw new Error(
+				'cannot create a new route because it was cancelled',
+			);
+
+		if (!this.entry || !this.template || !this.loadedData)
+			throw new Error(
+				'cannot create a new route because entry, template or loadedData is missing',
+			);
+
+		const route = new Route(
+			this.url.href,
+			this.site,
+			this.entry,
+			this.template,
+			this.loadedData,
+			{
+				scrollY: this.scrollY ?? undefined,
+				index: this.index,
+				origin: this.origin,
+				state: objClone(this._state),
+				context: this._context,
+			},
+		);
+		route.entryChanged = !this.disableLoadData;
+
+		return route;
 	}
 
 	/** @hidden */
 	_updateOpts(opts: RequestOptions = {}) {
+		// todo maybe should check that if entry is updated
+		// template and loadedData is also updated
+
+		this.entry = opts.entry ?? this.entry;
+		this.template = opts.template ?? this.template;
+		this.loadedData = opts.loadedData ?? this.loadedData;
 		this.scrollY = opts.scrollY ?? this.scrollY;
 		this.index = opts.index ?? this.index;
 		this.origin = opts.origin ?? this.origin;
@@ -141,6 +217,12 @@ export default class Request extends Route {
 		this.disableLoadData = opts.disableLoadData ?? this.disableLoadData;
 		this.statusCode = opts.statusCode ?? this.statusCode;
 	}
+
+	/** @hidden */
+	_cancel() {
+		this._cancelled = true;
+		this._renderBarrier.cancel();
+	}
 }
 
 export function isRequest(req: any): req is Request {
@@ -178,15 +260,18 @@ class RenderBarrier {
 
 	/** @hidden */
 	cancel() {
+		// if the barrier is already open
+		// we don't wan't to flag the render as cancelled
+		// because it already happened
 		if (this.inner.isOpen()) return;
 
 		this.cancelled = true;
 		this.root.remove();
 	}
 
-	// returns if the render was cancelled
+	// returns true if the render was cancelled
 	/** @hidden */
-	ready(): Promise<boolean> {
+	ready(): Promise<boolean> | boolean {
 		return this.root.ready();
 	}
 }