crelte 0.2.2 → 0.3.1

package/src/loadData/Globals.ts

@@ -4,25 +4,30 @@ const emergency = getGlobal('emergency');
 
 // returns the data based on the current site (no store)
 cr.getGlobal('emergency')
+
 */
 
 import { Writable } from 'crelte-std/stores';
 
-export type GlobalWaiters = [(g: Global<any> | null) => void];
+export type GlobalWaiters<T> = [(g: T | null) => void];
 
 export default class Globals {
 	// while the globals are not loaded if somebody calls
-	// getOrWait then we need to store the waiters
-	private waiters: Map<string, GlobalWaiters>;
-	private entries: Map<string, Global<any>>;
-	private loaded: boolean;
-	private prevSiteId: number | null;
+	// getAsync then we need to store the waiters
+	private waiters: Map<number, Map<string, GlobalWaiters<any>>>;
+	private data: Map<number, Map<string, any>>;
+	private stores: Map<string, Global<any>>;
+	private currentSiteId: number | null;
 
 	constructor() {
 		this.waiters = new Map();
-		this.entries = new Map();
-		this.loaded = false;
-		this.prevSiteId = null;
+		this.data = new Map();
+		this.stores = new Map();
+		this.currentSiteId = null;
+	}
+
+	get<T = any>(name: string, siteId: number): T | null {
+		return this.data.get(siteId)?.get(name) ?? null;
 	}
 
 	/**
@@ -31,10 +36,10 @@ export default class Globals {
 	 * ## Note
 	 * This only works in loadData, in loadGlobalData this will
 	 * always return null. In that context you should use
-	 * `.getGlobalAsync`
+	 * `.getAsync`
 	 */
-	get<T extends GlobalData>(name: string): Global<T> | null {
-		return this.entries.get(name) ?? null;
+	getStore<T = any>(name: string): Global<T> | null {
+		return this.stores.get(name) ?? null;
 	}
 
 	/**
@@ -44,15 +49,20 @@ export default class Globals {
 	 * This is only useful in loadGlobalData in all other cases
 	 * you can use `.getGlobal` which does return a Promise
 	 */
-	getAsync<T extends GlobalData>(
-		name: string,
-	): Promise<Global<T> | null> | Global<T> | null {
-		if (this.loaded) return this.get(name);
+	getAsync<T = any>(name: string, siteId: number): Promise<T | null> {
+		if (this._wasLoaded(siteId))
+			return Promise.resolve(this.get(name, siteId));
+
+		let listeners = this.waiters.get(siteId);
+		if (!listeners) {
+			listeners = new Map();
+			this.waiters.set(siteId, listeners);
+		}
 
-		let waiter = this.waiters.get(name);
+		let waiter = listeners.get(name);
 		if (!waiter) {
 			waiter = [] as any;
-			this.waiters.set(name, waiter!);
+			listeners.set(name, waiter!);
 		}
 
 		return new Promise(resolve => {
@@ -61,88 +71,73 @@ export default class Globals {
 	}
 
 	/** @hidden */
-	_wasLoaded(): boolean {
-		return this.loaded;
+	_wasLoaded(siteId: number): boolean {
+		return this.data.has(siteId);
 	}
 
 	// data is the data from the global graphql
 	// so it contains some keys and data which should be parsed
 	// and created a store for each key
+	// do not call this if _wasLoaded returns true with the same siteId
 	/** @hidden */
 	_setData(siteId: number, data: any) {
-		const wasLoaded = this.loaded;
-		this.loaded = true;
+		const map = new Map(Object.entries(data));
+		this.data.set(siteId, map);
 
-		for (const [key, value] of Object.entries(data)) {
-			this.entries.set(key, new Global(key, value as any, siteId));
-		}
-
-		if (!wasLoaded) {
-			this.waiters.forEach((waiters, key) => {
-				waiters.forEach(waiter => waiter(this.get(key)));
-			});
-			this.waiters.clear();
-		}
+		this.waiters.get(siteId)?.forEach((waiters, key) => {
+			waiters.forEach(waiter => waiter(map.get(key)));
+		});
+		this.waiters.delete(siteId);
 	}
 
 	/** @hidden */
-	_globalsBySite(siteId: number): Map<string, any> {
-		const map = new Map();
+	_updateSiteId(siteId: number) {
+		if (this.currentSiteId === siteId) return;
 
-		for (const [key, global] of this.entries) {
-			map.set(key, global.bySiteId(siteId));
-		}
+		const data = this.data.get(siteId) ?? new Map();
 
-		return map;
-	}
+		// we set all global data to null via setSilent
+		// then set them all with the new data
+		// and update all of them
 
-	/** @hidden */
-	_updateSiteId(siteId: number) {
-		// todo we should only trigger
-		if (this.prevSiteId === siteId) return;
+		this.stores.forEach(global => global._setSilent(null));
 
-		this.entries.forEach(global => global._updateSiteId(siteId));
-	}
-}
+		data.forEach((value, key) => {
+			let global = this.stores.get(key);
+			if (global) {
+				global._setSilent(value);
+			} else {
+				global = new Global(key, value);
+				this.stores.set(key, global);
+			}
+		});
 
-/**
- * A globalSet Data
- *
- * Each global query should contain the siteId
- */
-export interface GlobalData {
-	siteId?: number;
-	[key: string]: any;
+		this.stores.forEach(global => global._notify());
+	}
 }
 
 /**
  * A globalSet store
  */
-export class Global<T extends GlobalData> {
+export class Global<T = any> {
+	/** @hidden */
 	private inner: Writable<T>;
-	/// if languages is null this means we always have the same data
-	private languages: T[] | null;
-
-	constructor(name: string, data: T[] | T, siteId: number) {
-		this.languages = null;
-
-		let inner: T;
-		if (Array.isArray(data)) {
-			// make sure the data contains an object with the property
-			// siteId
-			this.languages = data;
-			inner = data.find(d => d.siteId === siteId)!;
-
-			if (!inner?.siteId) {
-				throw new Error(
-					`The global query ${name} does not contain the required siteId property`,
-				);
-			}
-		} else {
-			inner = data;
+
+	constructor(name: string, data: T) {
+		// todo remove in v1.0
+		// In v0.2, we queried the global data for all sites.
+		// We now check if the siteId is present and notify the user to remove it.
+		if (
+			typeof (data as any).siteId === 'number' ||
+			(Array.isArray(data) && typeof data[0]?.siteId === 'number')
+		) {
+			throw new Error(
+				`The global query ${name} should not include the siteId` +
+					` property. Instead, use the siteId as a parameter.`,
+			);
 		}
 
-		this.inner = new Writable(inner);
+		this.inner = new Writable(data);
 	}
 
 	/**
@@ -162,25 +157,13 @@ export class Global<T extends GlobalData> {
 		return this.inner.get();
 	}
 
-	/**
-	 * Get the value based on the siteId
-	 *
-	 * ## Note
-	 * If you pass a siteId which comes from craft
-	 * you will never receive null
-	 */
-	bySiteId(siteId: number): T | null {
-		if (this.languages)
-			return this.languages.find(d => d.siteId === siteId) ?? null;
-
-		return this.inner.get();
+	/** @hidden */
+	_setSilent(value: T) {
+		this.inner.setSilent(value);
 	}
 
 	/** @hidden */
-	_updateSiteId(siteId: number) {
-		if (!this.languages) return;
-
-		const inner = this.languages.find(d => d.siteId === siteId);
-		this.inner.set(inner!);
+	_notify() {
+		this.inner.notify();
 	}
 }

package/src/routing/InnerRouter.ts

@@ -68,7 +68,10 @@ export default class InnerRouter {
 		req.origin = 'init';
 		window.history.scrollRestoration = 'manual';
 
-		this.setRoute(req);
+		// we set it now instead of waiting for the onRoute call
+		// because the window.history is already set
+		this.route = req.toRoute();
+		this.onRoute(req, () => {});
 	}
 
 	/**
@@ -133,6 +136,7 @@ export default class InnerRouter {
 		return this.sites.find(s => s.id === id) ?? null;
 	}
 
+	// keep this doc in sync with Router.targetToRequest
 	/**
 	 * Resolve a url or Route and convert it to a Request
 	 *
@@ -150,6 +154,8 @@ export default class InnerRouter {
 				// exists
 				const site = this.route?.site ?? this.defaultSite();
 				target = new URL(site.uri + target, site.url);
+			} else if (!target) {
+				throw new Error('the url is not allowed to be empty');
 			} else {
 				target = new URL(target);
 			}
@@ -242,7 +248,11 @@ export default class InnerRouter {
 				if (currentMouseOver && link === currentMouseOver) return;
 				if (link && link.target.toLowerCase() === '_blank') return;
 
-				if (link && !link.hasAttribute('data-no-preload')) {
+				if (
+					link &&
+					!link.hasAttribute('data-no-preload') &&
+					link.href
+				) {
 					this.preload(link.href);
 				}
 
@@ -288,13 +298,16 @@ export default class InnerRouter {
 		}
 
 		window.addEventListener('popstate', async e => {
-			if (!('route' in e.state)) return;
+			if (!e.state?.route) return;
 
 			const req = this.targetToRequest(window.location.href);
 			req._fillFromState(e.state);
 			req.origin = 'pop';
 
-			this.setRoute(req);
+			// we set it now instead of waiting for the onRoute call
+			// because the window.history was already modified
+			this.route = req.toRoute();
+			this.onRoute(req, () => {});
 		});
 	}
 
@@ -343,24 +356,15 @@ export default class InnerRouter {
 
 		req.index = (current?.index ?? 0) + 1;
 		this.onRoute(req, () => {
-			this.push(req, true);
+			const url = req.url;
+			this.history.pushState(
+				req._toState(),
+				url.pathname + url.search + url.hash,
+			);
+			this.route = req.toRoute();
 		});
 	}
 
-	/**
-	 * Sets a route
-	 *
-	 * Will trigger an onRoute event but will not store any scroll progress
-	 * or modify the history
-	 *
-	 * @param req
-	 */
-	setRoute(req: Request, preventOnRoute = false) {
-		this.route = req.toRoute();
-
-		if (!preventOnRoute) this.onRoute(req, () => {});
-	}
-
 	/**
 	 * This pushes a new route to the history
 	 *
@@ -369,7 +373,7 @@ export default class InnerRouter {
 	 * ## Important
 	 * Make sure the route has the correct origin
 	 */
-	push(req: Request, preventOnRoute = false) {
+	push(req: Request) {
 		const url = req.url;
 		// todo a push should also store the previous scrollY
 
@@ -383,12 +387,13 @@ export default class InnerRouter {
 			nReq.scrollY = this.history.scrollY();
 		}
 
-		this.history.pushState(
-			nReq._toState(),
-			url.pathname + url.search + url.hash,
-		);
-
-		this.setRoute(req, preventOnRoute);
+		this.onRoute(req, () => {
+			this.history.pushState(
+				req._toState(),
+				url.pathname + url.search + url.hash,
+			);
+			this.route = req.toRoute();
+		});
 	}
 
 	/**
@@ -413,12 +418,13 @@ export default class InnerRouter {
 			nReq.scrollY = this.history.scrollY();
 		}
 
-		this.history.replaceState(
-			nReq._toState(),
-			url.pathname + url.search + url.hash,
-		);
-
-		this.setRoute(req);
+		this.onRoute(req, () => {
+			this.history.replaceState(
+				req._toState(),
+				url.pathname + url.search + url.hash,
+			);
+			this.route = req.toRoute();
+		});
 	}
 
 	/**

package/src/routing/Request.ts

@@ -1,6 +1,7 @@
 import { Barrier } from 'crelte-std/sync';
 import Route, { RouteOrigin } from './Route.js';
 import Site from './Site.js';
+import { objClone } from '../utils.js';
 
 /**
  * Options to create a Request
@@ -9,6 +10,8 @@ export type RequestOptions = {
 	scrollY?: number;
 	index?: number;
 	origin?: RouteOrigin;
+	state?: Record<string, any>;
+	context?: Record<string, any>;
 	disableScroll?: boolean;
 	disableLoadData?: boolean;
 	statusCode?: number;
@@ -60,6 +63,8 @@ export default class Request extends Route {
 			scrollY: route.scrollY ?? undefined,
 			index: route.index,
 			origin: route.origin,
+			state: route._state,
+			context: route._context,
 			...opts,
 		});
 	}
@@ -104,6 +109,8 @@ export default class Request extends Route {
 			scrollY: this.scrollY ?? undefined,
 			index: this.index,
 			origin: this.origin,
+			state: objClone(this._state),
+			context: this._context,
 			disableScroll: this.disableScroll,
 			statusCode: this.statusCode ?? undefined,
 		});
@@ -117,6 +124,8 @@ export default class Request extends Route {
 			scrollY: this.scrollY ?? undefined,
 			index: this.index,
 			origin: this.origin,
+			state: objClone(this._state),
+			context: this._context,
 		});
 	}
 
@@ -125,6 +134,8 @@ export default class Request extends Route {
 		this.scrollY = opts.scrollY ?? this.scrollY;
 		this.index = opts.index ?? this.index;
 		this.origin = opts.origin ?? this.origin;
+		this._state = opts.state ?? this._state;
+		this._context = opts.context ?? this._context;
 		this.disableScroll = opts.disableScroll ?? this.disableScroll;
 		this.statusCode = opts.statusCode ?? this.statusCode;
 	}

package/src/routing/Route.ts

@@ -1,3 +1,4 @@
+import { objClone } from '../utils.js';
 import Site from './Site.js';
 import { trimSlashEnd } from './utils.js';
 
@@ -5,6 +6,8 @@ export type RouteOptions = {
 	scrollY?: number;
 	index?: number;
 	origin?: RouteOrigin;
+	state?: Record<string, any>;
+	context?: Record<string, any>;
 };
 
 /**
@@ -74,6 +77,25 @@ export default class Route {
 	 */
 	origin: RouteOrigin;
 
+	/**
+	 * @hidden
+	 * State data that can be used to store additional information
+	 */
+	_state: Record<string, any>;
+
+	/**
+	 * @hidden
+	 * Any data that should be passed to onRoute and onRequest handlers
+	 * or exchanged between loadData's
+	 * This context is not persistant and should be considered "valid"
+	 * only for the current request / route
+	 *
+	 * ## Note
+	 * Consider using state instead. This will not be cloned in the clone
+	 * call so will always be the same object
+	 */
+	_context: Record<string, any>;
+
 	/**
 	 * Creates a new Route
 	 */
@@ -84,6 +106,8 @@ export default class Route {
 		this.scrollY = opts.scrollY ?? null;
 		this.index = opts.index ?? 0;
 		this.origin = opts.origin ?? 'manual';
+		this._state = opts.state ?? {};
+		this._context = opts.context ?? {};
 	}
 
 	/**
@@ -184,7 +208,8 @@ export default class Route {
 	}
 
 	/**
-	 * Sets the search param or removes it if the value is null or undefined
+	 * Sets the search param or removes it if the value is null, undefined or an
+	 * empty string
 	 *
 	 * ## Example
 	 * ```
@@ -197,13 +222,69 @@ export default class Route {
 	 * ```
 	 */
 	setSearchParam(key: string, value?: string | number | null) {
-		if (typeof value !== 'undefined' && value !== null) {
+		const deleteValue =
+			typeof value === 'undefined' ||
+			value === null ||
+			(typeof value === 'string' && value === '');
+
+		if (!deleteValue) {
 			this.search.set(key, value as string);
 		} else {
 			this.search.delete(key);
 		}
 	}
 
+	/**
+	 * Returns a state value if it exists.
+	 */
+	getState<T = any>(key: string): T | null {
+		return this._state[key] ?? null;
+	}
+
+	/**
+	 * Sets a state value.
+	 * If the value is null or undefined, the key will be removed.
+	 *
+	 * ## When to use state
+	 * State is used to store additional information that persists across route changes.
+	 * The State is only available in the client code since it is stored using window.history.
+	 *
+	 * Consider using setSearchParam instead to enable server side rendering.
+	 */
+	setState<T>(key: string, value: T | null | undefined) {
+		if (typeof value === 'undefined' || value === null) {
+			delete this._state[key];
+		} else {
+			this._state[key] = value;
+		}
+	}
+
+	/**
+	 * Returns a context value if it exists.
+	 */
+	getContext<T = any>(key: string): T | null {
+		return this._context[key] ?? null;
+	}
+
+	/**
+	 * Sets a context value.
+	 * If the value is null or undefined, the key will be removed.
+	 *
+	 * ## When to use context
+	 * Context is used to pass data to onRoute and onRequest handlers or exchange data between loadData calls.
+	 * This context is not persistent and should be considered valid only for the current request/route.
+	 * The context is not cloned in the clone call and will be the same object.
+	 */
+	setContext<T>(key: string, value: T | null | undefined) {
+		if (typeof value === 'undefined' || value === null) {
+			delete this._context[key];
+		} else {
+			this._context[key] = value;
+		}
+	}
+	/**
+	 * Returns true if the route is in live preview mode
+	 */
 	inLivePreview(): boolean {
 		return !!this.search.get('x-craft-live-preview');
 	}
@@ -229,6 +310,9 @@ export default class Route {
 	 *
 	 * This checks all properties of the url but search params do not have to be
 	 * in the same order
+	 *
+	 * ## Note
+	 * This does not check the state or context
 	 */
 	eq(route: Route | null) {
 		return (
@@ -288,6 +372,8 @@ export default class Route {
 			scrollY: this.scrollY ?? undefined,
 			index: this.index,
 			origin: this.origin,
+			state: objClone(this._state),
+			context: this._context,
 		});
 	}
 
@@ -298,6 +384,10 @@ export default class Route {
 
 		if (typeof state?.route?.index === 'number')
 			this.index = state.route.index;
+
+		if (typeof state?.state === 'object' && state.state !== null) {
+			this._state = state.state;
+		}
 	}
 
 	/** @hidden */
@@ -307,6 +397,7 @@ export default class Route {
 				scrollY: this.scrollY,
 				index: this.index,
 			},
+			state: this._state,
 		};
 	}
 }