@ternkit/tern 1.3.0 → 1.5.0

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { goto, invalidate, invalidateAll, preloadData, applyAction } from './run
 export { beforeNavigate, onNavigate, afterNavigate } from './runtime/navigation.js';
 export type { BeforeNavigateEvent, OnNavigateEvent } from './runtime/navigation.js';
 export { enhance } from './runtime/forms.js';
+export { validate, checkField, type FormField, type FormErrors } from './runtime/validate.js';
 export type { SubmitFunction, SubmitInput, SubmitResult } from './runtime/forms.js';
 export type { ActionResult, GotoOptions, Navigation, NavigationTarget, NavigationType } from './runtime/types.js';
 export { ApiError, createApi } from './runtime/api.js';
@@ -28,4 +29,4 @@ export type { MessageKey } from './runtime/i18n.svelte.js';
 export interface Messages {
 }
 /** The version of the Tern client runtime. */
-export declare const VERSION = "1.3.0";
+export declare const VERSION = "1.5.0";

package/dist/index.js

@@ -11,9 +11,10 @@ export { page, navigating, env } from './runtime/state.svelte.js';
 export { goto, invalidate, invalidateAll, preloadData, applyAction } from './runtime/router.svelte.js';
 export { beforeNavigate, onNavigate, afterNavigate } from './runtime/navigation.js';
 export { enhance } from './runtime/forms.js';
+export { validate, checkField } from './runtime/validate.js';
 export { ApiError, createApi } from './runtime/api.js';
 export { stream, socket, EventStreamState, SocketState } from './runtime/realtime.svelte.js';
 export { default as Image } from './image/Image.svelte';
 export { t, i18n, setLocale } from './runtime/i18n.svelte.js';
 /** The version of the Tern client runtime. */
-export const VERSION = '1.3.0';
+export const VERSION = '1.5.0';

package/dist/runtime/deferred.d.ts

@@ -17,7 +17,11 @@ export declare class DeferredScope {
     /** Rejects every value still pending, e.g. when the stream ends early. */
     close(reason: string): void;
 }
