crelte 0.1.2 → 0.2.0

package/src/routing/InnerRouter.ts

@@ -1,8 +1,8 @@
 import Site, { SiteFromGraphQl } from './Site.js';
 import History from './History.js';
 import { ClientHistory, ServerHistory } from './History.js';
-import Request, { isRequest } from './Request.js';
-import Route from './Route.js';
+import Request, { isRequest, RequestOptions } from './Request.js';
+import Route, { RouteOptions } from './Route.js';
 
 export type InnerRouterOpts = {
 	preloadOnMouseOver: boolean;
@@ -13,16 +13,21 @@ export type InnerRouterOpts = {
  */
 export default class InnerRouter {
 	sites: Site[];
+	/**
+	 * The current route
+	 *
+	 * ## Null
+	 * It might be null on the first targetToRequest, open, and routeFromUrl call
+	 */
 	route: Route | null;
-	site: Site;
 	history: History;
 	preloadOnMouseOver: boolean;
 	/**
 	 * @param changeHistory returns a function you need to call when you are ready to
 	 update the window history (note do not call this after another onRoute call was made)
 	 */
-	onRoute: (route: Request, site: Site, changeHistory: () => void) => void;
-	onPreload: (route: Request, site: Site) => void;
+	onRoute: (route: Request, changeHistory: () => void) => void;
+	onPreload: (route: Request) => void;
 
 	private scrollDebounceTimeout: any | null;
 
@@ -36,7 +41,6 @@ export default class InnerRouter {
 		this.sites = sites.map(s => new Site(s));
 
 		this.route = null;
-		this.site = this.defaultSite();
 		// @ts-ignore
 		this.history = import.meta.env.SSR
 			? new ServerHistory()
@@ -58,18 +62,18 @@ export default class InnerRouter {
 		this.listen();
 
 		// let's first try to load from the state
-		const route = this.targetToRequest(window.location.href);
-		route._fillFromState(window.history.state);
+		const req = this.targetToRequest(window.location.href);
+		req._fillFromState(window.history.state);
 
-		route.origin = 'init';
+		req.origin = 'init';
 
-		if (route.search.get('x-craft-live-preview')) {
-			route.origin = 'live-preview-init';
+		if (req.search.get('x-craft-live-preview')) {
+			req.origin = 'live-preview-init';
 		}
 
 		window.history.scrollRestoration = 'manual';
 
-		this.open(route, false);
+		this.open(req, {}, false);
 	}
 
 	/**
@@ -80,8 +84,7 @@ export default class InnerRouter {
 	/**
 	 * Get a site and if possible use the accept lang header.
 	 *
-	 * @param {(string|null)} [acceptLang=null] Accept Language header.
-	 * @return {Site}
+	 * @param acceptLang Accept Language header.
 	 */
 	siteByAcceptLang(acceptLang: string | null = null): Site {
 		if (!acceptLang) return this.defaultSite();
@@ -125,7 +128,7 @@ export default class InnerRouter {
 	 * Get the default site
 	 */
 	defaultSite(): Site {
-		return this.sites[0];
+		return this.sites.find(s => s.primary) ?? this.sites[0];
 	}
 
 	/**
@@ -141,10 +144,15 @@ export default class InnerRouter {
 	 * @param target
 	 * @return Returns null if the url does not match our host (the protocol get's ignored)
 	 */
-	targetToRequest(target: string | URL | Route | Request): Request {
+	targetToRequest(
+		target: string | URL | Route | Request,
+		opts: RequestOptions = {},
+	): Request {
 		if (typeof target === 'string') {
 			if (target.startsWith('/')) {
-				const site = this.site;
+				// todo should we use the language matching or throw if the route does not
+				// exists
+				const site = this.route?.site ?? this.defaultSite();
 				target = new URL(site.uri + target, site.url);
 			} else {
 				target = new URL(target);
@@ -156,9 +164,10 @@ export default class InnerRouter {
 		}
 
 		if (!isRequest(target)) {
-			return Request.fromRoute(target);
+			return Request.fromRoute(target, opts);
 		}
 
+		target._updateOpts(opts);
 		return target;
 	}
 
@@ -170,7 +179,7 @@ export default class InnerRouter {
 	 */
 	routeFromUrl(fullUrl: URL): Route {
 		// strip stuff we dont need from url
-		const route = new Route(fullUrl, null);
+		const route = new Route(fullUrl, null!);
 		const url = route.url;
 
 		let site: Site | null = null;
@@ -193,7 +202,9 @@ export default class InnerRouter {
 			site = s;
 		}
 
-		route.site = site;
+		// todo should we throw if we can't find a site
+		// or use the site which matches the language
+		route.site = site ?? this.defaultSite();
 
 		return route;
 	}
@@ -284,7 +295,7 @@ export default class InnerRouter {
 			// route since it is now already the new route
 			this.route = null;
 
-			this.open(route, false);
+			this.open(route, {}, false);
 		});
 	}
 
@@ -294,8 +305,12 @@ export default class InnerRouter {
 	 * @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
 	 */
-	open(target: string | URL | Route | Request, pushState: boolean = true) {
-		const req = this.targetToRequest(target);
+	open(
+		target: string | URL | Route | Request,
+		opts: RouteOptions = {},
+		pushState: boolean = true,
+	) {
+		const req = this.targetToRequest(target, opts);
 
 		const current = this.route;
 		if (current) {
@@ -321,13 +336,13 @@ export default class InnerRouter {
 			// @ts-ignore
 			import.meta.env.SSR
 		) {
-			this.history.open(req.url.href);
+			this.history.open(req);
 			return;
 		}
 
 		if (pushState) {
 			req.index = (current?.index ?? 0) + 1;
-			this.onRoute(req, req.site ?? this.site, () => {
+			this.onRoute(req, () => {
 				this.pushState(req.toRoute());
 			});
 		} else {
@@ -345,9 +360,8 @@ export default class InnerRouter {
 	 */
 	setRoute(req: Request) {
 		this.route = req.toRoute();
-		if (req.site) this.site = req.site;
 
-		this.onRoute(req, this.site, () => {});
+		this.onRoute(req, () => {});
 	}
 
 	/**
@@ -368,7 +382,6 @@ export default class InnerRouter {
 		);
 
 		this.route = route;
-		if (route.site) this.site = route.site;
 	}
 
 	/**
@@ -386,7 +399,6 @@ export default class InnerRouter {
 		);
 
 		this.route = route;
-		if (route.site) this.site = route.site;
 	}
 
 	/**
@@ -398,21 +410,12 @@ export default class InnerRouter {
 	 */
 	preload(target: string | URL | Route | Request) {
 		const req = this.targetToRequest(target);
-
-		// todo, don't think this makes any sense
-		// if the domain of the current site is different than the domain of the
-		// new site id does not make sense to preload
-		if (this.site.url.origin !== req.url.origin) {
-			return;
-		}
-
 		const current = this.route;
-		const site = req.site ?? this.site;
 
 		// if the origin matches, the route will be able to be load
 		// so let's preload it
 		if (current && current.url.origin === req.url.origin) {
-			this.onPreload(req, site);
+			this.onPreload(req);
 		}
 	}
 

package/src/routing/PageLoader.ts

@@ -1,5 +1,4 @@
 import Request from './Request.js';
-import Site from './Site.js';
 
 export type PageLoaderOptions = {
 	debugTiming: boolean;
@@ -10,11 +9,7 @@ export type LoadResponse = {
 	data: any;
 };
 
-export type LoadFn = (
-	req: Request,
-	site: Site,
-	opts: LoadOptions,
-) => Promise<any> | any;
+export type LoadFn = (req: Request, opts: LoadOptions) => Promise<any> | any;
 
 export type LoadOptions = {
 	setProgress: (num: number) => void;
@@ -29,12 +24,7 @@ export default class PageLoader<More> {
 
 	private loadingVersion: number;
 
-	onLoaded: (
-		resp: LoadResponse,
-		req: Request,
-		site: Site,
-		more: More,
-	) => void;
+	onLoaded: (resp: LoadResponse, req: Request, more: More) => void;
 	onProgress: (loading: boolean, progress?: number) => void;
 	loadFn: LoadFn;
 
@@ -62,7 +52,7 @@ export default class PageLoader<More> {
 		this.onProgress(false);
 	}
 
-	async load(req: Request, site: Site, more: More) {
+	async load(req: Request, more: More) {
 		this.onProgress(true);
 
 		const version = ++this.loadingVersion;
@@ -76,7 +66,7 @@ export default class PageLoader<More> {
 
 		const resp: LoadResponse = { success: false, data: null };
 		try {
-			resp.data = await this.loadFn(req, site, { setProgress });
+			resp.data = await this.loadFn(req, { setProgress });
 			resp.success = true;
 		} catch (e) {
 			resp.success = false;
@@ -91,18 +81,18 @@ export default class PageLoader<More> {
 			return console.log('route changed quickly, ignoring response');
 
 		this.onProgress(false);
-		this.onLoaded(resp, req, site, more);
+		this.onLoaded(resp, req, more);
 	}
 
 	// you don't need to wait on this call
-	async preload(req: Request, site: Site) {
+	async preload(req: Request) {
 		const url = req.url.origin + req.url.pathname;
 		if (this.preloadedUrls.has(url)) return;
 
 		this.preloadedUrls.add(url);
 
 		try {
-			await this.loadFn(req, site, { setProgress: () => null });
+			await this.loadFn(req, { setProgress: () => null });
 		} catch (_e) {
 			console.log('preload failed');
 			// retry at another time

package/src/routing/Request.ts

@@ -10,6 +10,7 @@ export type RequestOptions = {
 	index?: number;
 	origin?: RouteOrigin;
 	disableScroll?: boolean;
+	statusCode?: number;
 };
 
 /**
@@ -24,31 +25,34 @@ export default class Request extends Route {
 	 */
 	disableScroll: boolean;
 
+	/**
+	 * The Status code that should be returned for a redirect
+	 */
+	statusCode: number | null;
+
 	/** @hidden */
 	_renderBarrier: RenderBarrier;
 
 	/**
 	 * Create a new Request
 	 */
-	constructor(
-		url: string | URL,
-		site: Site | null,
-		opts: RequestOptions = {},
-	) {
+	constructor(url: string | URL, site: Site, opts: RequestOptions = {}) {
 		super(url, site, opts);
 
 		this.disableScroll = opts.disableScroll ?? false;
+		this.statusCode = opts.statusCode ?? null;
 		this._renderBarrier = new RenderBarrier();
 	}
 
 	/**
 	 * Create a Request from a Route
 	 */
-	static fromRoute(route: Route) {
+	static fromRoute(route: Route, opts: RequestOptions = {}) {
 		return new Request(route.url.href, route.site, {
 			scrollY: route.scrollY ?? undefined,
 			index: route.index,
 			origin: route.origin,
+			...opts,
 		});
 	}
 
@@ -93,6 +97,7 @@ export default class Request extends Route {
 			index: this.index,
 			origin: this.origin,
 			disableScroll: this.disableScroll,
+			statusCode: this.statusCode ?? undefined,
 		});
 	}
 
@@ -106,6 +111,15 @@ export default class Request extends Route {
 			origin: this.origin,
 		});
 	}
+
+	/** @hidden */
+	_updateOpts(opts: RequestOptions = {}) {
+		this.scrollY = opts.scrollY ?? this.scrollY;
+		this.index = opts.index ?? this.index;
+		this.origin = opts.origin ?? this.origin;
+		this.disableScroll = opts.disableScroll ?? this.disableScroll;
+		this.statusCode = opts.statusCode ?? this.statusCode;
+	}
 }
 
 export function isRequest(req: any): req is Request {

package/src/routing/Route.ts

@@ -1,5 +1,5 @@
-import { trimSlashEnd } from './Router.js';
 import Site from './Site.js';
+import { trimSlashEnd } from './utils.js';
 
 export type RouteOptions = {
 	scrollY?: number;
@@ -38,9 +38,16 @@ 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
@@ -61,7 +68,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 +84,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 +110,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,6 +154,22 @@ export default class Route {
 		return this.url.hash;
 	}
 
+	/**
+	 * 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
 	 *

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
@@ -50,14 +49,9 @@ type ServerInited = {
 	// redirect to the route url
 	redirect: boolean;
 	req: Request;
-	site: Site;
 	props: any;
 };
 
-export function trimSlashEnd(str: string) {
-	return str.endsWith('/') ? str.substring(0, str.length - 1) : str;
-}
-
 // Make sure route and nextRoute are not the same object as _inner.route
 export default class Router {
 	/**
@@ -84,9 +78,9 @@ export default class Router {
 	 */
 	private _loadingProgress: Writable<number>;
 
-	private _onRouteEv: Listeners<[Route, Site]>;
+	private _onRouteEv: Listeners<[Route]>;
 
-	private _onRequest: Listeners<[Request, Site]>;
+	private _onRequest: Listeners<[Request]>;
 
 	/** @hidden */
 	_internal: Internal;
@@ -123,14 +117,14 @@ export default class Router {
 			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);
 	}
@@ -188,8 +182,8 @@ 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, opts: RequestOptions = {}) {
+		this.inner.open(target, opts);
 	}
 
 	/**
@@ -213,6 +207,7 @@ export default class Router {
 	pushState(route: Route) {
 		this.pageLoader.discard();
 		this.inner.pushState(route);
+		this.destroyRequest();
 		this.setNewRoute(route);
 	}
 
@@ -236,6 +231,7 @@ export default class Router {
 	replaceState(route: Route) {
 		this.pageLoader.discard();
 		this.inner.replaceState(route);
+		this.destroyRequest();
 		this.setNewRoute(route);
 	}
 
@@ -268,7 +264,7 @@ export default class Router {
 	 *
 	 * @returns a function to remove the listener
 	 */
-	onRoute(fn: (route: Route, site: Site) => void): () => void {
+	onRoute(fn: (route: Route) => void): () => void {
 		return this._onRouteEv.add(fn);
 	}
 
@@ -279,17 +275,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() {
@@ -303,7 +298,7 @@ export default class Router {
 		this.inner.initServer();
 
 		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 = () => {};
 
@@ -311,7 +306,6 @@ export default class Router {
 					success,
 					redirect: false,
 					req,
-					site,
 					props,
 				});
 			};
@@ -322,14 +316,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: {},
 			};
 		}
@@ -339,14 +332,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: {},
 				};
 			}
@@ -355,7 +347,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;
@@ -365,10 +357,10 @@ 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 });
+		this.pageLoader.load(req, { changeHistory });
 	}
 
 	private destroyRequest() {
@@ -378,14 +370,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
@@ -399,16 +390,12 @@ 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();
+			this.setNewRoute(route);
 
-			this._onRouteEv.trigger(route.clone(), site);
+			this._onRouteEv.trigger(route.clone());
 		};
 
-		this._internal.onLoaded(resp.success, req, site, () => {
+		this._internal.onLoaded(resp.success, req, () => {
 			updateRoute();
 			return resp.data;
 		});