crelte 0.2.0 → 0.2.1

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

@@ -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,12 +114,11 @@ 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: () => {},
+			onNothingLoaded: () => {},
 			onLoad: () => {},
 			domReady: req => this.inner.domReady(req),
 			initClient: () => this._initClient(),
@@ -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,6 +349,10 @@ 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();
@@ -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);
 		});
 	}
 

package/LICENSE.md

@@ -1,41 +0,0 @@
-Copyright © Dunkel
-
-
-Permission is hereby granted to any person obtaining a copy of this software
-(the “Software”) to use, copy, modify, merge, publish and/or distribute copies
-of the Software, and to permit persons to whom the Software is furnished to do
-so, subject to the following conditions:
-
-1. **Don’t plagiarize.** The above copyright notice and this license shall be
-   included in all copies or substantial portions of the Software.
-
-2. **Don’t use the same license on more than one project.** Each licensed copy
-   of the Software shall be actively installed in no more than one production
-   environment at a time.
-
-3. **Don’t mess with the licensing features.** Software features related to
-   licensing shall not be altered or circumvented in any way, including (but
-   not limited to) license validation, payment prompts, feature restrictions,
-   and update eligibility.
-
-4. **Pay up.** Payment shall be made immediately upon receipt of any notice,
-   prompt, reminder, or other message indicating that a payment is owed.
-
-5. **Follow the law.** All use of the Software shall not violate any applicable
-   law or regulation, nor infringe the rights of any other person or entity.
-
-Failure to comply with the foregoing conditions will automatically and
-immediately result in termination of the permission granted hereby. This
-license does not include any right to receive updates to the Software or
-technical support. Licensees bear all risk related to the quality and
-performance of the Software and any modifications made or obtained to it,
-including liability for actual and consequential harm, such as loss or
-corruption of data, and any necessary service, repair, or correction.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
-LIABILITY, INCLUDING SPECIAL, INCIDENTAL AND CONSEQUENTIAL DAMAGES, WHETHER IN
-AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.