crelte 0.5.11 → 0.5.12

package/src/crelte.ts

@@ -9,6 +9,7 @@ import Queries, { Query, QueryOptions } from './queries/Queries.js';
 import { Readable } from './std/stores/index.js';
 import { Entry } from './loadData/index.js';
 import { urlWithPath } from './utils.js';
+import { BodyClass } from './bodyClass/index.js';
 
 /** The type for the app.config object */
 export type Config = {
@@ -113,6 +114,11 @@ export type Crelte = {
 	 */
 	cookies: Cookies;
 
+	/**
+	 * Get the BodyClass instance
+	 */
+	bodyClass: BodyClass;
+
 	/**
 	 * Get a Plugin by name
 	 */
@@ -263,6 +269,7 @@ export function newCrelte({
 	router,
 	queries,
 	cookies,
+	bodyClass,
 }: {
 	config: Required<Config>;
 	ssrCache: SsrCache;
@@ -272,6 +279,7 @@ export function newCrelte({
 	router: Router;
 	queries: Queries;
 	cookies: Cookies;
+	bodyClass: BodyClass;
 }): Crelte {
 	return {
 		config,
@@ -282,6 +290,7 @@ export function newCrelte({
 		router,
 		queries,
 		cookies,
+		bodyClass,
 
 		getPlugin: name => plugins.get(name),
 		getEnv: key => ssrCache.get(key as any) as any,

package/src/index.ts

@@ -17,7 +17,8 @@ import {
 	LoadDataObj,
 } from './loadData/index.js';
 import Queries from './queries/Queries.js';
-import { Readable } from './std/stores/index.js';
+import { Readable, Writable } from './std/stores/index.js';
+import { BodyClass } from './bodyClass/index.js';
 
 export {
 	type Crelte,
@@ -33,6 +34,9 @@ export {
 /** The type for the app.init function */
 export type Init = (crelte: Crelte) => void;
 
+/** The Props that are passed to the app */
+export type AppProps = { route: Writable<Route> };
+
 function innerGetCrelte(): Crelte {
 	return getContext('crelte');
 }
@@ -174,6 +178,16 @@ export function getCookies(): Cookies {
 	return innerGetCrelte().cookies;
 }
 
+/**
+ * returns the body class instance
+ *
+ * #### Note
+ * This only works during component initialisation.
+ */
+export function getBodyClass(): BodyClass {
+	return innerGetCrelte().bodyClass;
+}
+
 /**
  * Listen for route changes
  *

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
@@ -74,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,
@@ -84,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);
@@ -101,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');
@@ -126,9 +130,9 @@ 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.z_requestCompleted();
@@ -140,6 +144,7 @@ export async function main(data: MainData) {
 			await tick();
 
 			domUpdated(cr, route);
+			pluginsAfterRender(cr, route);
 
 			return route;
 		}
@@ -149,9 +154,15 @@ export async function main(data: MainData) {
 		let render = async () => {
 			const route = readyForRoute();
 			cr.router.z_requestCompleted();
-			if (route.entryChanged) cr.globals.z_syncToStores();
-			// we should trigger the route update here
-			pluginsBeforeRender(cr, route);
+			// 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();
@@ -163,6 +174,7 @@ export async function main(data: MainData) {
 			}
 
 			domUpdated(cr, route);
+			pluginsAfterRender(cr, route);
 
 			return route;
 		};
@@ -170,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;
@@ -211,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);
@@ -111,6 +116,8 @@ export async function main(data: MainData): Promise<RenderResponse> {
 		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(
@@ -58,7 +61,14 @@ export default class Events {
 		ev: 'loadData',
 		fn: (cr: CrelteRequest, entry: Entry) => Promise<any> | any,
 	): () => void;
-	on(ev: 'beforeRender', fn: (cr: CrelteRequest) => void): () => void;
+	on(
+		ev: 'beforeRender',
+		fn: (cr: CrelteRequest, route: Route) => void,
+	): () => void;
+	on(
+		ev: 'afterRender',
+		fn: (cr: CrelteRequest, route: Route) => void,
+	): () => void;
 	on(ev: string, fn: (...args: any[]) => any): () => void {
 		let set = this.inner.get(ev);
 		if (!set) {
@@ -108,6 +118,7 @@ export default class Events {
 		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/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/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);
@@ -311,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);
 	}
 

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);
 	}
 }