crelte 0.5.10 → 0.5.12

package/src/queries/vars.ts

@@ -53,12 +53,14 @@ export class QueryVar<T = any> {
 	private name: string | null;
 	private type: 'any' | 'string' | 'number' | 'id' | 'ids';
 	private flagNullable: boolean;
+	private defaultValue: T | undefined;
 	private validIfFn: ValidIf<T>;
 
 	constructor() {
 		this.name = null;
 		this.type = 'any';
 		this.flagNullable = false;
+		this.defaultValue = undefined;
 		this.validIfFn = () => true;
 	}
 
@@ -87,6 +89,11 @@ export class QueryVar<T = any> {
 		return this as QueryVar<T | null>;
 	}
 
+	default(value: T): QueryVar<T> {
+		this.defaultValue = value;
+		return this;
+	}
+
 	/**
 	 * Set a validation function for this variable
 	 *
@@ -103,6 +110,8 @@ export class QueryVar<T = any> {
 		if (typeof v === 'undefined') v = null;
 
 		if (v === null) {
+			if (this.defaultValue !== undefined) return this.defaultValue;
+
 			if (!this.flagNullable)
 				throw new Error(`variable ${this.name} cannot be null`);
 
@@ -139,7 +148,11 @@ export class QueryVar<T = any> {
 					);
 
 				if (v.length <= 0) {
+					if (this.defaultValue !== undefined)
+						return this.defaultValue;
+
 					if (this.flagNullable) return null;
+
 					throw new Error(
 						`variable ${this.name} is not allowed to be empty`,
 					);

package/src/routing/route/Request.ts

@@ -1,5 +1,5 @@
 import Site from '../Site.js';
-import { objClone } from '../../utils.js';
+import { objClone, promiseThen } from '../../utils.js';
 import BaseRoute, { RouteOrigin } from './BaseRoute.js';
 import Route, { TemplateModule } from './Route.js';
 import { Entry } from '../../loadData/index.js';
@@ -254,8 +254,15 @@ class RenderBarrier {
 		const action = this.inner.add();
 
 		return {
-			ready: async () => {
-				if (!this.inner.isOpen()) await action.ready(null);
+			ready: () => {
+				if (!this.inner.isOpen())
+					return promiseThen(
+						// wait for action.ready
+						action.ready(null),
+						// then return if it was cancelled
+						() => this.cancelled,
+					);
+
 				return this.cancelled;
 			},
 			remove: () => {
@@ -292,7 +299,7 @@ export type DelayRender = {
 	 *
 	 * @returns if the render was cancelled
 	 */
-	ready: () => Promise<boolean>;
+	ready: () => Promise<boolean> | boolean;
 
 	/**
 	 * If youre not interested when the render happens anymore

package/src/routing/router/BaseRouter.ts

@@ -123,8 +123,10 @@ export default class BaseRouter {
 	}
 
 	/**
-	 * todo check that the router uses the correct sites for each function
+	 * Returns the default site tries to use a site which matches the preferred language
+	 * else returns the primary site
 	 */
+	// todo check that the router uses the correct sites for each function
 	defaultSite(): Site {
 		return this.preferredSite() ?? this.primarySite();
 	}
@@ -233,7 +235,7 @@ export default class BaseRouter {
 		const req = this.targetToRequest(target, { origin: 'preload' });
 		const current = this.route.get();
 
-		// if the origin matches, the route will be able to be load
+		// if the origin matches, the route will be able to be loaded
 		// so let's preload it
 		if (current && current.url.origin === req.url.origin) {
 			// todo i don't wan't to send a CrelteRequest?

package/src/routing/router/ClientRouter.ts

@@ -107,7 +107,7 @@ export default class ClientRouter extends BaseRouter {
 	async pushRequest(req: Request, _opts: RequestOptions = {}) {
 		const url = req.url;
 
-		return await this.handleRequest(req, route => {
+		return this.handleRequest(req, route => {
 			window.history.pushState(
 				route.z_toState(),
 				'',
@@ -119,18 +119,13 @@ export default class ClientRouter extends BaseRouter {
 	async replaceRequest(req: Request, _opts: RequestOptions = {}) {
 		const url = req.url;
 
-		try {
-			return await this.handleRequest(req, () => {
-				window.history.replaceState(
-					req.z_toState(),
-					'',
-					url.pathname + url.search + url.hash,
-				);
-			});
-		} catch (e) {
-			console.warn('replacing route failed', e);
-			throw e;
-		}
+		return this.handleRequest(req, () => {
+			window.history.replaceState(
+				req.z_toState(),
+				'',
+				url.pathname + url.search + url.hash,
+			);
+		});
 	}
 
 	back(): void {
@@ -164,6 +159,7 @@ export default class ClientRouter extends BaseRouter {
 			const req = this.targetToRequest(link.href, {
 				origin: 'click',
 				context: { ...link.dataset },
+				disableScroll: attributeToBool(link, 'data-disable-scroll'),
 			});
 			const currRoute = this.route.get();
 			const routeEq =
@@ -189,7 +185,9 @@ export default class ClientRouter extends BaseRouter {
 
 				if (
 					link &&
-					!link.hasAttribute('data-no-preload') &&
+					// todo remove data-no-preload
+					!attributeToBool(link, 'data-no-preload') &&
+					!attributeToBool(link, 'data-disable-preload') &&
 					link.href
 				) {
 					this.preload(link.href);
@@ -202,11 +200,10 @@ export default class ClientRouter extends BaseRouter {
 		window.addEventListener('scroll', () => this.onScroll());
 
 		window.addEventListener('popstate', async e => {
-			if (!e.state?.route) return;
-
-			const req = this.targetToRequest(window.location.href);
+			const req = this.targetToRequest(window.location.href, {
+				origin: 'pop',
+			});
 			req.z_fillFromState(e.state);
-			req.origin = 'pop';
 
 			// todo handle errors
 			this.handleRequest(req, () => {});
@@ -312,3 +309,14 @@ export default class ClientRouter extends BaseRouter {
 		}
 	}
 }
+
+function attributeToBool(el: HTMLElement, attr: string): boolean {
+	switch (el.getAttribute(attr)) {
+		case '':
+		case 'true':
+			return true;
+		case 'false':
+		default:
+			return false;
+	}
+}

package/src/routing/router/Router.ts

@@ -226,19 +226,18 @@ export default class Router {
 		});
 		if (!req) return;
 
-		try {
-			return await this.inner.pushRequest(req, opts);
-		} catch (e) {
+		return this.inner.pushRequest(req, opts).catch(e => {
 			console.warn('pushing route failed', e);
 			throw e;
-		}
+		});
 	}
 
 	/**
 	 * @deprecated use push instead
 	 */
 	pushState(route: Route | Request) {
-		console.warn('pushState is deprecated, use push instead');
+		if (import.meta.env.DEV)
+			console.warn('pushState is deprecated, use push instead');
 		this.push(route);
 	}
 
@@ -287,19 +286,18 @@ export default class Router {
 		});
 		if (!req) return;
 
-		try {
-			return await this.inner.replaceRequest(req, opts);
-		} catch (e) {
+		return this.inner.replaceRequest(req, opts).catch(e => {
 			console.warn('replacing route failed', e);
 			throw e;
-		}
+		});
 	}
 
 	/**
 	 * @deprecated use replace instead
 	 */
 	replaceState(route: Route | Request) {
-		console.warn('replaceState is deprecated, use replace instead');
+		if (import.meta.env.DEV)
+			console.warn('replaceState is deprecated, use replace instead');
 		this.replace(route);
 	}
 
@@ -409,7 +407,8 @@ export default class Router {
 		return nRouter;
 	}
 
-	_requestCompleted() {
+	/** @hidden */
+	z_requestCompleted() {
 		this._request = null;
 	}
 }

package/src/routing/utils.ts

@@ -5,7 +5,7 @@ export function trimSlashEnd(str: string) {
 	return str.endsWith('/') ? str.substring(0, str.length - 1) : str;
 }
 
-// same as ?? but only for undefined
+/** same as ?? but only for undefined */
 export function orDef<T>(a: T | undefined, def: T): T {
 	return a === undefined ? def : a;
 }

package/src/server/CrelteServer.ts

@@ -24,6 +24,7 @@ export default class CrelteServerRequest {
 	private _sites: Site[];
 	private _langs: string[];
 	private _queries: Queries;
+	private _scookies: ServerCookies;
 	private _cookies: Cookies;
 
 	constructor(req: ServerRequest, opts: CrelteServerRequestOptions) {
@@ -37,7 +38,8 @@ export default class CrelteServerRequest {
 		this._queries = opts.queries.z_toRequest(
 			new Request(new URL(req.url), req.site),
 		);
-		this._cookies = new ServerCookies(req.headers);
+		this._scookies = new ServerCookies(req.headers);
+		this._cookies = new Cookies(this._scookies);
 	}
 
 	/**
@@ -145,6 +147,6 @@ export default class CrelteServerRequest {
 
 	/** @hidden */
 	z_finishResponse(resp: Response) {
-		(this.cookies as ServerCookies)._populateHeaders(resp.headers);
+		this._scookies._populateHeaders(resp.headers);
 	}
 }

package/src/server/ServerRouter.ts

@@ -139,9 +139,7 @@ export default class ServerRouter {
 			this.endpointUrl,
 			this.frontendUrl,
 			new SsrCache(),
-			{
-				bearerToken: this.endpointToken,
-			},
+			{ bearerToken: this.endpointToken },
 		);
 
 		const csr = new CrelteServerRequest(nReq, {
@@ -152,12 +150,25 @@ export default class ServerRouter {
 			queries,
 		});
 
+		let resp: Response | null = null;
 		for (const handler of handlers) {
-			const res = await handler(csr);
-			if (res) {
-				csr.z_finishResponse(res);
-				return res;
+			try {
+				const res = await handler(csr);
+				if (!res) continue;
+
+				resp = res;
+			} catch (e) {
+				if (!(e instanceof Response)) throw e;
+
+				resp = e;
 			}
+
+			break;
+		}
+
+		if (resp) {
+			csr.z_finishResponse(resp);
+			return resp;
 		}
 
 		return null;

package/src/server/queries/QueryGqlRoute.ts

@@ -0,0 +1,224 @@
+import CrelteServerRequest from '../CrelteServer.js';
+import QueriesCaching from './QueriesCaching.js';
+import { QueryVar, vars } from '../../queries/vars.js';
+import { extractEntry } from '../../loadData/index.js';
+import { calcKey } from '../../ssr/index.js';
+import { CacheIfFn, newError, TransformFn, validateVars } from './routes.js';
+
+export type QueryGqlArgs = {
+	vars: Record<string, QueryVar> | null;
+	cacheIfFn: CacheIfFn | null;
+	preventCaching: boolean;
+	transformFn: TransformFn | null;
+};
+
+// only internal
+export default class QueryGqlRoute {
+	name: string;
+	query: string;
+	vars: Record<string, QueryVar> | null;
+	cacheIfFn: CacheIfFn | null;
+	transformFn: TransformFn | null;
+
+	constructor(name: string, query: string, args: QueryGqlArgs) {
+		if (args.cacheIfFn && !vars)
+			throw new Error(
+				'queryRoute: ' +
+					name +
+					' cannot have caching function if there are no ' +
+					'variables defined',
+			);
+
+		this.name = name;
+		this.query = query;
+		this.vars = args.vars;
+		this.cacheIfFn = args.cacheIfFn;
+		this.transformFn = args.transformFn;
+
+		if (args.preventCaching) {
+			if (this.cacheIfFn) throw new Error('unreachable');
+			// prevent filling defaults
+			return;
+		}
+
+		// add default vars and cacheIfFn if we know the route
+		if (this.name === 'entry') this.fillEntryDefaults();
+		else if (this.name === 'global') this.fillGlobalDefaults();
+		else this.fillBasicDefaults();
+	}
+
+	private fillEntryDefaults() {
+		if (this.vars) return;
+
+		// the _setName step happens in parseVars which happens before setting
+		// the defaults, so since we're adding vars here we need to set the name
+		// manually
+		this.vars = {
+			siteId: vars.siteId().z_setName('siteId'),
+			uri: vars.string().z_setName('uri'),
+		};
+		this.cacheIfFn = res => !!extractEntry(res);
+	}
+
+	private fillGlobalDefaults() {
+		if (this.vars) return;
+
+		this.vars = { siteId: vars.siteId().z_setName('siteId') };
+		this.cacheIfFn = () => true;
+	}
+
+	/**
+	 * This adds caching to queries containing `query {` or
+	 * `query ($siteId: [QueryArgument) {` without any additional vars
+	 */
+	private fillBasicDefaults() {
+		if (this.vars) return;
+
+		const NO_VAR_TEST = /(^|\s)query\s*{/;
+		const SITE_ID_VAR_TEST =
+			/(^|\s)query\s*\(\s*\$siteId\s*:\s*\[\s*QueryArgument\s*\]\s*\)\s*{/;
+
+		if (NO_VAR_TEST.test(this.query)) {
+			this.vars = {};
+			this.cacheIfFn = () => true;
+		} else if (SITE_ID_VAR_TEST.test(this.query)) {
+			this.vars = { siteId: vars.siteId().z_setName('siteId') };
+			this.cacheIfFn = () => true;
+		} else if (!this.query.includes('query')) {
+			// this warning might be shown to mutation queries or subscriptions
+			// in that case, the user should explicitly set caching to false
+			console.warn(
+				`cannot determine if query (${this.name}) is cacheable, see` +
+					' https://github.com/crelte/crelte/issues/114 for infos',
+			);
+		}
+	}
+
+	private async transform(
+		jsonResp: Record<string, any>,
+		vars: Record<string, any>,
+	): Promise<void> {
+		if (!this.transformFn || !jsonResp.data) return;
+
+		const transformed = await this.transformFn(jsonResp.data, vars);
+		if (typeof transformed !== 'undefined') jsonResp.data = transformed;
+	}
+
+	async handle(
+		caching: QueriesCaching,
+		csr: CrelteServerRequest,
+	): Promise<Response> {
+		let vars: Record<string, any>;
+		try {
+			const reqVars = await csr.req.json();
+			vars = validateVars(this.vars, reqVars, caching.router);
+			if ('qName' in vars || 'xCraftSite' in vars)
+				throw new Error(
+					'qName and xCraftSite are reserved variable names',
+				);
+		} catch (e) {
+			return newError(e, 400);
+		}
+
+		let logInfo: string | null = null;
+		if (caching.debug) {
+			logInfo = `[queries: ${this.name}] vars: ${JSON.stringify(vars)}`;
+		}
+
+		let previewToken: string | null = null;
+		let siteToken: string | null = null;
+
+		const reqSearch = new URL(csr.req.url).searchParams;
+
+		if (reqSearch.has('token')) {
+			previewToken = reqSearch.get('token');
+		} else if (reqSearch.has('siteToken')) {
+			siteToken = reqSearch.get('siteToken');
+		}
+
+		// check for x-craft-site header and pass it on
+		const xCraftSite = csr.req.headers.get('X-Craft-Site');
+
+		let cacheKey: string | null = null;
+		const useCache = !previewToken && caching.isEnabled();
+		if (useCache) {
+			cacheKey = await calcKey({ ...vars, qName: this.name, xCraftSite });
+			const cached = await caching.getCache(cacheKey);
+
+			if (logInfo) console.log(`${logInfo} ${cached ? 'hit' : 'miss'}`);
+
+			// we found something in the cache
+			if (cached) return Response.json(cached);
+		}
+
+		const headers: Record<string, string> = {
+			'Content-Type': 'application/json',
+		};
+
+		const auth = csr.getEnv('ENDPOINT_TOKEN');
+		if (auth) headers['Authorization'] = 'Bearer ' + auth;
+
+		const url = new URL(csr.getEnv('ENDPOINT_URL'));
+		if (previewToken) url.searchParams.set('token', previewToken);
+		if (siteToken) url.searchParams.set('siteToken', siteToken);
+
+		const xDebug = csr.req.headers.get('X-Debug');
+		if (xDebug) headers['X-Debug'] = xDebug;
+
+		if (xCraftSite) headers['X-Craft-Site'] = xCraftSite;
+
+		// now execute the gql request
+		let resp: Response;
+		try {
+			resp = await fetch(url, {
+				method: 'POST',
+				headers,
+				body: JSON.stringify({
+					query: this.query,
+					variables: vars,
+				}),
+			});
+
+			// if the response is not ok we don't cache anything
+			// and just return the response
+			if (!resp.ok) return resp;
+		} catch (e) {
+			return newError(e, 500);
+		}
+
+		const respHeaders: Record<string, string> = {};
+		const xDebugLink = resp.headers.get('X-Debug-Link');
+		if (xDebugLink) respHeaders['X-Debug'] = xDebugLink;
+
+		let jsonResp: Record<string, any>;
+		try {
+			jsonResp = await resp.json();
+			if (!jsonResp || typeof jsonResp !== 'object')
+				throw new Error('invalid json response');
+			await this.transform(jsonResp, vars);
+		} catch (e) {
+			return newError(e, 500);
+		}
+
+		// also no caching for errors
+		if (jsonResp.errors) {
+			return Response.json(jsonResp, { headers: respHeaders });
+		}
+
+		// now we have a valid json resp.
+		// should we cache it?
+		if (cacheKey && this.cacheIfFn?.(jsonResp.data, vars)) {
+			try {
+				await caching.setCache(cacheKey, jsonResp);
+				if (logInfo) console.log(logInfo + ' set cache');
+			} catch (e) {
+				console.error('could not cache gql response', e);
+			}
+			// if caching is enabled but not used we warn
+		} else if (cacheKey && logInfo) {
+			console.warn('!! ' + logInfo + ' caching not allowed');
+		}
+
+		return Response.json(jsonResp, { headers: respHeaders });
+	}
+}

package/src/server/queries/QueryHandleRoute.ts

@@ -0,0 +1,37 @@
+import { QueryVar } from '../../queries/vars.js';
+import CrelteServerRequest from '../CrelteServer.js';
+import ServerRouter from '../ServerRouter.js';
+import { HandleFn, newError, validateVars } from './routes.js';
+
+// only internal
+export default class QueryHandleRoute {
+	name: string;
+	handleFn: HandleFn;
+	vars: Record<string, QueryVar> | null;
+
+	constructor(
+		name: string,
+		handleFn: HandleFn,
+		vars: Record<string, QueryVar> | null,
+	) {
+		this.name = name;
+		this.handleFn = handleFn;
+		this.vars = vars;
+	}
+
+	async handle(
+		cs: ServerRouter,
+		csr: CrelteServerRequest,
+	): Promise<Response> {
+		let vars: Record<string, any>;
+		try {
+			const reqVars = await csr.req.json();
+			vars = validateVars(this.vars, reqVars, cs);
+		} catch (e) {
+			return newError(e, 400);
+		}
+
+		const res = await this.handleFn(csr, vars);
+		return Response.json({ data: res });
+	}
+}