crelte 0.3.0 → 0.3.2

package/src/init/shared.ts

@@ -1,5 +1,6 @@
 import Crelte from '../Crelte.js';
 import CrelteRequest from '../CrelteRequest.js';
+import EntryRouter, { EntryRoutes } from '../entry/EntryRouter.js';
 import { GraphQlQuery } from '../graphql/GraphQl.js';
 import { LoadData, callLoadData } from '../loadData/index.js';
 import { PluginCreator } from '../plugins/Plugins.js';
@@ -12,6 +13,8 @@ interface App<E, T> {
 	loadEntryData?: LoadData<any>;
 
 	templates?: Record<string, LazyTemplateModule<E, T>>;
+
+	entryRoutes?: EntryRoutes;
 }
 
 interface TemplateModule<E, T> {
@@ -58,14 +61,43 @@ export function getEntry(page: any): any {
 	};
 }
 
-export async function loadFn<D, E, T>(
+// todo it would be nice to call this only once per server start
+export async function prepareLoadFn<E, T>(
+	crelte: Crelte,
+	app: App<E, T>,
+	entryQuery: GraphQlQuery,
+	globalQuery?: GraphQlQuery,
+): Promise<(cr: CrelteRequest, loadOpts?: LoadOptions) => Promise<any>> {
+	const templateModules = prepareTemplates(app.templates ?? {});
+	let entryRouter: EntryRouter | null = null;
+	if (app.entryRoutes) {
+		entryRouter = new EntryRouter(crelte);
+		await app.entryRoutes(entryRouter);
+	}
+
+	return async (cr, loadOpts) => {
+		return await loadFn(
+			cr,
+			app,
+			templateModules,
+			entryRouter,
+			entryQuery,
+			globalQuery,
+			loadOpts,
+		);
+	};
+}
+
+async function loadFn<E, T>(
 	cr: CrelteRequest,
 	app: App<E, T>,
+	templateModules: Map<string, LazyTemplateModule<E, T>>,
+	entryRouter: EntryRouter | null,
 	entryQuery: GraphQlQuery,
 	globalQuery?: GraphQlQuery,
 	loadOpts?: LoadOptions,
 ): Promise<any> {
-	let dataProm: Promise<D> | null = null;
+	let dataProm: Promise<any> | null = null;
 	// @ts-ignore
 	if (app.loadData) {
 		throw new Error(
@@ -93,43 +125,29 @@ export async function loadFn<D, E, T>(
 		})();
 	}
 
-	let pageProm = null;
-	if (cr.req.siteMatches()) {
-		let uri = decodeURI(cr.req.uri);
-		if (uri.startsWith('/')) uri = uri.substring(1);
-		if (uri === '' || uri === '/') uri = '__home__';
-
-		pageProm = cr.query(entryQuery, {
-			uri,
-			siteId: cr.site.id,
-		});
-	}
+	const entryProm = queryEntry(cr, app, entryRouter, entryQuery);
 
 	const pluginsLoadGlobalData = cr.events.trigger('loadGlobalData', cr);
 
 	// loading progress is at 20%
 	loadOpts?.setProgress(0.2);
 
-	const [data, global, page] = await Promise.all([
+	const [data, global, entry] = await Promise.all([
 		dataProm,
 		globalProm,
-		pageProm,
+		entryProm,
 		...pluginsLoadGlobalData,
 	]);
 
-	if (global) {
-		cr.globals._setData(cr.site.id, global);
-	} else if (!cr.globals._wasLoaded(cr.site.id)) {
-		// we need to set the global data to an empty object
-		// so any waiters get's triggered
-		cr.globals._setData(cr.site.id, {});
+	// global is only set if !wasLoaded but we need to store something
+	// even if no globalQuery exists
+	if (global || !cr.globals._wasLoaded(cr.site.id)) {
+		cr.globals._setData(cr.site.id, global ?? {});
 	}
 
-	const entry = getEntry(page);
-
 	let template;
 	if (app.templates) {
-		template = await loadTemplate(app.templates, entry);
+		template = await loadTemplate(templateModules, entry);
 	} else {
 		throw new Error('App must have templates or loadTemplate method');
 	}
@@ -180,12 +198,39 @@ function parseFilename(path: string): [string, string] {
 	return [name, ext];
 }
 
-async function loadTemplate<E, T>(
+async function queryEntry<E, T>(
+	cr: CrelteRequest,
+	app: App<E, T>,
+	entryRouter: EntryRouter | null,
+	entryQuery: GraphQlQuery,
+): Promise<any | null> {
+	// check
+	if (entryRouter) {
+		const entry = await entryRouter._handle(cr);
+		if (entry) return entry;
+	}
+
+	if (cr.req.siteMatches()) {
+		let uri = decodeURI(cr.req.uri);
+		if (uri.startsWith('/')) uri = uri.substring(1);
+		if (uri === '' || uri === '/') uri = '__home__';
+
+		const page = await cr.query(entryQuery, {
+			uri,
+			siteId: cr.site.id,
+		});
+
+		return getEntry(page);
+	}
+
+	return null;
+}
+
+function prepareTemplates<E, T>(
 	rawModules: Record<string, LazyTemplateModule<E, T>>,
-	entry: E,
-): Promise<TemplateModule<E, T>> {
+): Map<string, LazyTemplateModule<E, T>> {
 	// parse modules
-	const modules = new Map(
+	return new Map(
 		Object.entries(rawModules)
 			.map(([path, mod]) => {
 				const [name, _ext] = parseFilename(path);
@@ -193,7 +238,12 @@ async function loadTemplate<E, T>(
 			})
 			.filter(([name, _mod]) => !!name),
 	);
+}
 
+async function loadTemplate<E, T>(
+	modules: Map<string, LazyTemplateModule<E, T>>,
+	entry: E,
+): Promise<TemplateModule<E, T>> {
 	const entr = entry as any;
 	const handle = `${entr.sectionHandle}-${entr.typeHandle}`;
 

package/src/routing/InnerRouter.ts

@@ -68,7 +68,10 @@ export default class InnerRouter {
 		req.origin = 'init';
 		window.history.scrollRestoration = 'manual';
 
-		this.setRoute(req);
+		// we set it now instead of waiting for the onRoute call
+		// because the window.history is already set
+		this.route = req.toRoute();
+		this.onRoute(req, () => {});
 	}
 
 	/**
@@ -301,7 +304,10 @@ export default class InnerRouter {
 			req._fillFromState(e.state);
 			req.origin = 'pop';
 
-			this.setRoute(req);
+			// we set it now instead of waiting for the onRoute call
+			// because the window.history was already modified
+			this.route = req.toRoute();
+			this.onRoute(req, () => {});
 		});
 	}
 
@@ -350,24 +356,15 @@ export default class InnerRouter {
 
 		req.index = (current?.index ?? 0) + 1;
 		this.onRoute(req, () => {
-			this.push(req, true);
+			const url = req.url;
+			this.history.pushState(
+				req._toState(),
+				url.pathname + url.search + url.hash,
+			);
+			this.route = req.toRoute();
 		});
 	}
 
-	/**
-	 * Sets a route
-	 *
-	 * Will trigger an onRoute event but will not store any scroll progress
-	 * or modify the history
-	 *
-	 * @param req
-	 */
-	setRoute(req: Request, preventOnRoute = false) {
-		this.route = req.toRoute();
-
-		if (!preventOnRoute) this.onRoute(req, () => {});
-	}
-
 	/**
 	 * This pushes a new route to the history
 	 *
@@ -376,7 +373,7 @@ export default class InnerRouter {
 	 * ## Important
 	 * Make sure the route has the correct origin
 	 */
-	push(req: Request, preventOnRoute = false) {
+	push(req: Request) {
 		const url = req.url;
 		// todo a push should also store the previous scrollY
 
@@ -390,12 +387,13 @@ export default class InnerRouter {
 			nReq.scrollY = this.history.scrollY();
 		}
 
-		this.history.pushState(
-			nReq._toState(),
-			url.pathname + url.search + url.hash,
-		);
-
-		this.setRoute(req, preventOnRoute);
+		this.onRoute(req, () => {
+			this.history.pushState(
+				req._toState(),
+				url.pathname + url.search + url.hash,
+			);
+			this.route = req.toRoute();
+		});
 	}
 
 	/**
@@ -420,12 +418,13 @@ export default class InnerRouter {
 			nReq.scrollY = this.history.scrollY();
 		}
 
-		this.history.replaceState(
-			nReq._toState(),
-			url.pathname + url.search + url.hash,
-		);
-
-		this.setRoute(req);
+		this.onRoute(req, () => {
+			this.history.replaceState(
+				req._toState(),
+				url.pathname + url.search + url.hash,
+			);
+			this.route = req.toRoute();
+		});
 	}
 
 	/**

package/src/routing/Request.ts

@@ -1,6 +1,7 @@
 import { Barrier } from 'crelte-std/sync';
 import Route, { RouteOrigin } from './Route.js';
 import Site from './Site.js';
+import { objClone } from '../utils.js';
 
 /**
  * Options to create a Request
@@ -9,6 +10,8 @@ export type RequestOptions = {
 	scrollY?: number;
 	index?: number;
 	origin?: RouteOrigin;
+	state?: Record<string, any>;
+	context?: Record<string, any>;
 	disableScroll?: boolean;
 	disableLoadData?: boolean;
 	statusCode?: number;
@@ -60,6 +63,8 @@ export default class Request extends Route {
 			scrollY: route.scrollY ?? undefined,
 			index: route.index,
 			origin: route.origin,
+			state: route._state,
+			context: route._context,
 			...opts,
 		});
 	}
@@ -104,6 +109,8 @@ export default class Request extends Route {
 			scrollY: this.scrollY ?? undefined,
 			index: this.index,
 			origin: this.origin,
+			state: objClone(this._state),
+			context: this._context,
 			disableScroll: this.disableScroll,
 			statusCode: this.statusCode ?? undefined,
 		});
@@ -117,6 +124,8 @@ export default class Request extends Route {
 			scrollY: this.scrollY ?? undefined,
 			index: this.index,
 			origin: this.origin,
+			state: objClone(this._state),
+			context: this._context,
 		});
 	}
 
@@ -125,6 +134,8 @@ export default class Request extends Route {
 		this.scrollY = opts.scrollY ?? this.scrollY;
 		this.index = opts.index ?? this.index;
 		this.origin = opts.origin ?? this.origin;
+		this._state = opts.state ?? this._state;
+		this._context = opts.context ?? this._context;
 		this.disableScroll = opts.disableScroll ?? this.disableScroll;
 		this.statusCode = opts.statusCode ?? this.statusCode;
 	}

package/src/routing/Route.ts

@@ -1,3 +1,4 @@
+import { objClone } from '../utils.js';
 import Site from './Site.js';
 import { trimSlashEnd } from './utils.js';
 
@@ -5,6 +6,8 @@ export type RouteOptions = {
 	scrollY?: number;
 	index?: number;
 	origin?: RouteOrigin;
+	state?: Record<string, any>;
+	context?: Record<string, any>;
 };
 
 /**
@@ -74,6 +77,25 @@ export default class Route {
 	 */
 	origin: RouteOrigin;
 
+	/**
+	 * @hidden
+	 * State data that can be used to store additional information
+	 */
+	_state: Record<string, any>;
+
+	/**
+	 * @hidden
+	 * Any data that should be passed to onRoute and onRequest handlers
+	 * or exchanged between loadData's
+	 * This context is not persistant and should be considered "valid"
+	 * only for the current request / route
+	 *
+	 * ## Note
+	 * Consider using state instead. This will not be cloned in the clone
+	 * call so will always be the same object
+	 */
+	_context: Record<string, any>;
+
 	/**
 	 * Creates a new Route
 	 */
@@ -84,6 +106,8 @@ export default class Route {
 		this.scrollY = opts.scrollY ?? null;
 		this.index = opts.index ?? 0;
 		this.origin = opts.origin ?? 'manual';
+		this._state = opts.state ?? {};
+		this._context = opts.context ?? {};
 	}
 
 	/**
@@ -163,6 +187,20 @@ export default class Route {
 		return this.url.hash;
 	}
 
+	/**
+	 * Set the hash of the route
+	 *
+	 * ## Example
+	 * ```
+	 * const route = new Route('https://example.com/foo/bar/', null);
+	 * route.hash = '#hash';
+	 * console.log(route.url.href); // 'https://example.com/foo/bar/#hash'
+	 * ```
+	 */
+	set hash(hash: string) {
+		this.url.hash = hash;
+	}
+
 	/**
 	 * Checks if there are previous routes which would allow it to go back
 	 */
@@ -184,7 +222,8 @@ export default class Route {
 	}
 
 	/**
-	 * Sets the search param or removes it if the value is null or undefined
+	 * Sets the search param or removes it if the value is null, undefined or an
+	 * empty string
 	 *
 	 * ## Example
 	 * ```
@@ -197,13 +236,69 @@ export default class Route {
 	 * ```
 	 */
 	setSearchParam(key: string, value?: string | number | null) {
-		if (typeof value !== 'undefined' && value !== null) {
+		const deleteValue =
+			typeof value === 'undefined' ||
+			value === null ||
+			(typeof value === 'string' && value === '');
+
+		if (!deleteValue) {
 			this.search.set(key, value as string);
 		} else {
 			this.search.delete(key);
 		}
 	}
 
+	/**
+	 * Returns a state value if it exists.
+	 */
+	getState<T = any>(key: string): T | null {
+		return this._state[key] ?? null;
+	}
+
+	/**
+	 * Sets a state value.
+	 * If the value is null or undefined, the key will be removed.
+	 *
+	 * ## When to use state
+	 * State is used to store additional information that persists across route changes.
+	 * The State is only available in the client code since it is stored using window.history.
+	 *
+	 * Consider using setSearchParam instead to enable server side rendering.
+	 */
+	setState<T>(key: string, value: T | null | undefined) {
+		if (typeof value === 'undefined' || value === null) {
+			delete this._state[key];
+		} else {
+			this._state[key] = value;
+		}
+	}
+
+	/**
+	 * Returns a context value if it exists.
+	 */
+	getContext<T = any>(key: string): T | null {
+		return this._context[key] ?? null;
+	}
+
+	/**
+	 * Sets a context value.
+	 * If the value is null or undefined, the key will be removed.
+	 *
+	 * ## When to use context
+	 * Context is used to pass data to onRoute and onRequest handlers or exchange data between loadData calls.
+	 * This context is not persistent and should be considered valid only for the current request/route.
+	 * The context is not cloned in the clone call and will be the same object.
+	 */
+	setContext<T>(key: string, value: T | null | undefined) {
+		if (typeof value === 'undefined' || value === null) {
+			delete this._context[key];
+		} else {
+			this._context[key] = value;
+		}
+	}
+	/**
+	 * Returns true if the route is in live preview mode
+	 */
 	inLivePreview(): boolean {
 		return !!this.search.get('x-craft-live-preview');
 	}
@@ -229,6 +324,9 @@ export default class Route {
 	 *
 	 * This checks all properties of the url but search params do not have to be
 	 * in the same order
+	 *
+	 * ## Note
+	 * This does not check the state or context
 	 */
 	eq(route: Route | null) {
 		return (
@@ -288,6 +386,8 @@ export default class Route {
 			scrollY: this.scrollY ?? undefined,
 			index: this.index,
 			origin: this.origin,
+			state: objClone(this._state),
+			context: this._context,
 		});
 	}
 
@@ -298,6 +398,10 @@ export default class Route {
 
 		if (typeof state?.route?.index === 'number')
 			this.index = state.route.index;
+
+		if (typeof state?.state === 'object' && state.state !== null) {
+			this._state = state.state;
+		}
 	}
 
 	/** @hidden */
@@ -307,6 +411,7 @@ export default class Route {
 				scrollY: this.scrollY,
 				index: this.index,
 			},
+			state: this._state,
 		};
 	}
 }