crelte 0.5.10 → 0.5.12

package/dist/std/stores/StagedWritable.js

@@ -0,0 +1,84 @@
+import Writable from './Writable.js';
+export default class StagedWritable {
+    inner;
+    // -1 = not staged, 0 = staged but no new value, 1 = staged
+    mode;
+    staged;
+    /**
+     * Creates a new StagedWritable
+     *
+     * @param def A default value
+     */
+    constructor(def) {
+        this.inner = new Writable(def);
+        this.mode = -1;
+        this.staged = undefined;
+    }
+    /**
+     * Returns true if the store is currently staged
+     */
+    isStaged() {
+        return this.mode >= 0;
+    }
+    /**
+     * Returns a new StagedWritable which is staged and has the same value as the current one
+     * To commit the staged value, call `commit` on the returned StagedWritable
+     */
+    stage() {
+        const n = Object.create(this);
+        n.inner = this.inner;
+        n.mode = 0;
+        n.staged = undefined;
+        return n;
+    }
+    /**
+     * The function get's called once with the current value and then when the
+     * values changes
+     *
+     * #### Note
+     * This does not check for equality like svelte.
+     *
+     * @return a function which should be called to unsubscribe
+     */
+    subscribe(fn, invalidate) {
+        return this.inner.subscribe(fn, invalidate);
+    }
+    /**
+     * Either updates the store and calls all subscribers with the value or
+     * updates the stateful value if previously toStateful was called
+     */
+    set(inner) {
+        if (this.mode >= 0) {
+            this.mode = 1;
+            this.staged = inner;
+        }
+        else {
+            this.inner.set(inner);
+        }
+    }
+    /**
+     * If the value was staged, then update the store and call all subscribers with the value
+     */
+    commit() {
+        if (this.mode < 0)
+            throw new Error('not staged, call stage first');
+        if (this.mode === 1)
+            this.inner.set(this.staged);
+        this.staged = undefined;
+        this.mode = -1;
+    }
+    /**
+     * Get the current value either staged or not
+     */
+    get() {
+        if (this.mode === 1)
+            return this.staged;
+        return this.inner.get();
+    }
+    readonly() {
+        return this.inner.readonly();
+    }
+    readclone() {
+        return this.inner.readclone();
+    }
+}

package/dist/std/stores/index.d.ts

@@ -1,5 +1,6 @@
 import Readable from './Readable.js';
 import Writable from './Writable.js';
 import Readclone from './Readclone.js';
-export { Writable, Readable, Readclone };
+import StagedWritable from './StagedWritable.js';
+export { Writable, Readable, Readclone, StagedWritable };
 //# sourceMappingURL=index.d.ts.map

package/dist/std/stores/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/std/stores/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/std/stores/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC"}

package/dist/std/stores/index.js

@@ -1,4 +1,5 @@
 import Readable from './Readable.js';
 import Writable from './Writable.js';
 import Readclone from './Readclone.js';
-export { Writable, Readable, Readclone };
+import StagedWritable from './StagedWritable.js';
+export { Writable, Readable, Readclone, StagedWritable };

package/dist/std/sync/Barrier.js

