crelte 0.5.10 → 0.5.12

package/src/init/client.ts

@@ -3,6 +3,7 @@ import {
 	loadFn,
 	newQueries,
 	onNewCrelteRequest,
+	pluginsAfterRender,
 	pluginsBeforeRender,
 	pluginsBeforeRequest,
 	setupPlugins,
@@ -19,6 +20,9 @@ import Plugins from '../plugins/Plugins.js';
 import Events from '../plugins/Events.js';
 import Globals from '../loadData/Globals.js';
 import { Writable } from '../std/stores/index.js';
+import ClientBodyClass from '../bodyClass/ClientBodyClass.js';
+import { BodyClass } from '../bodyClass/index.js';
+import { Cookies } from '../cookies/index.js';
 
 /**
  * The main function to start the client side rendering
@@ -37,16 +41,9 @@ export type MainData = {
  * ```js
  * import * as app from './App.svelte';
  * import * as errorPage from './Error.svelte';
- * import entryQuery from './queries/entry.graphql';
- * import globalQuery from './queries/global.graphql';
  * import { main } from 'crelte/client';
  *
- * main({
- *     app,
- *     errorPage,
- *     entryQuery,
- *     globalQuery,
- * });
+ * main({ app, errorPage });
  * ```
  */
 export async function main(data: MainData) {
@@ -81,7 +78,6 @@ export async function main(data: MainData) {
 	});
 
 	const queries = newQueries(ssrCache, router.route.readonly(), config);
-	const cookies = new ClientCookies();
 
 	const crelte = newCrelte({
 		config,
@@ -91,7 +87,8 @@ export async function main(data: MainData) {
 		globals: new Globals(),
 		router: new Router(router),
 		queries,
-		cookies,
+		cookies: new Cookies(new ClientCookies()),
+		bodyClass: new BodyClass(new ClientBodyClass()),
 	});
 
 	const app = new InternalApp(data.app);
@@ -108,22 +105,22 @@ export async function main(data: MainData) {
 
 	// render Space
 
-	let appInstance: any;
-	let routeProp: Writable<Route>;
+	let routeProp: Writable<Route> | null = null;
 	const renderApp = (route: Route) => {
-		if (appInstance) {
-			routeProp!.set(route);
+		if (routeProp) {
+			routeProp.set(route);
 			return;
 		}
 
 		routeProp = new Writable(route);
-		appInstance = svelteMount(data.app.default, {
+		svelteMount(data.app.default, {
 			target: document.body,
 			props: { route: routeProp },
 			context: new Map([['crelte', crelte]]),
 			intro: config.playIntro,
 		});
 	};
+	const appMounted = () => !!routeProp;
 
 	router.onError = (e, req) => {
 		console.error('routing failed:', e, 'reloading trying to fix it');
@@ -133,12 +130,12 @@ export async function main(data: MainData) {
 	};
 
 	router.onRender = async (cr, readyForRoute, domUpdated) => {
-		if (appInstance && cr.req.disableLoadData) {
+		if (appMounted() && cr.req.disableLoadData) {
 			// if the app is already rendered and entry did not change
-			// we just wan't to run domUpdated because we don't wan't to update anything
+			// we just wan't to run domUpdated because we don't want to update anything
 
 			const route = readyForRoute();
-			cr.router._requestCompleted();
+			cr.router.z_requestCompleted();
 			// globals should not be run because they will be empty
 			// since nobody called loadGlobalData (todo maybe globals should also,
 			// know if it accepts updates)
@@ -147,6 +144,7 @@ export async function main(data: MainData) {
 			await tick();
 
 			domUpdated(cr, route);
+			pluginsAfterRender(cr, route);
 
 			return route;
 		}
@@ -155,10 +153,16 @@ export async function main(data: MainData) {
 
 		let render = async () => {
 			const route = readyForRoute();
-			cr.router._requestCompleted();
-			if (route.entryChanged) cr.globals.z_syncToStores();
-			// we should trigger the route update here
-			pluginsBeforeRender(cr, route);
+			cr.router.z_requestCompleted();
+			// this is only important on the first render
+			// else we will catch an earlier branch in onRender
+			if (route.entryChanged) {
+				cr.globals.z_syncToStores();
+				pluginsBeforeRender(cr, route);
+				cr.cookies.z_render();
+				cr.bodyClass.z_render();
+			}
+
 			renderApp(route);
 
 			await tick();
@@ -170,6 +174,7 @@ export async function main(data: MainData) {
 			}
 
 			domUpdated(cr, route);
+			pluginsAfterRender(cr, route);
 
 			return route;
 		};
@@ -177,7 +182,7 @@ export async function main(data: MainData) {
 		// render with view Transition if enabled and not in hydration
 		if (
 			config.viewTransition &&
-			appInstance &&
+			appMounted() &&
 			(document as any).startViewTransition
 		) {
 			const prevRender = render;
@@ -218,8 +223,8 @@ function handleLoadError(e: any) {
 
 	// Messages in different languages
 	const messages: Record<string, string> = {
-		en: 'An error has occurred. Please reload the page or try again later.',
 		de: 'Leider ist ein Fehler aufgetreten. Laden Sie die Seite neu, oder versuchen Sie es später noch mal.',
+		en: 'An error has occurred. Please reload the page or try again later.',
 		fr: 'Une erreur s’est produite. Veuillez recharger la page ou réessayer plus tard.',
 		it: 'Si è verificato un errore. Ricarica la pagina o riprova più tardi.',
 		nl: 'Er is een fout opgetreden. Herlaad de pagina of probeer het later opnieuw.',

package/src/init/server.ts

@@ -23,6 +23,9 @@ import {
 	RenderRequest,
 	RenderResponse,
 } from '../server/shared.js';
+import ServerBodyClass from '../bodyClass/ServerBodyClass.js';
+import BodyClass from '../bodyClass/BodyClass.js';
+import { Cookies } from '../cookies/index.js';
 
 export { type RenderRequest, type RenderResponse } from '../server/shared.js';
 
@@ -75,6 +78,7 @@ export async function main(data: MainData): Promise<RenderResponse> {
 	ssrCache.set('FRONTEND_URL', data.serverData.frontend);
 
 	const cookies = new ServerCookies(data.serverData.headers);
+	const bodyClass = new ServerBodyClass();
 
 	ssrCache.set('crelteSites', data.serverData.sites);
 	const router = new ServerRouter(
@@ -93,7 +97,8 @@ export async function main(data: MainData): Promise<RenderResponse> {
 		globals: new Globals(),
 		router: new Router(router),
 		queries,
-		cookies,
+		cookies: new Cookies(cookies),
+		bodyClass: new BodyClass(bodyClass),
 	});
 
 	const app = new InternalApp(data.app);
@@ -108,9 +113,11 @@ export async function main(data: MainData): Promise<RenderResponse> {
 
 	router.onRender = (cr, readyForRoute, _domUpdated) => {
 		const route = readyForRoute();
-		cr.router._requestCompleted();
+		cr.router.z_requestCompleted();
 		cr.globals.z_syncToStores();
 		pluginsBeforeRender(cr, route);
+		cr.cookies.z_render();
+		cr.bodyClass.z_render();
 
 		return route;
 	};
@@ -121,7 +128,7 @@ export async function main(data: MainData): Promise<RenderResponse> {
 	// if redirect
 	if (!route) {
 		const headers = new Headers();
-		(crelte.cookies as ServerCookies)._populateHeaders(headers);
+		cookies._populateHeaders(headers);
 
 		return {
 			status: req.statusCode ?? 302,
@@ -153,6 +160,7 @@ export async function main(data: MainData): Promise<RenderResponse> {
 		'<!--page-lang-->',
 		route.site.language,
 	);
+	htmlTemplate = bodyClass.z_processHtmlTemplate(htmlTemplate);
 
 	const finalHtml = htmlTemplate
 		.replace('</head>', head + '\n\t</head>')
@@ -161,7 +169,7 @@ export async function main(data: MainData): Promise<RenderResponse> {
 	const entry = route.entry;
 
 	const headers = new Headers();
-	(crelte.cookies as ServerCookies)._populateHeaders(headers);
+	cookies._populateHeaders(headers);
 
 	return {
 		status:

package/src/init/shared.ts

@@ -32,6 +32,11 @@ export function pluginsBeforeRequest(cr: CrelteRequest): Promise<void> | void {
 
 export function pluginsBeforeRender(cr: CrelteRequest, route: Route): void {
 	cr.events.trigger('beforeRender', cr, route);
+	cr.plugins.z_render(cr, route);
+}
+
+export function pluginsAfterRender(cr: CrelteRequest, route: Route): void {
+	cr.events.trigger('afterRender', cr, route);
 }
 
 export function newQueries(
@@ -64,12 +69,15 @@ export function onNewCrelteRequest(
 		...crelte,
 		router: crelte.router.z_toRequest(req),
 		queries: crelte.queries.z_toRequest(req),
+		plugins: crelte.plugins.z_toRequest(req),
 		globals: crelte.globals.z_toRequest(),
+		cookies: crelte.cookies.z_toRequest(),
+		bodyClass: crelte.bodyClass.z_toRequest(),
 	};
 	return crelteToRequest(nCrelte, req);
 }
 
-async function pluginsLoadEntry(cr: CrelteRequest): Promise<Entry | null> {
+async function eventsLoadEntry(cr: CrelteRequest): Promise<Entry | null> {
 	const listeners = cr.events.getListeners('loadEntry');
 
 	for (const loadEntry of listeners) {
@@ -123,7 +131,7 @@ export async function loadFn(
 	// checked to be empty before doing it
 	const entryProm = (async () => {
 		// first let's try to call the plugin loadEntry
-		let entry = await pluginsLoadEntry(cr);
+		let entry = await eventsLoadEntry(cr);
 		if (isCanceled()) return [];
 
 		// if no plugin provides an entry we load it from the app
@@ -152,7 +160,8 @@ export async function loadFn(
 		return [entry, template] as [Entry, TemplateModule];
 	})();
 
-	const pluginsLoadGlobalData = cr.events.trigger('loadGlobalData', cr);
+	const eventsLoadGlobalData = cr.events.trigger('loadGlobalData', cr);
+	const pluginsLoadGlobalData = cr.plugins.z_loadGlobalData(cr);
 
 	// loading progress is at 20%
 	loadOpts?.setProgress(0.2);
@@ -160,6 +169,7 @@ export async function loadFn(
 	const loadGlobalDataProm = Promise.all([
 		globalProm,
 		entryProm,
+		...eventsLoadGlobalData,
 		...pluginsLoadGlobalData,
 	]);
 
@@ -167,7 +177,7 @@ export async function loadFn(
 	// we force resolve them to prevent deadlocks
 	if (
 		import.meta.env.DEV &&
-		!(await Promise.any([loadGlobalDataProm, timeout(2000)]))
+		!(await Promise.race([loadGlobalDataProm, timeout(2000)]))
 	) {
 		console.error(
 			'DEV: globals took longer than 2 seconds to load. ' +
@@ -184,8 +194,6 @@ export async function loadFn(
 	// loading progress is at 60%
 	loadOpts?.setProgress(0.6);
 
-	const pluginsLoadData = cr.events.trigger('loadData', cr, entry);
-
 	let loadDataProm = null;
 	if (template.loadData) {
 		loadDataProm = callLoadData(template.loadData, cr, entry);
@@ -196,9 +204,13 @@ export async function loadFn(
 		entryDataProm = callLoadData(app.loadEntryData, cr, entry);
 	}
 
+	const eventsLoadData = cr.events.trigger('loadData', cr, entry);
+	const pluginsLoadData = cr.plugins.z_loadData(cr);
+
 	const [templateData, entryData] = await Promise.all([
 		loadDataProm,
 		entryDataProm,
+		...eventsLoadData,
 		...pluginsLoadData,
 	]);
 

package/src/loadData/Globals.ts

@@ -131,7 +131,7 @@ export default class Globals {
 	 * @hidden
 	 * call this before starting the loadGlobalData phase
 	 */
-	z_toRequest() {
+	z_toRequest(): Globals {
 		const nGlobals = new Globals(this.stores);
 		nGlobals.waiters = new Map();
 		nGlobals.newData = new Map();

package/src/node/index.ts

@@ -166,7 +166,7 @@ export default async function createServer(serverMod: any, buildTime: string) {
 		} catch (e) {
 			basicError(res, e);
 		}
-	}).listen(8080);
+	}).listen(process.env.PORT ?? 8080);
 }
 
 function basicError(res: ServerResponse, err: any) {

package/src/plugins/Events.ts

@@ -32,6 +32,9 @@ export default class Events {
 	 * Will be executed in preload as well.
 	 *
 	 * @returns a function to remove the listener
+	 *
+	 * #### afterRender
+	 * Note this will also be executed when disableLoadData is true
 	 */
 	// override this function to add your own function signatures
 	on(
@@ -40,7 +43,7 @@ export default class Events {
 	): () => void;
 	on(
 		ev: 'loadGlobalData',
-		fn: (cr: CrelteRequest) => Promise<any>,
+		fn: (cr: CrelteRequest) => Promise<any> | any,
 	): () => void;
 	on(
 		ev: 'loadEntry',
@@ -52,13 +55,20 @@ export default class Events {
 	): () => void;
 	on(
 		ev: 'afterLoadEntry',
-		fn: (cr: CrelteRequest) => Promise<any>,
+		fn: (cr: CrelteRequest) => Promise<any> | any,
 	): () => void;
 	on(
 		ev: 'loadData',
-		fn: (cr: CrelteRequest, entry: Entry) => Promise<any>,
+		fn: (cr: CrelteRequest, entry: Entry) => Promise<any> | any,
+	): () => void;
+	on(
+		ev: 'beforeRender',
+		fn: (cr: CrelteRequest, route: Route) => void,
+	): () => void;
+	on(
+		ev: 'afterRender',
+		fn: (cr: CrelteRequest, route: Route) => void,
 	): () => void;
-	on(ev: 'beforeRender', fn: (cr: CrelteRequest) => void): () => void;
 	on(ev: string, fn: (...args: any[]) => any): () => void {
 		let set = this.inner.get(ev);
 		if (!set) {
@@ -95,15 +105,20 @@ export default class Events {
 	 * Trigger an event
 	 */
 	trigger(ev: 'beforeRequest', cr: CrelteRequest): (Promise<void> | void)[];
-	trigger(ev: 'loadGlobalData', cr: CrelteRequest): Promise<any>[];
+	trigger(ev: 'loadGlobalData', cr: CrelteRequest): (Promise<any> | any)[];
 	trigger(
 		ev: 'beforeQueryEntry',
 		cr: CrelteRequest,
 		vars: EntryQueryVars,
 	): (Promise<void> | void)[];
-	trigger(ev: 'afterLoadEntry', cr: CrelteRequest): Promise<any>[];
-	trigger(ev: 'loadData', cr: CrelteRequest, entry: Entry): Promise<any>[];
+	trigger(ev: 'afterLoadEntry', cr: CrelteRequest): (Promise<any> | any)[];
+	trigger(
+		ev: 'loadData',
+		cr: CrelteRequest,
+		entry: Entry,
+	): (Promise<any> | any)[];
 	trigger(ev: 'beforeRender', cr: CrelteRequest, route: Route): void[];
+	trigger(ev: 'afterRender', cr: CrelteRequest, route: Route): void[];
 	trigger(ev: string, ...args: any[]): any[] {
 		const set = this.inner.get(ev);
 		if (!set) return [];

package/src/plugins/Plugins.ts

@@ -1,10 +1,32 @@
-import { Crelte } from '../crelte.js';
+import { Crelte, CrelteRequest } from '../crelte.js';
+import { Request, Route } from '../routing/index.js';
 
 /**
  * A plugin
  */
 export interface Plugin {
 	name: string;
+	/**
+	 * The returned value will be used inside of CrelteRequest
+	 */
+	toRequest?: (req: Request) => Plugin;
+
+	/**
+	 * This will be called during the loadGlobalData phase.
+	 */
+	loadGlobalData?: (cr: CrelteRequest) => Promise<void> | void;
+
+	/**
+	 * This will be called during the loadData phase.
+	 */
+	loadData?: (cr: CrelteRequest) => Promise<void> | void;
+
+	/**
+	 * This will be called before the dom gets updated.
+	 *
+	 * At this point you can update variables or stores.
+	 */
+	render?: (cr: CrelteRequest, route: Route) => void;
 }
 
 /**
@@ -46,4 +68,47 @@ export default class Plugins {
 	get(name: string): Plugin | null {
 		return this.plugins.get(name) ?? null;
 	}
+
+	/**
+	 * @hidden
+	 */
+	z_toRequest(req: Request): Plugins {
+		const nPlugins = new Plugins();
+
+		for (let plugin of this.plugins.values()) {
+			if (typeof plugin.toRequest === 'function')
+				plugin = plugin.toRequest(req);
+
+			nPlugins.add(plugin);
+		}
+
+		return nPlugins;
+	}
+
+	/**
+	 * @hidden
+	 */
+	z_loadGlobalData(cr: CrelteRequest): (Promise<void> | void | undefined)[] {
+		return Array.from(this.plugins.values()).map(plugin =>
+			plugin.loadGlobalData?.(cr),
+		);
+	}
+
+	/**
+	 * @hidden
+	 */
+	z_loadData(cr: CrelteRequest): (Promise<void> | void | undefined)[] {
+		return Array.from(this.plugins.values()).map(plugin =>
+			plugin.loadData?.(cr),
+		);
+	}
+
+	/**
+	 * @hidden
+	 */
+	z_render(cr: CrelteRequest, route: Route): void {
+		for (const plugin of this.plugins.values()) {
+			plugin.render?.(cr, route);
+		}
+	}
 }

package/src/queries/Queries.ts

@@ -17,17 +17,35 @@ export type QueriesOptions = {
 /**
  * A GraphQL query
  *
- * You should almost never create this object directly
- * but instead import a graphql file or use the gql template.
+ * **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}.
+ */
+export type Query = InlineQuery | NamedQuery;
+
+/**
+ * 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.
  */
-export type Query =
-	| {
-			path?: string;
-			query: string;
-	  }
-	| {
-			queryName: string;
-	  };
+export function namedQuery(name: string): NamedQuery {
+	return { queryName: name };
+}
 
 /** Returns true if the passed object is a GraphQlQuery */
 export function isQuery(obj: any): obj is Query {
@@ -102,8 +120,8 @@ export default class Queries {
 	 */
 	static new(
 		endpoint: string,
-		frontend: string,
-		ssrCache: SsrCache,
+		frontend: string | null = null,
+		ssrCache: SsrCache = new SsrCache(),
 		opts: QueriesOptions = {},
 	): Queries {
 		return new Queries(
@@ -113,6 +131,18 @@ export default class Queries {
 		);
 	}
 
+	/**
+	 * Create a new Queries instance that always intented to call an
+	 * external GraphQl endpoint.
+	 */
+	static newExternal(endpoint: string, bearerToken?: string): Queries {
+		return new Queries(
+			new Inner(endpoint, null, new SsrCache(), { bearerToken }),
+			null,
+			null,
+		);
+	}
+
 	/**
 	 * Run a GraphQl Query
 	 *
@@ -170,7 +200,7 @@ type InnerQueryOptions = {
 
 class Inner {
 	endpoint: string;
-	frontend: string;
+	frontend: string | null;
 	ssrCache: SsrCache;
 	private listeners: Map<
 		string,
@@ -184,7 +214,7 @@ class Inner {
 
 	constructor(
 		endpoint: string,
-		frontend: string,
+		frontend: string | null,
 		ssrCache: SsrCache,
 		opts: QueriesOptions = {},
 	) {
@@ -264,6 +294,9 @@ class Inner {
 		let logName: string, url: URL;
 
 		if ('queryName' in query) {
+			if (!this.frontend)
+				throw new Error('only inline queries supported');
+
 			logName = `query (server: ${query.queryName})`;
 			url = new URL(this.frontend);
 			url.pathname = '/queries/' + query.queryName;

package/src/queries/gql.ts

@@ -1,4 +1,4 @@
-import { isQuery, Query } from './Queries.js';
+import { InlineQuery, isQuery } from './Queries.js';
 
 /**
  * Create a GraphQL query string with variables.
@@ -13,7 +13,7 @@ import { isQuery, Query } from './Queries.js';
 export function gql(
 	strings: TemplateStringsArray | string[] | string,
 	...keys: unknown[]
-): Query {
+): InlineQuery {
 	if (typeof strings === 'string') strings = [strings];
 
 	let query = '';

package/src/queries/index.ts

@@ -1,9 +1,13 @@
 import Queries, {
+	InlineQuery,
 	isQuery,
+	namedQuery,
+	NamedQuery,
 	QueriesOptions,
 	Query,
 	QueryOptions,
 } from '../queries/Queries.js';
+import type CrelteServerRequest from '../server/CrelteServer.js';
 import { gql } from './gql.js';
 import QueryError, { QueryErrorResponse } from './QueryError.js';
 import { QueryVar, ValidIf, vars, varsIdsEqual } from './vars.js';
@@ -13,6 +17,9 @@ export {
 	type QueriesOptions,
 	type QueryOptions,
 	type Query,
+	type InlineQuery as GqlQuery,
+	type NamedQuery,
+	namedQuery,
 	isQuery,
 	QueryError,
 	type QueryErrorResponse,
@@ -32,6 +39,8 @@ export type InferVariableTypes<T> = {
 };
 
 /**
+ * Defines when a query can safely be cached.
+ *
  * #### Example
  * ```ts
  * import { vars, Caching } from 'crelte/queries';
@@ -48,3 +57,65 @@ export type InferVariableTypes<T> = {
 export type Caching<
 	T extends Record<string, QueryVar<any>> = Record<string, QueryVar<any>>,
 > = boolean | ((response: any, vars: InferVariableTypes<T>) => boolean);
+
+/** use {@link Transfrom} */
+export type TransformFn<
+	T extends Record<string, QueryVar<any>> = Record<string, QueryVar<any>>,
+> = (
+	response: any,
+	vars: InferVariableTypes<T>,
+) => void | any | Promise<void | any>;
+
+/**
+ * Transforms the query response before it is returned or cached.
+ *
+ * #### Example
+ * ```ts
+ * export const transform: Transform<typeof variables> = (response, vars) => {
+ *     for (const entry of response.entries) {
+ *         entry.title = entry.title.toUpperCase();
+ *     }
+ * };
+ * ```
+ */
+export type Transform<
+	T extends Record<string, QueryVar<any>> = Record<string, QueryVar<any>>,
+	F extends TransformFn<T> = TransformFn<T>,
+> = (response: any, vars: InferVariableTypes<T>) => Awaited<ReturnType<F>>;
+
+/** use {@link Handle} */
+export type HandleFn<
+	T extends Record<string, QueryVar<any>> = Record<string, QueryVar<any>>,
+> = (csr: CrelteServerRequest, vars: InferVariableTypes<T>) => any;
+
+/**
+ * Handles a query request.
+ *
+ * #### Example
+ * ```ts
+ * // queries/custom.ts
+ * import { vars, type Handle, gql, namedQuery } from 'crelte/queries';
+ *
+ * // It is good practice to have the query name inside the file
+ * export const customQuery = namedQuery('custom');
+ *
+ * export const variables = {
+ *     name: vars.string(),
+ * };
+ *
+ * export const handle: Handle<typeof variables> = async (csr, vars) => {
+ *     if (vars.name === 'demo') {
+ *         throw new Response('not allowed', { status: 400 });
+ *     }
+ *
+ *     return { name: vars.name };
+ * };
+ * ```
+ */
+export type Handle<
+	T extends Record<string, QueryVar<any>> = Record<string, QueryVar<any>>,
+	F extends HandleFn<T> = HandleFn<T>,
+> = (
+	csr: CrelteServerRequest,
+	vars: InferVariableTypes<T>,
+) => Awaited<ReturnType<F>>;