crelte 0.2.2 → 0.3.1

package/src/Crelte.ts

@@ -1,15 +1,68 @@
 import ClientCookies from './cookies/ClientCookies.js';
 import { Cookies } from './cookies/index.js';
 import ServerCookies from './cookies/ServerCookies.js';
-import GraphQl, { GraphQlOptions, GraphQlQuery } from './graphql/GraphQl.js';
-import Globals, { Global, GlobalData } from './loadData/Globals.js';
+import GraphQl, { GraphQlQuery } from './graphql/GraphQl.js';
+import { CrelteRequest } from './index.js';
+import Globals, { Global } from './loadData/Globals.js';
 import Events from './plugins/Events.js';
 import Plugins, { Plugin } from './plugins/Plugins.js';
-import Router, { RouterOptions } from './routing/Router.js';
+import type Route from './routing/Route.js';
+import type Request from './routing/Request.js';
+import Router from './routing/Router.js';
 import { SiteFromGraphQl } from './routing/Site.js';
 import SsrCache from './ssr/SsrCache.js';
 
+export type Config = {
+	/**
+	 * Preload pages on mouse over
+	 * @default false
+	 */
+	preloadOnMouseOver?: boolean;
+
+	/**
+	 * Use view transitions
+	 * @default false
+	 */
+	viewTransition?: boolean;
+
+	/**
+	 * Play the intro animation
+	 * @default false
+	 */
+	playIntro?: boolean;
+
+	/**
+	 * Enable X-Craft-Site Header
+	 * @default false
+	 */
+	XCraftSiteHeader?: boolean;
+
+	// debug
+
+	/**
+	 * Enable graphql query debugging
+	 * @default false
+	 */
+	debugGraphQl?: boolean;
+
+	/**
+	 * Enable request and render timing measurement
+	 * @default false
+	 */
+	debugTiming?: boolean;
+};
+
+const defaultConfig: Config = {
+	preloadOnMouseOver: false,
+	viewTransition: false,
+	playIntro: false,
+	XCraftSiteHeader: false,
+	debugGraphQl: false,
+	debugTiming: false,
+};
+
 export class CrelteBuilder {
+	config: Config;
 	ssrCache: SsrCache;
 	plugins: Plugins;
 	events: Events;
@@ -18,7 +71,9 @@ export class CrelteBuilder {
 	globals: Globals;
 	cookies: Cookies;
 
-	constructor() {
+	constructor(config: Config) {
+		this.config = { ...defaultConfig, ...config };
+
 		this.ssrCache = new SsrCache();
 		this.plugins = new Plugins();
 		this.events = new Events();
@@ -29,12 +84,19 @@ export class CrelteBuilder {
 			: new ClientCookies();
 	}
 
-	setupGraphQl(endpoint: string, opts: GraphQlOptions = {}) {
-		this.graphQl = new GraphQl(endpoint, this.ssrCache, opts);
+	setupGraphQl(endpoint: string) {
+		this.graphQl = new GraphQl(endpoint, this.ssrCache, {
+			XCraftSiteHeader: this.config.XCraftSiteHeader,
+			debug: this.config.debugGraphQl,
+			debugTiming: this.config.debugTiming,
+		});
 	}
 
-	setupRouter(sites: SiteFromGraphQl[], opts: RouterOptions = {}) {
-		this.router = new Router(sites, opts);
+	setupRouter(sites: SiteFromGraphQl[]) {
+		this.router = new Router(sites, {
+			preloadOnMouseOver: this.config.preloadOnMouseOver,
+			debugTiming: this.config.debugTiming,
+		});
 	}
 
 	setupCookies(cookies: string) {
@@ -67,12 +129,20 @@ export type QueryOptions = {
 	 * `ignoreStatusCode` is set to `true`
 	 */
 	status?: number;
+
+	/**
+	 * A GraphQl Token generated in Craft
+	 */
+	bearerToken?: string;
 };
 
 /**
  * This is the main class of Crelte and can be accessed
- * in component initialisation via `getCrelte()` and is the
- * first parameter in `loadData`
+ * in component initialisation via `getCrelte()`
+ *
+ * Crelte is stateless, which means it is not associated with
+ * a specific route or site. If you need a statefull crelte
+ * use the function `toCrelteRequest`
  */
 export default class Crelte {
 	protected _ssrCache: SsrCache;
@@ -172,8 +242,20 @@ export default class Crelte {
 	 * always return null. In that context you should use
 	 * `CrelteRequest.getGlobalAsync`
 	 */
-	getGlobal<T extends GlobalData>(name: string): Global<T> | null {
-		return this.globals.get(name) ?? null;
+	getGlobalStore<T = any>(name: string): Global<T> | null {
+		return this.globals.getStore(name) ?? null;
+	}
+
+	/**
+	 * returns a new CrelteRequest instance either with the current
+	 * route or a provided one
+	 *
+	 * ## Note
+	 * This is useful if you want to create a stateful crelte
+	 * to use in loadData context
+	 */
+	toRequest(req?: Route | Request): CrelteRequest {
+		return CrelteRequest.fromCrelte(this, req);
 	}
 
 	/**
@@ -191,7 +273,7 @@ export default class Crelte {
 	): Promise<unknown> {
 		// this function is added as convenience
 		return this.graphQl.query(query, variables, {
-			route: this.router.route.get(),
+			route: this.router.route.get() ?? undefined,
 			...opts,
 		});
 	}

package/src/CrelteRequest.ts

@@ -3,7 +3,6 @@ import { GraphQlQuery } from './graphql/GraphQl.js';
 import Site from './routing/Site.js';
 import Request from './routing/Request.js';
 import Route from './routing/Route.js';
-import { GlobalData } from './loadData/Globals.js';
 
 export default class CrelteRequest extends Crelte {
 	/**
@@ -11,13 +10,10 @@ export default class CrelteRequest extends Crelte {
 	 */
 	req: Request;
 
-	private innerGlobals: Map<string, any>;
-
 	constructor(inner: Crelte, req: Request) {
 		super(inner);
 
 		this.req = req;
-		this.innerGlobals = new Map();
 	}
 
 	/**
@@ -25,14 +21,17 @@ export default class CrelteRequest extends Crelte {
 	 *
 	 * If you don't provide a route or request the current route
 	 * will be used.
-	 *
-	 * ## Note
-	 * If you provide a route it must contain a site or you must
-	 * provide one,
 	 */
-	static fromCrelte(inner: Crelte, req?: Route | Request): CrelteRequest {
+	static fromCrelte(
+		inner: Crelte | CrelteRequest,
+		req?: Route | Request,
+	): CrelteRequest {
+		if (inner instanceof CrelteRequest && !req) return inner;
+
 		if (!req) {
-			req = inner.router.route.get();
+			req = inner.router.route.get() ?? undefined;
+			// this will only occur in the first loadData call
+			if (!req) throw new Error('router does not contain a route');
 		}
 
 		return new CrelteRequest(
@@ -46,6 +45,7 @@ export default class CrelteRequest extends Crelte {
 	 * @deprecated
 	 */
 	get route(): Request {
+		console.warn('CrelteRequest.route is deprecated, use .req instead');
 		return this.req;
 	}
 
@@ -69,8 +69,8 @@ export default class CrelteRequest extends Crelte {
 	 * always return null. In that context you should use
 	 * `.getGlobalAsync`
 	 */
-	getGlobal<T extends GlobalData>(name: string): T | null {
-		return this.innerGlobals.get(name) ?? null;
+	getGlobal<T = any>(name: string): T | null {
+		return this.globals.get(name, this.site.id);
 	}
 
 	/**
@@ -80,16 +80,8 @@ export default class CrelteRequest extends Crelte {
 	 * This is only useful in loadGlobalData in all other cases
 	 * you can use `.getGlobal` which does return a Promise
 	 */
-	async getGlobalAsync<T extends GlobalData>(
-		name: string,
-	): Promise<T | null> {
-		const global = this.innerGlobals.get(name);
-		if (global) return global;
-
-		const r = await this.globals.getAsync<T>(name);
-		if (!r) return null;
-
-		return r.bySiteId(this.site.id);
+	async getGlobalAsync<T = any>(name: string): Promise<T | null> {
+		return this.globals.getAsync(name, this.site.id);
 	}
 
 	/**
@@ -111,9 +103,4 @@ export default class CrelteRequest extends Crelte {
 			...opts,
 		});
 	}
-
-	/** @hidden */
-	_globalDataLoaded() {
-		this.innerGlobals = this.globals._globalsBySite(this.site.id);
-	}
 }

package/src/graphql/GraphQl.ts

@@ -54,6 +54,7 @@ export class GraphQlError extends Error {
  * Options for the GraphQl class
  */
 export type GraphQlOptions = {
+	XCraftSiteHeader?: boolean;
 	debug?: boolean;
 	debugTiming?: boolean;
 };
@@ -70,12 +71,15 @@ export type GraphQlOptions = {
  */
 export type GraphQlRequestOptions = {
 	path?: string;
-	// !! the route here might not contain a site even if the types
-	// says it does. CrelteServer does not know about site
+	/**
+	 * !! the route here might not contain a site even if the types
+	 * says it does. CrelteServer does not know about site
+	 */
 	route?: Route | URL;
 	ignoreStatusCode?: boolean;
 	previewToken?: string;
 	siteToken?: string;
+	bearerToken?: string;
 	caching?: boolean;
 	headers?: Record<string, string>;
 	// will be set by the request function
@@ -93,6 +97,7 @@ export default class GraphQl {
 		[(resp: unknown) => void, (error: unknown) => void][]
 	>;
 
+	private XCraftSiteHeader: boolean;
 	private loggingRequests: boolean;
 	private loggingTiming: boolean;
 
@@ -108,6 +113,7 @@ export default class GraphQl {
 		this.ssrCache = ssrCache;
 		this.listeners = new Map();
 
+		this.XCraftSiteHeader = opts?.XCraftSiteHeader ?? false;
 		this.loggingRequests = opts?.debug ?? false;
 		this.loggingTiming = opts?.debugTiming ?? false;
 	}
@@ -129,15 +135,25 @@ export default class GraphQl {
 			const search =
 				(opts.route as URL).searchParams ?? opts.route.search;
 
-			// todo should variables contain siteId
-			// or maybe gql should detect loadData and add it there
-			// it might make export const loadData = query; easier
-
 			if (search.has('token') && search.get('x-craft-live-preview')) {
 				opts.previewToken = search.get('token')!;
 			} else if (search.has('siteToken')) {
 				opts.siteToken = search.get('siteToken')!;
 			}
+
+			// if the siteId is not set we set it as an argument for
+			// convenience
+			if ((opts.route as Route).site) {
+				if (this.XCraftSiteHeader && !opts.headers?.['X-Craft-Site']) {
+					opts.headers = opts.headers ?? {};
+					opts.headers['X-Craft-Site'] =
+						(opts.route as Route).site.id + '';
+				}
+
+				if (typeof variables.siteId === 'undefined') {
+					variables.siteId = (opts.route as Route).site.id;
+				}
+			}
 		}
 
 		opts.path = query.path;
@@ -220,6 +236,9 @@ export default class GraphQl {
 		const headers = opts?.headers ?? {};
 		headers['Content-Type'] = 'application/json';
 
+		if (opts?.bearerToken)
+			headers['Authorization'] = 'Bearer ' + opts.bearerToken;
+
 		if (this.loggingRequests) {
 			console.log('query to ', url, variables, opts);
 			headers['X-Debug'] = 'enable';

package/src/index.ts

@@ -4,9 +4,9 @@ import type Router from './routing/Router.js';
 import type SsrCache from './ssr/SsrCache.js';
 import type Site from './routing/Site.js';
 import type GraphQl from './graphql/GraphQl.js';
-import Crelte, { type QueryOptions } from './Crelte.js';
+import Crelte, { type QueryOptions, type Config } from './Crelte.js';
 import CrelteRequest from './CrelteRequest.js';
-import type { Global, GlobalData } from './loadData/Globals.js';
+import type { Global } from './loadData/Globals.js';
 import type { Cookies } from './cookies/index.js';
 import type { Readable } from 'crelte-std/stores';
 import {
@@ -19,6 +19,7 @@ import {
 export {
 	Crelte,
 	CrelteRequest,
+	type Config,
 	type QueryOptions,
 	type LoadData,
 	type LoadDataFn,
@@ -73,7 +74,10 @@ export function getGraphQl(): GraphQl {
  * This only works during component initialisation.
  */
 export function getRoute(): Readable<Route> {
-	return getRouter().route;
+	// the route will never be null because it is only null in the
+	// first loadData call and that happens before any component
+	// initialisation
+	return getRouter().route as Readable<Route>;
 }
 
 /**
@@ -83,7 +87,10 @@ export function getRoute(): Readable<Route> {
  * This only works during component initialisation.
  */
 export function getSite(): Readable<Site> {
-	return getRouter().site;
+	// the site will never be null because it is only null in the
+	// first loadData call and that happens before any component
+	// initialisation
+	return getRouter().site as Readable<Site>;
 }
 
 /**
@@ -127,10 +134,8 @@ export function getLoadingProgress(): Readable<number> {
  * ## Note
  * This only works during component initialisation.
  */
-export function getGlobal<T extends GlobalData>(
-	name: string,
-): Global<T> | null {
-	return getCrelte().globals.get(name) ?? null;
+export function getGlobal<T = any>(name: string): Global<T> | null {
+	return getCrelte().globals.getStore(name);
 }
 
 /**
@@ -143,6 +148,12 @@ export function getCookies(): Cookies {
 	return getCrelte().cookies;
 }
 
+/**
+ * Listen for route changes
+ *
+ * ## Note
+ * This only works during component initialisation.
+ */
 export function onRoute(fn: (route: Route, crelte: Crelte) => void) {
 	const crelte = getCrelte();
 	const rmListener = crelte.router.onRoute(route => {

package/src/init/client.ts

@@ -17,40 +17,13 @@ export type MainData = {
 	entryQuery: GraphQlQuery;
 	/** The global query from queries/global.graphql */
 	globalQuery?: GraphQlQuery;
-
-	// options
-
-	/**
-	 * Preload pages on mouse over
-	 * @default false
-	 */
-	preloadOnMouseOver?: boolean;
-
-	/**
-	 * Use view transitions
-	 * @default false
-	 */
-	viewTransition?: boolean;
-
-	/**
-	 * Play the intro animation
-	 * @default false
-	 */
-	playIntro?: boolean;
-
-	// debug
-
-	/** Enable graphql query debugging */
-	graphQlDebug?: boolean;
-
-	/** Enable request and render timing measurement */
-	debugTiming?: boolean;
 };
 
 const mainDataDefault = {
 	preloadOnMouseOver: false,
 	viewTransition: false,
 	playIntro: false,
+	XCraftSiteHeader: false,
 
 	// will be passed down to ClientRenderer
 	graphQlDebug: false,
@@ -95,20 +68,15 @@ export function main(data: MainData) {
 
 	// construct Crelte
 
-	const builder = new CrelteBuilder();
+	const builder = new CrelteBuilder(data.app.config ?? {});
 	const endpoint = builder.ssrCache.get('ENDPOINT_URL') as string;
-	builder.setupGraphQl(endpoint, {
-		debug: data.graphQlDebug,
-		debugTiming: data.debugTiming,
-	});
+	builder.setupGraphQl(endpoint);
 
 	// on the client the cookies are always coming from document.cookie
 	builder.setupCookies('');
 
 	const csites = builder.ssrCache.get('crelteSites') as SiteFromGraphQl[];
-	builder.setupRouter(csites, {
-		preloadOnMouseOver: data.preloadOnMouseOver,
-	});
+	builder.setupRouter(csites);
 
 	const crelte = builder.build();
 
@@ -146,7 +114,7 @@ export function main(data: MainData) {
 				props,
 				hydrate: true,
 				context: crelte._getContext(),
-				intro: data.playIntro,
+				intro: builder.config.playIntro,
 			});
 		} else {
 			appInstance.$set(props);
@@ -161,7 +129,8 @@ export function main(data: MainData) {
 		if (!success) {
 			// if this is not the first load we should reload the page
 			// we don't reload everytime because this might cause a reload loop
-			// and since the first load will probably just contain ssrCache data in almost all cases the first load will never faill
+			// and since the first load will probably just contain ssrCache data
+			// in almost all cases the first load will never faill
 			if (!isFirstLoad) {
 				// the load might contain a js error and we prefer the error
 				// page
@@ -174,7 +143,7 @@ export function main(data: MainData) {
 
 		const cr = new CrelteRequest(crelte, req);
 
-		const startTime = data.debugTiming ? Date.now() : null;
+		const startTime = builder.config.debugTiming ? Date.now() : null;
 		let render = async () => {
 			// we should trigger the route update here
 			pluginsBeforeRender(cr);
@@ -194,7 +163,7 @@ export function main(data: MainData) {
 
 		// render with view Transition if enabled and not in hydration
 		if (
-			data.viewTransition &&
+			builder.config.viewTransition &&
 			appInstance &&
 			(document as any).startViewTransition
 		) {

package/src/init/server.ts

@@ -33,14 +33,6 @@ export type MainData = {
 
 	/** Server data provided by crelte-node */
 	serverData: ServerData;
-
-	// debug
-
-	/** Enable graphql query debugging */
-	graphQlDebug?: boolean;
-
-	/** Enable request and render timing measurement */
-	debugTiming?: boolean;
 };
 
 /**
@@ -69,7 +61,7 @@ export async function main(data: MainData): Promise<{
 	html?: string;
 	setCookies?: string[];
 }> {
-	const builder = new CrelteBuilder();
+	const builder = new CrelteBuilder(data.app.config ?? {});
 
 	// setup viteEnv
 	data.serverData.viteEnv.forEach((v, k) => {
@@ -79,10 +71,7 @@ export async function main(data: MainData): Promise<{
 	const endpoint = data.serverData.endpoint;
 	builder.ssrCache.set('ENDPOINT_URL', endpoint);
 	builder.ssrCache.set('CRAFT_WEB_URL', data.serverData.craftWeb);
-	builder.setupGraphQl(endpoint, {
-		debug: data.graphQlDebug,
-		debugTiming: data.debugTiming,
-	});
+	builder.setupGraphQl(endpoint);
 
 	const cookies = data.serverData.cookies ?? '';
 	builder.setupCookies(cookies);

package/src/init/shared.ts

@@ -79,27 +79,29 @@ export async function loadFn<D, E, T>(
 	}
 
 	let globalProm: Promise<any> | null = null;
-	if (globalQuery && !cr.globals._wasLoaded()) {
+	if (globalQuery && !cr.globals._wasLoaded(cr.site.id)) {
 		globalProm = (async () => {
-			const res = await cr.query(globalQuery);
+			const res = await cr.query(globalQuery, {
+				siteId: cr.site.id,
+			});
 			// we need to do this sorcery here and can't wait until all
 			// globals functions are done, because some global function
 			// might want to use globals, and for that the function
-			// getOrWait exists on Globals
+			// getAsync exists on Globals
 			cr.globals._setData(cr.site.id, res);
 			return res;
 		})();
 	}
 
 	let pageProm = null;
-	if (cr.req.site) {
+	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.req.site.id,
+			siteId: cr.site.id,
 		});
 	}
 
@@ -117,15 +119,12 @@ export async function loadFn<D, E, T>(
 
 	if (global) {
 		cr.globals._setData(cr.site.id, global);
-	} else if (!cr.globals._wasLoaded()) {
+	} 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, {});
 	}
 
-	// allow cr to get the global data
-	cr._globalDataLoaded();
-
 	const entry = getEntry(page);
 
 	let template;