crelte 0.1.3 → 0.2.1

package/src/loadData/index.ts

@@ -5,6 +5,20 @@ import type { Global } from './Globals.js';
 
 export type { Globals, Global };
 
+export interface LoadDataFn<A1 = any> {
+	(cr: CrelteRequest, entryOrBlock: A1, ...args: any[]): Promise<any> | any;
+}
+
+export interface LoadDataObj<A1 = any> {
+	[key: string]: LoadData<A1>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LoadDataArray<A1 = any> extends Array<LoadData<A1>> {}
+
+// todo link to the real docs maybe instead of showing an example
+// so we can add @type {import('crelte').LoadData}
+// maybe enabling markdown might be enough: https://jsdoc.app/plugins-markdown
 /**
  * Load data function
  *
@@ -15,8 +29,6 @@ export type { Globals, Global };
  * Each property should be a loadData type, each one is called in parallel.
  * And will be available to your component with the same name.
  * ```
- * export const loadData = {
- *
  * import entriesQuery from '@/queries/entries.graphql';
  * import { loadData as headerLoadData } from '@/layout/header.svelte';
  *
@@ -71,20 +83,30 @@ export type { Globals, Global };
  * }
  * ```
  */
-
-export type LoadData<T> =
-	| ((cr: CrelteRequest, ...args: any[]) => Promise<T>)
+export type LoadData<A1 = any> =
+	| LoadDataFn<A1>
 	| GraphQlQuery
-	| T;
+	| LoadDataObj<A1>
+	| LoadDataArray<A1>
+	| string
+	| number
+	| null
+	| undefined;
+
+// export type LoadData<A1 = any, R = any> =
+// 	| ((cr: CrelteRequest, entryOrBlock: A1, ...args: any[]) => Promise<R>)
+// 	| GraphQlQuery
+// 	| Record<string, LoadData<A1, R>>;
 
-export async function callLoadData(
-	ld: LoadData<unknown>,
+export async function callLoadData<A1 = any>(
+	ld: LoadData<A1>,
 	cr: CrelteRequest,
+	arg1: A1,
 	...args: any[]
-): Promise<unknown> {
+): Promise<any> {
 	// either we have a function
 	if (typeof ld === 'function') {
-		return await ld(cr, ...args);
+		return await ld(cr, arg1, ...args);
 	}
 
 	// or a graphql query
@@ -92,10 +114,16 @@ export async function callLoadData(
 		return await cr.query(ld);
 	}
 
+	if (ld === null || typeof ld === 'undefined') return null;
+
+	if (Array.isArray(ld)) {
+		return await mergeLoadData(...ld)(cr, arg1, ...args);
+	}
+
 	// or an object
-	if (typeof ld === 'object' && ld !== null) {
+	if (typeof ld === 'object') {
 		const data = await Promise.all(
-			Object.values(ld).map(nld => callLoadData(nld, cr, ...args)),
+			Object.values(ld).map(nld => callLoadData(nld, cr, arg1, ...args)),
 		);
 
 		return Object.fromEntries(
@@ -119,10 +147,14 @@ export async function callLoadData(
  * );
  * ```
  */
-export function mergeLoadData(...lds: LoadData<object>[]): LoadData<object> {
-	return async (cr: CrelteRequest, ...args: any[]) => {
+export function mergeLoadData<A1 = any>(
+	...lds: LoadData<A1>[]
+): LoadDataFn<A1> {
+	return async (cr: CrelteRequest, arg1, ...args: any[]) => {
 		const datas = await Promise.all(
-			lds.map(ld => callLoadData(ld, cr, ...args) as Promise<object>),
+			lds.map(
+				ld => callLoadData(ld, cr, arg1, ...args) as Promise<object>,
+			),
 		);
 
 		return datas.reduce((acc, data) => ({ ...acc, ...data }), {});

package/src/routing/History.ts

@@ -1,8 +1,10 @@
+import Request from './Request.js';
+
 export default interface History {
 	scrollY(): number | null;
 	replaceState(data: any, url?: string): void;
 	pushState(data: any, url: string): void;
-	open(url: string): void;
+	open(req: Request): void;
 	back(): void;
 }
 
@@ -19,8 +21,8 @@ export class ClientHistory implements History {
 		history.pushState(data, '', url);
 	}
 
-	open(url: string): void {
-		window.location.href = url;
+	open(req: Request): void {
+		window.location.href = req.url.href;
 	}
 
 	back(): void {
@@ -31,10 +33,12 @@ export class ClientHistory implements History {
 export class ServerHistory implements History {
 	state: any | null;
 	url: string | null;
+	req: Request | null;
 
 	constructor() {
 		this.state = null;
 		this.url = null;
+		this.req = null;
 	}
 
 	scrollY(): number | null {
@@ -44,15 +48,18 @@ export class ServerHistory implements History {
 	replaceState(data: any, url?: string): void {
 		this.state = data;
 		this.url = url ?? null;
+		this.req = null;
 	}
 
 	pushState(data: any, url: string): void {
 		this.state = data;
 		this.url = url;
+		this.req = null;
 	}
 
-	open(url: string): void {
-		this.url = url;
+	open(req: Request): void {
+		this.req = req;
+		this.url = null;
 	}
 
 	back(): void {

package/src/routing/InnerRouter.ts

@@ -1,7 +1,7 @@
 import Site, { SiteFromGraphQl } from './Site.js';
 import History from './History.js';
 import { ClientHistory, ServerHistory } from './History.js';
-import Request, { isRequest } from './Request.js';
+import Request, { isRequest, RequestOptions } from './Request.js';
 import Route from './Route.js';
 
 export type InnerRouterOpts = {
@@ -13,16 +13,21 @@ export type InnerRouterOpts = {
  */
 export default class InnerRouter {
 	sites: Site[];
+	/**
+	 * The current route
+	 *
+	 * ## Null
+	 * It might be null on the first targetToRequest, open, and routeFromUrl call
+	 */
 	route: Route | null;
-	site: Site;
 	history: History;
 	preloadOnMouseOver: boolean;
 	/**
 	 * @param changeHistory returns a function you need to call when you are ready to
 	 update the window history (note do not call this after another onRoute call was made)
 	 */
-	onRoute: (route: Request, site: Site, changeHistory: () => void) => void;
-	onPreload: (route: Request, site: Site) => void;
+	onRoute: (route: Request, changeHistory: () => void) => void;
+	onPreload: (route: Request) => void;
 
 	private scrollDebounceTimeout: any | null;
 
@@ -36,7 +41,6 @@ export default class InnerRouter {
 		this.sites = sites.map(s => new Site(s));
 
 		this.route = null;
-		this.site = this.defaultSite();
 		// @ts-ignore
 		this.history = import.meta.env.SSR
 			? new ServerHistory()
@@ -58,18 +62,13 @@ export default class InnerRouter {
 		this.listen();
 
 		// let's first try to load from the state
-		const route = this.targetToRequest(window.location.href);
-		route._fillFromState(window.history.state);
-
-		route.origin = 'init';
-
-		if (route.search.get('x-craft-live-preview')) {
-			route.origin = 'live-preview-init';
-		}
+		const req = this.targetToRequest(window.location.href);
+		req._fillFromState(window.history.state);
 
+		req.origin = 'init';
 		window.history.scrollRestoration = 'manual';
 
-		this.open(route, false);
+		this.setRoute(req);
 	}
 
 	/**
@@ -80,8 +79,7 @@ export default class InnerRouter {
 	/**
 	 * Get a site and if possible use the accept lang header.
 	 *
-	 * @param {(string|null)} [acceptLang=null] Accept Language header.
-	 * @return {Site}
+	 * @param acceptLang Accept Language header.
 	 */
 	siteByAcceptLang(acceptLang: string | null = null): Site {
 		if (!acceptLang) return this.defaultSite();
@@ -125,7 +123,7 @@ export default class InnerRouter {
 	 * Get the default site
 	 */
 	defaultSite(): Site {
-		return this.sites[0];
+		return this.sites.find(s => s.primary) ?? this.sites[0];
 	}
 
 	/**
@@ -136,15 +134,21 @@ export default class InnerRouter {
 	}
 
 	/**
-	 * Resolve a url or Route and convert it to a Route
+	 * Resolve a url or Route and convert it to a Request
 	 *
 	 * @param target
+	 * @param opts, any option present will override the value in target
 	 * @return Returns null if the url does not match our host (the protocol get's ignored)
 	 */
-	targetToRequest(target: string | URL | Route | Request): Request {
+	targetToRequest(
+		target: string | URL | Route | Request,
+		opts: RequestOptions = {},
+	): Request {
 		if (typeof target === 'string') {
 			if (target.startsWith('/')) {
-				const site = this.site;
+				// todo should we use the language matching or throw if the route does not
+				// exists
+				const site = this.route?.site ?? this.defaultSite();
 				target = new URL(site.uri + target, site.url);
 			} else {
 				target = new URL(target);
@@ -156,9 +160,10 @@ export default class InnerRouter {
 		}
 
 		if (!isRequest(target)) {
-			return Request.fromRoute(target);
+			return Request.fromRoute(target, opts);
 		}
 
+		target._updateOpts(opts);
 		return target;
 	}
 
@@ -170,7 +175,7 @@ export default class InnerRouter {
 	 */
 	routeFromUrl(fullUrl: URL): Route {
 		// strip stuff we dont need from url
-		const route = new Route(fullUrl, null);
+		const route = new Route(fullUrl, null!);
 		const url = route.url;
 
 		let site: Site | null = null;
@@ -193,7 +198,9 @@ export default class InnerRouter {
 			site = s;
 		}
 
-		route.site = site;
+		// todo should we throw if we can't find a site
+		// or use the site which matches the language
+		route.site = site ?? this.defaultSite();
 
 		return route;
 	}
@@ -210,12 +217,20 @@ export default class InnerRouter {
 
 			e.preventDefault();
 
-			const route = this.routeFromUrl(link.href);
-			if (this.route?.eq(route)) return;
-
-			route.origin = 'click';
+			const req = this.targetToRequest(link.href, { origin: 'click' });
+			const routeEq =
+				this.route && this.route.eqUrl(req) && this.route.eqSearch(req);
+			// the route is the same don't do anything
+			// or maybe scroll the page to the hash? todo
+			if (routeEq && this.route?.eqHash(req)) return;
+
+			// this means the hash did not match, so we wan't to just scroll but not load
+			// data
+			if (routeEq) {
+				req.disableLoadData = true;
+			}
 
-			this.open(route);
+			this.open(req);
 		});
 
 		if (this.preloadOnMouseOver) {
@@ -259,7 +274,7 @@ export default class InnerRouter {
 					// use the latest state
 					this.history.replaceState(this.route._toState());
 
-					if (current.origin === 'live-preview-init') {
+					if (current.inLivePreview()) {
 						sessionStorage.setItem(
 							'live-preview-scroll',
 							// use the latest scrollY
@@ -275,27 +290,28 @@ export default class InnerRouter {
 		window.addEventListener('popstate', async e => {
 			if (!('route' in e.state)) return;
 
-			const route = this.targetToRequest(window.location.href);
-			route._fillFromState(e.state);
-			route.origin = 'pop';
+			const req = this.targetToRequest(window.location.href);
+			req._fillFromState(e.state);
+			req.origin = 'pop';
 
-			// since the pop event replaced our state we can't replace the state
-			// for the scrollY in our open call so we just clear the current
-			// route since it is now already the new route
-			this.route = null;
-
-			this.open(route, false);
+			this.setRoute(req);
 		});
 	}
 
 	/**
-	 * Open's a route
+	 * Open a new route
 	 *
 	 * @param route a route object or an url or uri, never input the same route object again
 	 * @param pushState if true pushed the state to the window.history
+	 *
+	 * ## Important
+	 * Make sure a req always has the correct origin,
+	 * `push` and `replace` will cause this function to throw an error
 	 */
-	open(target: string | URL | Route | Request, pushState: boolean = true) {
-		const req = this.targetToRequest(target);
+	open(req: Request) {
+		if (['push', 'replace'].includes(req.origin)) {
+			throw new Error('Do not use open with push or replace');
+		}
 
 		const current = this.route;
 		if (current) {
@@ -321,18 +337,14 @@ export default class InnerRouter {
 			// @ts-ignore
 			import.meta.env.SSR
 		) {
-			this.history.open(req.url.href);
+			this.history.open(req);
 			return;
 		}
 
-		if (pushState) {
-			req.index = (current?.index ?? 0) + 1;
-			this.onRoute(req, req.site ?? this.site, () => {
-				this.pushState(req.toRoute());
-			});
-		} else {
-			this.setRoute(req);
-		}
+		req.index = (current?.index ?? 0) + 1;
+		this.onRoute(req, () => {
+			this.push(req, true);
+		});
 	}
 
 	/**
@@ -343,50 +355,70 @@ export default class InnerRouter {
 	 *
 	 * @param req
 	 */
-	setRoute(req: Request) {
+	setRoute(req: Request, preventOnRoute = false) {
 		this.route = req.toRoute();
-		if (req.site) this.site = req.site;
 
-		this.onRoute(req, this.site, () => {});
+		if (!preventOnRoute) this.onRoute(req, () => {});
 	}
 
 	/**
-	 * This pushes the state of the route without triggering a currentRoute
-	 * or currentSiteId change
+	 * This pushes a new route to the history
 	 *
-	 * You can use when using pagination for example change the route object
-	 * (search argument) and then call pushState
+	 * @param req, never input the same route object again
 	 *
-	 * @param route, never input the same route object again
+	 * ## Important
+	 * Make sure the route has the correct origin
 	 */
-	pushState(route: Route) {
-		const url = route.url;
+	push(req: Request, preventOnRoute = false) {
+		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 = this.history.scrollY();
+		}
 
 		this.history.pushState(
-			route._toState(),
+			nReq._toState(),
 			url.pathname + url.search + url.hash,
 		);
 
-		this.route = route;
-		if (route.site) this.site = route.site;
+		this.setRoute(req, preventOnRoute);
 	}
 
 	/**
-	 * This replaces the state of the route without triggering a currentRoute
-	 * or currentSiteId change
+	 * This replaces the current route
+	 *
+	 * @param req, never input the same route object again
 	 *
-	 * @param route, never input the same route object again
+	 * ## Important
+	 * Make sure the route has the correct origin
 	 */
-	replaceState(route: Route) {
-		const url = route.url;
+	replace(req: Request) {
+		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 = this.history.scrollY();
+		}
 
 		this.history.replaceState(
-			route._toState(),
+			nReq._toState(),
 			url.pathname + url.search + url.hash,
 		);
 
-		this.route = route;
-		if (route.site) this.site = route.site;
+		this.setRoute(req);
 	}
 
 	/**
@@ -398,21 +430,12 @@ export default class InnerRouter {
 	 */
 	preload(target: string | URL | Route | Request) {
 		const req = this.targetToRequest(target);
-
-		// todo, don't think this makes any sense
-		// if the domain of the current site is different than the domain of the
-		// new site id does not make sense to preload
-		if (this.site.url.origin !== req.url.origin) {
-			return;
-		}
-
 		const current = this.route;
-		const site = req.site ?? this.site;
 
 		// if the origin matches, the route will be able to be load
 		// so let's preload it
 		if (current && current.url.origin === req.url.origin) {
-			this.onPreload(req, site);
+			this.onPreload(req);
 		}
 	}
 
@@ -427,7 +450,7 @@ export default class InnerRouter {
 
 		// if the route is a live preview init and we have a scrollY stored
 		// scroll to that
-		if (req.origin === 'live-preview-init') {
+		if (req.inLivePreview()) {
 			const scrollY = sessionStorage.getItem('live-preview-scroll');
 			if (scrollY) {
 				scrollTo = {
@@ -462,6 +485,10 @@ export default class InnerRouter {
 			};
 		}
 
+		// 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 = {

package/src/routing/PageLoader.ts

@@ -1,5 +1,4 @@
 import Request from './Request.js';
-import Site from './Site.js';
 
 export type PageLoaderOptions = {
 	debugTiming: boolean;
@@ -10,11 +9,7 @@ export type LoadResponse = {
 	data: any;
 };
 
-export type LoadFn = (
-	req: Request,
-	site: Site,
-	opts: LoadOptions,
-) => Promise<any> | any;
+export type LoadFn = (req: Request, opts: LoadOptions) => Promise<any> | any;
 
 export type LoadOptions = {
 	setProgress: (num: number) => void;
@@ -29,12 +24,7 @@ export default class PageLoader<More> {
 
 	private loadingVersion: number;
 
-	onLoaded: (
-		resp: LoadResponse,
-		req: Request,
-		site: Site,
-		more: More,
-	) => void;
+	onLoaded: (resp: LoadResponse, req: Request, more: More) => void;
 	onProgress: (loading: boolean, progress?: number) => void;
 	loadFn: LoadFn;
 
@@ -62,7 +52,7 @@ export default class PageLoader<More> {
 		this.onProgress(false);
 	}
 
-	async load(req: Request, site: Site, more: More) {
+	async load(req: Request, more: More) {
 		this.onProgress(true);
 
 		const version = ++this.loadingVersion;
@@ -76,7 +66,7 @@ export default class PageLoader<More> {
 
 		const resp: LoadResponse = { success: false, data: null };
 		try {
-			resp.data = await this.loadFn(req, site, { setProgress });
+			resp.data = await this.loadFn(req, { setProgress });
 			resp.success = true;
 		} catch (e) {
 			resp.success = false;
@@ -91,18 +81,18 @@ export default class PageLoader<More> {
 			return console.log('route changed quickly, ignoring response');
 
 		this.onProgress(false);
-		this.onLoaded(resp, req, site, more);
+		this.onLoaded(resp, req, more);
 	}
 
 	// you don't need to wait on this call
-	async preload(req: Request, site: Site) {
+	async preload(req: Request) {
 		const url = req.url.origin + req.url.pathname;
 		if (this.preloadedUrls.has(url)) return;
 
 		this.preloadedUrls.add(url);
 
 		try {
-			await this.loadFn(req, site, { setProgress: () => null });
+			await this.loadFn(req, { setProgress: () => null });
 		} catch (_e) {
 			console.log('preload failed');
 			// retry at another time

package/src/routing/Request.ts

@@ -10,6 +10,8 @@ export type RequestOptions = {
 	index?: number;
 	origin?: RouteOrigin;
 	disableScroll?: boolean;
+	disableLoadData?: boolean;
+	statusCode?: number;
 };
 
 /**
@@ -24,31 +26,41 @@ export default class Request extends Route {
 	 */
 	disableScroll: boolean;
 
+	/**
+	 * Disable loading data
+	 * @default false
+	 */
+	disableLoadData: boolean;
+
+	/**
+	 * The Status code that should be returned for a redirect
+	 */
+	statusCode: number | null;
+
 	/** @hidden */
 	_renderBarrier: RenderBarrier;
 
 	/**
 	 * Create a new Request
 	 */
-	constructor(
-		url: string | URL,
-		site: Site | null,
-		opts: RequestOptions = {},
-	) {
+	constructor(url: string | URL, site: Site, opts: RequestOptions = {}) {
 		super(url, site, opts);
 
 		this.disableScroll = opts.disableScroll ?? false;
+		this.disableLoadData = opts.disableLoadData ?? false;
+		this.statusCode = opts.statusCode ?? null;
 		this._renderBarrier = new RenderBarrier();
 	}
 
 	/**
 	 * Create a Request from a Route
 	 */
-	static fromRoute(route: Route) {
+	static fromRoute(route: Route, opts: RequestOptions = {}) {
 		return new Request(route.url.href, route.site, {
 			scrollY: route.scrollY ?? undefined,
 			index: route.index,
 			origin: route.origin,
+			...opts,
 		});
 	}
 
@@ -93,6 +105,7 @@ export default class Request extends Route {
 			index: this.index,
 			origin: this.origin,
 			disableScroll: this.disableScroll,
+			statusCode: this.statusCode ?? undefined,
 		});
 	}
 
@@ -106,6 +119,15 @@ export default class Request extends Route {
 			origin: this.origin,
 		});
 	}
+
+	/** @hidden */
+	_updateOpts(opts: RequestOptions = {}) {
+		this.scrollY = opts.scrollY ?? this.scrollY;
+		this.index = opts.index ?? this.index;
+		this.origin = opts.origin ?? this.origin;
+		this.disableScroll = opts.disableScroll ?? this.disableScroll;
+		this.statusCode = opts.statusCode ?? this.statusCode;
+	}
 }
 
 export function isRequest(req: any): req is Request {