crelte 0.2.0 → 0.2.1

package/dist/routing/Router.d.ts

@@ -12,6 +12,7 @@ export type RouterOptions = {
  */
 type Internal = {
     onLoaded: (success: boolean, req: Request, ready: () => any) => void;
+    onNothingLoaded: (req: Request, ready: () => void) => void;
     onLoad: LoadFn;
     domReady: (req: Request) => void;
     initClient: () => void;
@@ -42,7 +43,6 @@ export default class Router {
      * The loading progress, the value is between 0 and 1
      */
     private _loadingProgress;
-    private _onRouteEv;
     private _onRequest;
     /** @hidden */
     _internal: Internal;
@@ -72,10 +72,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';
@@ -87,13 +90,18 @@ export default class Router {
      * // the following page will be opened https://example.com/de/foo/bar
      * ```
      */
-    open(target: string | URL | Route, opts?: RequestOptions): void;
+    open(target: string | URL | Route | Request, opts?: RequestOptions): void;
     /**
-     * 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';
@@ -106,12 +114,21 @@ export default class Router {
      * router.pushState(route);
      * ```
      */
-    pushState(route: Route): void;
+    push(route: Route | Request, opts?: RequestOptions): void;
+    /**
+     * @deprecated use push instead
+     */
+    pushState(route: Route | Request): void;
     /**
      * 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';
@@ -124,7 +141,11 @@ export default class Router {
      * router.replaceState(route);
      * ```
      */
-    replaceState(route: Route): void;
+    replace(route: Route | Request, opts?: RequestOptions): void;
+    /**
+     * @deprecated use replace instead
+     */
+    replaceState(route: Route | Request): void;
     /**
      * Checks if there are previous routes which would allow it to go back
      */
@@ -140,8 +161,8 @@ 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
      */
@@ -161,6 +182,7 @@ export default class Router {
     private destroyRequest;
     private _onPreload;
     private _onLoaded;
+    private _onNothingLoaded;
     private _onProgress;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../../../src/routing/Router.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../../../src/routing/Router.ts"],"names":[],"mappings":"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"}

package/dist/routing/Router.js

@@ -28,7 +28,6 @@ export default class Router {
      * The loading progress, the value is between 0 and 1
      */
     _loadingProgress;
-    _onRouteEv;
     _onRequest;
     /** @hidden */
     _internal;
@@ -48,10 +47,10 @@ export default class Router {
         this._request = null;
         this._loading = new Writable(false);
         this._loadingProgress = new Writable(0);
-        this._onRouteEv = new Listeners();
         this._onRequest = new Listeners();
         this._internal = {
             onLoaded: () => { },
+            onNothingLoaded: () => { },
             onLoad: () => { },
             domReady: req => this.inner.domReady(req),
             initClient: () => this._initClient(),
@@ -96,10 +95,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';
@@ -112,14 +114,23 @@ export default class Router {
      * ```
      */
     open(target, opts = {}) {
-        this.inner.open(target, opts);
+        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';
@@ -132,17 +143,35 @@ export default class Router {
      * router.pushState(route);
      * ```
      */
-    pushState(route) {
+    push(route, opts = {}) {
+        // 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) {
+        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';
@@ -155,11 +184,23 @@ export default class Router {
      * router.replaceState(route);
      * ```
      */
-    replaceState(route) {
+    replace(route, opts = {}) {
+        // 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) {
+        this.replace(route);
     }
     /**
      * Checks if there are previous routes which would allow it to go back
@@ -182,13 +223,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) {
-        return this._onRouteEv.add(fn);
+        return this.route.subscribe(fn);
     }
     /**
      * Add a listener for the onRequest event
@@ -213,6 +254,9 @@ export default class Router {
     }
     async _initServer(url, acceptLang) {
         this.inner.initServer();
+        this._internal.onNothingLoaded = (_req, ready) => {
+            ready();
+        };
         const prom = new Promise(resolve => {
             this._internal.onLoaded = (success, req, ready) => {
                 const props = ready();
@@ -263,7 +307,12 @@ 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 });
+        }
     }
     destroyRequest() {
         if (!this._request)
@@ -283,15 +332,27 @@ export default class Router {
         // in the meantime
         more.changeHistory();
         const route = req.toRoute();
-        const updateRoute = () => {
-            this.setNewRoute(route);
-            this._onRouteEv.trigger(route.clone());
-        };
+        // call the client or server saying we are ready for a new render
         this._internal.onLoaded(resp.success, req, () => {
-            updateRoute();
+            this.setNewRoute(route);
             return resp.data;
         });
     }
+    async _onNothingLoaded(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
+        // 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);
+        });
+    }
     _onProgress(loading, progress) {
         if (this._loading.get() !== loading)
             this._loading.set(loading);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "crelte",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"author": "Crelte <support@crelte.com>",
 	"type": "module",
 	"scripts": {

package/src/index.ts

@@ -143,6 +143,15 @@ export function getCookies(): Cookies {
 	return getCrelte().cookies;
 }
 
+export function onRoute(fn: (route: Route, crelte: Crelte) => void) {
+	const crelte = getCrelte();
+	const rmListener = crelte.router.onRoute(route => {
+		fn(route, crelte);
+	});
+
+	onDestroy(rmListener);
+}
+
 /**
  * Listen for requests
  *

package/src/init/client.ts

@@ -204,6 +204,15 @@ export function main(data: MainData) {
 		await render();
 	};
 
+	crelte.router._internal.onNothingLoaded = async (req, ready) => {
+		crelte.globals._updateSiteId(req.site.id);
+		ready();
+
+		await tick();
+
+		crelte.router._internal.domReady(req);
+	};
+
 	crelte.router._internal.initClient();
 }
 

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