@@ -61,7 +61,7 @@ export default class Barrier {
     }
     _maybeTrigger() {
         const ready = this.listeners.every(v => v === null || v.ready);
-        // if all are ready
+        // if not all are ready
         if (!ready)
             return false;
         // send the last value to all of them

package/dist/utils.d.ts

@@ -1,4 +1,13 @@
 export declare function objClone(obj: any): any;
 export declare function isPromise<T>(p: Promise<T> | T): p is Promise<T>;
+/**
+ * A helper to chain promises without needing a microtask if its not a promise
+ * Equivalent to:
+ * ```
+ * const val = await p;
+ * then(val);
+ * ```
+ */
+export declare function promiseThen<T, R = void>(p: Promise<T> | T, then: (val: T) => R): Promise<R> | R;
 export declare function urlWithPath(url: string, path?: string): URL;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAMtC;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAE/D;AAGD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,CAI3D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAMtC;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAE/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,EACtC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,EACjB,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GACjB,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAEhB;AAGD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,CAI3D"}

package/dist/utils.js

@@ -9,6 +9,17 @@ export function objClone(obj) {
 export function isPromise(p) {
     return typeof p?.then === 'function';
 }
+/**
+ * A helper to chain promises without needing a microtask if its not a promise
+ * Equivalent to:
+ * ```
+ * const val = await p;
+ * then(val);
+ * ```
+ */
+export function promiseThen(p, then) {
+    return isPromise(p) ? p.then(then) : then(p);
+}
 // the pathname is always replaced
 export function urlWithPath(url, path) {
     const u = new URL(url);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "crelte",
-	"version": "0.5.10",
+	"version": "0.5.12",
 	"author": "Crelte <support@crelte.com>",
 	"type": "module",
 	"scripts": {
@@ -72,6 +72,10 @@
 			"types": "./dist/cookies/index.d.ts",
 			"default": "./dist/cookies/index.js"
 		},
+		"./bodyClass": {
+			"types": "./dist/bodyClass/index.d.ts",
+			"default": "./dist/bodyClass/index.js"
+		},
 		"./blocks": {
 			"types": "./dist/blocks/index.d.ts",
 			"default": "./dist/blocks/index.js"

package/src/bodyClass/BodyClass.ts

@@ -0,0 +1,72 @@
+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 {
+		this.inner.toggle(cls, force);
+		this.store.set();
+	}
+
+	remove(...classes: string[]): void {
+		this.inner.remove(...classes);
+		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;
+	toggle(cls: string, force?: boolean): void;
+	remove(...classes: string[]): void;
+	toRequest(): PlatformBodyClass;
+	render?: () => void;
+}

package/src/bodyClass/ClientBodyClass.ts

@@ -0,0 +1,62 @@
+import { PlatformBodyClass } from './BodyClass.js';
+
+export default class ClientBodyClass implements PlatformBodyClass {
+	private inner: Set<string> | null;
+
+	constructor(inner?: Set<string>) {
+		this.inner = inner ?? null;
+	}
+
+	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);
+	}
+
+	toggle(cls: string, force?: boolean): void {
+		if (this.inner) {
+			const add =
+				typeof force === 'boolean' ? force : !this.inner.has(cls);
+
+			if (add) this.inner.add(cls);
+			else this.inner.delete(cls);
+		} else {
+			cl().toggle(cls, force);
+		}
+	}
+
+	remove(...classes: string[]): void {
+		if (this.inner) classes.forEach(cls => this.inner!.delete(cls));
+		else cl().remove(...classes);
+	}
+
+	toRequest(): ClientBodyClass {
+		const inner = new Set(cl());
+		return new ClientBodyClass(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);
+		}
+
+		this.inner = null;
+	}
+}
+
+function cl(): DOMTokenList {
+	return document.body.classList;
+}

package/src/bodyClass/ServerBodyClass.ts

@@ -0,0 +1,65 @@
+import { PlatformBodyClass } from './BodyClass.js';
+
+export default class ServerBodyClass implements PlatformBodyClass {
+	private inner: Set<string>;
+
+	constructor() {
+		this.inner = new Set();
+	}
+
+	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): void {
+		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 add = typeof force === 'boolean' ? force : !this.inner.has(cls);
+
+		if (add) this.inner.add(cls);
+		else this.inner.delete(cls);
+	}
+
+	remove(...classes: string[]): void {
+		validate(classes);
+		classes.forEach(cls => this.inner.delete(cls));
+	}
+
+	toRequest(): ServerBodyClass {
+		return this;
+	}
+
+	z_processHtmlTemplate(html: string): string {
+		const SEARCH_STR = '<!--body-class-->';
+		if (this.inner.size && !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(' '));
+	}
+}
+
+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/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,7 @@ export function newCrelte({
 		router,
 		queries,
 		cookies,
+		bodyClass,
 
 		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
  *