crelte 0.5.15 → 0.6.0-alpha.2

package/src/queries/Queries.ts

@@ -17,44 +17,28 @@ export type QueriesOptions = {
 /**
  * A GraphQL query
  *
- * **You should almost never**
- *
- * When importing a graphql file you will get a {@link NamedQuery}
- * or use the {@link gql} template function to create
- * an {@link InlineQuery}.
- * Alternatively you can use the {@link namedQuery} function to create
- * a {@link NamedQuery}.
+ * When importing a graphql file you will get a string with the name of the
+ * query or you can use the {@link gql} template function to create
+ * an {@link GqlQuery}.
+ * Alternatively you can use the name of the query directly, note thought
+ * that this will not reload when you're query changes.
  */
-export type Query = InlineQuery | NamedQuery;
+export type Query = string | GqlQuery;
 
 /**
  * You should never create this type directly. It is returned from
  * the {@link gql} template function.
  */
-export type InlineQuery = { path?: string; query: string };
-
-/**
- * Always create this object via the {@link namedQuery} function
- */
-export type NamedQuery = { queryName: string };
-
-/**
- * Create a NamedQuery for the given server query name.
- *
- * Prefer importing a graphql file instead.
- *
- * #### Note
- * This needs to match the name of the js/ts file.
- */
-export function namedQuery(name: string): NamedQuery {
-	return { queryName: name };
-}
+export type GqlQuery = { path?: string; query: string };
 
-/** Returns true if the passed object is a GraphQlQuery */
+/** Returns true if the passed object is a Query */
 export function isQuery(obj: any): obj is Query {
-	if (typeof obj !== 'object' || obj === null) return false;
-
-	return typeof obj.query === 'string' || typeof obj.queryName === 'string';
+	return (
+		typeof obj === 'string' ||
+		(typeof obj === 'object' &&
+			obj !== null &&
+			typeof obj.query === 'string')
+	);
 }
 
 /**
@@ -74,11 +58,18 @@ export type QueryOptions = {
 	bearerToken?: string;
 
 	/**
-	 * Configure caching
+	 * Configure Crelte's local query caching.
 	 * @default true
 	 */
 	caching?: boolean;
 
+	/**
+	 * Allow Craft's configured GraphQL caching. Set false to bypass it.
+	 * Does not affect Crelte's caching.
+	 * @default true
+	 */
+	craftCaching?: boolean;
+
 	/**
 	 * Usually automatically set
 	 */
@@ -135,7 +126,7 @@ export default class Queries {
 	}
 
 	/**
-	 * Create a new Queries instance that always intented to call an
+	 * Create a new Queries instance that is always intented to call an
 	 * external GraphQl endpoint.
 	 */
 	static newExternal(endpoint: string, bearerToken?: string): Queries {
@@ -181,6 +172,7 @@ export default class Queries {
 			bearerToken,
 			xCraftSiteId,
 			caching: opts.caching ?? true,
+			craftCaching: opts.craftCaching ?? true,
 		});
 	}
 
