crelte 0.2.2 → 0.3.0

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

@@ -133,6 +133,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 +151,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 +245,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,7 +295,7 @@ 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);

package/src/routing/Router.ts

@@ -67,13 +67,19 @@ type ServerInited = {
 export default class Router {
 	/**
 	 * The current route
+	 *
+	 * ## Note
+	 * Will always contain a route expect in the first loadData call
 	 */
-	private _route: Writable<Route>;
+	private _route: Writable<Route | null>;
 
 	/**
 	 * The current site
+	 *
+	 * ## Note
+	 * Will always contain a site expect in the first loadData call
 	 */
-	private _site: Writable<Site>;
+	private _site: Writable<Site | null>;
 
 	// the next request, just here to destroy it
 	private _request: Request | null;
@@ -117,9 +123,9 @@ export default class Router {
 		this._onRequest = new Listeners();
 
 		this._internal = {
-			onLoaded: () => { },
-			onNothingLoaded: () => { },
-			onLoad: () => { },
+			onLoaded: () => {},
+			onNothingLoaded: () => {},
+			onLoad: () => {},
 			domReady: req => this.inner.domReady(req),
 			initClient: () => this._initClient(),
 			initServer: (url, acceptLang) => this._initServer(url, acceptLang),
@@ -139,15 +145,25 @@ export default class Router {
 
 	/**
 	 * returns a store with the current route
+	 *
+	 * ## Note
+	 * Will always contain a route expect in the first loadData call
+	 *
+	 * Consider to use CrelteRequest instead
 	 */
-	get route(): Readable<Route> {
+	get route(): Readable<Route | null> {
 		return this._route.readclone();
 	}
 
 	/**
 	 * returns a store with the current site
+	 *
+	 * ## Note
+	 * Will always contain a site expect in the first loadData call
+	 *
+	 * Consider to use CrelteRequest instead
 	 */
-	get site(): Readable<Site> {
+	get site(): Readable<Site | null> {
 		return this._site.readonly();
 	}
 
@@ -242,6 +258,7 @@ export default class Router {
 	 * @deprecated use push instead
 	 */
 	pushState(route: Route | Request) {
+		console.warn('pushState is deprecated, use push instead');
 		this.push(route);
 	}
 
@@ -284,6 +301,7 @@ export default class Router {
 	 * @deprecated use replace instead
 	 */
 	replaceState(route: Route | Request) {
+		console.warn('replaceState is deprecated, use replace instead');
 		this.replace(route);
 	}
 
@@ -313,11 +331,13 @@ export default class Router {
 	 *
 	 * This will trigger every time a new route is set
 	 * and is equivalent to router.route.subscribe(fn)
+	 * expect that it will not trigger instantly
 	 *
 	 * @returns a function to remove the listener
 	 */
 	onRoute(fn: (route: Route) => void): () => void {
-		return this.route.subscribe(fn);
+		let first = true;
+		return this.route.subscribe(r => (first ? (first = false) : fn(r!)));
 	}
 
 	/**
@@ -331,6 +351,20 @@ export default class Router {
 		return this._onRequest.add(fn);
 	}
 
+	/**
+	 * 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(
+		target: string | URL | Route | Request,
+		opts: RequestOptions = {},
+	): Request {
+		return this.inner.targetToRequest(target, opts);
+	}
+
 	private setNewRoute(route: Route) {
 		this._route.setSilent(route);
 		const siteChanged = this.site.get()?.id !== route.site.id;
@@ -356,7 +390,7 @@ export default class Router {
 		const prom: Promise<ServerInited> = new Promise(resolve => {
 			this._internal.onLoaded = (success, req, ready) => {
 				const props = ready();
-				this._internal.onLoaded = () => { };
+				this._internal.onLoaded = () => {};
 
 				resolve({
 					success,

package/src/ssr/SsrCache.ts

@@ -1,7 +1,12 @@
 export async function calcKey(data: any) {
+	const json = JSON.stringify(data);
+	// this should only happen in an unsecure context
+	// specifically in the craft preview locally
+	if (!crypto?.subtle) return json;
+
 	// Convert the string data to an ArrayBuffer
 	const encoder = new TextEncoder();
-	const dataBuffer = encoder.encode(JSON.stringify(data));
+	const dataBuffer = encoder.encode(json);
 
 	// Use the Web Crypto API to hash the data with SHA-1
 	const hashBuffer = await crypto.subtle.digest('SHA-1', dataBuffer);