crelte 0.5.11 → 0.5.13

package/src/bodyClass/BodyClass.ts

@@ -0,0 +1,94 @@
+import StagedWritable from '../std/stores/StagedWritable.js';
+
+export default class BodyClass {
+	private inner: PlatformBodyClass;
+	private store: StagedWritable<void>;
+
+	constructor(inner: PlatformBodyClass, store?: StagedWritable<void>) {
+		this.inner = inner;
+		this.store = store ?? new StagedWritable(void 0);
+	}
+
+	subscribe(
+		fn: (val: BodyClass) => void,
+		invalidate?: () => void,
+	): () => void {
+		return this.store.subscribe(() => fn(this), invalidate);
+	}
+
+	/**
+	 * Checks if the body contains the given class
+	 */
+	contains(cls: string): boolean {
+		return this.inner.contains(cls);
+	}
+
+	/**
+	 * Adds the given classes to the body
+	 */
+	add(...classes: string[]): void {
+		this.inner.add(...classes);
+		this.store.set();
+	}
+
+	/**
+	 * Toggles the given class on the body
+	 *
+	 * ## Warning
+	 * toggle without `force` should almost never be used
+	 * on the server. If you call this for example in loadData
+	 * the server will add the class and the client will the remove
+	 * it.
+	 */
+	toggle(cls: string, force?: boolean): void {
+		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());
+	}
+
+	/** @hidden */
+	z_render(): void {
+		this.inner.render?.();
+		this.store.commit();
+	}
+}
+
+export interface PlatformBodyClass {
+	contains(cls: string): boolean;
+	add(...classes: string[]): 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

@@ -0,0 +1,79 @@
+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 variants: Variants;
+	// during the request store the classes here
+	private inner: ClassSet | null;
+
+	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);
+	}
+
+	add(...classes: string[]): void {
+		if (this.inner) classes.forEach(cls => this.inner!.add(cls));
+		else cl().add(...classes);
+	}
+
+	// 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 (this.inner) {
+			if (shouldExist) this.inner.add(cls);
+			else this.inner.delete(cls);
+		} else {
+			cl().toggle(cls, force);
+		}
+
+		return changed;
+	}
+
+	remove(...classes: string[]): void {
+		if (this.inner) classes.forEach(cls => this.inner!.delete(cls));
+		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 ClassSet(cl(), this.variants.entries(), true);
+		return new ClientBodyClass(this.variants, inner);
+	}
+
+	render(): void {
+		if (!this.inner) throw new Error('call toRequest first');
+
+		const inner = this.inner;
+		this.inner = null;
+
+		inner.applyHistory(this);
+	}
+}
+
+function cl(): DOMTokenList {
+	return document.body.classList;
+}

package/src/bodyClass/ServerBodyClass.ts

@@ -0,0 +1,86 @@
+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: ClassSet;
+
+	constructor() {
+		this.inner = new ClassSet();
+	}
+
+	contains(cls: string): boolean {
+		return this.inner.has(cls);
+	}
+
+	add(...classes: string[]): void {
+		validate(classes);
+		classes.forEach(cls => this.inner.add(cls));
+	}
+
+	toggle(cls: string, force?: boolean): boolean {
+		validate([cls]);
+
+		if (import.meta.env.DEV && typeof force !== 'boolean') {
+			console.warn(
+				'Using toggle without force on the server can lead ' +
+					'to unexpected results. Because in a loadData the server will add it ' +
+					'and the client will afterwards remove it.',
+			);
+		}
+
+		const exists = this.inner.has(cls);
+		const shouldExist = typeof force === 'boolean' ? force : !exists;
+		const changed = shouldExist !== exists;
+
+		if (shouldExist) this.inner.add(cls);
+		else this.inner.delete(cls);
+
+		return changed;
+	}
+
+	remove(...classes: string[]): void {
+		validate(classes);
+		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.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.classes()).join(' '),
+		);
+	}
+}
+
+function validate(classes: string[]) {
+	for (const cls of classes) {
+		if (cls.includes(' ')) {
+			throw new Error(
+				`Invalid class name "${cls}". Class names must not contain spaces.`,
+			);
+		}
+	}
+}

package/src/bodyClass/index.ts

@@ -0,0 +1 @@
+export { default as BodyClass } from './BodyClass.js';

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/cookies/ClientCookies.ts

@@ -1,26 +1,57 @@
-import { Cookies, RemoveOptions, SetOptions } from './index.js';
-import { parseCookies, setCookieToString } from './utils.js';
+import { PlatformCookies, RemoveOptions, SetOptions } from './Cookies.js';
+import { parseCookies, SetCookie, setCookieToString } from './utils.js';
 