@@ -199,6 +191,7 @@ type InnerQueryOptions = {
 	bearerToken: string | null;
 	xCraftSiteId: number | null;
 	caching: boolean;
+	craftCaching: boolean;
 };
 
 class Inner {
@@ -296,13 +289,13 @@ class Inner {
 	): Promise<unknown> {
 		let logName: string, url: URL;
 
-		if ('queryName' in query) {
+		if (typeof query === 'string') {
 			if (!this.frontend)
 				throw new Error('only inline queries supported');
 
-			logName = `query (server: ${query.queryName})`;
+			logName = `query (server: ${query})`;
 			url = new URL(this.frontend);
-			url.pathname = '/queries/' + query.queryName;
+			url.pathname = '/queries/' + query;
 		} else {
 			logName = `query (${query.path ?? 'unknown'})`;
 			url = new URL(this.endpoint);
@@ -320,6 +313,8 @@ class Inner {
 		if (opts.xCraftSiteId)
 			headers['X-Craft-Site'] = opts.xCraftSiteId.toString();
 
+		if (!opts.craftCaching) headers['X-Craft-GQL-Cache'] = 'no-cache';
+
 		if (this.loggingRequests) {
 			console.log(logName + ' to:', url.toString(), vars, headers);
 			headers['X-Debug'] = 'enable';
@@ -329,7 +324,7 @@ class Inner {
 		if (this.loggingTiming) timing = Date.now();
 
 		let body: any;
-		if ('queryName' in query) {
+		if (typeof query === 'string') {
 			body = vars;
 		} else {
 			body = { query: query.query, variables: vars };

package/src/queries/gql.ts

@@ -1,4 +1,4 @@
-import { InlineQuery, isQuery } from './Queries.js';
+import { GqlQuery } from './Queries.js';
 
 /**
  * Create a GraphQL query string with variables.
@@ -13,7 +13,7 @@ import { InlineQuery, isQuery } from './Queries.js';
 export function gql(
 	strings: TemplateStringsArray | string[] | string,
 	...keys: unknown[]
-): InlineQuery {
+): GqlQuery {
 	if (typeof strings === 'string') strings = [strings];
 
 	let query = '';
@@ -24,7 +24,11 @@ export function gql(
 			const variable = keys[i];
 
 			// nesting support
-			if (isQuery(variable) && 'query' in variable) {
+			if (
+				typeof variable === 'object' &&
+				variable !== null &&
+				'query' in variable
+			) {
 				query += variable.query;
 			} else if (typeof variable === 'string') {
 				query += variable;

package/src/queries/index.ts

@@ -1,14 +1,11 @@
 import Queries, {
-	InlineQuery,
+	GqlQuery,
 	isQuery,
-	namedQuery,
-	NamedQuery,
 	QueriesOptions,
 	Query,
 	QueryOptions,
 } from '../queries/Queries.js';
 import type CrelteServerRequest from '../server/CrelteServer.js';
-import ServerRouter from '../server/ServerRouter.js';
 import { gql } from './gql.js';
 import QueryError, { QueryErrorResponse } from './QueryError.js';
 import { QueryVar, ValidIf, vars, varsIdsEqual } from './vars.js';
@@ -18,9 +15,7 @@ export {
 	type QueriesOptions,
 	type QueryOptions,
 	type Query,
-	type InlineQuery as GqlQuery,
-	type NamedQuery,
-	namedQuery,
+	type GqlQuery,
 	isQuery,
 	QueryError,
 	type QueryErrorResponse,
@@ -53,14 +48,14 @@ export type InferVariableTypes<T> = {
  *     category: vars.id()
  * };
  *
- * export const validVars: ValidVars<typeof variables> = (vars, sr) => {
+ * export const validVars: ValidVars<typeof variables> = (vars, csr) => {
  *     if (!vars.category === 5) throw new Error('category needs to be 5');
  * };
  * ```
  */
 export type ValidVars<T extends Record<string, QueryVar<any>>> = (
 	vars: InferVariableTypes<T>,
-	sr: ServerRouter,
+	csr: CrelteServerRequest,
 ) => void | boolean;
 
 /**
@@ -76,12 +71,18 @@ export type ValidVars<T extends Record<string, QueryVar<any>>> = (
  * };
  *
  * export const caching: Caching<typeof variables> =
- *     (queryResponse, variables) => !!queryResponse.entries.length;
+ *     (queryResponse, variables, csr) => !!queryResponse.entries.length;
  * ```
  */
 export type Caching<
 	T extends Record<string, QueryVar<any>> = Record<string, QueryVar<any>>,
-> = boolean | ((response: any, vars: InferVariableTypes<T>) => boolean);
+> =
+	| boolean
+	| ((
+			response: any,
+			vars: InferVariableTypes<T>,
+			csr: CrelteServerRequest,
+	  ) => boolean);
 
 /** use {@link Transfrom} */
 export type TransformFn<
@@ -89,6 +90,7 @@ export type TransformFn<
 > = (
 	response: any,
 	vars: InferVariableTypes<T>,
+	csr: CrelteServerRequest,
 ) => void | any | Promise<void | any>;
 
 /**
@@ -96,11 +98,12 @@ export type TransformFn<
  *
  * #### Example
  * ```ts
- * export const transform: Transform<typeof variables> = (response, vars) => {
- *     for (const entry of response.entries) {
- *         entry.title = entry.title.toUpperCase();
- *     }
- * };
+ * export const transform: Transform<typeof variables> =
+ *     (response, vars, csr) => {
+ *         for (const entry of response.entries) {
+ *             entry.title = entry.title.toUpperCase();
+ *         }
+ *     };
  * ```
  */
 export type Transform<

package/src/queries/vars.ts

@@ -1,4 +1,4 @@
-import ServerRouter from '../server/ServerRouter.js';
+import CrelteServerRequest from '../server/CrelteServer.js';
 
 export const vars = {
 	/**
@@ -65,14 +65,12 @@ export const vars = {
 	siteId: (): QueryVar<number> =>
 		new QueryVar()
 			.number()
-			.validIf(
-				(num, router) => !!router.sites.find(site => site.id === num),
-			),
+			.validIf((num, csr) => !!csr.sites.find(site => site.id === num)),
 };
 
 /// either throw with an error which will get returned in a 400 response or
 // return false if the value is not valid
-export type ValidIf<T> = (v: T, sr: ServerRouter) => boolean;
+export type ValidIf<T> = (v: T, csr: CrelteServerRequest) => boolean;
 
 export class QueryVar<T = any> {
 	private name: string | null;
@@ -135,7 +133,7 @@ export class QueryVar<T = any> {
 		return this;
 	}
 
-	validValue(v: any, cs: ServerRouter): T | null {
+	validValue(v: any, csr: CrelteServerRequest): T | null {
 		// undefined is treated as null
 		if (typeof v === 'undefined') v = null;
 
@@ -229,7 +227,7 @@ export class QueryVar<T = any> {
 				throw new Error('uknown type ' + this.type);
 		}
 
-		if (!this.validIfFn(v, cs))
+		if (!this.validIfFn(v, csr))
 			throw new Error(`variable ${this.name} is not valid`);
 
 		return v;

package/src/routing/route/BaseRoute.ts

@@ -31,13 +31,7 @@ export type BaseRouteOptions = {
  * `replace` and `push` will not call loadData
  */
 export type RouteOrigin =
-	| 'init'
-	| 'manual'
-	| 'preload'
-	| 'click'
-	| 'pop'
-	| 'replace'
-	| 'push';
+	'init' | 'manual' | 'preload' | 'click' | 'pop' | 'replace' | 'push';
 
 /**
  * A Route contains information about the current page for example the url and
@@ -298,6 +292,13 @@ export default class BaseRoute {
 			this.z_context[key] = value;
 		}
 	}
+	/**
+	 * Returns the site preview token, or null if it is missing or empty.
+	 */
+	getSiteToken(): string | null {
+		return this.search.get('siteToken') || null;
+	}
+
 	/**
 	 * Returns true if the route is in live preview mode
 	 */

package/src/routing/router/BaseRouter.ts

@@ -235,9 +235,12 @@ 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 loaded
-		// so let's preload it
-		if (current && current.url.origin === req.url.origin) {
+		// Preload only within the current origin and site preview context.
+		if (
+			current &&
+			current.url.origin === req.url.origin &&
+			current.getSiteToken() === req.getSiteToken()
+		) {
 			// todo i don't wan't to send a CrelteRequest?
 			// todo, it would be nice if this could not have any side effects
 			// but at the moment cr.router.open will cause a redirect

package/src/routing/router/ClientRouter.ts

@@ -20,6 +20,7 @@ export default class ClientRouter extends BaseRouter {
 
 		this.scrollDebounceTimeout = null;
 		this.preloadOnMouseOver = opts.preloadOnMouseOver;
+
 		this.onError = () => {};
 	}
 
@@ -82,13 +83,7 @@ export default class ClientRouter extends BaseRouter {
 			}
 		}
 
-		// 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
-		) {
+		if (this.requiresPageLoad(req)) {
 			window.location.href = req.url.href;
 			return;
 		}
@@ -107,6 +102,11 @@ export default class ClientRouter extends BaseRouter {
 	async pushRequest(req: Request, _opts: RequestOptions = {}) {
 		const url = req.url;
 
+		if (this.requiresPageLoad(req)) {
+			window.location.href = url.href;
+			return;
+		}
+
 		return this.handleRequest(req, route => {
 			window.history.pushState(
 				route.z_toState(),
@@ -119,6 +119,11 @@ export default class ClientRouter extends BaseRouter {
 	async replaceRequest(req: Request, _opts: RequestOptions = {}) {
 		const url = req.url;
 
+		if (this.requiresPageLoad(req)) {
+			window.location.replace(url.href);
+			return;
+		}
+
 		return this.handleRequest(req, () => {
 			window.history.replaceState(
 				req.z_toState(),
@@ -132,6 +137,15 @@ export default class ClientRouter extends BaseRouter {
 		window.history.back();
 	}
 
+	private requiresPageLoad(req: Request): boolean {
+		const current = this.route.get();
+		return (
+			!!current &&
+			(current.url.origin !== req.url.origin ||
+				current.getSiteToken() !== req.getSiteToken())
+		);
+	}
+
 	/**
 	 * This returns a route if it was handled else if an error occured
 	 * or the request was cancelled returns void
@@ -205,6 +219,11 @@ export default class ClientRouter extends BaseRouter {
 			});
 			req.z_fillFromState(e.state);
 
+			if (this.requiresPageLoad(req)) {
+				window.location.reload();
+				return;
+			}
+
 			// todo handle errors
 			this.handleRequest(req, () => {});
 		});
@@ -249,7 +268,9 @@ export default class ClientRouter extends BaseRouter {
 	updateScroll(cr: CrelteRequest, _route: Route): void {
 		const req = cr.req;
 
-		if (req.disableScroll) return;
+		if (req.disableScroll) {
+			return this.onScroll(); // make sure the current scrollY get's stored to the history
+		}
 
 		// scroll to target
 		let scrollTo:

package/src/server/CrelteServer.ts

@@ -86,7 +86,7 @@ export default class CrelteServerRequest {
 	 * returns an env variable from the craft/.env file.
 	 */
 	getEnv(name: 'ENDPOINT_URL'): string;
-	getEnv(name: 'CRAFT_WEB_URL'): string;
+	getEnv(name: 'CRAFT_BASE_CP_URL'): string;
 	getEnv(name: 'FRONTEND_URL'): string;
 	getEnv(name: string): string | null;
 	getEnv(name: string): string | null {

package/src/server/ServerRouter.ts

@@ -81,7 +81,7 @@ export default class ServerRouter {
 	 * returns an env variable from the craft/.env file.
 	 */
 	getEnv(name: 'ENDPOINT_URL'): string;
-	getEnv(name: 'CRAFT_WEB_URL'): string;
+	getEnv(name: 'CRAFT_BASE_CP_URL'): string;
 	getEnv(name: string): string | null;
 	getEnv(name: string): string | null {
 		return this.env.get(name) ?? null;

package/src/server/queries/QueriesCaching.ts

@@ -13,7 +13,6 @@ export default class QueriesCaching {
 	private cacheDir: string | null;
 	private validBearerToken: string | null;
 	debug: boolean;
-	router: ServerRouter;
 
 	constructor(
 		platform: Platform,
@@ -21,7 +20,6 @@ export default class QueriesCaching {
 		opts?: QueriesCachingOptions,
 	) {
 		this.platform = platform;
-		this.router = cs;
 		this.debug = !!opts?.debug;
 
 		const enableCaching = cs.getEnv('CACHING') === 'true';

package/src/server/queries/QueryGqlRoute.ts

@@ -10,6 +10,7 @@ import {
 	validateVars,
 	ValidIfFn,
 } from './routes.js';
+import { cryptoSha1Hash } from '../../utils.js';
 
 export type QueryGqlArgs = {
 	vars: Record<string, QueryVar> | null;
@@ -23,6 +24,7 @@ export type QueryGqlArgs = {
 export default class QueryGqlRoute {
 	name: string;
 	query: string;
+	queryHash: string;
 	vars: Record<string, QueryVar> | null;
 	validIfFn: ValidIfFn | null;
 	cacheIfFn: CacheIfFn | null;
@@ -39,6 +41,7 @@ export default class QueryGqlRoute {
 
 		this.name = name;
 		this.query = query;
+		this.queryHash = query;
 		this.vars = args.vars;
 		this.validIfFn = args.validIfFn;
 		this.cacheIfFn = args.cacheIfFn;
@@ -56,6 +59,10 @@ export default class QueryGqlRoute {
 		else this.fillBasicDefaults();
 	}
 
+	async init() {
+		this.queryHash = await cryptoSha1Hash(this.query);
+	}
+
 	private fillEntryDefaults() {
 		if (this.vars) return;
 
@@ -121,16 +128,11 @@ export default class QueryGqlRoute {
 		let vars: Record<string, any>;
 		try {
 			const reqVars = await csr.req.json();
-			vars = validateVars(
-				this.vars,
-				reqVars,
-				this.validIfFn,
-				caching.router,
-			);
+			vars = validateVars(this.vars, reqVars, this.validIfFn, csr);
 
-			if ('qName' in vars || 'xCraftSite' in vars)
+			if (['qName', 'qHash', 'xCraftSite'].some(name => name in vars))
 				throw new Error(
-					'qName and xCraftSite are reserved variable names',
+					'qName, qHash and xCraftSite are reserved variable names',
 				);
 		} catch (e) {
 			return newError(e, 400);
@@ -141,24 +143,22 @@ export default class QueryGqlRoute {
 			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');
-		}
+		const previewToken = reqSearch.get('token');
+		const 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();
+		const useCache = !previewToken && !siteToken && caching.isEnabled();
 		if (useCache) {
-			cacheKey = await calcKey({ ...vars, qName: this.name, xCraftSite });
+			cacheKey = await calcKey({
+				...vars,
+				qName: this.name,
+				qHash: this.queryHash,
+				xCraftSite,
+			});
 			const cached = await caching.getCache(cacheKey);
 
 			if (logInfo) console.log(`${logInfo} ${cached ? 'hit' : 'miss'}`);
@@ -183,6 +183,10 @@ export default class QueryGqlRoute {
 
 		if (xCraftSite) headers['X-Craft-Site'] = xCraftSite;
 
+		if (csr.req.headers.get('X-Craft-GQL-Cache') === 'no-cache') {
+			headers['X-Craft-GQL-Cache'] = 'no-cache';
+		}
+
 		// now execute the gql request
 		let resp: Response;
 		try {
@@ -223,7 +227,7 @@ export default class QueryGqlRoute {
 
 		// now we have a valid json resp.
 		// should we cache it?
-		if (cacheKey && this.cacheIfFn?.(jsonResp.data, vars)) {
+		if (cacheKey && this.cacheIfFn?.(jsonResp.data, vars, csr)) {
 			try {
 				await caching.setCache(cacheKey, jsonResp);
 				if (logInfo) console.log(logInfo + ' set cache');

package/src/server/queries/QueryHandleRoute.ts

@@ -1,6 +1,5 @@
 import { QueryVar } from '../../queries/vars.js';
 import CrelteServerRequest from '../CrelteServer.js';
-import ServerRouter from '../ServerRouter.js';
 import { HandleFn, newError, validateVars, ValidIfFn } from './routes.js';
 
 // only internal
@@ -22,14 +21,11 @@ export default class QueryHandleRoute {
 		this.vars = vars;
 	}
 
-	async handle(
-		cs: ServerRouter,
-		csr: CrelteServerRequest,
-	): Promise<Response> {
+	async handle(csr: CrelteServerRequest): Promise<Response> {
 		let vars: Record<string, any>;
 		try {
 			const reqVars = await csr.req.json();
-			vars = validateVars(this.vars, reqVars, this.validIfFn, cs);
+			vars = validateVars(this.vars, reqVars, this.validIfFn, csr);
 		} catch (e) {
 			return newError(e, 400);
 		}

package/src/server/queries/queries.ts

@@ -132,6 +132,7 @@ export async function initQueryRoutes(
 				);
 
 			const route = new QueryGqlRoute(name, rb.query, rb);
+			await route.init();
 
 			router.post('/queries/' + route.name, csr =>
 				route.handle(caching, csr),
@@ -147,9 +148,7 @@ export async function initQueryRoutes(
 				rb.vars,
 			);
 
-			router.post('/queries/' + route.name, csr =>
-				route.handle(caching.router, csr),
-			);
+			router.post('/queries/' + route.name, csr => route.handle(csr));
 		} else {
 			throw new Error(
 				`query js/ts ${name} file needs to either have ` +

package/src/server/queries/routes.ts

@@ -1,13 +1,16 @@
 import { QueryVar } from '../../queries/vars.js';
 import CrelteServerRequest from '../CrelteServer.js';
-import ServerRouter from '../ServerRouter.js';
 
-export type CacheIfFn = (response: any, vars: Record<string, any>) => boolean;
+export type CacheIfFn = (
+	response: any,
+	vars: Record<string, any>,
+	csr: CrelteServerRequest,
+) => boolean;
 
 /// Either throw or return a boolean
 export type ValidIfFn = (
 	vars: Record<string, any>,
-	sr: ServerRouter,
+	csr: CrelteServerRequest,
 ) => void | boolean;
 
 /// Anything other than returning undefined will replace the response
@@ -33,7 +36,7 @@ export function validateVars(
 	qvars: Record<string, QueryVar> | null,
 	vars: any,
 	validIfFn: ValidIfFn | null,
-	sr: ServerRouter,
+	csr: CrelteServerRequest,
 ): Record<string, any> {
 	if (!vars || typeof vars !== 'object')
 		throw new Error('expected an object as vars');
@@ -43,12 +46,12 @@ export function validateVars(
 	const nVars: Record<string, any> = {};
 
 	for (const [k, v] of Object.entries(qvars)) {
-		nVars[k] = v.validValue(vars[k], sr);
+		nVars[k] = v.validValue(vars[k], csr);
 	}
 
 	if (validIfFn) {
 		// or throw
-		const valid = validIfFn(nVars, sr);
+		const valid = validIfFn(nVars, csr);
 		if (typeof valid === 'boolean' && !valid)
 			throw new Error('invalid variables for query');
 	}