crelte 0.2.0 → 0.2.2

package/src/routing/InnerRouter.ts

@@ -2,7 +2,7 @@ import Site, { SiteFromGraphQl } from './Site.js';
 import History from './History.js';
 import { ClientHistory, ServerHistory } from './History.js';
 import Request, { isRequest, RequestOptions } from './Request.js';
-import Route, { RouteOptions } from './Route.js';
+import Route from './Route.js';
 
 export type InnerRouterOpts = {
 	preloadOnMouseOver: boolean;
@@ -66,14 +66,9 @@ export default class InnerRouter {
 		req._fillFromState(window.history.state);
 
 		req.origin = 'init';
-
-		if (req.search.get('x-craft-live-preview')) {
-			req.origin = 'live-preview-init';
-		}
-
 		window.history.scrollRestoration = 'manual';
 
-		this.open(req, {}, false);
+		this.setRoute(req);
 	}
 
 	/**
@@ -139,9 +134,10 @@ export default class InnerRouter {
 	}
 
 	/**
-	 * Resolve a url or Route and convert it to a Route
+	 * Resolve a url or Route and convert it to a Request
 	 *
 	 * @param target
+	 * @param opts, any option present will override the value in target
 	 * @return Returns null if the url does not match our host (the protocol get's ignored)
 	 */
 	targetToRequest(
@@ -221,12 +217,20 @@ export default class InnerRouter {
 
 			e.preventDefault();
 
-			const route = this.routeFromUrl(link.href);
-			if (this.route?.eq(route)) return;
-
-			route.origin = 'click';
+			const req = this.targetToRequest(link.href, { origin: 'click' });
+			const routeEq =
+				this.route && this.route.eqUrl(req) && this.route.eqSearch(req);
+			// the route is the same don't do anything
+			// or maybe scroll the page to the hash? todo
+			if (routeEq && this.route?.eqHash(req)) return;
+
+			// this means the hash did not match, so we wan't to just scroll but not load
+			// data
+			if (routeEq) {
+				req.disableLoadData = true;
+			}
 
-			this.open(route);
+			this.open(req);
 		});
 
 		if (this.preloadOnMouseOver) {
@@ -270,7 +274,7 @@ export default class InnerRouter {
 					// use the latest state
 					this.history.replaceState(this.route._toState());
 
-					if (current.origin === 'live-preview-init') {
+					if (current.inLivePreview()) {
 						sessionStorage.setItem(
 							'live-preview-scroll',
 							// use the latest scrollY
@@ -286,31 +290,28 @@ export default class InnerRouter {
 		window.addEventListener('popstate', async e => {
 			if (!('route' in e.state)) return;
 
-			const route = this.targetToRequest(window.location.href);
-			route._fillFromState(e.state);
-			route.origin = 'pop';
-
-			// since the pop event replaced our state we can't replace the state
-			// for the scrollY in our open call so we just clear the current
-			// route since it is now already the new route
-			this.route = null;
+			const req = this.targetToRequest(window.location.href);
+			req._fillFromState(e.state);
+			req.origin = 'pop';
 
-			this.open(route, {}, false);
+			this.setRoute(req);
 		});
 	}
 
 	/**
-	 * Open's a route
+	 * Open a new route
 	 *
 	 * @param route a route object or an url or uri, never input the same route object again
 	 * @param pushState if true pushed the state to the window.history
+	 *
+	 * ## Important
+	 * Make sure a req always has the correct origin,
+	 * `push` and `replace` will cause this function to throw an error
 	 */
-	open(
-		target: string | URL | Route | Request,
-		opts: RouteOptions = {},
-		pushState: boolean = true,
-	) {
-		const req = this.targetToRequest(target, opts);
+	open(req: Request) {
+		if (['push', 'replace'].includes(req.origin)) {
+			throw new Error('Do not use open with push or replace');
+		}
 
 		const current = this.route;
 		if (current) {
@@ -340,14 +341,10 @@ export default class InnerRouter {
 			return;
 		}
 
-		if (pushState) {
-			req.index = (current?.index ?? 0) + 1;
-			this.onRoute(req, () => {
-				this.pushState(req.toRoute());
-			});
-		} else {
-			this.setRoute(req);
-		}
+		req.index = (current?.index ?? 0) + 1;
+		this.onRoute(req, () => {
+			this.push(req, true);
+		});
 	}
 
 	/**
@@ -358,47 +355,70 @@ export default class InnerRouter {
 	 *
 	 * @param req
 	 */
-	setRoute(req: Request) {
+	setRoute(req: Request, preventOnRoute = false) {
 		this.route = req.toRoute();
 
-		this.onRoute(req, () => {});
+		if (!preventOnRoute) this.onRoute(req, () => {});
 	}
 
 	/**
-	 * This pushes the state of the route without triggering a currentRoute
-	 * or currentSiteId change
+	 * This pushes a new route to the history
 	 *
-	 * You can use when using pagination for example change the route object
-	 * (search argument) and then call pushState
+	 * @param req, never input the same route object again
 	 *
-	 * @param route, never input the same route object again
+	 * ## Important
+	 * Make sure the route has the correct origin
 	 */
-	pushState(route: Route) {
-		const url = route.url;
+	push(req: Request, preventOnRoute = false) {
+		const url = req.url;
+		// todo a push should also store the previous scrollY
+
+		let nReq = req;
+		if (req.scrollY === null) {
+			// if there is no scrollY stored we store the current scrollY
+			// since a push does not cause a scroll top
+			// todo: probably should refactor something probably
+			// should not be here
+			nReq = req.clone();
+			nReq.scrollY = this.history.scrollY();
+		}
 
 		this.history.pushState(
-			route._toState(),
+			nReq._toState(),
 			url.pathname + url.search + url.hash,
 		);
 
-		this.route = route;
+		this.setRoute(req, preventOnRoute);
 	}
 
 	/**
-	 * This replaces the state of the route without triggering a currentRoute
-	 * or currentSiteId change
+	 * This replaces the current route
 	 *
-	 * @param route, never input the same route object again
+	 * @param req, never input the same route object again
+	 *
+	 * ## Important
+	 * Make sure the route has the correct origin
 	 */
-	replaceState(route: Route) {
-		const url = route.url;
+	replace(req: Request) {
+		const url = req.url;
+
+		let nReq = req;
+		if (req.scrollY === null) {
+			// if there is no scrollY stored we store the current scrollY
+			// since a replace does not cause a scrollTo and we wan't
+			// history back to work as intended
+			// todo: probably should refactor something probably
+			// should not be here
+			nReq = req.clone();
+			nReq.scrollY = this.history.scrollY();
+		}
 
 		this.history.replaceState(
-			route._toState(),
+			nReq._toState(),
 			url.pathname + url.search + url.hash,
 		);
 
-		this.route = route;
+		this.setRoute(req);
 	}
 
 	/**
@@ -430,7 +450,7 @@ export default class InnerRouter {
 
 		// if the route is a live preview init and we have a scrollY stored
 		// scroll to that
-		if (req.origin === 'live-preview-init') {
+		if (req.inLivePreview()) {
 			const scrollY = sessionStorage.getItem('live-preview-scroll');
 			if (scrollY) {
 				scrollTo = {
@@ -465,6 +485,10 @@ export default class InnerRouter {
 			};
 		}
 
+		// make sure push and replace don't cause a scroll if it is not intended
+		if (!scrollTo && (req.origin === 'push' || req.origin === 'replace'))
+			return;
+
 		// scroll to the top if nothing else matches
 		if (!scrollTo) {
 			scrollTo = {

package/src/routing/Request.ts

@@ -10,6 +10,7 @@ export type RequestOptions = {
 	index?: number;
 	origin?: RouteOrigin;
 	disableScroll?: boolean;
+	disableLoadData?: boolean;
 	statusCode?: number;
 };
 
@@ -25,6 +26,12 @@ export default class Request extends Route {
 	 */
 	disableScroll: boolean;
 
+	/**
+	 * Disable loading data
+	 * @default false
+	 */
+	disableLoadData: boolean;
+
 	/**
 	 * The Status code that should be returned for a redirect
 	 */
@@ -40,6 +47,7 @@ export default class Request extends Route {
 		super(url, site, opts);
 
 		this.disableScroll = opts.disableScroll ?? false;
+		this.disableLoadData = opts.disableLoadData ?? false;
 		this.statusCode = opts.statusCode ?? null;
 		this._renderBarrier = new RenderBarrier();
 	}

package/src/routing/Route.ts

@@ -13,23 +13,25 @@ export type RouteOptions = {
  *
  * - `'init'`: is set on the first page load
  * - `'manual'`: is set when a route is triggered manually via `Router.open`
- * - `'live-preview-init'`: is set on the first page load in live preview mode
  * - `'click'`: is set when a route is triggered by a click event
  * - `'pop'`: is set when a route is triggered by a popstate event (back/forward)
+ * - `'replace'`: is set when a route is replaced via `Router.replaceState`
+ * - `'push'`: is set when a route is pushed via `Router.pushState`
+ *
+ * ## Note
+ * `replace` and `push` will not call loadData
  */
 export type RouteOrigin =
 	| 'init'
-	| 'live-preview-init'
 	| 'manual'
 	| 'click'
-	| 'pop';
+	| 'pop'
+	| 'replace'
+	| 'push';
 
 /**
  * A Route contains information about the current page for example the url and
- * the site id
- *
- * ## Note
- * Never update the route directly, clone it before
+ * the site
  */
 export default class Route {
 	/**
@@ -51,6 +53,13 @@ export default class Route {
 
 	/**
 	 * The scroll position of the current route
+	 *
+	 * ## Note
+	 * This does not have to represent the current scroll position
+	 * should more be used internally.
+	 *
+	 * It might be useful for a new request to specify the wanted
+	 * scroll position
 	 */
 	scrollY: number | null;
 
@@ -154,6 +163,51 @@ export default class Route {
 		return this.url.hash;
 	}
 
+	/**
+	 * Checks if there are previous routes which would allow it to go back
+	 */
+	canGoBack(): boolean {
+		return !!this.index;
+	}
+
+	/**
+	 * Gets the search param
+	 *
+	 * ## Example
+	 * ```
+	 * const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
+	 * console.log(route.getSearchParam('a')); // '1'
+	 * ```
+	 */
+	getSearchParam(key: string): string | null {
+		return this.search.get(key);
+	}
+
+	/**
+	 * Sets the search param or removes it if the value is null or undefined
+	 *
+	 * ## Example
+	 * ```
+	 * const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
+	 * route.setSearchParam('a', '3');
+	 * console.log(route.url.href); // 'https://example.com/foo/bar/?a=3&b=2'
+	 *
+	 * route.setSearchParam('a', null);
+	 * console.log(route.url.href); // 'https://example.com/foo/bar/?b=2'
+	 * ```
+	 */
+	setSearchParam(key: string, value?: string | number | null) {
+		if (typeof value !== 'undefined' && value !== null) {
+			this.search.set(key, value as string);
+		} else {
+			this.search.delete(key);
+		}
+	}
+
+	inLivePreview(): boolean {
+		return !!this.search.get('x-craft-live-preview');
+	}
+
 	/**
 	 * Returns if the site matches the url
 	 */
@@ -176,7 +230,32 @@ export default class Route {
 	 * This checks all properties of the url but search params do not have to be
 	 * in the same order
 	 */
-	eq(route: Route) {
+	eq(route: Route | null) {
+		return (
+			route &&
+			this.eqUrl(route) &&
+			this.eqSearch(route) &&
+			this.eqHash(route)
+		);
+	}
+
+	/**
+	 * Checks if the route is equal to another route
+	 *
+	 * This does not check the search params or hash
+	 */
+	eqUrl(route: Route | null) {
+		return (
+			route &&
+			this.url.pathname === route.url.pathname &&
+			this.url.origin === route.url.origin
+		);
+	}
+
+	/**
+	 * Checks if the search params are equal to another route
+	 */
+	eqSearch(route: Route | null) {
 		const searchEq = (a: URLSearchParams, b: URLSearchParams) => {
 			if (a.size !== b.size) return false;
 
@@ -191,54 +270,14 @@ export default class Route {
 				.every(([[ak, av], [bk, bv]]) => ak === bk && av === bv);
 		};
 
-		return (
-			route &&
-			this.url.pathname === route.url.pathname &&
-			this.url.origin === route.url.origin &&
-			searchEq(this.search, route.search) &&
-			this.hash === route.hash
-		);
-	}
-
-	/**
-	 * Checks if there are previous routes which would allow it to go back
-	 */
-	canGoBack(): boolean {
-		return !!this.index;
-	}
-
-	/**
-	 * Gets the search param
-	 *
-	 * ## Example
-	 * ```
-	 * const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
-	 * console.log(route.getSearchParam('a')); // '1'
-	 * ```
-	 */
-	getSearchParam(key: string): string | null {
-		return this.search.get(key);
+		return route && searchEq(this.search, route.search);
 	}
 
 	/**
-	 * Sets the search param or removes it if the value is null or undefined
-	 *
-	 * ## Example
-	 * ```
-	 * const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
-	 * route.setSearchParam('a', '3');
-	 * console.log(route.url.href); // 'https://example.com/foo/bar/?a=3&b=2'
-	 *
-	 * route.setSearchParam('a', null);
-	 * console.log(route.url.href); // 'https://example.com/foo/bar/?b=2'
-	 * ```
+	 * Checks if the hash is equal to another route
 	 */
-	setSearchParam(key: string, value?: string | number | null) {
-		if (typeof value !== 'undefined' && value !== null) {
-			this.search.set(key, value as string);
-		} else {
-			this.search.delete(key);
-		}
+	eqHash(route: Route | null) {
+		return route && this.hash === route.hash;
 	}
 
 	/**

package/src/routing/Router.ts

@@ -14,7 +14,7 @@ export type RouterOptions = {
 
 const defaultRouterOpts = {
 	preloadOnMouseOver: false,
-	deubgTiming: false,
+	debugTiming: false,
 };
 
 type LoadedMore = {
@@ -35,6 +35,17 @@ type Internal = {
 		ready: () => any,
 	) => void;
 
+	// onNothingLoaded get's called if the request did not load new Data
+	// since maybe a push or replace was called
+	onNothingLoaded: (
+		req: Request,
+		// call ready once your ready to update the dom
+		// this makes sure we trigger a route and site update
+		// almost at the same moment and probably the same tick
+		// to make sure we don't have any flickering
+		ready: () => void,
+	) => void;
+
 	onLoad: LoadFn;
 
 	domReady: (req: Request) => void;
@@ -78,8 +89,6 @@ export default class Router {
 	 */
 	private _loadingProgress: Writable<number>;
 
-	private _onRouteEv: Listeners<[Route]>;
-
 	private _onRequest: Listeners<[Request]>;
 
 	/** @hidden */
@@ -105,13 +114,12 @@ export default class Router {
 		this._loading = new Writable(false);
 		this._loadingProgress = new Writable(0);
 
-		this._onRouteEv = new Listeners();
-
 		this._onRequest = new Listeners();
 
 		this._internal = {
-			onLoaded: () => {},
-			onLoad: () => {},
+			onLoaded: () => { },
+			onNothingLoaded: () => { },
+			onLoad: () => { },
 			domReady: req => this.inner.domReady(req),
 			initClient: () => this._initClient(),
 			initServer: (url, acceptLang) => this._initServer(url, acceptLang),
@@ -167,10 +175,13 @@ export default class Router {
 	/**
 	 * Open a new route
 	 *
-	 * @param target the target to open can be an url or a route
+	 * @param target the target to open can be an url, a route or a request
 	 * the url needs to start with http or with a / which will be considered as
 	 * the site baseUrl
 	 *
+	 * ## Note
+	 * The origin will always be set to 'manual'
+	 *
 	 * ## Example
 	 * ```
 	 * import { getRouter } from 'crelte';
@@ -182,16 +193,25 @@ export default class Router {
 	 * // the following page will be opened https://example.com/de/foo/bar
 	 * ```
 	 */
-	open(target: string | URL | Route, opts: RequestOptions = {}) {
-		this.inner.open(target, opts);
+	open(target: string | URL | Route | Request, opts: RequestOptions = {}) {
+		const req = this.inner.targetToRequest(target, {
+			...opts,
+			origin: 'manual',
+		});
+		this.inner.open(req);
 	}
 
 	/**
-	 * This pushes the state of the route without triggering an event
+	 * 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
 	 *
+	 * ## 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
 	 * ```
 	 * import { getRouter } from 'crelte';
@@ -204,18 +224,37 @@ export default class Router {
 	 * router.pushState(route);
 	 * ```
 	 */
-	pushState(route: Route) {
+	push(route: Route | Request, opts: RequestOptions = {}) {
+		// cancel previous request
 		this.pageLoader.discard();
-		this.inner.pushState(route);
+		const req = this.inner.targetToRequest(route, {
+			...opts,
+			origin: 'push',
+			scrollY: opts.scrollY ?? undefined,
+			disableLoadData: opts.disableLoadData ?? true,
+		});
+		this.inner.push(req);
 		this.destroyRequest();
 		this.setNewRoute(route);
 	}
 
+	/**
+	 * @deprecated use push instead
+	 */
+	pushState(route: Route | Request) {
+		this.push(route);
+	}
+
 	/**
 	 * This replaces the state of the route without triggering an event
 	 *
 	 * 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`
+	 *
 	 * ## Example
 	 * ```
 	 * import { getRouter } from 'crelte';
@@ -228,11 +267,24 @@ export default class Router {
 	 * router.replaceState(route);
 	 * ```
 	 */
-	replaceState(route: Route) {
+	replace(route: Route | Request, opts: RequestOptions = {}) {
+		// cancel previous request
 		this.pageLoader.discard();
-		this.inner.replaceState(route);
+		const req = this.inner.targetToRequest(route, {
+			origin: 'replace',
+			scrollY: opts.scrollY ?? undefined,
+			disableLoadData: opts.disableLoadData ?? true,
+		});
+		this.inner.replace(req);
 		this.destroyRequest();
-		this.setNewRoute(route);
+		this.setNewRoute(req);
+	}
+
+	/**
+	 * @deprecated use replace instead
+	 */
+	replaceState(route: Route | Request) {
+		this.replace(route);
 	}
 
 	/**
@@ -259,13 +311,13 @@ export default class Router {
 	/**
 	 * Add a listener for the onRoute event
 	 *
-	 * This differs from router.route.subscribe in the way that
-	 * it will only trigger if a new render / load will occur
+	 * This will trigger every time a new route is set
+	 * and is equivalent to router.route.subscribe(fn)
 	 *
 	 * @returns a function to remove the listener
 	 */
 	onRoute(fn: (route: Route) => void): () => void {
-		return this._onRouteEv.add(fn);
+		return this.route.subscribe(fn);
 	}
 
 	/**
@@ -297,10 +349,14 @@ export default class Router {
 	): Promise<ServerInited> {
 		this.inner.initServer();
 
+		this._internal.onNothingLoaded = (_req, ready) => {
+			ready();
+		};
+
 		const prom: Promise<ServerInited> = new Promise(resolve => {
 			this._internal.onLoaded = (success, req, ready) => {
 				const props = ready();
-				this._internal.onLoaded = () => {};
+				this._internal.onLoaded = () => { };
 
 				resolve({
 					success,
@@ -360,7 +416,11 @@ export default class Router {
 		this._onRequest.trigger(req);
 
 		// route prepared
-		this.pageLoader.load(req, { changeHistory });
+		if (!req.disableLoadData) {
+			this.pageLoader.load(req, { changeHistory });
+		} else {
+			this._onNothingLoaded(req, { changeHistory });
+		}
 	}
 
 	private destroyRequest() {
@@ -389,15 +449,28 @@ export default class Router {
 
 		const route = req.toRoute();
 
-		const updateRoute = () => {
+		// call the client or server saying we are ready for a new render
+		this._internal.onLoaded(resp.success, req, () => {
 			this.setNewRoute(route);
+			return resp.data;
+		});
+	}
 
-			this._onRouteEv.trigger(route.clone());
-		};
+	private async _onNothingLoaded(req: Request, more: LoadedMore) {
+		// check if the render was cancelled
+		if (await req._renderBarrier.ready()) return;
 
-		this._internal.onLoaded(resp.success, req, () => {
-			updateRoute();
-			return resp.data;
+		// 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
+		// in the meantime
+		more.changeHistory();
+
+		const route = req.toRoute();
+
+		// call the client or server saying there was an update in the route
+		// but no new data was loaded so no render should happen
+		this._internal.onNothingLoaded(req, () => {
+			this.setNewRoute(route);
 		});
 	}