crelte 0.1.3 → 0.2.1

package/dist/routing/Router.js

@@ -1,4 +1,3 @@
-import Route from './Route.js';
 import InnerRouter from './InnerRouter.js';
 import PageLoader from './PageLoader.js';
 import { Writable } from 'crelte-std/stores';
@@ -29,7 +28,6 @@ export default class Router {
      * The loading progress, the value is between 0 and 1
      */
     _loadingProgress;
-    _onRouteEv;
     _onRequest;
     /** @hidden */
     _internal;
@@ -49,19 +47,19 @@ export default class Router {
         this._request = null;
         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.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.inner.onRoute = (route, changeHistory) => this._onRoute(route, changeHistory);
+        this.inner.onPreload = route => this._onPreload(route);
+        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);
     }
     /**
@@ -97,10 +95,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';
@@ -112,15 +113,24 @@ export default class Router {
      * // the following page will be opened https://example.com/de/foo/bar
      * ```
      */
-    open(target) {
-        this.inner.open(target);
+    open(target, opts = {}) {
+        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';
@@ -133,16 +143,35 @@ export default class Router {
      * router.pushState(route);
      * ```
      */
-    pushState(route) {
+    push(route, opts = {}) {
+        // 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) {
+        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';
@@ -155,10 +184,23 @@ export default class Router {
      * router.replaceState(route);
      * ```
      */
-    replaceState(route) {
+    replace(route, opts = {}) {
+        // 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) {
+        this.replace(route);
     }
     /**
      * Checks if there are previous routes which would allow it to go back
@@ -181,13 +223,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) {
-        return this._onRouteEv.add(fn);
+        return this.route.subscribe(fn);
     }
     /**
      * Add a listener for the onRequest event
@@ -200,12 +242,11 @@ export default class Router {
         return this._onRequest.add(fn);
     }
     setNewRoute(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)
+        if (siteChanged)
             this._site.notify();
     }
     async _initClient() {
@@ -213,15 +254,17 @@ export default class Router {
     }
     async _initServer(url, acceptLang) {
         this.inner.initServer();
+        this._internal.onNothingLoaded = (_req, ready) => {
+            ready();
+        };
         const prom = new Promise(resolve => {
-            this._internal.onLoaded = (success, req, site, ready) => {
+            this._internal.onLoaded = (success, req, ready) => {
                 const props = ready();
                 this._internal.onLoaded = () => { };
                 resolve({
                     success,
                     redirect: false,
                     req,
-                    site,
                     props,
                 });
             };
@@ -230,43 +273,46 @@ export default class Router {
         route.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.site) {
+        if (!route.siteMatches()) {
             const site = this.inner.siteByAcceptLang(acceptLang);
             return {
                 success: true,
                 redirect: true,
                 req: new Request(site.url, site),
-                site,
                 props: {},
             };
         }
         this.inner.setRoute(route);
         const resp = await prom;
         const hist = this.inner.history;
-        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: {},
                 };
             }
         }
         return resp;
     }
-    _onRoute(req, site, changeHistory) {
+    _onRoute(req, changeHistory) {
         this.destroyRequest();
         this._request = req;
         const barrier = req._renderBarrier;
         if (barrier.isOpen()) {
             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 });
+        }
     }
     destroyRequest() {
         if (!this._request)
@@ -274,10 +320,10 @@ export default class Router {
         this._request._renderBarrier.cancel();
         this._request = null;
     }
-    _onPreload(req, site) {
-        this.pageLoader.preload(req, site);
+    _onPreload(req) {
+        this.pageLoader.preload(req);
     }
-    async _onLoaded(resp, req, site, more) {
+    async _onLoaded(resp, req, more) {
         // check if the render was cancelled
         if (await req._renderBarrier.ready())
             return;
@@ -286,20 +332,27 @@ export default class Router {
         // in the meantime
         more.changeHistory();
         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._onRouteEv.trigger(route.clone(), site);
-        };
-        this._internal.onLoaded(resp.success, req, site, () => {
-            updateRoute();
+        // 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;
         });
     }
+    async _onNothingLoaded(req, more) {
+        // check if the render was cancelled
+        if (await req._renderBarrier.ready())
+            return;
+        // 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();
+        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);
+        });
+    }
     _onProgress(loading, progress) {
         if (this._loading.get() !== loading)
             this._loading.set(loading);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "crelte",
-	"version": "0.1.3",
+	"version": "0.2.1",
 	"author": "Crelte <support@crelte.com>",
 	"type": "module",
 	"scripts": {
@@ -74,6 +74,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"svelte-check": "^4.1.4",
 		"typescript-svelte-plugin": "^0.3.45",
-		"vitest": "^2.0.0"
+		"vitest": "^2.0.0",
+		"vite": "^5.0"
 	}
 }

package/src/CrelteRequest.ts

@@ -11,19 +11,12 @@ export default class CrelteRequest extends Crelte {
 	 */
 	req: Request;
 
-	/**
-	 * The current site
-	 */
-	site: Site;
-
 	private innerGlobals: Map<string, any>;
 
-	/// requires a site if the route does not contain a site
-	constructor(inner: Crelte, req: Request, site: Site) {
+	constructor(inner: Crelte, req: Request) {
 		super(inner);
 
 		this.req = req;
-		this.site = site;
 		this.innerGlobals = new Map();
 	}
 
@@ -37,24 +30,14 @@ export default class CrelteRequest extends Crelte {
 	 * If you provide a route it must contain a site or you must
 	 * provide one,
 	 */
-	static fromCrelte(
-		inner: Crelte,
-		req?: Route | Request,
-		site?: Site,
-	): CrelteRequest {
+	static fromCrelte(inner: Crelte, req?: Route | Request): CrelteRequest {
 		if (!req) {
 			req = inner.router.route.get();
 		}
 
-		if (!site) {
-			if (!req.site) throw new Error('site is required');
-			site = req.site;
-		}
-
 		return new CrelteRequest(
 			inner,
 			req instanceof Request ? req : Request.fromRoute(req),
-			site,
 		);
 	}
 
@@ -66,6 +49,18 @@ export default class CrelteRequest extends Crelte {
 		return this.req;
 	}
 
+	/**
+	 * Easy access to this.req.site
+	 *
+	 * ## Note
+	 * The site might not always match with the current route
+	 * but be the site default site or one that matches the
+	 * users language.
+	 */
+	get site(): Site {
+		return this.req.site;
+	}
+
 	/**
 	 * returns a globalSet
 	 *

package/src/graphql/GraphQl.ts

@@ -70,7 +70,9 @@ export type GraphQlOptions = {
  */
 export type GraphQlRequestOptions = {
 	path?: string;
-	route?: Route;
+	// !! the route here might not contain a site even if the types
+	// says it does. CrelteServer does not know about site
+	route?: Route | URL;
 	ignoreStatusCode?: boolean;
 	previewToken?: string;
 	siteToken?: string;
@@ -124,7 +126,8 @@ export default class GraphQl {
 		opts: GraphQlRequestOptions = {},
 	): Promise<unknown> {
 		if (opts.route) {
-			const search = opts.route.search;
+			const search =
+				(opts.route as URL).searchParams ?? opts.route.search;
 
 			// todo should variables contain siteId
 			// or maybe gql should detect loadData and add it there

package/src/index.ts

@@ -9,8 +9,22 @@ import CrelteRequest from './CrelteRequest.js';
 import type { Global, GlobalData } from './loadData/Globals.js';
 import type { Cookies } from './cookies/index.js';
 import type { Readable } from 'crelte-std/stores';
+import {
+	LoadData,
+	LoadDataArray,
+	LoadDataFn,
+	LoadDataObj,
+} from './loadData/index.js';
 
-export { Crelte, CrelteRequest, type QueryOptions };
+export {
+	Crelte,
+	CrelteRequest,
+	type QueryOptions,
+	type LoadData,
+	type LoadDataFn,
+	type LoadDataObj,
+	type LoadDataArray,
+};
 
 /**
  * Get Crelte from the current context
@@ -129,6 +143,15 @@ export function getCookies(): Cookies {
 	return getCrelte().cookies;
 }
 
+export function onRoute(fn: (route: Route, crelte: Crelte) => void) {
+	const crelte = getCrelte();
+	const rmListener = crelte.router.onRoute(route => {
+		fn(route, crelte);
+	});
+
+	onDestroy(rmListener);
+}
+
 /**
  * Listen for requests
  *
@@ -137,8 +160,8 @@ export function getCookies(): Cookies {
  */
 export function onRequest(fn: (cr: CrelteRequest) => void) {
 	const crelte = getCrelte();
-	const rmListener = crelte.router.onRequest((req, site) => {
-		fn(new CrelteRequest(crelte, req, site));
+	const rmListener = crelte.router.onRequest(req => {
+		fn(new CrelteRequest(crelte, req));
 	});
 
 	onDestroy(rmListener);

package/src/init/client.ts

@@ -131,8 +131,8 @@ export function main(data: MainData) {
 
 	// setup load Data
 
-	crelte.router._internal.onLoad = (req, site, opts) => {
-		const cr = new CrelteRequest(crelte, req, site);
+	crelte.router._internal.onLoad = (req, opts) => {
+		const cr = new CrelteRequest(crelte, req);
 		return loadFn(cr, data.app, data.entryQuery, data.globalQuery, opts);
 	};
 
@@ -154,12 +154,7 @@ export function main(data: MainData) {
 	};
 
 	let firstLoad = true;
-	crelte.router._internal.onLoaded = async (
-		success,
-		req,
-		site,
-		readyForProps,
-	) => {
+	crelte.router._internal.onLoaded = async (success, req, readyForProps) => {
 		const isFirstLoad = firstLoad;
 		firstLoad = false;
 
@@ -177,13 +172,13 @@ export function main(data: MainData) {
 			return handleLoadError(readyForProps());
 		}
 
-		const cr = new CrelteRequest(crelte, req, site);
+		const cr = new CrelteRequest(crelte, req);
 
 		const startTime = data.debugTiming ? Date.now() : null;
 		let render = async () => {
 			// we should trigger the route update here
 			pluginsBeforeRender(cr);
-			crelte.globals._updateSiteId(site.id);
+			crelte.globals._updateSiteId(cr.site.id);
 			updateAppProps(readyForProps());
 
 			await tick();
@@ -209,6 +204,15 @@ export function main(data: MainData) {
 		await render();
 	};
 
+	crelte.router._internal.onNothingLoaded = async (req, ready) => {
+		crelte.globals._updateSiteId(req.site.id);
+		ready();
+
+		await tick();
+
+		crelte.router._internal.domReady(req);
+	};
+
 	crelte.router._internal.initClient();
 }
 

package/src/init/server.ts

@@ -16,6 +16,8 @@ export type ServerData = {
 	craftWeb: string;
 	viteEnv: Map<string, string>;
 	cookies?: string;
+	readSitesCache?: () => Promise<any>;
+	writeSitesCache?: (data: any) => Promise<void>;
 };
 
 /**
@@ -85,7 +87,7 @@ export async function main(data: MainData): Promise<{
 	const cookies = data.serverData.cookies ?? '';
 	builder.setupCookies(cookies);
 
-	const csites = await loadSites(builder);
+	const csites = await loadSites(builder, data.serverData);
 	builder.ssrCache.set('crelteSites', csites);
 	builder.setupRouter(csites);
 
@@ -96,12 +98,12 @@ export async function main(data: MainData): Promise<{
 
 	// setup load Data
 
-	crelte.router._internal.onLoad = (req, site) => {
-		const cr = new CrelteRequest(crelte, req, site);
+	crelte.router._internal.onLoad = req => {
+		const cr = new CrelteRequest(crelte, req);
 		return loadFn(cr, data.app, data.entryQuery, data.globalQuery);
 	};
 
-	const { success, redirect, req, site, props } =
+	const { success, redirect, req, props } =
 		await crelte.router._internal.initServer(
 			data.serverData.url,
 			data.serverData.acceptLang,
@@ -110,7 +112,7 @@ export async function main(data: MainData): Promise<{
 
 	if (redirect) {
 		return {
-			status: 302,
+			status: req.statusCode ?? 302,
 			location: req.url.toString(),
 		};
 	}
@@ -119,8 +121,9 @@ export async function main(data: MainData): Promise<{
 	const ssrComponents = new SsrComponents();
 	ssrComponents.addToContext(context);
 
-	pluginsBeforeRender(new CrelteRequest(crelte, req, site));
-	crelte.globals._updateSiteId(site.id);
+	const cr = new CrelteRequest(crelte, req);
+	pluginsBeforeRender(cr);
+	crelte.globals._updateSiteId(cr.site.id);
 	// eslint-disable-next-line prefer-const
 	let { html, head } = data.app.default.render(props, { context });
 
@@ -128,7 +131,7 @@ export async function main(data: MainData): Promise<{
 	head += crelte.ssrCache._exportToHead();
 
 	let htmlTemplate = data.serverData.htmlTemplate;
-	htmlTemplate = htmlTemplate.replace('<!--page-lang-->', site.language);
+	htmlTemplate = htmlTemplate.replace('<!--page-lang-->', cr.site.language);
 
 	const finalHtml = htmlTemplate
 		.replace('</head>', head + '\n\t</head>')
@@ -205,12 +208,26 @@ export async function mainError(
 }
 
 // requires, GraphQl, SsrCache
-async function loadSites(builder: CrelteBuilder): Promise<SiteFromGraphQl[]> {
+async function loadSites(
+	builder: CrelteBuilder,
+	serverData: ServerData,
+): Promise<SiteFromGraphQl[]> {
 	if (!builder.graphQl) throw new Error();
 
 	if ('CRAFT_SITES_CACHED' in globalThis) {
-		// @ts-ignore
-		return globalThis['CRAFT_SITES_CACHED'];
+		return (globalThis as any)['CRAFT_SITES_CACHED'];
+	}
+
+	if (import.meta.env.PROD && serverData.readSitesCache) {
+		try {
+			const sites =
+				(await serverData.readSitesCache()) as SiteFromGraphQl[];
+			// @ts-ignore
+			globalThis['CRAFT_SITES_CACHED'] = sites;
+			return sites;
+		} catch (_e: any) {
+			// ignore
+		}
 	}
 
 	const resp = (await builder.graphQl.query(
@@ -233,5 +250,8 @@ async function loadSites(builder: CrelteBuilder): Promise<SiteFromGraphQl[]> {
 
 	// @ts-ignore
 	globalThis['CRAFT_SITES_CACHED'] = resp.crelteSites;
+	if (import.meta.env.PROD && serverData.writeSitesCache) {
+		await serverData.writeSitesCache(resp.crelteSites);
+	}
 	return resp.crelteSites;
 }

package/src/init/shared.ts

@@ -5,8 +5,8 @@ import { LoadData, callLoadData } from '../loadData/index.js';
 import { PluginCreator } from '../plugins/Plugins.js';
 import { LoadOptions } from '../routing/PageLoader.js';
 
-interface App<D, E, T> {
-	loadGlobalData?: LoadData<D>;
+interface App<E, T> {
+	loadGlobalData?: LoadData<null>;
 
 	// todo: add a generic
 	loadEntryData?: LoadData<any>;
@@ -60,7 +60,7 @@ export function getEntry(page: any): any {
 
 export async function loadFn<D, E, T>(
 	cr: CrelteRequest,
-	app: App<D, E, T>,
+	app: App<E, T>,
 	entryQuery: GraphQlQuery,
 	globalQuery?: GraphQlQuery,
 	loadOpts?: LoadOptions,
@@ -75,7 +75,7 @@ export async function loadFn<D, E, T>(
 	}
 
 	if (app.loadGlobalData) {
-		dataProm = callLoadData(app.loadGlobalData, cr) as any;
+		dataProm = callLoadData(app.loadGlobalData, cr, null) as any;
 	}
 
 	let globalProm: Promise<any> | null = null;