crelte 0.3.1 → 0.3.2

package/dist/routing/Router.js

@@ -54,6 +54,8 @@ export default class Router {
         this._loading = new Writable(false);
         this._loadingProgress = new Writable(0);
         this._onRequest = new Listeners();
+        // these functions are exposed to the init "module"
+        // but should not be used by anybody else
         this._internal = {
             onLoaded: () => { },
             onNothingLoaded: () => { },
@@ -130,10 +132,11 @@ export default class Router {
      * ```
      */
     open(target, opts = {}) {
-        const req = this.inner.targetToRequest(target, {
-            ...opts,
+        const req = this.targetOrUpdateToRequest(target, opts, {
             origin: 'manual',
         });
+        if (!req)
+            return;
         this.inner.open(req);
     }
     /**
@@ -147,7 +150,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';
      *
@@ -160,14 +173,15 @@ export default class Router {
      * ```
      */
     push(route, opts = {}) {
-        // cancel previous request
-        this.pageLoader.discard();
-        const req = this.inner.targetToRequest(route, {
-            ...opts,
+        // 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);
     }
     /**
@@ -178,16 +192,26 @@ export default class Router {
         this.push(route);
     }
     /**
-     * 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';
      *
@@ -195,18 +219,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, opts = {}) {
-        // cancel previous request
-        this.pageLoader.discard();
-        const req = this.inner.targetToRequest(route, {
+        // 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);
     }
     /**
@@ -325,6 +351,7 @@ export default class Router {
         }
         return resp;
     }
+    // gets called by the InnerRouter when a new route is requested
     _onRoute(req, changeHistory) {
         this.destroyRequest();
         this._request = req;
@@ -338,6 +365,7 @@ export default class Router {
             this.pageLoader.load(req, { changeHistory });
         }
         else {
+            this.pageLoader.discard();
             this._onNothingLoaded(req, { changeHistory });
         }
     }
@@ -350,12 +378,13 @@ export default class Router {
     _onPreload(req) {
         this.pageLoader.preload(req);
     }
+    // gets called by the pageLoader when teh loadData completes
     async _onLoaded(resp, req, more) {
         // check if the render was cancelled
         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();
         const route = req.toRoute();
@@ -365,6 +394,7 @@ export default class Router {
             return resp.data;
         });
     }
+    // this gets called if loadData is not called
     async _onNothingLoaded(req, more) {
         // check if the render was cancelled
         if (await req._renderBarrier.ready())
@@ -380,10 +410,37 @@ export default class Router {
             this.setNewRoute(route);
         });
     }
+    // this is called by the pageLoader if we get a progress update
     _onProgress(loading, progress) {
         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
+     */
+    targetOrUpdateToRequest(target, opts = {}, forcedOpts = {}) {
+        // 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/dist/routing/index.d.ts

@@ -1,6 +1,6 @@
-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, Route, RouteOptions, Site, Request, DelayRender, RequestOptions, };
+export { Router, UpdateRequest, Route, RouteOptions, Site, Request, DelayRender, RequestOptions, };
 //# sourceMappingURL=index.d.ts.map

package/dist/routing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/routing/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,OAAO,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EACN,MAAM,EACN,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,cAAc,GACd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/routing/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,OAAO,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EACN,MAAM,EACN,aAAa,EACb,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,cAAc,GACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "crelte",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"author": "Crelte <support@crelte.com>",
 	"type": "module",
 	"scripts": {
@@ -44,6 +44,10 @@
 			"types": "./dist/routing/index.d.ts",
 			"default": "./dist/routing/index.js"
 		},
+		"./entry": {
+			"types": "./dist/entry/index.d.ts",
+			"default": "./dist/entry/index.js"
+		},
 		"./ssr": {
 			"types": "./dist/ssr/index.d.ts",
 			"default": "./dist/ssr/index.js"
@@ -71,14 +75,15 @@
 	},
 	"dependencies": {
 		"crelte-std": "^0.1.1",
-		"svelte": "^4.2.12"
+		"svelte": "^4.2.12",
+		"trouter": "^4.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/package": "^2.3.1",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"svelte-check": "^4.1.4",
 		"typescript-svelte-plugin": "^0.3.45",
-		"vitest": "^2.0.0",
-		"vite": "^5.0"
+		"vite": "^5.0",
+		"vitest": "^2.0.0"
 	}
 }

package/src/entry/EntryRouter.ts

@@ -0,0 +1,71 @@
+import { Pattern, Trouter } from 'trouter';
+import { Crelte, CrelteRequest, Entry, QueryOptions } from '../index.js';
+import { CrelteEntryRequest, EntryRequest } from './index.js';
+import { GraphQlQuery } from '../graphql/GraphQl.js';
+
+export type EntryRouteHandler = (
+	cr: CrelteEntryRequest,
+) => Promise<Entry | null | undefined> | Entry | null | undefined | void;
+
+export type EntryRoutes = (router: EntryRouter) => Promise<void> | void;
+
+export default class EntryRouter {
+	private _crelte: Crelte;
+	private inner: Trouter<EntryRouteHandler>;
+
+	constructor(crelte: Crelte) {
+		this._crelte = crelte;
+		this.inner = new Trouter();
+	}
+
+	add(pattern: Pattern, ...handlers: EntryRouteHandler[]): this {
+		this.inner.add('GET', pattern, ...handlers);
+		return this;
+	}
+
+	/**
+	 * returns an env variable from the craft/.env file.
+	 */
+	getEnv(name: 'ENDPOINT_URL'): string;
+	getEnv(name: 'CRAFT_WEB_URL'): string;
+	getEnv(name: string): string | null;
+	getEnv(name: string): string | null {
+		return this._crelte.getEnv(name);
+	}
+
+	/**
+	 * Run a GraphQl Query
+	 *
+	 * @param query the default export from a graphql file or the gql`query {}`
+	 * function
+	 * @param variables variables that should be passed to the
+	 * graphql query
+	 */
+	async query(
+		query: GraphQlQuery,
+		variables: Record<string, unknown> = {},
+		opts: QueryOptions = {},
+	): Promise<unknown> {
+		// this function is added as convenience
+		return this._crelte.graphQl.query(query, variables, opts);
+	}
+
+	/** @hidden */
+	async _handle(cr: CrelteRequest): Promise<Entry | null> {
+		const { params, handlers } = this.inner.find('GET', cr.req.uri);
+
+		if (!handlers.length) return null;
+
+		const er = new EntryRequest(cr.req.url, cr.req.site, {
+			params: new Map(Object.entries(params)),
+		});
+		const cer = new CrelteEntryRequest(cr, er);
+
+		for (const handler of handlers) {
+			const res = await handler(cer);
+			if (res) return res;
+		}
+
+		return null;
+	}
+}

package/src/entry/index.ts

@@ -0,0 +1,48 @@
+import { Crelte, CrelteRequest } from '../index.js';
+import { Request, RequestOptions, Site } from '../routing/index.js';
+import EntryRouter, { EntryRouteHandler, EntryRoutes } from './EntryRouter.js';
+
+export { EntryRouter, type EntryRouteHandler, type EntryRoutes };
+
+export type Entry = {
+	sectionHandle: string;
+	typeHandle: string;
+	[key: string]: any;
+};
+
+export type EntryRequestOptions = RequestOptions & {
+	params?: Map<string, string>;
+};
+
+export class EntryRequest extends Request {
+	private params: Map<string, string>;
+
+	constructor(url: string | URL, site: Site, opts: EntryRequestOptions = {}) {
+		super(url, site, opts);
+
+		this.params = opts.params ?? new Map();
+	}
+
+	/**
+	 * returns the url params from the request
+	 *
+	 * @example
+	 * ```js
+	 * router.get('/blog/:slug', async (cs, req) => {
+	 *     return Response.json({ slug: cs.getParam('slug') });
+	 * });
+	 * ```
+	 */
+	getParam(name: string): string | null {
+		return this.params.get(name) ?? null;
+	}
+}
+
+export class CrelteEntryRequest extends CrelteRequest {
+	req: EntryRequest;
+
+	constructor(inner: Crelte, req: EntryRequest) {
+		super(inner, req);
+		this.req = req;
+	}
+}

package/src/index.ts

@@ -15,6 +15,7 @@ import {
 	LoadDataFn,
 	LoadDataObj,
 } from './loadData/index.js';
+import { Entry } from './entry/index.js';
 
 export {
 	Crelte,
@@ -25,6 +26,7 @@ export {
 	type LoadDataFn,
 	type LoadDataObj,
 	type LoadDataArray,
+	type Entry,
 };
 
 /**

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,6 +1,6 @@
 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';
@@ -85,11 +85,18 @@ export async function main(data: MainData): Promise<{
 	// 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 } =

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
 	 */