crelte 0.3.0 → 0.3.2

package/dist/routing/Router.js

@@ -54,6 +54,8 @@ export default class Router {
         this._loading = new Writable(false);
         this._loadingProgress = new Writable(0);
         this._onRequest = new Listeners();
+        // these functions are exposed to the init "module"
+        // but should not be used by anybody else
         this._internal = {
             onLoaded: () => { },
             onNothingLoaded: () => { },
@@ -130,24 +132,35 @@ export default class Router {
      * ```
      */
     open(target, opts = {}) {
-        const req = this.inner.targetToRequest(target, {
-            ...opts,
+        const req = this.targetOrUpdateToRequest(target, opts, {
             origin: 'manual',
         });
+        if (!req)
+            return;
         this.inner.open(req);
     }
     /**
      * 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'
      * 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
+     * ## Example using the update function
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     *
+     * const page = 1;
+     * router.push(req => req.setSearchParam('page', page || null));
+     * ```
+     *
+     * ## Example using the route object
      * ```
      * import { getRouter } from 'crelte';
      *
@@ -156,21 +169,20 @@ 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, opts = {}) {
-        // cancel previous request
-        this.pageLoader.discard();
-        const req = this.inner.targetToRequest(route, {
-            ...opts,
+        // theoretically string and URL also work but we might
+        // change that in the future
+        const req = this.targetOrUpdateToRequest(route, opts, {
             origin: 'push',
             scrollY: opts.scrollY ?? undefined,
             disableLoadData: opts.disableLoadData ?? true,
         });
+        if (!req)
+            return;
         this.inner.push(req);
-        this.destroyRequest();
-        this.setNewRoute(route);
     }
     /**
      * @deprecated use push instead
@@ -180,16 +192,26 @@ export default class Router {
         this.push(route);
     }
     /**
-     * This replaces the state of the route without triggering an event
+     * This replaces the state of the route without triggering a new pageload
      *
      * 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`
+     * And will clear the scrollY value if you don't provide a new one via the `opts`
+     * This will disableLoadData by default if you don't provide an override via the `opts`
      *
-     * ## Example
+     * ## Example using the update function
+     * ```
+     * import { getRouter } from 'crelte';
+     *
+     * const router = getRouter();
+     *
+     * const search = 'foo';
+     * router.replace(req => req.setSearchParam('search', search));
+     * ```
+     *
+     * ## Example using the route object
      * ```
      * import { getRouter } from 'crelte';
      *
@@ -197,21 +219,21 @@ export default class Router {
      *
      * const search = 'foo';
      * const route = router.route.get();
-     * route.setSearchParam('search', search ? search : null);
-     * router.replaceState(route);
+     * route.setSearchParam('search', search);
+     * router.replace(route);
      * ```
      */
     replace(route, opts = {}) {
-        // cancel previous request
-        this.pageLoader.discard();
-        const req = this.inner.targetToRequest(route, {
+        // theoretically string and URL also work but we might
+        // change that in the future
+        const req = this.targetOrUpdateToRequest(route, opts, {
             origin: 'replace',
             scrollY: opts.scrollY ?? undefined,
             disableLoadData: opts.disableLoadData ?? true,
         });
+        if (!req)
+            return;
         this.inner.replace(req);
-        this.destroyRequest();
-        this.setNewRoute(req);
     }
     /**
      * @deprecated use replace instead
@@ -299,11 +321,11 @@ 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 {
                 success: true,
@@ -312,12 +334,13 @@ export default class Router {
                 props: {},
             };
         }
-        this.inner.setRoute(route);
+        this.inner.route = req.toRoute();
+        this.inner.onRoute(req, () => { });
         const resp = await prom;
         const hist = this.inner.history;
         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,
@@ -328,6 +351,7 @@ export default class Router {
         }
         return resp;
     }
+    // gets called by the InnerRouter when a new route is requested
     _onRoute(req, changeHistory) {
         this.destroyRequest();
         this._request = req;
@@ -341,6 +365,7 @@ export default class Router {
             this.pageLoader.load(req, { changeHistory });
         }
         else {
+            this.pageLoader.discard();
             this._onNothingLoaded(req, { changeHistory });
         }
     }
@@ -353,12 +378,13 @@ export default class Router {
     _onPreload(req) {
         this.pageLoader.preload(req);
     }
+    // gets called by the pageLoader when teh loadData completes
     async _onLoaded(resp, 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
+        // this will only happen if no other route has been requested
         // in the meantime
         more.changeHistory();
         const route = req.toRoute();
@@ -368,6 +394,7 @@ export default class Router {
             return resp.data;
         });
     }
+    // this gets called if loadData is not called
     async _onNothingLoaded(req, more) {
         // check if the render was cancelled
         if (await req._renderBarrier.ready())
@@ -383,10 +410,37 @@ export default class Router {
             this.setNewRoute(route);
         });
     }
+    // this is called by the pageLoader if we get a progress update
     _onProgress(loading, progress) {
         if (this._loading.get() !== loading)
             this._loading.set(loading);
         if (typeof progress === 'number')
             this._loadingProgress.set(progress);
     }
+    /**
+     * Transforms a target to a request
+     *
+     * returns null if the request was canceled by the update request
+     */
+    targetOrUpdateToRequest(target, opts = {}, forcedOpts = {}) {
+        // we have an update request
+        if (typeof target === 'function') {
+            const route = this.route.get();
+            if (!route) {
+                throw new Error('route to update missing in first loadData call');
+            }
+            // first get a req
+            const req = this.inner.targetToRequest(route, opts);
+            // check if the request was canceled by the update request
+            if (target(req) === false)
+                return null;
+            // now we add the forcedOpts
+            req._updateOpts(forcedOpts);
+            return req;
+        }
+        return this.inner.targetToRequest(target, {
+            ...opts,
+            ...forcedOpts,
+        });
+    }
 }

package/dist/routing/index.d.ts

@@ -1,6 +1,6 @@
-import Router from './Router.js';
+import Router, { type UpdateRequest } from './Router.js';
 import Route, { type RouteOptions } from './Route.js';
 import Request, { type RequestOptions, type DelayRender } from './Request.js';
 import Site from './Site.js';
-export { Router, Route, RouteOptions, Site, Request, DelayRender, RequestOptions, };
+export { Router, UpdateRequest, Route, RouteOptions, Site, Request, DelayRender, RequestOptions, };
 //# sourceMappingURL=index.d.ts.map

package/dist/routing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/routing/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,OAAO,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EACN,MAAM,EACN,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,cAAc,GACd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/routing/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,OAAO,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EACN,MAAM,EACN,aAAa,EACb,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,cAAc,GACd,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function objClone(obj: any): any;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAMtC"}

package/dist/utils.js

@@ -0,0 +1,8 @@
+// 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) {
+    if (typeof structuredClone === 'function') {
+        return structuredClone(obj);
+    }
+    return JSON.parse(JSON.stringify(obj));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "crelte",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"author": "Crelte <support@crelte.com>",
 	"type": "module",
 	"scripts": {
@@ -44,6 +44,10 @@
 			"types": "./dist/routing/index.d.ts",
 			"default": "./dist/routing/index.js"
 		},
+		"./entry": {
+			"types": "./dist/entry/index.d.ts",
+			"default": "./dist/entry/index.js"
+		},
 		"./ssr": {
 			"types": "./dist/ssr/index.d.ts",
 			"default": "./dist/ssr/index.js"
@@ -71,14 +75,15 @@
 	},
 	"dependencies": {
 		"crelte-std": "^0.1.1",
-		"svelte": "^4.2.12"
+		"svelte": "^4.2.12",
+		"trouter": "^4.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/package": "^2.3.1",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"svelte-check": "^4.1.4",
 		"typescript-svelte-plugin": "^0.3.45",
-		"vitest": "^2.0.0",
-		"vite": "^5.0"
+		"vite": "^5.0",
+		"vitest": "^2.0.0"
 	}
 }

package/src/Crelte.ts

@@ -2,9 +2,12 @@ import ClientCookies from './cookies/ClientCookies.js';
 import { Cookies } from './cookies/index.js';
 import ServerCookies from './cookies/ServerCookies.js';
 import GraphQl, { GraphQlQuery } from './graphql/GraphQl.js';
+import { CrelteRequest } from './index.js';
 import Globals, { Global } from './loadData/Globals.js';
 import Events from './plugins/Events.js';
 import Plugins, { Plugin } from './plugins/Plugins.js';
+import type Route from './routing/Route.js';
+import type Request from './routing/Request.js';
 import Router from './routing/Router.js';
 import { SiteFromGraphQl } from './routing/Site.js';
 import SsrCache from './ssr/SsrCache.js';
@@ -243,6 +246,18 @@ export default class Crelte {
 		return this.globals.getStore(name) ?? null;
 	}
 
+	/**
+	 * returns a new CrelteRequest instance either with the current
+	 * route or a provided one
+	 *
+	 * ## Note
+	 * This is useful if you want to create a stateful crelte
+	 * to use in loadData context
+	 */
+	toRequest(req?: Route | Request): CrelteRequest {
+		return CrelteRequest.fromCrelte(this, req);
+	}
+
 	/**
 	 * Run a GraphQl Query
 	 *

package/src/CrelteRequest.ts

@@ -21,10 +21,6 @@ export default class CrelteRequest extends Crelte {
 	 *
 	 * If you don't provide a route or request the current route
 	 * will be used.
-	 *
-	 * ## Note
-	 * If you provide a route it must contain a site or you must
-	 * provide one,
 	 */
 	static fromCrelte(
 		inner: Crelte | CrelteRequest,

package/src/entry/EntryRouter.ts

@@ -0,0 +1,71 @@
+import { Pattern, Trouter } from 'trouter';
+import { Crelte, CrelteRequest, Entry, QueryOptions } from '../index.js';
+import { CrelteEntryRequest, EntryRequest } from './index.js';
+import { GraphQlQuery } from '../graphql/GraphQl.js';
+
+export type EntryRouteHandler = (
+	cr: CrelteEntryRequest,
+) => Promise<Entry | null | undefined> | Entry | null | undefined | void;
+
+export type EntryRoutes = (router: EntryRouter) => Promise<void> | void;
+
+export default class EntryRouter {
+	private _crelte: Crelte;
+	private inner: Trouter<EntryRouteHandler>;
+
+	constructor(crelte: Crelte) {
+		this._crelte = crelte;
+		this.inner = new Trouter();
+	}
+
+	add(pattern: Pattern, ...handlers: EntryRouteHandler[]): this {
+		this.inner.add('GET', pattern, ...handlers);
+		return this;
+	}
+
+	/**
+	 * returns an env variable from the craft/.env file.
+	 */
+	getEnv(name: 'ENDPOINT_URL'): string;
+	getEnv(name: 'CRAFT_WEB_URL'): string;
+	getEnv(name: string): string | null;
+	getEnv(name: string): string | null {
+		return this._crelte.getEnv(name);
+	}
+
+	/**
+	 * Run a GraphQl Query
+	 *
+	 * @param query the default export from a graphql file or the gql`query {}`
+	 * function
+	 * @param variables variables that should be passed to the
+	 * graphql query
+	 */
+	async query(
+		query: GraphQlQuery,
+		variables: Record<string, unknown> = {},
+		opts: QueryOptions = {},
+	): Promise<unknown> {
+		// this function is added as convenience
+		return this._crelte.graphQl.query(query, variables, opts);
+	}
+
+	/** @hidden */
+	async _handle(cr: CrelteRequest): Promise<Entry | null> {
+		const { params, handlers } = this.inner.find('GET', cr.req.uri);
+
+		if (!handlers.length) return null;
+
+		const er = new EntryRequest(cr.req.url, cr.req.site, {
+			params: new Map(Object.entries(params)),
+		});
+		const cer = new CrelteEntryRequest(cr, er);
+
+		for (const handler of handlers) {
+			const res = await handler(cer);
+			if (res) return res;
+		}
+
+		return null;
+	}
+}

package/src/entry/index.ts

@@ -0,0 +1,48 @@
+import { Crelte, CrelteRequest } from '../index.js';
+import { Request, RequestOptions, Site } from '../routing/index.js';
+import EntryRouter, { EntryRouteHandler, EntryRoutes } from './EntryRouter.js';
+
+export { EntryRouter, type EntryRouteHandler, type EntryRoutes };
+
+export type Entry = {
+	sectionHandle: string;
+	typeHandle: string;
+	[key: string]: any;
+};
+
+export type EntryRequestOptions = RequestOptions & {
+	params?: Map<string, string>;
+};
+
+export class EntryRequest extends Request {
+	private params: Map<string, string>;
+
+	constructor(url: string | URL, site: Site, opts: EntryRequestOptions = {}) {
+		super(url, site, opts);
+
+		this.params = opts.params ?? new Map();
+	}
+
+	/**
+	 * returns the url params from the request
+	 *
+	 * @example
+	 * ```js
+	 * router.get('/blog/:slug', async (cs, req) => {
+	 *     return Response.json({ slug: cs.getParam('slug') });
+	 * });
+	 * ```
+	 */
+	getParam(name: string): string | null {
+		return this.params.get(name) ?? null;
+	}
+}
+
+export class CrelteEntryRequest extends CrelteRequest {
+	req: EntryRequest;
+
+	constructor(inner: Crelte, req: EntryRequest) {
+		super(inner, req);
+		this.req = req;
+	}
+}

package/src/index.ts

@@ -1,6 +1,5 @@
 import { getContext, onDestroy } from 'svelte';
 import type Route from './routing/Route.js';
-import type Request from './routing/Request.js';
 import type Router from './routing/Router.js';
 import type SsrCache from './ssr/SsrCache.js';
 import type Site from './routing/Site.js';
@@ -16,6 +15,7 @@ import {
 	LoadDataFn,
 	LoadDataObj,
 } from './loadData/index.js';
+import { Entry } from './entry/index.js';
 
 export {
 	Crelte,
@@ -26,6 +26,7 @@ export {
 	type LoadDataFn,
 	type LoadDataObj,
 	type LoadDataArray,
+	type Entry,
 };
 
 /**
@@ -149,16 +150,6 @@ export function getCookies(): Cookies {
 	return getCrelte().cookies;
 }
 
-/**
- * A function to make sure you have a CrelteRequest
- */
-export function toCrelteRequest(
-	crelte: Crelte | CrelteRequest,
-	req?: Route | Request,
-): CrelteRequest {
-	return CrelteRequest.fromCrelte(crelte, req);
-}
-
 /**
  * Listen for route changes
  *

package/src/init/client.ts

@@ -2,7 +2,7 @@ import { CrelteBuilder } from '../Crelte.js';
 import CrelteRequest from '../CrelteRequest.js';
 import { GraphQlQuery } from '../graphql/GraphQl.js';
 import { SiteFromGraphQl } from '../routing/Site.js';
-import { loadFn, pluginsBeforeRender, setupPlugins } from './shared.js';
+import { pluginsBeforeRender, prepareLoadFn, setupPlugins } from './shared.js';
 import { tick } from 'svelte';
 
 /**
@@ -49,7 +49,7 @@ const mainDataDefault = {
  * });
  * ```
  */
-export function main(data: MainData) {
+export async function main(data: MainData) {
 	data = { ...mainDataDefault, ...data };
 
 	// rendering steps
@@ -97,11 +97,18 @@ export function main(data: MainData) {
 	// setup plugins
 	setupPlugins(crelte, data.app.plugins ?? []);
 
+	const loadFn = await prepareLoadFn(
+		crelte,
+		data.app,
+		data.entryQuery,
+		data.globalQuery,
+	);
+
 	// setup load Data
 
 	crelte.router._internal.onLoad = (req, opts) => {
 		const cr = new CrelteRequest(crelte, req);
-		return loadFn(cr, data.app, data.entryQuery, data.globalQuery, opts);
+		return loadFn(cr, opts);
 	};
 
 	// render Space

package/src/init/server.ts

@@ -1,6 +1,6 @@
 import { CrelteBuilder } from '../Crelte.js';
 import { SiteFromGraphQl } from '../routing/Site.js';
-import { loadFn, pluginsBeforeRender, setupPlugins } from './shared.js';
+import { pluginsBeforeRender, prepareLoadFn, setupPlugins } from './shared.js';
 import SsrComponents from '../ssr/SsrComponents.js';
 import SsrCache from '../ssr/SsrCache.js';
 import ServerCookies from '../cookies/ServerCookies.js';
@@ -85,11 +85,18 @@ export async function main(data: MainData): Promise<{
 	// setup plugins
 	setupPlugins(crelte, data.app.plugins ?? []);
 
+	const loadFn = await prepareLoadFn(
+		crelte,
+		data.app,
+		data.entryQuery,
+		data.globalQuery,
+	);
+
 	// setup load Data
 
 	crelte.router._internal.onLoad = req => {
 		const cr = new CrelteRequest(crelte, req);
-		return loadFn(cr, data.app, data.entryQuery, data.globalQuery);
+		return loadFn(cr);
 	};
 
 	const { success, redirect, req, props } =