crelte 0.1.3 → 0.2.0

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';
@@ -58,10 +57,10 @@ export default class Router {
             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);
     }
     /**
@@ -112,8 +111,8 @@ 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 = {}) {
+        this.inner.open(target, opts);
     }
     /**
      * This pushes the state of the route without triggering an event
@@ -136,6 +135,7 @@ export default class Router {
     pushState(route) {
         this.pageLoader.discard();
         this.inner.pushState(route);
+        this.destroyRequest();
         this.setNewRoute(route);
     }
     /**
@@ -158,6 +158,7 @@ export default class Router {
     replaceState(route) {
         this.pageLoader.discard();
         this.inner.replaceState(route);
+        this.destroyRequest();
         this.setNewRoute(route);
     }
     /**
@@ -200,12 +201,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() {
@@ -214,14 +214,13 @@ export default class Router {
     async _initServer(url, acceptLang) {
         this.inner.initServer();
         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 +229,41 @@ 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 });
+        this.pageLoader.load(req, { changeHistory });
     }
     destroyRequest() {
         if (!this._request)
@@ -274,10 +271,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;
@@ -287,15 +284,10 @@ export default class Router {
         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.setNewRoute(route);
+            this._onRouteEv.trigger(route.clone());
         };
-        this._internal.onLoaded(resp.success, req, site, () => {
+        this._internal.onLoaded(resp.success, req, () => {
             updateRoute();
             return resp.data;
         });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "crelte",
-	"version": "0.1.3",
+	"version": "0.2.0",
 	"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
@@ -137,8 +151,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();

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;

package/src/loadData/index.ts

@@ -5,6 +5,20 @@ import type { Global } from './Globals.js';
 
 export type { Globals, Global };
 
+export interface LoadDataFn<A1 = any> {
+	(cr: CrelteRequest, entryOrBlock: A1, ...args: any[]): Promise<any> | any;
+}
+
+export interface LoadDataObj<A1 = any> {
+	[key: string]: LoadData<A1>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LoadDataArray<A1 = any> extends Array<LoadData<A1>> {}
+
+// todo link to the real docs maybe instead of showing an example
+// so we can add @type {import('crelte').LoadData}
+// maybe enabling markdown might be enough: https://jsdoc.app/plugins-markdown
 /**
  * Load data function
  *
@@ -15,8 +29,6 @@ export type { Globals, Global };
  * Each property should be a loadData type, each one is called in parallel.
  * And will be available to your component with the same name.
  * ```
- * export const loadData = {
- *
  * import entriesQuery from '@/queries/entries.graphql';
  * import { loadData as headerLoadData } from '@/layout/header.svelte';
  *
@@ -71,20 +83,30 @@ export type { Globals, Global };
  * }
  * ```
  */
-
-export type LoadData<T> =
-	| ((cr: CrelteRequest, ...args: any[]) => Promise<T>)
+export type LoadData<A1 = any> =
+	| LoadDataFn<A1>
 	| GraphQlQuery
-	| T;
+	| LoadDataObj<A1>
+	| LoadDataArray<A1>
+	| string
+	| number
+	| null
+	| undefined;
+
+// export type LoadData<A1 = any, R = any> =
+// 	| ((cr: CrelteRequest, entryOrBlock: A1, ...args: any[]) => Promise<R>)
+// 	| GraphQlQuery
+// 	| Record<string, LoadData<A1, R>>;
 
-export async function callLoadData(
-	ld: LoadData<unknown>,
+export async function callLoadData<A1 = any>(
+	ld: LoadData<A1>,
 	cr: CrelteRequest,
+	arg1: A1,
 	...args: any[]
-): Promise<unknown> {
+): Promise<any> {
 	// either we have a function
 	if (typeof ld === 'function') {
-		return await ld(cr, ...args);
+		return await ld(cr, arg1, ...args);
 	}
 
 	// or a graphql query
@@ -92,10 +114,16 @@ export async function callLoadData(
 		return await cr.query(ld);
 	}
 
+	if (ld === null || typeof ld === 'undefined') return null;
+
+	if (Array.isArray(ld)) {
+		return await mergeLoadData(...ld)(cr, arg1, ...args);
+	}
+
 	// or an object
-	if (typeof ld === 'object' && ld !== null) {
+	if (typeof ld === 'object') {
 		const data = await Promise.all(
-			Object.values(ld).map(nld => callLoadData(nld, cr, ...args)),
+			Object.values(ld).map(nld => callLoadData(nld, cr, arg1, ...args)),
 		);
 
 		return Object.fromEntries(
@@ -119,10 +147,14 @@ export async function callLoadData(
  * );
  * ```
  */
-export function mergeLoadData(...lds: LoadData<object>[]): LoadData<object> {
-	return async (cr: CrelteRequest, ...args: any[]) => {
+export function mergeLoadData<A1 = any>(
+	...lds: LoadData<A1>[]
+): LoadDataFn<A1> {
+	return async (cr: CrelteRequest, arg1, ...args: any[]) => {
 		const datas = await Promise.all(
-			lds.map(ld => callLoadData(ld, cr, ...args) as Promise<object>),
+			lds.map(
+				ld => callLoadData(ld, cr, arg1, ...args) as Promise<object>,
+			),
 		);
 
 		return datas.reduce((acc, data) => ({ ...acc, ...data }), {});

package/src/routing/History.ts

@@ -1,8 +1,10 @@
+import Request from './Request.js';
+
 export default interface History {
 	scrollY(): number | null;
 	replaceState(data: any, url?: string): void;
 	pushState(data: any, url: string): void;
-	open(url: string): void;
+	open(req: Request): void;
 	back(): void;
 }
 
@@ -19,8 +21,8 @@ export class ClientHistory implements History {
 		history.pushState(data, '', url);
 	}
 
-	open(url: string): void {
-		window.location.href = url;
+	open(req: Request): void {
+		window.location.href = req.url.href;
 	}
 
 	back(): void {
@@ -31,10 +33,12 @@ export class ClientHistory implements History {
 export class ServerHistory implements History {
 	state: any | null;
 	url: string | null;
+	req: Request | null;
 
 	constructor() {
 		this.state = null;
 		this.url = null;
+		this.req = null;
 	}
 
 	scrollY(): number | null {
@@ -44,15 +48,18 @@ export class ServerHistory implements History {
 	replaceState(data: any, url?: string): void {
 		this.state = data;
 		this.url = url ?? null;
+		this.req = null;
 	}
 
 	pushState(data: any, url: string): void {
 		this.state = data;
 		this.url = url;
+		this.req = null;
 	}
 
-	open(url: string): void {
-		this.url = url;
+	open(req: Request): void {
+		this.req = req;
+		this.url = null;
 	}
 
 	back(): void {