crelte 0.3.0 → 0.3.2

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);
 	}
 
@@ -221,14 +239,24 @@ export default class Router {
 	 * This pushes the new route without triggering a new pageload
 	 *
 	 * You can use this when using pagination for example change the route object
-	 * (search argument) and then call pushState
+	 * (search argument) and then call push
 	 *
 	 * ## Note
 	 * This will always set the origin to 'push'
 	 * 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';
 	 *
@@ -237,21 +265,20 @@ export default class Router {
 	 * const page = 1;
 	 * const route = router.route.get();
 	 * route.setSearchParam('page', page > 0 ? page : null);
-	 * router.pushState(route);
+	 * 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);
-		this.destroyRequest();
-		this.setNewRoute(route);
 	}
 
 	/**
@@ -263,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';
 	 *
@@ -280,21 +317,21 @@ 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);
-		this.destroyRequest();
-		this.setNewRoute(req);
 	}
 
 	/**
@@ -401,12 +438,12 @@ export default class Router {
 			};
 		});
 
-		const route = this.inner.targetToRequest(url);
-		route.origin = 'init';
+		const req = this.inner.targetToRequest(url);
+		req.origin = 'init';
 
 		// let's see if the url matches any route and site
 		// if not let's redirect to the site which matches the acceptLang
-		if (!route.siteMatches()) {
+		if (!req.siteMatches()) {
 			const site = this.inner.siteByAcceptLang(acceptLang);
 
 			return {
@@ -417,14 +454,15 @@ export default class Router {
 			};
 		}
 
-		this.inner.setRoute(route);
+		this.inner.route = req.toRoute();
+		this.inner.onRoute(req, () => {});
 
 		const resp = await prom;
 
 		const hist = this.inner.history as ServerHistory;
 		if (hist.url || hist.req) {
 			const nReq = this.inner.targetToRequest(hist.req ?? hist.url!);
-			if (!route.eq(nReq)) {
+			if (!req.eq(nReq)) {
 				return {
 					success: true,
 					redirect: true,
@@ -437,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();
 
@@ -453,6 +492,7 @@ export default class Router {
 		if (!req.disableLoadData) {
 			this.pageLoader.load(req, { changeHistory });
 		} else {
+			this.pageLoader.discard();
 			this._onNothingLoaded(req, { changeHistory });
 		}
 	}
@@ -468,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,
@@ -477,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();
 
@@ -490,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;
@@ -508,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,

package/src/utils.ts

@@ -0,0 +1,10 @@
+// This are internal utils. Consider adding them to crelte-std instead
+
+// this tries to do a structuredClone and else just uses JSON
+export function objClone(obj: any): any {
+	if (typeof structuredClone === 'function') {
+		return structuredClone(obj);
+	}
+
+	return JSON.parse(JSON.stringify(obj));
+}