-/** Replaces deferred placeholders in data with promises from scope. */
+/**
+ * Replaces deferred placeholders in data with promises from scope. The data
+ * must be fresh from JSON.parse: it is changed in place, which saves
+ * copying every page's data on every render.
+ */
 export declare function revive<T>(value: T, promise: (id: number) => Promise<unknown>): T;
 /**
  * Reads a response that holds one JSON payload line, optionally followed

package/dist/runtime/deferred.js

@@ -32,21 +32,37 @@ export class DeferredScope {
         this.#pending.clear();
     }
 }
-/** Replaces deferred placeholders in data with promises from scope. */
+/**
+ * Replaces deferred placeholders in data with promises from scope. The data
+ * must be fresh from JSON.parse: it is changed in place, which saves
+ * copying every page's data on every render.
+ */
 export function revive(value, promise) {
+    if (value === null || typeof value !== 'object')
+        return value;
     if (Array.isArray(value)) {
-        return value.map((v) => revive(v, promise));
+        for (let i = 0; i < value.length; i++) {
+            const v = value[i];
+            if (v !== null && typeof v === 'object') {
+                const r = revive(v, promise);
+                if (r !== v)
+                    value[i] = r;
+            }
+        }
+        return value;
+    }
+    const obj = value;
+    if (typeof obj.__tern_deferred === 'number' && Object.keys(obj).length === 1) {
+        return promise(obj.__tern_deferred);
     }
-    if (value && typeof value === 'object') {
-        const obj = value;
-        const keys = Object.keys(obj);
-        if (keys.length === 1 && keys[0] === '__tern_deferred' && typeof obj.__tern_deferred === 'number') {
-            return promise(obj.__tern_deferred);
+    for (const k in obj) {
+        const v = obj[k];
+        if (v !== null && typeof v === 'object') {
+            const r = revive(v, promise);
+            // defineProperty, so a key named __proto__ stays a plain property.
+            if (r !== v)
+                Object.defineProperty(obj, k, { value: r, writable: true, enumerable: true, configurable: true });
         }
-        const out = {};
-        for (const k of keys)
-            out[k] = revive(obj[k], promise);
-        return out;
     }
     return value;
 }

package/dist/runtime/validate.d.ts

@@ -0,0 +1,31 @@
+/** A form field's rules, as tern gen writes them. */
+export interface FormField<Name extends string = string> {
+    name: Name;
+    label: string;
+    kind: 'string' | 'int' | 'float' | 'bool' | 'date' | 'datetime' | 'strings';
+    required?: boolean;
+    rules?: {
+        name: string;
+        arg?: string;
+    }[];
+    message?: string;
+    secret?: boolean;
+}
+/** Errors by field name; empty when the form is valid. */
+export type FormErrors<Name extends string = string> = Partial<Record<Name, string>>;
+/** Reads a date or a date and time as Go does, or null. Times without a zone are UTC. */
+export declare function parseFormTime(kind: 'date' | 'datetime', s: string): number | null;
+/**
+ * Returns why a field's values are invalid, or "". values are its posted
+ * values; other reads another field's first value, for same=.
+ */
+export declare function checkField(f: FormField, values: string[], other?: (name: string) => string, labelOf?: (name: string) => string): string;
+/**
+ * Checks a form against its rules, as kit.FormAction will on the server:
+ *
+ * ```ts
+ * import { forms } from './$forms';
+ * const errors = validate(forms.create, new FormData(formElement));
+ * ```
+ */
+export declare function validate<Name extends string>(fields: FormField<Name>[], data: FormData | Record<string, unknown>): FormErrors<Name>;

package/dist/runtime/validate.js

@@ -0,0 +1,168 @@
+// Checks form values against the rules tern gen writes to ./$forms from a
+// kit.FormAction's validate tags. The checks and messages match
+// internal/formrules in Go, which checks the same rules on the server;
+// internal/formrules/testdata/cases.json keeps the two in step.
+const emailRe = /^[^\s@<>()",;:]+@[^\s@<>()",;:]+\.[^\s@<>()",;:]+$/;
+const intRe = /^[+-]?\d+$/;
+const floatRe = /^[+-]?(\d+\.?\d*|\.\d+)$/;
+const patterns = new Map();
+function truthy(s) {
+    return !['', 'off', 'false', '0', 'no'].includes(s.trim().toLowerCase());
+}
+/** Reads a date or a date and time as Go does, or null. Times without a zone are UTC. */
+export function parseFormTime(kind, s) {
+    if (kind === 'date') {
+        const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+        if (!m)
+            return null;
+        const [y, mo, d] = [Number(m[1]), Number(m[2]), Number(m[3])];
+        const t = Date.UTC(y, mo - 1, d);
+        const back = new Date(t);
+        return back.getUTCFullYear() === y && back.getUTCMonth() === mo - 1 && back.getUTCDate() === d ? t : null;
+    }
+    const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(s);
+    if (m) {
+        const [y, mo, d, h, mi, se] = m.slice(1).map((x) => Number(x ?? 0));
+        const t = Date.UTC(y, mo - 1, d, h, mi, se);
+        const b = new Date(t);
+        return b.getUTCDate() === d && b.getUTCHours() === h && b.getUTCMinutes() === mi ? t : null;
+    }
+    if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/.test(s)) {
+        const t = Date.parse(s);
+        return Number.isNaN(t) ? null : t;
+    }
+    return null;
+}
+function joinOr(list) {
+    return list.length === 1 ? list[0] : `${list.slice(0, -1).join(', ')} or ${list[list.length - 1]}`;
+}
+const bound = { min: 'at least', max: 'at most', len: 'exactly' };
+/**
+ * Returns why a field's values are invalid, or "". values are its posted
+ * values; other reads another field's first value, for same=.
+ */
+export function checkField(f, values, other = () => '', labelOf = (n) => n) {
+    const msg = (m) => f.message || m;
+    const list = values.filter((v) => v.trim() !== '');
+    const v = values[0] ?? '';
+    const empty = f.kind === 'strings' ? list.length === 0 : f.kind === 'bool' ? !truthy(v) : v.trim() === '';
+    if (empty) {
+        if (!f.required)
+            return '';
+        return msg(f.kind === 'bool' ? `${f.label} must be checked.` : `${f.label} is required.`);
+    }
+    let num = 0;
+    let when = 0;
+    if (f.kind === 'int') {
+        if (!intRe.test(v.trim()))
+            return msg(`${f.label} must be a whole number.`);
+        num = Number(v.trim());
+    }
+    else if (f.kind === 'float') {
+        if (!floatRe.test(v.trim()))
+            return msg(`${f.label} must be a number.`);
+        num = Number(v.trim());
+    }
+    else if (f.kind === 'date' || f.kind === 'datetime') {
+        const t = parseFormTime(f.kind, v.trim());
+        if (t === null)
+            return msg(f.kind === 'date' ? `${f.label} must be a date.` : `${f.label} must be a date and time.`);
+        when = t;
+    }
+    for (const r of f.rules ?? []) {
+        const arg = r.arg ?? '';
+        const n = Number(arg);
+        switch (r.name) {
+            case 'min':
+            case 'max':
+            case 'len': {
+                const low = r.name === 'min';
+                const fails = (c) => (r.name === 'len' && c !== n) || (low && c < n) || (r.name === 'max' && c > n);
+                if (f.kind === 'string') {
+                    if (fails([...v].length))
+                        return msg(`${f.label} must be ${bound[r.name]} ${arg} ${n === 1 ? 'character' : 'characters'}.`);
+                }
+                else if (f.kind === 'int' || f.kind === 'float') {
+                    if (fails(num))
+                        return msg(`${f.label} must be ${bound[r.name]} ${arg}.`);
+                }
+                else if (f.kind === 'date' || f.kind === 'datetime') {
+                    const b = parseFormTime(f.kind, arg) ?? 0;
+                    if ((low && when < b) || (r.name === 'max' && when > b))
+                        return msg(`${f.label} must be on or ${low ? 'after' : 'before'} ${arg}.`);
+                }
+                else if (f.kind === 'strings') {
+                    if (fails(list.length))
+                        return msg(`Choose ${bound[r.name]} ${arg} for ${f.label.toLowerCase()}.`);
+                }
+                break;
+            }
+            case 'email':
+                if (!emailRe.test(v))
+                    return msg(`${f.label} must be an email address.`);
+                break;
+            case 'url': {
+                let ok = false;
+                try {
+                    const u = new URL(v);
+                    ok = (u.protocol === 'http:' || u.protocol === 'https:') && u.host !== '' && !/[ \t\n]/.test(v);
+                }
+                catch {
+                    ok = false;
+                }
+                if (!ok)
+                    return msg(`${f.label} must be a web address starting with http:// or https://.`);
+                break;
+            }
+            case 'pattern': {
+                let re = patterns.get(arg);
+                if (!re)
+                    patterns.set(arg, (re = new RegExp(`^(?:${arg})$`, 'u')));
+                for (const s of f.kind === 'strings' ? list : [v])
+                    if (!re.test(s))
+                        return msg(`${f.label} isn't in the expected format.`);
+                break;
+            }
+            case 'oneof': {
+                const opts = arg.split('|');
+                for (const s of f.kind === 'strings' ? list : [v])
+                    if (!opts.includes(s))
+                        return msg(`${f.label} must be one of ${joinOr(opts)}.`);
+                break;
+            }
+            case 'same':
+                if (other(arg) !== v)
+                    return msg(`${f.label} must match ${labelOf(arg).toLowerCase()}.`);
+                break;
+        }
+    }
+    return '';
+}
+/**
+ * Checks a form against its rules, as kit.FormAction will on the server:
+ *
+ * ```ts
+ * import { forms } from './$forms';
+ * const errors = validate(forms.create, new FormData(formElement));
+ * ```
+ */
+export function validate(fields, data) {
+    const read = (name) => {
+        if (data instanceof FormData)
+            return data.getAll(name).map((v) => (typeof v === 'string' ? v : v.name));
+        const v = data[name];
+        if (v === undefined || v === null || v === false)
+            return [];
+        if (v === true)
+            return ['on'];
+        return Array.isArray(v) ? v.map(String) : [String(v)];
+    };
+    const labels = new Map(fields.map((f) => [f.name, f.label]));
+    const errors = {};
+    for (const f of fields) {
+        const m = checkField(f, read(f.name), (n) => read(n)[0] ?? '', (n) => labels.get(n) ?? n);
+        if (m)
+            errors[f.name] = m;
+    }
+    return errors;
+}

package/dist/server/intl.js

@@ -15,40 +15,83 @@ class NumberFormat {
     format(value) {
         let n = Number(value);
         const o = this.#o;
-        if (!Number.isFinite(n))
-            return Number.isNaN(n) ? 'NaN' : n > 0 ? '∞' : '-∞';
+        const sign = String(o.signDisplay ?? 'auto');
+        if (!Number.isFinite(n)) {
+            if (Number.isNaN(n))
+                return 'NaN';
+            return (n < 0 ? (sign === 'never' ? '' : '-') : sign === 'always' || sign === 'exceptZero' ? '+' : '') + '∞';
+        }
+        const negative = n < 0 || Object.is(n, -0);
         let suffix = '';
         if (o.style === 'percent') {
             n *= 100;
             suffix = '%';
         }
+        const isCurrency = o.style === 'currency';
+        const explicit = o.maximumFractionDigits !== undefined || o.minimumFractionDigits !== undefined;
+        let max = o.maximumFractionDigits ?? (isCurrency ? 2 : o.style === 'percent' ? 0 : 3);
+        const min = o.minimumFractionDigits ?? (isCurrency ? 2 : 0);
+        let abs = Math.abs(n);
         if (o.notation === 'compact') {
-            const abs = Math.abs(n);
-            for (const [limit, s] of [[1e12, 'T'], [1e9, 'B'], [1e6, 'M'], [1e3, 'K']]) {
-                if (abs >= limit) {
-                    n /= limit;
-                    suffix = s + suffix;
+            const long = o.compactDisplay === 'long';
+            const units = [
+                [1e12, 'T', ' trillion'],
+                [1e9, 'B', ' billion'],
+                [1e6, 'M', ' million'],
+                [1e3, 'K', ' thousand'],
+            ];
+            // Like en-US: two significant digits, but never fewer than the
+            // integer part needs.
+            const digits = (x) => (explicit ? Math.max(min, Math.min(max, 20)) : x >= 10 || x === 0 ? 0 : Math.max(0, 1 - Math.floor(Math.log10(x))));
+            const rounded = (x) => Number(x.toFixed(digits(x)));
+            let unit = '';
+            for (let i = 0; i < units.length; i++) {
+                const [limit, short, name] = units[i];
+                if (rounded(abs) >= limit) {
+                    abs /= limit;
+                    unit = long ? name : short;
+                    // 999,999 rounds to 1000K, which is 1M.
+                    if (rounded(abs) >= 1000 && i > 0) {
+                        abs /= 1000;
+                        unit = long ? units[i - 1][2] : units[i - 1][1];
+                    }
                     break;
                 }
             }
+            suffix = unit + suffix;
+            max = digits(abs);
         }
-        const isCurrency = o.style === 'currency';
-        const max = o.maximumFractionDigits ?? (isCurrency ? 2 : o.style === 'percent' ? 0 : o.notation === 'compact' ? 1 : 3);
-        const min = o.minimumFractionDigits ?? (isCurrency ? 2 : 0);
-        let s = Math.abs(n).toFixed(Math.max(min, Math.min(max, 20)));
+        let s = abs.toFixed(o.notation === 'compact' && !explicit ? max : Math.max(min, Math.min(max, 20)));
         if (s.includes('.')) {
             let [int, frac = ''] = s.split('.');
             while (frac.length > min && frac.endsWith('0'))
                 frac = frac.slice(0, -1);
             s = frac ? `${int}.${frac}` : int;
         }
+        const zero = !/[1-9]/.test(s);
         const [int, frac] = s.split('.');
         s = (o.useGrouping === false ? int : group(int)) + (frac ? `.${frac}` : '');
         if (isCurrency) {
             const code = String(o.currency ?? 'USD').toUpperCase();
             s = (code === 'USD' ? '$' : code === 'EUR' ? '€' : code === 'GBP' ? '£' : `${code} `) + s;
         }
-        return (n < 0 ? '-' : '') + s + suffix;
+        let prefix = '';
+        switch (sign) {
+            case 'never':
+                break;
+            case 'always':
+                prefix = negative ? '-' : '+';
+                break;
+            case 'exceptZero':
+                prefix = zero ? '' : negative ? '-' : '+';
+                break;
+            case 'negative':
+                prefix = negative && !zero ? '-' : '';
+                break;
+            default:
+                prefix = negative ? '-' : '';
+        }
+        return prefix + s + suffix;
     }
     formatToParts(value) {
         return [{ type: 'literal', value: this.format(value) }];

package/dist/ui/AlertDialog.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Dialog from './Dialog.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Whether it's open; bind it. */
+		open?: boolean;
+		/** The question, such as "Delete this project?" */
+		title: string;
+		/** What happens, such as "This can't be undone." */
+		description?: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		/** Styles the confirm button for destructive actions. */
+		danger?: boolean;
+		/** Runs on confirm. If it returns a promise, the button shows a spinner until it settles, and the dialog stays open if it rejects. */
+		onconfirm: () => void | Promise<unknown>;
+		oncancel?: () => void;
+		/** More content, such as a field to type a name into. */
+		children?: Snippet;
+		/** Disables the confirm button, for example until a name is typed. */
+		confirmDisabled?: boolean;
+		class?: string;
+	};
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		confirmLabel = 'Continue',
+		cancelLabel = 'Cancel',
+		danger = false,
+		onconfirm,
+		oncancel,
+		children,
+		confirmDisabled = false,
+		class: klass = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+	let busy = $state(false);
+	let confirmed = false;
+
+	async function confirm() {
+		busy = true;
+		try {
+			await onconfirm();
+			confirmed = true;
+			open = false;
+		} catch {
+			// Stay open: the caller shows what went wrong.
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<!-- Interrupts to confirm an action. Focus starts on Cancel, so Enter doesn't confirm by accident. -->
+<Dialog
+	bind:open
+	{title}
+	{description}
+	role="alertdialog"
+	size="sm"
+	dismissable={false}
+	closeButton={false}
+	initialFocus={() => document.getElementById(`tern-alert-${uid}-cancel`)}
+	onclose={() => {
+		if (!confirmed) oncancel?.();
+		confirmed = false;
+	}}
+	class={klass}
+	{children}
+>
+	{#snippet footer()}
+		<Button variant="secondary" id="tern-alert-{uid}-cancel" onclick={() => (open = false)} disabled={busy}>{cancelLabel}</Button>
+		<Button variant={danger ? 'danger' : 'primary'} onclick={confirm} loading={busy} disabled={confirmDisabled}>{confirmLabel}</Button>
+	{/snippet}
+</Dialog>

package/dist/ui/AlertDialog.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether it's open; bind it. */
+    open?: boolean;
+    /** The question, such as "Delete this project?" */
+    title: string;
+    /** What happens, such as "This can't be undone." */
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Styles the confirm button for destructive actions. */
+    danger?: boolean;
+    /** Runs on confirm. If it returns a promise, the button shows a spinner until it settles, and the dialog stays open if it rejects. */
+    onconfirm: () => void | Promise<unknown>;
+    oncancel?: () => void;
+    /** More content, such as a field to type a name into. */
+    children?: Snippet;
+    /** Disables the confirm button, for example until a name is typed. */
+    confirmDisabled?: boolean;
+    class?: string;
+};
+declare const AlertDialog: import("svelte").Component<Props, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/ui/AreaChart.svelte

@@ -0,0 +1,9 @@
+<script lang="ts" generics="Row extends object">
+	import type { ComponentProps } from 'svelte';
+	import LineChart from './LineChart.svelte';
+
+	let props: Omit<ComponentProps<typeof LineChart<Row>>, 'area'> = $props();
+</script>
+
+<!-- A LineChart with each series' area washed in under its line. -->
+<LineChart {...props} area />

package/dist/ui/AreaChart.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'svelte';
+import LineChart from './LineChart.svelte';
+declare function $$render<Row extends object>(): {
+    props: Omit<ComponentProps<typeof LineChart<Row>>, "area">;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row extends object> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row extends object>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AreaChart: $$IsomorphicComponent;
+type AreaChart<Row extends object> = InstanceType<typeof AreaChart<Row>>;
+export default AreaChart;

package/dist/ui/AspectRatio.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Width over height, such as 16 / 9. */
+		ratio?: number;
+		children: Snippet;
+		class?: string;
+	};
+	let { ratio = 16 / 9, children, class: klass = '' }: Props = $props();
+</script>
+
+<!-- Keeps its content, such as an image or video, at a ratio as it resizes. -->
+<div class="tern-aspect {klass}" style:aspect-ratio={ratio}>{@render children()}</div>
+
+<style>
+	.tern-aspect {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		border-radius: var(--tern-radius);
+	}
+	.tern-aspect > :global(img),
+	.tern-aspect > :global(video),
+	.tern-aspect > :global(iframe) {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border: 0;
+	}
+</style>

package/dist/ui/AspectRatio.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Width over height, such as 16 / 9. */
+    ratio?: number;
+    children: Snippet;
+    class?: string;
+};
+declare const AspectRatio: import("svelte").Component<Props, {}, "">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;