-// the philosophy here is that document.cookie is the source of truth
-// so we don't cache cookies here
-// if this changes, modify init/client.ts
-export default class ClientCookies implements Cookies {
-	constructor() {}
+export default class ClientCookies implements PlatformCookies {
+	private inner: Map<string, string> | null;
+	private setCookies: Map<string, SetCookie> | null;
+
+	constructor(
+		inner?: Map<string, string>,
+		setCookies?: Map<string, SetCookie>,
+	) {
+		this.inner = inner ?? null;
+		this.setCookies = setCookies ?? null;
+	}
 
 	get(name: string): string | null {
-		const cookies = getCookies();
-		return cookies.get(name) ?? null;
+		if (!this.inner || !this.setCookies) {
+			const cookies = getCookies();
+			return cookies.get(name) ?? null;
+		}
+
+		const setCookie = this.setCookies.get(name);
+		if (setCookie) {
+			return (setCookie.maxAge ?? 1) > 0 ? setCookie.value : null;
+		}
+
+		return this.inner.get(name) ?? null;
 	}
 
 	set(name: string, value: string, opts?: SetOptions): void {
 		const setCookie = { name, value, path: '/', ...opts };
 
-		document.cookie = setCookieToString(setCookie);
+		if (this.setCookies) this.setCookies.set(name, setCookie);
+		else document.cookie = setCookieToString(setCookie);
 	}
 
 	remove(name: string, opts?: RemoveOptions): void {
 		this.set(name, '', { ...opts, maxAge: 0 });
 	}
+
+	toRequest(): ClientCookies {
+		return new ClientCookies(getCookies(), new Map());
+	}
+
+	render(): void {
+		if (!this.setCookies) throw new Error('call toRequest first');
+
+		for (const setCookie of this.setCookies.values()) {
+			document.cookie = setCookieToString(setCookie);
+		}
+
+		this.inner = null;
+		this.setCookies = null;
+	}
 }
 
 function getCookies(): Map<string, string> {

package/src/cookies/Cookies.ts

@@ -0,0 +1,70 @@
+import StagedWritable from '../std/stores/StagedWritable.js';
+
+export type SetOptions = {
+	maxAge?: number;
+	path?: string;
+	domain?: string;
+	secure?: boolean;
+	httpOnly?: boolean;
+};
+
+export type RemoveOptions = Omit<SetOptions, 'maxAge'>;
+
+export default class Cookies {
+	private inner: PlatformCookies;
+	private store: StagedWritable<void>;
+
+	constructor(inner: PlatformCookies, store?: StagedWritable<void>) {
+		this.inner = inner;
+		this.store = store ?? new StagedWritable(void 0);
+	}
+
+	subscribe(fn: (val: Cookies) => void, invalidate?: () => void): () => void {
+		return this.store.subscribe(() => fn(this), invalidate);
+	}
+
+	/**
+	 * returns the value of the cookie
+	 */
+	get(name: string): string | null {
+		return this.inner.get(name);
+	}
+
+	/**
+	 * sets the value of the cookie
+	 *
+	 * #### Note
+	 * path defaults to '/'
+	 */
+	set(name: string, value: string, opts?: SetOptions): void {
+		this.inner.set(name, value, opts);
+		this.store.set();
+	}
+
+	/**
+	 * removes the cookie
+	 */
+	remove(name: string, opts?: RemoveOptions): void {
+		this.inner.remove(name, opts);
+		this.store.set();
+	}
+
+	/** @hidden */
+	z_toRequest(): Cookies {
+		return new Cookies(this.inner.toRequest(), this.store.stage());
+	}
+
+	/** @hidden */
+	z_render(): void {
+		this.inner.render?.();
+		this.store.commit();
+	}
+}
+
+export interface PlatformCookies {
+	get(name: string): string | null;
+	set(name: string, value: string, opts?: SetOptions): void;
+	remove(name: string, opts?: RemoveOptions): void;
+	toRequest(): PlatformCookies;
+	render?: () => void;
+}

package/src/cookies/ServerCookies.ts

@@ -1,11 +1,11 @@
-import { Cookies, RemoveOptions, SetOptions } from './index.js';
+import { PlatformCookies, RemoveOptions, SetOptions } from './Cookies.js';
 import { parseCookies, type SetCookie, setCookieToString } from './utils.js';
 
 /**
  * #### Warning
  * This is not stable and should only be used internally by crelte
  */
-export default class ServerCookies implements Cookies {
+export default class ServerCookies implements PlatformCookies {
 	requestCookies: Map<string, string>;
 	setCookies: Map<string, SetCookie>;
 
@@ -14,12 +14,11 @@ export default class ServerCookies implements Cookies {
 		this.setCookies = new Map();
 	}
 
-	/// Rethrns the value of the cookie with the given name, or null if it doesn't exist.
+	/// Returns the value of the cookie with the given name, or null if it doesn't exist.
 	get(name: string): string | null {
 		const setCookie = this.setCookies.get(name);
-		// js allows undefined > 0
-		if (setCookie && setCookie.maxAge! > 0) {
-			return setCookie.value;
+		if (setCookie) {
+			return (setCookie.maxAge ?? 1) > 0 ? setCookie.value : null;
 		}
 
 		return this.requestCookies.get(name) ?? null;
@@ -33,6 +32,10 @@ export default class ServerCookies implements Cookies {
 		this.set(name, '', { ...opts, maxAge: 0 });
 	}
 
+	toRequest(): ServerCookies {
+		return this;
+	}
+
 	_populateHeaders(headers: Headers) {
 		for (const setCookie of this.setCookies.values()) {
 			headers.append('Set-Cookie', setCookieToString(setCookie));

package/src/cookies/index.ts

@@ -1,29 +1,5 @@
-export type SetOptions = {
-	maxAge?: number;
-	path?: string;
-	domain?: string;
-	secure?: boolean;
-	httpOnly?: boolean;
-};
-
-export type RemoveOptions = Omit<SetOptions, 'maxAge'>;
-
-export interface Cookies {
-	/**
-	 * returns the value of the cookie
-	 */
-	get(name: string): string | null;
-
-	/**
-	 * sets the value of the cookie
-	 *
-	 * #### Note
-	 * path defaults to '/'
-	 */
-	set(name: string, value: string, opts?: SetOptions): void;
-
-	/**
-	 * removes the cookie
-	 */
-	remove(name: string, opts?: RemoveOptions): void;
-}
+export {
+	default as Cookies,
+	type SetOptions,
+	type RemoveOptions,
+} from './Cookies.js';

package/src/crelte.ts

@@ -9,6 +9,7 @@ import Queries, { Query, QueryOptions } from './queries/Queries.js';
 import { Readable } from './std/stores/index.js';
 import { Entry } from './loadData/index.js';
 import { urlWithPath } from './utils.js';
+import { BodyClass } from './bodyClass/index.js';
 
 /** The type for the app.config object */
 export type Config = {
@@ -113,6 +114,11 @@ export type Crelte = {
 	 */
 	cookies: Cookies;
 
+	/**
+	 * Get the BodyClass instance
+	 */
+	bodyClass: BodyClass;
+
 	/**
 	 * Get a Plugin by name
 	 */
@@ -263,6 +269,7 @@ export function newCrelte({
 	router,
 	queries,
 	cookies,
+	bodyClass,
 }: {
 	config: Required<Config>;
 	ssrCache: SsrCache;
@@ -272,6 +279,7 @@ export function newCrelte({
 	router: Router;
 	queries: Queries;
 	cookies: Cookies;
+	bodyClass: BodyClass;
 }): Crelte {
 	return {
 		config,
@@ -282,6 +290,10 @@ export function newCrelte({
 		router,
 		queries,
 		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,

package/src/index.ts

@@ -17,7 +17,8 @@ import {
 	LoadDataObj,
 } from './loadData/index.js';
 import Queries from './queries/Queries.js';
-import { Readable } from './std/stores/index.js';
+import { Readable, Writable } from './std/stores/index.js';
+import { BodyClass } from './bodyClass/index.js';
 
 export {
 	type Crelte,
@@ -33,6 +34,9 @@ export {
 /** The type for the app.init function */
 export type Init = (crelte: Crelte) => void;
 
+/** The Props that are passed to the app */
+export type AppProps = { route: Writable<Route> };
+
 function innerGetCrelte(): Crelte {
 	return getContext('crelte');
 }
@@ -174,6 +178,16 @@ export function getCookies(): Cookies {
 	return innerGetCrelte().cookies;
 }
 
+/**
+ * returns the body class instance
+ *
+ * #### Note
+ * This only works during component initialisation.
+ */
+export function getBodyClass(): BodyClass {
+	return innerGetCrelte().bodyClass;
+}
+
 /**
  * Listen for route changes
  *