crelte 0.1.3 → 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 {
 	/**
@@ -38,12 +40,26 @@ export default class Route {
 	url: URL;
 
 	/**
-	 * The site of the route if it could be defined
+	 * The site of the route
+	 *
+	 * ## Note
+	 * The site might not always match with the current route
+	 * but be the site default site or one that matches the
+	 * users language.
+	 *
+	 * If that is important call `route.siteMatches()` to verify
 	 */
-	site: Site | null;
+	site: Site;
 
 	/**
 	 * 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;
 
@@ -61,7 +77,7 @@ export default class Route {
 	/**
 	 * Creates a new Route
 	 */
-	constructor(url: string | URL, site: Site | null, opts: RouteOptions = {}) {
+	constructor(url: string | URL, site: Site, opts: RouteOptions = {}) {
 		this.url = new URL(url);
 
 		this.site = site;
@@ -77,17 +93,17 @@ export default class Route {
 	 *
 	 * ## Example
 	 * ```
-	 * const route = new Route('https://example.com/foo/bar/', null);
-	 * console.log(route.uri); // '/foo/bar'
+	 * const site = _; // site with url https://example.com/fo
+	 * const route = new Route('https://example.com/foo/bar/', site);
+	 * console.log(route.uri); // '/bar'
 	 *
-	 * const site = _; // site with url https://example.com/foo
-	 * const route2 = new Route('https://example.com/foo/bar/?a=1', site);
-	 * console.log(route2.uri); // '/bar'
+	 * const site2 = _; // site with url https://example.com/other
+	 * const route2 = new Route('https://example.com/foo/bar/?a=1', site2);
+	 * console.log(route2.uri); // '/foo/bar'
 	 * ```
 	 */
 	get uri(): string {
-		// todo check if this is correct
-		if (this.site) {
+		if (this.siteMatches()) {
 			return trimSlashEnd(
 				this.url.pathname.substring(this.site.uri.length),
 			);
@@ -103,16 +119,17 @@ export default class Route {
 	 *
 	 * ## Example
 	 * ```
+	 * const site = _; // site with url https://example.com/foo
 	 * const route = new Route('https://example.com/foo/bar/', null);
-	 * console.log(route.baseUrl); // 'https://example.com'
+	 * console.log(route.baseUrl); // 'https://example.com/foo'
 	 *
-	 * const site = _; // site with url https://example.com/foo
-	 * const route2 = new Route('https://example.com/foo/bar/', site);
-	 * console.log(route2.baseUrl); // 'https://example.com/foo'
+	 * const site2 = _; // site with url https://example.com/other
+	 * const route2 = new Route('https://example.com/foo/bar/', site2);
+	 * console.log(route2.baseUrl); // 'https://example.com'
 	 * ```
 	 */
 	get baseUrl(): string {
-		if (this.site) return trimSlashEnd(this.site.url.href);
+		if (this.siteMatches()) return trimSlashEnd(this.site.url.href);
 
 		return this.url.origin;
 	}
@@ -146,36 +163,6 @@ export default class Route {
 		return this.url.hash;
 	}
 
-	/**
-	 * Checks if the route is equal to another route
-	 *
-	 * This checks all properties of the url but search params do not have to be
-	 * in the same order
-	 */
-	eq(route: Route) {
-		const searchEq = (a: URLSearchParams, b: URLSearchParams) => {
-			if (a.size !== b.size) return false;
-
-			a.sort();
-			b.sort();
-
-			const aEntries = Array.from(a.entries());
-			const bEntries = Array.from(b.entries());
-
-			return aEntries
-				.map((a, i) => [a, bEntries[i]])
-				.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
 	 */
@@ -217,6 +204,82 @@ export default class Route {
 		}
 	}
 
+	inLivePreview(): boolean {
+		return !!this.search.get('x-craft-live-preview');
+	}
+
+	/**
+	 * Returns if the site matches the url
+	 */
+	siteMatches(): boolean {
+		if (this.url.origin !== this.site.url.origin) return false;
+
+		// now we need to validate the pathname we should make sure both end with a slash
+		// todo can we do this better?
+
+		// make sure that urls like pathname: /abcbc and site: /abc don't match
+		return (this.url.pathname + '/').startsWith(
+			// uri never returns a slash at the end
+			this.site.uri + '/',
+		);
+	}
+
+	/**
+	 * Checks if the route is equal to another route
+	 *
+	 * This checks all properties of the url but search params do not have to be
+	 * in the same order
+	 */
+	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;
+
+			a.sort();
+			b.sort();
+
+			const aEntries = Array.from(a.entries());
+			const bEntries = Array.from(b.entries());
+
+			return aEntries
+				.map((a, i) => [a, bEntries[i]])
+				.every(([[ak, av], [bk, bv]]) => ak === bk && av === bv);
+		};
+
+		return route && searchEq(this.search, route.search);
+	}
+
+	/**
+	 * Checks if the hash is equal to another route
+	 */
+	eqHash(route: Route | null) {
+		return route && this.hash === route.hash;
+	}
+
 	/**
 	 * Create a copy of the request
 	 */

package/src/routing/Router.ts

@@ -5,7 +5,7 @@ import PageLoader, { LoadFn, LoadResponse } from './PageLoader.js';
 import { ServerHistory } from './History.js';
 import { Readable, Writable } from 'crelte-std/stores';
 import { Listeners } from 'crelte-std/sync';
-import Request from './Request.js';
+import Request, { RequestOptions } from './Request.js';
 
 export type RouterOptions = {
 	preloadOnMouseOver?: boolean;
@@ -28,7 +28,6 @@ type Internal = {
 	onLoaded: (
 		success: boolean,
 		req: Request,
-		site: Site,
 		// 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
@@ -36,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;
@@ -50,7 +60,6 @@ type ServerInited = {
 	// redirect to the route url
 	redirect: boolean;
 	req: Request;
-	site: Site;
 	props: any;
 };
 
@@ -80,9 +89,7 @@ export default class Router {
 	 */
 	private _loadingProgress: Writable<number>;
 
-	private _onRouteEv: Listeners<[Route, Site]>;
-
-	private _onRequest: Listeners<[Request, Site]>;
+	private _onRequest: Listeners<[Request]>;
 
 	/** @hidden */
 	_internal: Internal;
@@ -107,26 +114,25 @@ 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(),
 			initServer: (url, acceptLang) => this._initServer(url, acceptLang),
 		};
 
-		this.inner.onRoute = (route, site, changeHistory) =>
-			this._onRoute(route, site, changeHistory);
-		this.inner.onPreload = (route, site) => this._onPreload(route, site);
+		this.inner.onRoute = (route, changeHistory) =>
+			this._onRoute(route, changeHistory);
+		this.inner.onPreload = route => this._onPreload(route);
 
-		this.pageLoader.onLoaded = (resp, req, site, more) =>
-			this._onLoaded(resp, req, site, more);
-		this.pageLoader.loadFn = (req, site, opts) =>
-			this._internal.onLoad(req, site, opts);
+		this.pageLoader.onLoaded = (resp, req, more) =>
+			this._onLoaded(resp, req, more);
+		this.pageLoader.loadFn = (req, opts) =>
+			this._internal.onLoad(req, opts);
 		this.pageLoader.onProgress = (loading, progress) =>
 			this._onProgress(loading, progress);
 	}
@@ -169,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';
@@ -184,16 +193,25 @@ export default class Router {
 	 * // the following page will be opened https://example.com/de/foo/bar
 	 * ```
 	 */
-	open(target: string | URL | Route) {
-		this.inner.open(target);
+	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';
@@ -206,17 +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';
@@ -229,10 +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);
-		this.setNewRoute(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(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, site: Site) => void): () => void {
-		return this._onRouteEv.add(fn);
+	onRoute(fn: (route: Route) => void): () => void {
+		return this.route.subscribe(fn);
 	}
 
 	/**
@@ -275,17 +327,16 @@ export default class Router {
 	 *
 	 * @returns a function to remove the listener
 	 */
-	onRequest(fn: (req: Request, site: Site) => void): () => void {
+	onRequest(fn: (req: Request) => void): () => void {
 		return this._onRequest.add(fn);
 	}
 
 	private setNewRoute(route: Route) {
-		this.destroyRequest();
-
 		this._route.setSilent(route);
-		if (route.site) this._site.setSilent(route.site);
+		const siteChanged = this.site.get()?.id !== route.site.id;
+		this._site.setSilent(route.site);
 		this._route.notify();
-		if (route.site) this._site.notify();
+		if (siteChanged) this._site.notify();
 	}
 
 	private async _initClient() {
@@ -298,8 +349,12 @@ 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, site, ready) => {
+			this._internal.onLoaded = (success, req, ready) => {
 				const props = ready();
 				this._internal.onLoaded = () => {};
 
@@ -307,7 +362,6 @@ export default class Router {
 					success,
 					redirect: false,
 					req,
-					site,
 					props,
 				});
 			};
@@ -318,14 +372,13 @@ export default class Router {
 
 		// 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.site) {
+		if (!route.siteMatches()) {
 			const site = this.inner.siteByAcceptLang(acceptLang);
 
 			return {
 				success: true,
 				redirect: true,
 				req: new Request(site.url, site),
-				site,
 				props: {},
 			};
 		}
@@ -335,14 +388,13 @@ export default class Router {
 		const resp = await prom;
 
 		const hist = this.inner.history as ServerHistory;
-		if (hist.url) {
-			const nRoute = new Route(hist.url, null);
-			if (!route.eq(nRoute)) {
+		if (hist.url || hist.req) {
+			const nReq = this.inner.targetToRequest(hist.req ?? hist.url!);
+			if (!route.eq(nReq)) {
 				return {
 					success: true,
 					redirect: true,
-					req: Request.fromRoute(nRoute),
-					site: route.site!,
+					req: nReq,
 					props: {},
 				};
 			}
@@ -351,7 +403,7 @@ export default class Router {
 		return resp;
 	}
 
-	private _onRoute(req: Request, site: Site, changeHistory: () => void) {
+	private _onRoute(req: Request, changeHistory: () => void) {
 		this.destroyRequest();
 
 		this._request = req;
@@ -361,10 +413,14 @@ export default class Router {
 			throw new Error('render barrier is already open');
 		}
 
-		this._onRequest.trigger(req, site);
+		this._onRequest.trigger(req);
 
 		// route prepared
-		this.pageLoader.load(req, site, { changeHistory });
+		if (!req.disableLoadData) {
+			this.pageLoader.load(req, { changeHistory });
+		} else {
+			this._onNothingLoaded(req, { changeHistory });
+		}
 	}
 
 	private destroyRequest() {
@@ -374,14 +430,13 @@ export default class Router {
 		this._request = null;
 	}
 
-	private _onPreload(req: Request, site: Site) {
-		this.pageLoader.preload(req, site);
+	private _onPreload(req: Request) {
+		this.pageLoader.preload(req);
 	}
 
 	private async _onLoaded(
 		resp: LoadResponse,
 		req: Request,
-		site: Site,
 		more: LoadedMore,
 	) {
 		// check if the render was cancelled
@@ -394,19 +449,28 @@ export default class Router {
 
 		const route = req.toRoute();
 
-		const updateRoute = () => {
-			this._route.setSilent(route);
-			const siteChanged = this.site.get()?.id !== site.id;
-			this._site.setSilent(site);
-			this._route.notify();
-			if (siteChanged) this._site.notify();
+		// 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;
+		});
+	}
+
+	private async _onNothingLoaded(req: Request, more: LoadedMore) {
+		// check if the render was cancelled
+		if (await req._renderBarrier.ready()) return;
 
-			this._onRouteEv.trigger(route.clone(), site);
-		};
+		// 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();
 
-		this._internal.onLoaded(resp.success, req, site, () => {
-			updateRoute();
-			return resp.data;
+		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.