crelte 0.5.12 → 0.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "crelte",
-	"version": "0.5.12",
+	"version": "0.5.14",
 	"author": "Crelte <support@crelte.com>",
 	"type": "module",
 	"scripts": {
@@ -107,6 +107,10 @@
 		"./std/rand": {
 			"types": "./dist/std/rand/index.d.ts",
 			"default": "./dist/std/rand/index.js"
+		},
+		"./std/url": {
+			"types": "./dist/std/url/index.d.ts",
+			"default": "./dist/std/url/index.js"
 		}
 	},
 	"dependencies": {

package/src/blocks/Blocks.ts

@@ -125,7 +125,7 @@ export class BlockModules {
  * ```
  */
 export function blockModules(
-	modules: Record<string, AsyncModule>,
+	modules: Record<string, (() => Promise<any>) | Module>,
 	opts: BlockModulesOptions = {},
 ): BlockModules {
 	return new BlockModules(modules, opts);

package/src/bodyClass/BodyClass.ts

@@ -41,15 +41,33 @@ export default class BodyClass {
 	 * it.
 	 */
 	toggle(cls: string, force?: boolean): void {
-		this.inner.toggle(cls, force);
-		this.store.set();
+		if (this.inner.toggle(cls, force)) this.store.set();
 	}
 
+	/**
+	 * Removes the given classes from the body
+	 */
 	remove(...classes: string[]): void {
 		this.inner.remove(...classes);
 		this.store.set();
 	}
 
+	/**
+	 * Sets the class for the given variant removing the old class for that
+	 * variant, if cls is null it will remove the variant class
+	 *
+	 * If you just have like a dark or light mode and only for the dark mode a
+	 * class, **prefer** `toggle('dark', isDarkMode)` over
+	 * `setVariant('mode', isDarkMode ? 'dark' : null)`
+	 *
+	 * ## Note
+	 * The variant name is only used for the internal state management
+	 * and has no inpact on the actual class name
+	 */
+	setVariant(variant: string, cls: string | null): void {
+		if (this.inner.setVariant(variant, cls)) this.store.set();
+	}
+
 	/** @hidden */
 	z_toRequest(): BodyClass {
 		return new BodyClass(this.inner.toRequest(), this.store.stage());
@@ -65,8 +83,12 @@ export default class BodyClass {
 export interface PlatformBodyClass {
 	contains(cls: string): boolean;
 	add(...classes: string[]): void;
-	toggle(cls: string, force?: boolean): void;
+	// returns true if the value was changed (this is different to the
+	// DOMTokenList.toggle which returns true if the class is now present)
+	toggle(cls: string, force?: boolean): boolean;
 	remove(...classes: string[]): void;
+	// returns true if the value was changed
+	setVariant(variant: string, cls: string | null): boolean;
 	toRequest(): PlatformBodyClass;
 	render?: () => void;
 }

package/src/bodyClass/ClientBodyClass.ts

@@ -1,12 +1,22 @@
+import SsrCache from '../ssr/SsrCache.js';
 import { PlatformBodyClass } from './BodyClass.js';
+import { ClassSet, ssrCacheToVariants, Variants } from './utils.js';
 
 export default class ClientBodyClass implements PlatformBodyClass {
-	private inner: Set<string> | null;
+	private variants: Variants;
+	// during the request store the classes here
+	private inner: ClassSet | null;
 
-	constructor(inner?: Set<string>) {
+	constructor(variants: Variants, inner?: ClassSet) {
+		this.variants = variants;
 		this.inner = inner ?? null;
 	}
 
+	static fromSsrCache(ssrCache: SsrCache): ClientBodyClass {
+		const variants = ssrCacheToVariants(ssrCache);
+		return new ClientBodyClass(variants);
+	}
+
 	contains(cls: string): boolean {
 		if (this.inner) return this.inner.has(cls);
 		return cl().contains(cls);
@@ -17,16 +27,20 @@ export default class ClientBodyClass implements PlatformBodyClass {
 		else cl().add(...classes);
 	}
 
-	toggle(cls: string, force?: boolean): void {
-		if (this.inner) {
-			const add =
-				typeof force === 'boolean' ? force : !this.inner.has(cls);
+	// returns true if the value was changed
+	toggle(cls: string, force?: boolean): boolean {
+		const exists = this.contains(cls);
+		const shouldExist = typeof force === 'boolean' ? force : !exists;
+		const changed = shouldExist !== exists;
 
-			if (add) this.inner.add(cls);
+		if (this.inner) {
+			if (shouldExist) this.inner.add(cls);
 			else this.inner.delete(cls);
 		} else {
 			cl().toggle(cls, force);
 		}
+
+		return changed;
 	}
 
 	remove(...classes: string[]): void {
@@ -34,26 +48,29 @@ export default class ClientBodyClass implements PlatformBodyClass {
 		else cl().remove(...classes);
 	}
 
+	setVariant(variant: string, cls: string | null): boolean {
+		if (this.inner) return this.inner.setVariant(variant, cls);
+
+		const { remove, add } = this.variants.set(variant, cls);
+
+		if (remove) cl().remove(remove);
+		if (add) cl().add(add);
+
+		return !!remove || !!add;
+	}
+
 	toRequest(): ClientBodyClass {
-		const inner = new Set(cl());
-		return new ClientBodyClass(inner);
+		const inner = new ClassSet(cl(), this.variants.entries(), true);
+		return new ClientBodyClass(this.variants, inner);
 	}
 
 	render(): void {
 		if (!this.inner) throw new Error('call toRequest first');
-		const current = new Set(cl());
-
-		for (const cls of this.inner) {
-			const existed = current.delete(cls);
-			if (!existed) cl().add(cls);
-		}
-
-		// now lets remove all classes that still exist in current
-		for (const cls of current) {
-			cl().remove(cls);
-		}
 
+		const inner = this.inner;
 		this.inner = null;
+
+		inner.applyHistory(this);
 	}
 }
 

package/src/bodyClass/ServerBodyClass.ts

@@ -1,10 +1,12 @@
+import SsrCache from '../ssr/SsrCache.js';
 import { PlatformBodyClass } from './BodyClass.js';
+import { ClassSet, variantsToSsrCache } from './utils.js';
 
 export default class ServerBodyClass implements PlatformBodyClass {
-	private inner: Set<string>;
+	private inner: ClassSet;
 
 	constructor() {
-		this.inner = new Set();
+		this.inner = new ClassSet();
 	}
 
 	contains(cls: string): boolean {
@@ -16,7 +18,7 @@ export default class ServerBodyClass implements PlatformBodyClass {
 		classes.forEach(cls => this.inner.add(cls));
 	}
 
-	toggle(cls: string, force?: boolean): void {
+	toggle(cls: string, force?: boolean): boolean {
 		validate([cls]);
 
 		if (import.meta.env.DEV && typeof force !== 'boolean') {
@@ -27,10 +29,14 @@ export default class ServerBodyClass implements PlatformBodyClass {
 			);
 		}
 
-		const add = typeof force === 'boolean' ? force : !this.inner.has(cls);
+		const exists = this.inner.has(cls);
+		const shouldExist = typeof force === 'boolean' ? force : !exists;
+		const changed = shouldExist !== exists;
 
-		if (add) this.inner.add(cls);
+		if (shouldExist) this.inner.add(cls);
 		else this.inner.delete(cls);
+
+		return changed;
 	}
 
 	remove(...classes: string[]): void {
@@ -38,19 +44,34 @@ export default class ServerBodyClass implements PlatformBodyClass {
 		classes.forEach(cls => this.inner.delete(cls));
 	}
 
+	/**
+	 * @returns Returns true if the value was changed
+	 */
+	setVariant(variant: string, cls: string | null): boolean {
+		return this.inner.setVariant(variant, cls);
+	}
+
 	toRequest(): ServerBodyClass {
+		// no second request should ever start on the server
 		return this;
 	}
 
+	z_populateSsrCache(ssrCache: SsrCache): void {
+		variantsToSsrCache(this.inner.z_variants, ssrCache);
+	}
+
 	z_processHtmlTemplate(html: string): string {
 		const SEARCH_STR = '<!--body-class-->';
-		if (this.inner.size && !html.includes(SEARCH_STR)) {
+		if (this.inner.length && !html.includes(SEARCH_STR)) {
 			throw new Error(
 				'index.html needs to contain `class="<!--body-class-->"`',
 			);
 		}
 
-		return html.replace(SEARCH_STR, Array.from(this.inner).join(' '));
+		return html.replace(
+			SEARCH_STR,
+			Array.from(this.inner.classes()).join(' '),
+		);
 	}
 }
 

package/src/bodyClass/utils.ts

@@ -0,0 +1,118 @@
+import SsrCache from '../ssr/SsrCache.js';
+
+export type HistoryClassSet = {
+	add(cls: string): void;
+	remove(cls: string): void;
+	setVariant(variant: string, cls: string | null): void;
+};
+
+export class ClassSet {
+	private _classes: Set<string>;
+	/** @hidden */
+	z_variants: Variants;
+	private history: ((cl: HistoryClassSet) => void)[] | null;
+
+	constructor(
+		classes?: Iterable<string>,
+		variants?: Iterable<[string, string]>,
+		history: boolean = false,
+	) {
+		this._classes = new Set(classes);
+		this.z_variants = new Variants();
+		this.history = history ? [] : null;
+	}
+
+	classes(): Iterable<string> {
+		return this._classes;
+	}
+
+	get length(): number {
+		return this._classes.size;
+	}
+
+	has(cls: string): boolean {
+		return this._classes.has(cls);
+	}
+
+	add(cls: string): void {
+		this._classes.add(cls);
+		if (this.history) this.history.push(c => c.add(cls));
+	}
+
+	delete(cls: string): void {
+		this._classes.delete(cls);
+		if (this.history) this.history.push(c => c.remove(cls));
+	}
+
+	/**
+	 * @returns Returns true if the value was changed
+	 */
+	setVariant(variant: string, cls: string | null): boolean {
+		const { remove, add } = this.z_variants.set(variant, cls);
+
+		if (remove) this.delete(remove);
+		if (add) this.add(add);
+
+		const changed = !!remove || !!add;
+
+		if (this.history) this.history.push(c => c.setVariant(variant, cls));
+
+		return changed;
+	}
+
+	/**
+	 * Fails if no history is active.
+	 */
+	applyHistory(cl: HistoryClassSet): void {
+		this.history!.forEach(fn => fn(cl));
+	}
+}
+
+export type VariantSetReturn = {
+	remove?: string;
+	add?: string;
+};
+
+export class Variants {
+	// list of active variant classes
+	private inner: Map<string, string>;
+
+	constructor(entries?: Iterable<[string, string]>) {
+		this.inner = new Map(entries);
+	}
+
+	set(variant: string, cls: string | null): VariantSetReturn {
+		const current = this.inner.get(variant) ?? null;
+
+		if (current === cls) return {};
+
+		const obj: VariantSetReturn = {};
+
+		if (current) obj.remove = current;
+		if (cls) {
+			obj.add = cls;
+			this.inner.set(variant, cls);
+		} else {
+			this.inner.delete(variant);
+		}
+
+		return obj;
+	}
+
+	entries(): Iterable<[string, string]> {
+		return this.inner.entries();
+	}
+}
+
+// separate function for tree shaking
+export function ssrCacheToVariants(ssrCache: SsrCache): Variants {
+	return new Variants(ssrCache.get('BODY_CLASS_VAR')!);
+}
+
+// separate function for tree shaking
+export function variantsToSsrCache(
+	variants: Variants,
+	ssrCache: SsrCache,
+): void {
+	ssrCache.set('BODY_CLASS_VAR', Array.from(variants.entries()));
+}

package/src/crelte.ts

@@ -292,6 +292,9 @@ export function newCrelte({
 		cookies,
 		bodyClass,
 
+		// when adding a new helper function make sure to add it to
+		// onNewCrelteRequest if needed
+
 		getPlugin: name => plugins.get(name),
 		getEnv: key => ssrCache.get(key as any) as any,
 		frontendUrl: path => urlWithPath(ssrCache.get('FRONTEND_URL')!, path),

package/src/init/client.ts

@@ -88,7 +88,7 @@ export async function main(data: MainData) {
 		router: new Router(router),
 		queries,
 		cookies: new Cookies(new ClientCookies()),
-		bodyClass: new BodyClass(new ClientBodyClass()),
+		bodyClass: new BodyClass(ClientBodyClass.fromSsrCache(ssrCache)),
 	});
 
 	const app = new InternalApp(data.app);

package/src/init/server.ts

@@ -152,6 +152,7 @@ export async function main(data: MainData): Promise<RenderResponse> {
 		context,
 	});
 
+	bodyClass.z_populateSsrCache(ssrCache);
 	head += ssrComponents.toHead(data.serverData.ssrManifest);
 	head += crelte.ssrCache.z_exportToHead();
 

package/src/init/shared.ts

@@ -74,6 +74,9 @@ export function onNewCrelteRequest(
 		cookies: crelte.cookies.z_toRequest(),
 		bodyClass: crelte.bodyClass.z_toRequest(),
 	};
+	// make sure helper funcitons link to the correct instances
+	nCrelte.getPlugin = name => nCrelte.plugins.get(name);
+	nCrelte.getGlobalStore = name => nCrelte.globals.getStore(name);
 	return crelteToRequest(nCrelte, req);
 }
 

package/src/loadData/entry.ts

@@ -1,5 +1,5 @@
 import { CrelteRequest } from '../index.js';
-import { Query } from '../queries/Queries.js';
+import { Query, QueryOptions } from '../queries/Queries.js';
 
 export type Entry = {
 	sectionHandle: string;
@@ -31,12 +31,22 @@ export function entryQueryVars(cr: CrelteRequest): EntryQueryVars {
 	};
 }
 
+/**
+ * ## Example
+ * `App.svelte`
+ * ```ts
+ * import entryQuery from '@/queries/entry.graphql';
+ *
+ * export const loadEntry => cr => queryEntry(cr, entryQuery, entryQueryVars(cr));
+ * ```
+ */
 export async function queryEntry(
 	cr: CrelteRequest,
 	entryQuery: Query,
 	vars: EntryQueryVars,
+	opts?: QueryOptions,
 ): Promise<Entry> {
-	const page = await cr.query(entryQuery, vars);
+	const page = await cr.query(entryQuery, vars, opts);
 	return extractEntry(page) ?? ENTRY_ERROR_404;
 }
 

package/src/queries/Queries.ts

@@ -42,6 +42,9 @@ export type NamedQuery = { queryName: string };
  * Create a NamedQuery for the given server query name.
  *
  * Prefer importing a graphql file instead.
+ *
+ * #### Note
+ * This needs to match the name of the js/ts file.
  */
 export function namedQuery(name: string): NamedQuery {
 	return { queryName: name };

package/src/queries/index.ts

@@ -8,6 +8,7 @@ import Queries, {
 	QueryOptions,
 } from '../queries/Queries.js';
 import type CrelteServerRequest from '../server/CrelteServer.js';
+import ServerRouter from '../server/ServerRouter.js';
 import { gql } from './gql.js';
 import QueryError, { QueryErrorResponse } from './QueryError.js';
 import { QueryVar, ValidIf, vars, varsIdsEqual } from './vars.js';
@@ -38,6 +39,30 @@ export type InferVariableTypes<T> = {
 	[K in keyof T]: InferQueryVarType<T[K]>;
 };
 
+/**
+ * Defines wether the query variables are valid.
+ *
+ * Either throw or return a boolean.
+ *
+ * #### Example
+ * ```ts
+ * import { vars, ValidVars } from 'crelte/queries';
+ *
+ * export const variables = {
+ *     siteId: vars.siteId(),
+ *     category: vars.id()
+ * };
+ *
+ * export const validVars: ValidVars<typeof variables> = (vars, sr) => {
+ *     if (!vars.category === 5) throw new Error('category needs to be 5');
+ * };
+ * ```
+ */
+export type ValidVars<T extends Record<string, QueryVar<any>>> = (
+	vars: InferVariableTypes<T>,
+	sr: ServerRouter,
+) => void | boolean;
+
 /**
  * Defines when a query can safely be cached.
  *
@@ -81,7 +106,11 @@ export type TransformFn<
 export type Transform<
 	T extends Record<string, QueryVar<any>> = Record<string, QueryVar<any>>,
 	F extends TransformFn<T> = TransformFn<T>,
-> = (response: any, vars: InferVariableTypes<T>) => Awaited<ReturnType<F>>;
+> = (
+	response: any,
+	vars: InferVariableTypes<T>,
+	csr: CrelteServerRequest,
+) => Awaited<ReturnType<F>>;
 
 /** use {@link Handle} */
 export type HandleFn<

package/src/queries/vars.ts

@@ -1,10 +1,32 @@
 import ServerRouter from '../server/ServerRouter.js';
 
 export const vars = {
+	/**
+	 * Any is not validated except for nullability
+	 */
 	any: (): QueryVar<any> => new QueryVar(),
+
+	/**
+	 * Number is a number, but will also parse strings to numbers
+	 */
 	number: (): QueryVar<number> => new QueryVar().number(),
+
+	/**
+	 * String is a string, but will not parse numbers to strings
+	 */
 	string: (): QueryVar<string> => new QueryVar().string(),
 
+	/**
+	 * Strings is an array of strings, but will also convert a single string to
+	 * an array with one element
+	 *
+	 * #### Note
+	 * The returned array will **never be empty**, but might be null if allowed.
+	 * It is not deduped or sorted.
+	 * If you have ids you should use `vars.ids()` instead.
+	 */
+	strings: (): QueryVar<string[]> => new QueryVar().strings(),
+
 	/**
 	 * Id is almost the same as number but will also parse
 	 * strings, but only allow non negative integers
@@ -37,6 +59,9 @@ export const vars = {
 	 */
 	ids: (): QueryVar<number[]> => new QueryVar().ids(),
 
+	/**
+	 * Checks for a valid site id which exists
+	 */
 	siteId: (): QueryVar<number> =>
 		new QueryVar()
 			.number()
@@ -47,11 +72,11 @@ export const vars = {
 
 /// either throw with an error which will get returned in a 400 response or
 // return false if the value is not valid
-export type ValidIf<T> = (v: T, cs: ServerRouter) => boolean;
+export type ValidIf<T> = (v: T, sr: ServerRouter) => boolean;
 
 export class QueryVar<T = any> {
 	private name: string | null;
-	private type: 'any' | 'string' | 'number' | 'id' | 'ids';
+	private type: 'any' | 'string' | 'strings' | 'number' | 'id' | 'ids';
 	private flagNullable: boolean;
 	private defaultValue: T | undefined;
 	private validIfFn: ValidIf<T>;
@@ -69,6 +94,11 @@ export class QueryVar<T = any> {
 		return this as unknown as QueryVar<string>;
 	}
 
+	strings(): QueryVar<string[]> {
+		this.type = 'strings';
+		return this as unknown as QueryVar<string[]>;
+	}
+
 	number(): QueryVar<number> {
 		this.type = 'number';
 		return this as unknown as QueryVar<number>;
@@ -98,7 +128,7 @@ export class QueryVar<T = any> {
 	 * Set a validation function for this variable
 	 *
 	 * If the value is allowed to be null and it is null
-	 * valid will not be called.
+	 * the passed function will not be called.
 	 */
 	validIf(fn: ValidIf<T>): QueryVar<T> {
 		this.validIfFn = fn;
@@ -127,6 +157,31 @@ export class QueryVar<T = any> {
 					throw new Error(`variable ${this.name} is not a string`);
 				break;
 
+			case 'strings':
+				if (typeof v === 'string') v = [v];
+
+				if (!Array.isArray(v))
+					throw new Error(
+						`variable ${this.name} is not a string or a list of strings`,
+					);
+
+				if (v.length <= 0) {
+					if (this.defaultValue !== undefined)
+						return this.defaultValue;
+
+					if (this.flagNullable) return null;
+
+					throw new Error(
+						`variable ${this.name} is not allowed to be empty`,
+					);
+				}
+
+				if (!v.every(s => typeof s === 'string'))
+					throw new Error(
+						`variable ${this.name} is not a list of strings`,
+					);
+				break;
+
 			case 'number':
 				if (typeof v !== 'number')
 					throw new Error(`variable ${this.name} is not a number`);

package/src/routing/route/BaseRoute.ts

@@ -1,3 +1,8 @@
+import {
+	deleteSearchParam,
+	pathnameEq,
+	searchEq,
+} from '../../std/url/utils.js';
 import { objClone } from '../../utils.js';
 import Site from '../Site.js';
 import { trimSlashEnd } from '../utils.js';
@@ -238,12 +243,7 @@ export default class BaseRoute {
 	 * ```
 	 */
 	setSearchParam(key: string, value?: string | number | null) {
-		const deleteValue =
-			typeof value === 'undefined' ||
-			value === null ||
-			(typeof value === 'string' && value === '');
-
-		if (!deleteValue) {
+		if (!deleteSearchParam(value)) {
 			this.search.set(key, value as string);
 		} else {
 			this.search.delete(key);
@@ -344,8 +344,8 @@ export default class BaseRoute {
 	eqUrl(route: BaseRoute | null) {
 		return (
 			route &&
-			this.url.pathname === route.url.pathname &&
-			this.url.origin === route.url.origin
+			this.url.origin === route.url.origin &&
+			pathnameEq(this.url.pathname, route.url.pathname)
 		);
 	}
 
@@ -353,20 +353,6 @@ export default class BaseRoute {
 	 * Checks if the search params are equal to another route
 	 */
 	eqSearch(route: BaseRoute | null) {
-		const searchEq = (a: URLSearchParams, b: URLSearchParams) => {
-			if (a.size !== b.size) return false;
-
-			a.sort();
-			b.sort();
-
-			const aEntries = Array.from(a.entries());
-			const bEntries = Array.from(b.entries());
-
-			return aEntries
-				.map((a, i) => [a, bEntries[i]])
-				.every(([[ak, av], [bk, bv]]) => ak === bk && av === bv);
-		};
-
 		return route && searchEq(this.search, route.search);
 	}