crelte 0.2.2 → 0.3.1

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();
 	}
 
@@ -205,7 +221,7 @@ export default class Router {
 	 * 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
+	 * (search argument) and then call push
 	 *
 	 * ## Note
 	 * This will always set the origin to 'push'
@@ -221,7 +237,7 @@ export default class Router {
 	 * const page = 1;
 	 * const route = router.route.get();
 	 * route.setSearchParam('page', page > 0 ? page : null);
-	 * router.pushState(route);
+	 * router.push(route);
 	 * ```
 	 */
 	push(route: Route | Request, opts: RequestOptions = {}) {
@@ -234,14 +250,13 @@ export default class Router {
 			disableLoadData: opts.disableLoadData ?? true,
 		});
 		this.inner.push(req);
-		this.destroyRequest();
-		this.setNewRoute(route);
 	}
 
 	/**
 	 * @deprecated use push instead
 	 */
 	pushState(route: Route | Request) {
+		console.warn('pushState is deprecated, use push instead');
 		this.push(route);
 	}
 
@@ -276,14 +291,13 @@ export default class Router {
 			disableLoadData: opts.disableLoadData ?? true,
 		});
 		this.inner.replace(req);
-		this.destroyRequest();
-		this.setNewRoute(req);
 	}
 
 	/**
 	 * @deprecated use replace instead
 	 */
 	replaceState(route: Route | Request) {
+		console.warn('replaceState is deprecated, use replace instead');
 		this.replace(route);
 	}
 
@@ -313,11 +327,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 +347,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 +386,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,
@@ -367,12 +397,12 @@ export default class Router {
 			};
 		});
 
-		const route = this.inner.targetToRequest(url);
-		route.origin = 'init';
+		const req = this.inner.targetToRequest(url);
+		req.origin = 'init';
 
 		// 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.siteMatches()) {
+		if (!req.siteMatches()) {
 			const site = this.inner.siteByAcceptLang(acceptLang);
 
 			return {
@@ -383,14 +413,15 @@ export default class Router {
 			};
 		}
 
-		this.inner.setRoute(route);
+		this.inner.route = req.toRoute();
+		this.inner.onRoute(req, () => {});
 
 		const resp = await prom;
 
 		const hist = this.inner.history as ServerHistory;
 		if (hist.url || hist.req) {
 			const nReq = this.inner.targetToRequest(hist.req ?? hist.url!);
-			if (!route.eq(nReq)) {
+			if (!req.eq(nReq)) {
 				return {
 					success: true,
 					redirect: true,

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);

package/src/utils.ts

@@ -0,0 +1,10 @@
+// This are internal utils. Consider adding them to crelte-std instead
+
+// this tries to do a structuredClone and else just uses JSON
+export function objClone(obj: any): any {
+	if (typeof structuredClone === 'function') {
+		return structuredClone(obj);
+	}
+
+	return JSON.parse(JSON.stringify(obj));
+}