crelte 0.3.1 → 0.4.0

package/src/init/client.ts

@@ -2,7 +2,7 @@ import { CrelteBuilder } from '../Crelte.js';
 import CrelteRequest from '../CrelteRequest.js';
 import { GraphQlQuery } from '../graphql/GraphQl.js';
 import { SiteFromGraphQl } from '../routing/Site.js';
-import { loadFn, pluginsBeforeRender, setupPlugins } from './shared.js';
+import { pluginsBeforeRender, prepareLoadFn, setupPlugins } from './shared.js';
 import { tick } from 'svelte';
 
 /**
@@ -49,7 +49,7 @@ const mainDataDefault = {
  * });
  * ```
  */
-export function main(data: MainData) {
+export async function main(data: MainData) {
 	data = { ...mainDataDefault, ...data };
 
 	// rendering steps
@@ -97,11 +97,18 @@ export function main(data: MainData) {
 	// setup plugins
 	setupPlugins(crelte, data.app.plugins ?? []);
 
+	const loadFn = await prepareLoadFn(
+		crelte,
+		data.app,
+		data.entryQuery,
+		data.globalQuery,
+	);
+
 	// setup load Data
 
 	crelte.router._internal.onLoad = (req, opts) => {
 		const cr = new CrelteRequest(crelte, req);
-		return loadFn(cr, data.app, data.entryQuery, data.globalQuery, opts);
+		return loadFn(cr, opts);
 	};
 
 	// render Space

package/src/init/server.ts

@@ -1,11 +1,11 @@
 import { CrelteBuilder } from '../Crelte.js';
 import { SiteFromGraphQl } from '../routing/Site.js';
-import { loadFn, pluginsBeforeRender, setupPlugins } from './shared.js';
+import { pluginsBeforeRender, prepareLoadFn, setupPlugins } from './shared.js';
 import SsrComponents from '../ssr/SsrComponents.js';
 import SsrCache from '../ssr/SsrCache.js';
 import ServerCookies from '../cookies/ServerCookies.js';
 import CrelteRequest from '../CrelteRequest.js';
-import { gql, GraphQlQuery } from '../graphql/GraphQl.js';
+import { GraphQlQuery } from '../graphql/GraphQl.js';
 
 export type ServerData = {
 	url: string;
@@ -15,9 +15,8 @@ export type ServerData = {
 	endpoint: string;
 	craftWeb: string;
 	viteEnv: Map<string, string>;
-	cookies?: string;
-	readSitesCache?: () => Promise<any>;
-	writeSitesCache?: (data: any) => Promise<void>;
+	cookies: string;
+	sites: SiteFromGraphQl[];
 };
 
 /**
@@ -76,20 +75,26 @@ export async function main(data: MainData): Promise<{
 	const cookies = data.serverData.cookies ?? '';
 	builder.setupCookies(cookies);
 
-	const csites = await loadSites(builder, data.serverData);
-	builder.ssrCache.set('crelteSites', csites);
-	builder.setupRouter(csites);
+	builder.ssrCache.set('crelteSites', data.serverData.sites);
+	builder.setupRouter(data.serverData.sites);
 
 	const crelte = builder.build();
 
 	// setup plugins
 	setupPlugins(crelte, data.app.plugins ?? []);
 
+	const loadFn = await prepareLoadFn(
+		crelte,
+		data.app,
+		data.entryQuery,
+		data.globalQuery,
+	);
+
 	// setup load Data
 
 	crelte.router._internal.onLoad = req => {
 		const cr = new CrelteRequest(crelte, req);
-		return loadFn(cr, data.app, data.entryQuery, data.globalQuery);
+		return loadFn(cr);
 	};
 
 	const { success, redirect, req, props } =
@@ -187,7 +192,7 @@ export async function mainError(
 	htmlTemplate = htmlTemplate.replace('<!--page-lang-->', 'de');
 
 	const finalHtml = htmlTemplate
-		.replace('<!--ssr-head-->', head)
+		.replace('</head>', head + '\n\t</head>')
 		.replace('<!--ssr-body-->', html);
 
 	return {
@@ -195,52 +200,3 @@ export async function mainError(
 		html: finalHtml,
 	};
 }
-
-// requires, GraphQl, SsrCache
-async function loadSites(
-	builder: CrelteBuilder,
-	serverData: ServerData,
-): Promise<SiteFromGraphQl[]> {
-	if (!builder.graphQl) throw new Error();
-
-	if ('CRAFT_SITES_CACHED' in globalThis) {
-		return (globalThis as any)['CRAFT_SITES_CACHED'];
-	}
-
-	if (import.meta.env.PROD && serverData.readSitesCache) {
-		try {
-			const sites =
-				(await serverData.readSitesCache()) as SiteFromGraphQl[];
-			// @ts-ignore
-			globalThis['CRAFT_SITES_CACHED'] = sites;
-			return sites;
-		} catch (_e: any) {
-			// ignore
-		}
-	}
-
-	const resp = (await builder.graphQl.query(
-		gql`
-			query {
-				crelteSites {
-					id
-					baseUrl
-					language
-					name
-					handle
-					primary
-				}
-			}
-		`,
-		{},
-		// don't cache since we cache ourself
-		{ caching: false },
-	)) as { crelteSites: SiteFromGraphQl[] };
-
-	// @ts-ignore
-	globalThis['CRAFT_SITES_CACHED'] = resp.crelteSites;
-	if (import.meta.env.PROD && serverData.writeSitesCache) {
-		await serverData.writeSitesCache(resp.crelteSites);
-	}
-	return resp.crelteSites;
-}

package/src/init/shared.ts

@@ -1,5 +1,6 @@
 import Crelte from '../Crelte.js';
 import CrelteRequest from '../CrelteRequest.js';
+import EntryRouter, { EntryRoutes } from '../entry/EntryRouter.js';
 import { GraphQlQuery } from '../graphql/GraphQl.js';
 import { LoadData, callLoadData } from '../loadData/index.js';
 import { PluginCreator } from '../plugins/Plugins.js';
@@ -12,6 +13,8 @@ interface App<E, T> {
 	loadEntryData?: LoadData<any>;
 
 	templates?: Record<string, LazyTemplateModule<E, T>>;
+
+	entryRoutes?: EntryRoutes;
 }
 
 interface TemplateModule<E, T> {
@@ -58,14 +61,43 @@ export function getEntry(page: any): any {
 	};
 }
 
-export async function loadFn<D, E, T>(
+// todo it would be nice to call this only once per server start
+export async function prepareLoadFn<E, T>(
+	crelte: Crelte,
+	app: App<E, T>,
+	entryQuery: GraphQlQuery,
+	globalQuery?: GraphQlQuery,
+): Promise<(cr: CrelteRequest, loadOpts?: LoadOptions) => Promise<any>> {
+	const templateModules = prepareTemplates(app.templates ?? {});
+	let entryRouter: EntryRouter | null = null;
+	if (app.entryRoutes) {
+		entryRouter = new EntryRouter(crelte);
+		await app.entryRoutes(entryRouter);
+	}
+
+	return async (cr, loadOpts) => {
+		return await loadFn(
+			cr,
+			app,
+			templateModules,
+			entryRouter,
+			entryQuery,
+			globalQuery,
+			loadOpts,
+		);
+	};
+}
+
+async function loadFn<E, T>(
 	cr: CrelteRequest,
 	app: App<E, T>,
+	templateModules: Map<string, LazyTemplateModule<E, T>>,
+	entryRouter: EntryRouter | null,
 	entryQuery: GraphQlQuery,
 	globalQuery?: GraphQlQuery,
 	loadOpts?: LoadOptions,
 ): Promise<any> {
-	let dataProm: Promise<D> | null = null;
+	let dataProm: Promise<any> | null = null;
 	// @ts-ignore
 	if (app.loadData) {
 		throw new Error(
@@ -93,43 +125,29 @@ export async function loadFn<D, E, T>(
 		})();
 	}
 
-	let pageProm = null;
-	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.site.id,
-		});
-	}
+	const entryProm = queryEntry(cr, app, entryRouter, entryQuery);
 
 	const pluginsLoadGlobalData = cr.events.trigger('loadGlobalData', cr);
 
 	// loading progress is at 20%
 	loadOpts?.setProgress(0.2);
 
-	const [data, global, page] = await Promise.all([
+	const [data, global, entry] = await Promise.all([
 		dataProm,
 		globalProm,
-		pageProm,
+		entryProm,
 		...pluginsLoadGlobalData,
 	]);
 
-	if (global) {
-		cr.globals._setData(cr.site.id, global);
-	} 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, {});
+	// global is only set if !wasLoaded but we need to store something
+	// even if no globalQuery exists
+	if (global || !cr.globals._wasLoaded(cr.site.id)) {
+		cr.globals._setData(cr.site.id, global ?? {});
 	}
 
-	const entry = getEntry(page);
-
 	let template;
 	if (app.templates) {
-		template = await loadTemplate(app.templates, entry);
+		template = await loadTemplate(templateModules, entry);
 	} else {
 		throw new Error('App must have templates or loadTemplate method');
 	}
@@ -180,12 +198,39 @@ function parseFilename(path: string): [string, string] {
 	return [name, ext];
 }
 
-async function loadTemplate<E, T>(
+async function queryEntry<E, T>(
+	cr: CrelteRequest,
+	app: App<E, T>,
+	entryRouter: EntryRouter | null,
+	entryQuery: GraphQlQuery,
+): Promise<any | null> {
+	// check
+	if (entryRouter) {
+		const entry = await entryRouter._handle(cr);
+		if (entry) return entry;
+	}
+
+	if (cr.req.siteMatches()) {
+		let uri = decodeURI(cr.req.uri);
+		if (uri.startsWith('/')) uri = uri.substring(1);
+		if (uri === '' || uri === '/') uri = '__home__';
+
+		const page = await cr.query(entryQuery, {
+			uri,
+			siteId: cr.site.id,
+		});
+
+		return getEntry(page);
+	}
+
+	return null;
+}
+
+function prepareTemplates<E, T>(
 	rawModules: Record<string, LazyTemplateModule<E, T>>,
-	entry: E,
-): Promise<TemplateModule<E, T>> {
+): Map<string, LazyTemplateModule<E, T>> {
 	// parse modules
-	const modules = new Map(
+	return new Map(
 		Object.entries(rawModules)
 			.map(([path, mod]) => {
 				const [name, _ext] = parseFilename(path);
@@ -193,7 +238,12 @@ async function loadTemplate<E, T>(
 			})
 			.filter(([name, _mod]) => !!name),
 	);
+}
 
+async function loadTemplate<E, T>(
+	modules: Map<string, LazyTemplateModule<E, T>>,
+	entry: E,
+): Promise<TemplateModule<E, T>> {
 	const entr = entry as any;
 	const handle = `${entr.sectionHandle}-${entr.typeHandle}`;
 

package/src/routing/Route.ts

@@ -187,6 +187,20 @@ export default class Route {
 		return this.url.hash;
 	}
 
+	/**
+	 * Set the hash of the route
+	 *
+	 * ## Example
+	 * ```
+	 * const route = new Route('https://example.com/foo/bar/', null);
+	 * route.hash = '#hash';
+	 * console.log(route.url.href); // 'https://example.com/foo/bar/#hash'
+	 * ```
+	 */
+	set hash(hash: string) {
+		this.url.hash = hash;
+	}
+
 	/**
 	 * Checks if there are previous routes which would allow it to go back
 	 */

package/src/routing/Router.ts

@@ -17,6 +17,18 @@ const defaultRouterOpts = {
 	debugTiming: false,
 };
 
+/**
+ * Allows to easely modify a Request
+ *
+ * If you return `false` the request will be aborted
+ *
+ * ## Example
+ * ```
+ * router.replace(req => (req.hash = ''));
+ * ```
+ */
+export type UpdateRequest = (req: Request) => boolean | null | undefined | void;
+
 type LoadedMore = {
 	changeHistory: () => void;
 };
@@ -122,6 +134,8 @@ export default class Router {
 
 		this._onRequest = new Listeners();
 
+		// these functions are exposed to the init "module"
+		// but should not be used by anybody else
 		this._internal = {
 			onLoaded: () => {},
 			onNothingLoaded: () => {},
@@ -209,11 +223,15 @@ export default class Router {
 	 * // the following page will be opened https://example.com/de/foo/bar
 	 * ```
 	 */
-	open(target: string | URL | Route | Request, opts: RequestOptions = {}) {
-		const req = this.inner.targetToRequest(target, {
-			...opts,
+	open(
+		target: string | URL | Route | Request | UpdateRequest,
+		opts: RequestOptions = {},
+	) {
+		const req = this.targetOrUpdateToRequest(target, opts, {
 			origin: 'manual',
 		});
+		if (!req) return;
+
 		this.inner.open(req);
 	}
 
@@ -228,7 +246,17 @@ export default class Router {
 	 * And will clear the scrollY value if you not provide a new one via the `opts`
 	 * This will disableLoadData by default if you not provide an override via the `opts`
 	 *
-	 * ## Example
+	 * ## Example using the update function
+	 * ```
+	 * import { getRouter } from 'crelte';
+	 *
+	 * const router = getRouter();
+	 *
+	 * const page = 1;
+	 * router.push(req => req.setSearchParam('page', page || null));
+	 * ```
+	 *
+	 * ## Example using the route object
 	 * ```
 	 * import { getRouter } from 'crelte';
 	 *
@@ -240,15 +268,16 @@ export default class Router {
 	 * router.push(route);
 	 * ```
 	 */
-	push(route: Route | Request, opts: RequestOptions = {}) {
-		// cancel previous request
-		this.pageLoader.discard();
-		const req = this.inner.targetToRequest(route, {
-			...opts,
+	push(route: Route | Request | UpdateRequest, opts: RequestOptions = {}) {
+		// theoretically string and URL also work but we might
+		// change that in the future
+		const req = this.targetOrUpdateToRequest(route, opts, {
 			origin: 'push',
 			scrollY: opts.scrollY ?? undefined,
 			disableLoadData: opts.disableLoadData ?? true,
 		});
+		if (!req) return;
+
 		this.inner.push(req);
 	}
 
@@ -261,16 +290,26 @@ export default class Router {
 	}
 
 	/**
-	 * This replaces the state of the route without triggering an event
+	 * This replaces the state of the route without triggering a new pageload
 	 *
 	 * You can use this when using some filters for example a search filter
 	 *
 	 * ## Note
 	 * This will always set the origin to 'replace'
-	 * And will clear the scrollY value if you not provide a new one via the `opts`
-	 * This will disableLoadData by default if you not provide an override via the `opts`
+	 * And will clear the scrollY value if you don't provide a new one via the `opts`
+	 * This will disableLoadData by default if you don't provide an override via the `opts`
 	 *
-	 * ## Example
+	 * ## Example using the update function
+	 * ```
+	 * import { getRouter } from 'crelte';
+	 *
+	 * const router = getRouter();
+	 *
+	 * const search = 'foo';
+	 * router.replace(req => req.setSearchParam('search', search));
+	 * ```
+	 *
+	 * ## Example using the route object
 	 * ```
 	 * import { getRouter } from 'crelte';
 	 *
@@ -278,18 +317,20 @@ export default class Router {
 	 *
 	 * const search = 'foo';
 	 * const route = router.route.get();
-	 * route.setSearchParam('search', search ? search : null);
-	 * router.replaceState(route);
+	 * route.setSearchParam('search', search);
+	 * router.replace(route);
 	 * ```
 	 */
-	replace(route: Route | Request, opts: RequestOptions = {}) {
-		// cancel previous request
-		this.pageLoader.discard();
-		const req = this.inner.targetToRequest(route, {
+	replace(route: Route | Request | UpdateRequest, opts: RequestOptions = {}) {
+		// theoretically string and URL also work but we might
+		// change that in the future
+		const req = this.targetOrUpdateToRequest(route, opts, {
 			origin: 'replace',
 			scrollY: opts.scrollY ?? undefined,
 			disableLoadData: opts.disableLoadData ?? true,
 		});
+		if (!req) return;
+
 		this.inner.replace(req);
 	}
 
@@ -434,6 +475,7 @@ export default class Router {
 		return resp;
 	}
 
+	// gets called by the InnerRouter when a new route is requested
 	private _onRoute(req: Request, changeHistory: () => void) {
 		this.destroyRequest();
 
@@ -450,6 +492,7 @@ export default class Router {
 		if (!req.disableLoadData) {
 			this.pageLoader.load(req, { changeHistory });
 		} else {
+			this.pageLoader.discard();
 			this._onNothingLoaded(req, { changeHistory });
 		}
 	}
@@ -465,6 +508,7 @@ export default class Router {
 		this.pageLoader.preload(req);
 	}
 
+	// gets called by the pageLoader when teh loadData completes
 	private async _onLoaded(
 		resp: LoadResponse,
 		req: Request,
@@ -474,7 +518,7 @@ export default class Router {
 		if (await req._renderBarrier.ready()) return;
 
 		// when the data is loaded let's update the route of the inner
-		// this is will only happen if no other route has been requested
+		// this will only happen if no other route has been requested
 		// in the meantime
 		more.changeHistory();
 
@@ -487,6 +531,7 @@ export default class Router {
 		});
 	}
 
+	// this gets called if loadData is not called
 	private async _onNothingLoaded(req: Request, more: LoadedMore) {
 		// check if the render was cancelled
 		if (await req._renderBarrier.ready()) return;
@@ -505,9 +550,46 @@ export default class Router {
 		});
 	}
 
+	// this is called by the pageLoader if we get a progress update
 	private _onProgress(loading: boolean, progress?: number): void {
 		if (this._loading.get() !== loading) this._loading.set(loading);
 
 		if (typeof progress === 'number') this._loadingProgress.set(progress);
 	}
+
+	/**
+	 * Transforms a target to a request
+	 *
+	 * returns null if the request was canceled by the update request
+	 */
+	private targetOrUpdateToRequest(
+		target: string | URL | Route | Request | UpdateRequest,
+		opts: RequestOptions = {},
+		forcedOpts: RequestOptions = {},
+	): Request | null {
+		// we have an update request
+		if (typeof target === 'function') {
+			const route = this.route.get();
+			if (!route) {
+				throw new Error(
+					'route to update missing in first loadData call',
+				);
+			}
+
+			// first get a req
+			const req = this.inner.targetToRequest(route, opts);
+			// check if the request was canceled by the update request
+			if (target(req) === false) return null;
+
+			// now we add the forcedOpts
+			req._updateOpts(forcedOpts);
+
+			return req;
+		}
+
+		return this.inner.targetToRequest(target, {
+			...opts,
+			...forcedOpts,
+		});
+	}
 }

package/src/routing/index.ts

@@ -1,10 +1,11 @@
-import Router from './Router.js';
+import Router, { type UpdateRequest } from './Router.js';
 import Route, { type RouteOptions } from './Route.js';
 import Request, { type RequestOptions, type DelayRender } from './Request.js';
 import Site from './Site.js';
 
 export {
 	Router,
+	UpdateRequest,
 	Route,
 	RouteOptions,
 	Site,