@ternkit/tern 0.4.0 → 1.1.0

package/dist/image/Image.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import type { Picture } from './types.js';
+
+	interface Props extends Omit<HTMLImgAttributes, 'src' | 'srcset' | 'width' | 'height'> {
+		/** The image, from `import picture from './photo.jpg?image'`. */
+		src: Picture;
+		/** Describes the image; use "" for decorative images. */
+		alt: string;
+		/**
+		 * How wide the image is displayed, so the browser picks the right file,
+		 * such as "(min-width: 768px) 50vw, 100vw". Defaults to its full width.
+		 */
+		sizes?: string;
+		/** Load at once and with high priority, for the main image of a page. */
+		priority?: boolean;
+	}
+
+	let { src, alt, sizes, priority = false, ...rest }: Props = $props();
+	const fallbackSizes = $derived(`(min-width: ${src.width}px) ${src.width}px, 100vw`);
+</script>
+
+<picture>
+	{#each src.sources as source (source.type)}
+		<source type={source.type} srcset={source.srcset} sizes={sizes ?? fallbackSizes} />
+	{/each}
+	<img
+		src={src.src}
+		srcset={src.srcset}
+		sizes={sizes ?? fallbackSizes}
+		width={src.width}
+		height={src.height}
+		{alt}
+		loading={priority ? 'eager' : 'lazy'}
+		fetchpriority={priority ? 'high' : undefined}
+		decoding="async"
+		{...rest}
+	/>
+</picture>

package/dist/image/Image.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+import type { Picture } from './types.js';
+interface Props extends Omit<HTMLImgAttributes, 'src' | 'srcset' | 'width' | 'height'> {
+    /** The image, from `import picture from './photo.jpg?image'`. */
+    src: Picture;
+    /** Describes the image; use "" for decorative images. */
+    alt: string;
+    /**
+     * How wide the image is displayed, so the browser picks the right file,
+     * such as "(min-width: 768px) 50vw, 100vw". Defaults to its full width.
+     */
+    sizes?: string;
+    /** Load at once and with high priority, for the main image of a page. */
+    priority?: boolean;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/image/types.d.ts

@@ -0,0 +1,15 @@
+/** A responsive image from an `import x from './x.jpg?image'`. */
+export interface Picture {
+    /** The largest version in the image's own format, for browsers without srcset. */
+    src: string;
+    /** The largest version's size, so the browser reserves space before it loads. */
+    width: number;
+    height: number;
+    /** Every width in the image's own format. */
+    srcset: string;
+    /** AVIF and WebP versions, best first. */
+    sources: {
+        type: string;
+        srcset: string;
+    }[];
+}

package/dist/image/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -7,12 +7,22 @@
  * </script>
  * ```
  */
-export { page, navigating } from './runtime/state.svelte.js';
+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 type { BeforeNavigateEvent, OnNavigateEvent } from './runtime/navigation.js';
 export { enhance } from './runtime/forms.js';
 export type { SubmitFunction, SubmitInput, SubmitResult } from './runtime/forms.js';
 export type { ActionResult, GotoOptions, Navigation, NavigationTarget, NavigationType } from './runtime/types.js';
+export { default as Image } from './image/Image.svelte';
+export type { Picture } from './image/types.js';
+export { t, i18n, setLocale } from './runtime/i18n.svelte.js';
+export type { MessageKey } from './runtime/i18n.svelte.js';
+/**
+ * The app's message keys. `tern gen` fills this in from src/locales, so
+ * t() only accepts keys that exist.
+ */
+export interface Messages {
+}
 /** The version of the Tern client runtime. */
-export declare const VERSION = "0.4.0";
+export declare const VERSION = "1.1.0";

package/dist/index.js

@@ -7,9 +7,11 @@
  * </script>
  * ```
  */
-export { page, navigating } from './runtime/state.svelte.js';
+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 { 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 = '0.4.0';
+export const VERSION = '1.1.0';

package/dist/runtime/format.d.ts

@@ -0,0 +1,19 @@
+type Node = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'hash';
+} | {
+    type: 'arg';
+    name: string;
+} | {
+    type: 'plural' | 'select';
+    name: string;
+    options: Record<string, Node[]>;
+};
+/** Formats one message in the given locale. */
+export declare function format(locale: string, message: string, params?: Record<string, unknown>): string;
+export declare function parse(message: string): Node[];
+/** The CLDR cardinal plural category of n in locale (see the Go version). */
+export declare function pluralCategory(locale: string, n: number): string;
+export {};

package/dist/runtime/format.js

@@ -0,0 +1,279 @@
+// Message formatting for i18n. This mirrors internal/i18n in Go exactly:
+// both are tested against internal/i18n/testdata/cases.json, so the server
+// and the browser produce the same text and hydration matches.
+const cache = new Map();
+/** Formats one message in the given locale. */
+export function format(locale, message, params = {}) {
+    let nodes = cache.get(message);
+    if (nodes === undefined) {
+        try {
+            nodes = parse(message);
+        }
+        catch {
+            nodes = null;
+        }
+        cache.set(message, nodes);
+    }
+    if (!nodes)
+        return message;
+    return render(nodes, locale, params, undefined);
+}
+function render(nodes, locale, params, hash) {
+    let out = '';
+    for (const n of nodes) {
+        switch (n.type) {
+            case 'text':
+                out += n.text;
+                break;
+            case 'hash':
+                out += hash === undefined ? '#' : formatNumber(hash);
+                break;
+            case 'arg':
+                out += n.name in params ? String(params[n.name]) : `{${n.name}}`;
+                break;
+            case 'plural': {
+                const num = Number(params[n.name] ?? 0) || 0;
+                const body = n.options[`=${formatNumber(num)}`] ?? n.options[pluralCategory(locale, num)] ?? n.options.other;
+                out += render(body, locale, params, num);
+                break;
+            }
+            case 'select': {
+                const body = n.options[String(params[n.name])] ?? n.options.other;
+                out += render(body, locale, params, hash);
+            }
+        }
+    }
+    return out;
+}
+function formatNumber(n) {
+    return String(n);
+}
+export function parse(message) {
+    const p = { s: [...message], i: 0 };
+    const nodes = parseNodes(p, false, false);
+    if (p.i < p.s.length)
+        throw new Error(`unexpected '}' at ${p.i}`);
+    return nodes;
+}
+function parseNodes(p, inBranch, plural) {
+    const out = [];
+    let text = '';
+    const flush = () => {
+        if (text)
+            out.push({ type: 'text', text });
+        text = '';
+    };
+    while (p.i < p.s.length) {
+        const c = p.s[p.i];
+        if (c === "'") {
+            const next = p.s[p.i + 1];
+            if (next === "'") {
+                text += "'";
+                p.i += 2;
+                continue;
+            }
+            if (next !== undefined && '{}#'.includes(next)) {
+                let end = p.i + 1;
+                while (end < p.s.length && p.s[end] !== "'")
+                    end++;
+                text += p.s.slice(p.i + 1, end).join('');
+                p.i = end + 1;
+                continue;
+            }
+            text += c;
+            p.i++;
+        }
+        else if (c === '{') {
+            flush();
+            out.push(parseArgument(p));
+        }
+        else if (c === '}') {
+            if (!inBranch)
+                throw new Error(`unexpected '}' at ${p.i}`);
+            flush();
+            return out;
+        }
+        else if (c === '#' && plural) {
+            flush();
+            out.push({ type: 'hash' });
+            p.i++;
+        }
+        else {
+            text += c;
+            p.i++;
+        }
+    }
+    if (inBranch)
+        throw new Error("unclosed '{'");
+    flush();
+    return out;
+}
+function until(p, stops) {
+    const start = p.i;
+    while (p.i < p.s.length && !stops.includes(p.s[p.i]))
+        p.i++;
+    return p.s.slice(start, p.i).join('');
+}
+function parseArgument(p) {
+    p.i++; // {
+    const name = until(p, ',}').trim();
+    if (!name)
+        throw new Error(`empty argument at ${p.i}`);
+    if (p.i >= p.s.length)
+        throw new Error("unclosed '{'");
+    if (p.s[p.i] === '}') {
+        p.i++;
+        return { type: 'arg', name };
+    }
+    p.i++; // ,
+    const kind = until(p, ',}').trim();
+    if (kind !== 'plural' && kind !== 'select')
+        throw new Error(`unknown argument type "${kind}"`);
+    if (p.s[p.i] !== ',')
+        throw new Error(`${kind} argument "${name}" needs options`);
+    p.i++;
+    const options = {};
+    for (;;) {
+        while (p.i < p.s.length && ' \n\t'.includes(p.s[p.i]))
+            p.i++;
+        if (p.i >= p.s.length)
+            throw new Error("unclosed '{'");
+        if (p.s[p.i] === '}') {
+            p.i++;
+            break;
+        }
+        const key = until(p, '{').trim();
+        if (!key || p.i >= p.s.length)
+            throw new Error(`expected an option in "${name}"`);
+        p.i++; // {
+        options[key] = parseNodes(p, true, kind === 'plural');
+        p.i++; // }
+    }
+    if (!options.other)
+        throw new Error(`${kind} argument "${name}" needs an 'other' option`);
+    return { type: kind, name, options };
+}
+/** The CLDR cardinal plural category of n in locale (see the Go version). */
+export function pluralCategory(locale, n) {
+    const lang = locale.toLowerCase().split(/[-_]/)[0];
+    const i = Math.abs(Math.trunc(n));
+    const isInt = n === Math.trunc(n);
+    const mod10 = i % 10;
+    const mod100 = i % 100;
+    switch (lang) {
+        case 'ja':
+        case 'zh':
+        case 'ko':
+        case 'vi':
+        case 'th':
+        case 'id':
+        case 'ms':
+        case 'lo':
+        case 'my':
+        case 'km':
+            return 'other';
+        case 'fr':
+        case 'pt':
+        case 'hy':
+        case 'ff':
+        case 'kab':
+            if (i === 0 || i === 1)
+                return 'one';
+            break;
+        case 'ru':
+        case 'uk':
+        case 'be':
+        case 'sr':
+        case 'hr':
+        case 'bs':
+            if (!isInt)
+                return 'other';
+            if (mod10 === 1 && mod100 !== 11)
+                return 'one';
+            if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14))
+                return 'few';
+            if (lang === 'ru' || lang === 'uk' || lang === 'be')
+                return 'many';
+            break;
+        case 'pl':
+            if (!isInt)
+                return 'other';
+            if (i === 1)
+                return 'one';
+            if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14))
+                return 'few';
+            return 'many';
+        case 'cs':
+        case 'sk':
+            if (!isInt)
+                return 'many';
+            if (i === 1)
+                return 'one';
+            if (i >= 2 && i <= 4)
+                return 'few';
+            break;
+        case 'ro':
+            if (i === 1 && isInt)
+                return 'one';
+            if (!isInt || i === 0 || (mod100 >= 2 && mod100 <= 19))
+                return 'few';
+            break;
+        case 'lt':
+            if (mod10 === 1 && (mod100 < 11 || mod100 > 19))
+                return 'one';
+            if (mod10 >= 2 && (mod100 < 11 || mod100 > 19))
+                return 'few';
+            break;
+        case 'lv':
+            if (mod10 === 0 || (mod100 >= 11 && mod100 <= 19))
+                return 'zero';
+            if (mod10 === 1 && mod100 !== 11)
+                return 'one';
+            break;
+        case 'ar':
+            if (n === 0)
+                return 'zero';
+            if (n === 1)
+                return 'one';
+            if (n === 2)
+                return 'two';
+            if (mod100 >= 3 && mod100 <= 10)
+                return 'few';
+            if (mod100 >= 11 && mod100 <= 99)
+                return 'many';
+            break;
+        case 'he':
+        case 'iw':
+            if (i === 1 && isInt)
+                return 'one';
+            if (i === 2 && isInt)
+                return 'two';
+            break;
+        case 'ga':
+            if (n === 1)
+                return 'one';
+            if (n === 2)
+                return 'two';
+            if (n >= 3 && n <= 6)
+                return 'few';
+            if (n >= 7 && n <= 10)
+                return 'many';
+            break;
+        case 'cy':
+            if (n === 0)
+                return 'zero';
+            if (n === 1)
+                return 'one';
+            if (n === 2)
+                return 'two';
+            if (n === 3)
+                return 'few';
+            if (n === 6)
+                return 'many';
+            break;
+        default:
+            if (n === 1 && isInt)
+                return 'one';
+    }
+    return 'other';
+}

package/dist/runtime/i18n.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Messages } from '../index.js';
+/** A message key from src/locales, or any string when the app has none. */
+export type MessageKey = [keyof Messages] extends [never] ? string : keyof Messages & string;
+type Nested = {
+    [key: string]: string | Nested;
+};
+export interface I18nConfig {
+    defaultLocale: string;
+    locales?: string[];
+    /** Client: lazy loaders. */
+    load?: Record<string, () => Promise<{
+        default: Nested;
+    }>>;
+    /** Server: every locale's messages, eagerly imported. */
+    messages?: Record<string, Nested>;
+}
+export declare function configureI18n(c: I18nConfig | null): void;
+/** Loads a locale's messages (and the default's, for fallbacks) and makes it current. */
+export declare function useLocale(locale: string | undefined): Promise<void>;
+/** Synchronous version for the server renderer, where every locale is loaded. */
+export declare function useLocaleSync(locale: string | undefined): void;
+/**
+ * Translates a message from src/locales into the current locale:
+ *
+ * ```svelte
+ * <h1>{t('welcome', { name: data.user })}</h1>
+ * <p>{t('todos.left', { count: data.left })}</p>
+ * ```
+ *
+ * Messages use ICU syntax for placeholders, plurals and selects. A message
+ * missing from the current locale falls back to the default locale, and
+ * then to the key.
+ */
+export declare function t(key: MessageKey, params?: Record<string, unknown>): string;
+/** The current locale and the ones the app supports. */
+export declare const i18n: {
+    /** The current locale, such as "de", or "" if the app has no src/locales. */
+    readonly locale: string;
+    /** Every locale in src/locales. */
+    readonly locales: string[];
+    /** The locale used for missing messages. */
+    readonly defaultLocale: string;
+};
+/**
+ * Switches the user to another locale: stores it in the locale cookie, which
+ * the server prefers over Accept-Language, and reloads the page's data. For
+ * locales in the URL (a lang route parameter), link to the other URL instead.
+ */
+export declare function setLocale(locale: string, base?: string): Promise<void>;
+export {};

package/dist/runtime/i18n.svelte.js

@@ -0,0 +1,105 @@
+import { format } from './format.js';
+class I18nState {
+    locale = $state('');
+    messages = $state({});
+    fallback = {};
+}
+const state = new I18nState();
+let config = null;
+const loaded = new Map();
+const warned = new Set();
+function flatten(tree, prefix = '', out = {}) {
+    for (const [k, v] of Object.entries(tree)) {
+        const key = prefix ? `${prefix}.${k}` : k;
+        if (typeof v === 'string')
+            out[key] = v;
+        else
+            flatten(v, key, out);
+    }
+    return out;
+}
+export function configureI18n(c) {
+    config = c;
+    if (c?.messages) {
+        for (const [l, m] of Object.entries(c.messages))
+            loaded.set(l, flatten(m));
+    }
+}
+async function messagesFor(locale) {
+    const hit = loaded.get(locale);
+    if (hit)
+        return hit;
+    const loader = config?.load?.[locale];
+    if (!loader)
+        return {};
+    const flat = flatten((await loader()).default);
+    loaded.set(locale, flat);
+    return flat;
+}
+/** Loads a locale's messages (and the default's, for fallbacks) and makes it current. */
+export async function useLocale(locale) {
+    if (!config || !locale)
+        return;
+    const [messages, fallback] = await Promise.all([messagesFor(locale), messagesFor(config.defaultLocale)]);
+    state.fallback = fallback;
+    state.messages = messages;
+    state.locale = locale;
+    if (typeof document !== 'undefined')
+        document.documentElement.lang = locale;
+}
+/** Synchronous version for the server renderer, where every locale is loaded. */
+export function useLocaleSync(locale) {
+    if (!config || !locale)
+        return;
+    state.fallback = loaded.get(config.defaultLocale) ?? {};
+    state.messages = loaded.get(locale) ?? {};
+    state.locale = locale;
+}
+/**
+ * Translates a message from src/locales into the current locale:
+ *
+ * ```svelte
+ * <h1>{t('welcome', { name: data.user })}</h1>
+ * <p>{t('todos.left', { count: data.left })}</p>
+ * ```
+ *
+ * Messages use ICU syntax for placeholders, plurals and selects. A message
+ * missing from the current locale falls back to the default locale, and
+ * then to the key.
+ */
+export function t(key, params) {
+    const message = state.messages[key] ?? state.fallback[key];
+    if (message === undefined) {
+        if (import.meta.env?.DEV && !warned.has(key)) {
+            warned.add(key);
+            console.warn(`[tern] missing message "${key}"`);
+        }
+        return key;
+    }
+    return format(state.locale || config?.defaultLocale || 'en', message, params);
+}
+/** The current locale and the ones the app supports. */
+export const i18n = {
+    /** The current locale, such as "de", or "" if the app has no src/locales. */
+    get locale() {
+        return state.locale;
+    },
+    /** Every locale in src/locales. */
+    get locales() {
+        return config?.locales ?? Object.keys(config?.messages ?? {});
+    },
+    /** The locale used for missing messages. */
+    get defaultLocale() {
+        return config?.defaultLocale ?? '';
+    }
+};
+/**
+ * Switches the user to another locale: stores it in the locale cookie, which
+ * the server prefers over Accept-Language, and reloads the page's data. For
+ * locales in the URL (a lang route parameter), link to the other URL instead.
+ */
+export async function setLocale(locale, base = '') {
+    document.cookie = `locale=${encodeURIComponent(locale)}; path=${base || '/'}; max-age=31536000; samesite=lax`;
+    const { invalidateAll } = await import('./router.svelte.js');
+    await invalidateAll();
+}

package/dist/runtime/router.svelte.js

@@ -3,6 +3,7 @@ import DefaultError from './DefaultError.svelte';
 import Passthrough from './Passthrough.svelte';
 import Root from './Root.svelte';
 import { DeferredScope, readStreamed, revive } from './deferred.js';
+import { configureI18n, useLocale } from './i18n.svelte.js';
 import { runAfter, runBefore, runOn } from './navigation.js';
 import { plan } from './select.js';
 import { applyPayloadToPage, page, setNavigating } from './state.svelte.js';
@@ -31,6 +32,7 @@ const RELOAD = Symbol('reload');
 /** Starts the client. Called by the generated entry module. */
 export async function start(m) {
     manifest = m;
+    configureI18n(m.i18n ?? null);
     const el = document.getElementById('__tern_data');
     const target = document.getElementById('tern-root');
     if (!el || !target) {
@@ -66,6 +68,7 @@ export async function start(m) {
     started = true;
     await tick();
     runAfter({ from: null, to: current(), type: 'enter' });
+    registerServiceWorker();
     const saved = scrollPositions[historyIndex];
     if (saved) {
         scrollTo(saved.x, saved.y);
@@ -75,13 +78,22 @@ export async function start(m) {
     }
     listen();
 }
+function registerServiceWorker() {
+    // Not in development: a caching worker would serve stale modules.
+    if (!manifest.serviceWorker || import.meta.env?.DEV || !('serviceWorker' in navigator))
+        return;
+    const base = manifest.base ?? '';
+    navigator.serviceWorker.register(`${base}/service-worker.js`, { scope: `${base}/` }).catch((err) => {
+        console.error('Tern: registering the service worker failed', err);
+    });
+}
 /** Navigates to href, which may be relative to the current URL. */
 export async function goto(href, opts = {}) {
     if (!started) {
         throw new Error('Tern: goto() was called before the app started');
     }
     const url = new URL(href, location.href);
-    if (url.origin !== location.origin) {
+    if (!inApp(url)) {
         location.href = url.href;
         return;
     }
@@ -162,6 +174,7 @@ function setForm(form) {
 }
 function dataURL(url, reuse) {
     const path = url.pathname.replace(/\/$/, '');
+    // The base path is part of the pathname; the server strips it.
     let target = `${path}/__data.json${url.search}`;
     if (reuse) {
         const here = url.pathname + url.search;
@@ -240,7 +253,7 @@ async function navigate(url, opts, type, redirects, popIndex, fromIndex) {
     }
     if (payload.type === 'redirect' && payload.location) {
         const next = new URL(payload.location, url);
-        if (redirects >= MAX_REDIRECTS || next.origin !== location.origin) {
+        if (redirects >= MAX_REDIRECTS || !inApp(next)) {
             location.href = next.href;
             return;
         }
@@ -328,6 +341,7 @@ async function render(p, url, state, id) {
         }
     }
     const what = plan(manifest, p);
+    const ready = useLocale(p.locale); // messages load alongside the components
     let components;
     switch (what.kind) {
         case 'not-a-page':
@@ -350,6 +364,7 @@ async function render(p, url, state, id) {
             layoutCount = 0;
     }
     nodes = p.nodes ?? [];
+    await ready;
     if (id !== token)
         return true; // superseded; the newer navigation renders
     if (p.type === 'data') {
@@ -410,12 +425,19 @@ function findAnchor(event) {
     }
     return null;
 }
+/** Reports whether url belongs to this app (its origin and base path). */
+function inApp(url) {
+    if (url.origin !== location.origin)
+        return false;
+    const base = manifest.base ?? '';
+    return !base || url.pathname === base || url.pathname.startsWith(base + '/');
+}
 function anchorURL(a) {
     const href = a instanceof SVGAElement ? a.href.baseVal : a.href;
     if (!href)
         return null;
     const url = new URL(href, document.baseURI);
-    if (url.origin !== location.origin || !/^https?:$/.test(url.protocol))
+    if (!inApp(url) || !/^https?:$/.test(url.protocol))
         return null;
     const target = a instanceof SVGAElement ? a.target.baseVal : a.target;
     if (target && target !== '_self')
@@ -476,7 +498,7 @@ function listen() {
             return;
         }
         const url = new URL(submitter?.hasAttribute('formaction') ? submitter.formAction : own.action);
-        if (url.origin !== location.origin)
+        if (!inApp(url))
             return;
         event.preventDefault();
         url.search = new URLSearchParams(new FormData(form, submitter)).toString();

package/dist/runtime/state.svelte.d.ts

@@ -46,6 +46,17 @@ export declare const navigating: {
     readonly current: Navigation | null;
 };
 export declare function setNavigating(n: Navigation | null): void;
+/**
+ * The server's PUBLIC_ environment variables, read when it started:
+ *
+ * ```js
+ * import { env } from '@ternkit/tern';
+ * fetch(`${env.PUBLIC_API_URL}/status`);
+ * ```
+ *
+ * Only variables whose names start with PUBLIC_ are sent to the browser.
+ */
+export declare const env: Record<string, string | undefined>;
 /** Updates page state for a rendered payload. */
 export declare function applyPayloadToPage(p: Payload, url: URL, state: Record<string, unknown>, data: Record<string, unknown>[]): void;
 export {};

package/dist/runtime/state.svelte.js

@@ -49,8 +49,24 @@ export const navigating = {
 export function setNavigating(n) {
     navigatingState.current = n;
 }
+/**
+ * The server's PUBLIC_ environment variables, read when it started:
+ *
+ * ```js
+ * import { env } from '@ternkit/tern';
+ * fetch(`${env.PUBLIC_API_URL}/status`);
+ * ```
+ *
+ * Only variables whose names start with PUBLIC_ are sent to the browser.
+ */
+export const env = {};
 /** Updates page state for a rendered payload. */
 export function applyPayloadToPage(p, url, state, data) {
+    if (p.env) {
+        for (const k of Object.keys(env))
+            delete env[k];
+        Object.assign(env, p.env);
+    }
     page.url = url;
     page.params = p.params ?? {};
     page.route = { id: p.route ?? null };

package/dist/runtime/types.d.ts

@@ -21,6 +21,12 @@ export interface RouteEntry {
 }
 /** The client manifest generated by `tern gen` in .tern/generated/manifest.js. */
 export interface ClientManifest {
+    /** The base path from tern.json, such as '/app', or ''. */
+    base?: string;
+    /** Whether to register /service-worker.js. */
+    serviceWorker?: boolean;
+    /** Translations from src/locales, or null. */
+    i18n?: import('./i18n.svelte.js').I18nConfig | null;
     layouts: LayoutEntry[];
     routes: Record<string, RouteEntry>;
     fallback: {
@@ -47,6 +53,10 @@ export interface Payload {
     uses?: (NodeUses | null)[];
     /** Nodes the server skipped because the client already has their data. */
     reused?: number[];
+    /** PUBLIC_ environment variables, on full page loads. */
+    env?: Record<string, string>;
+    /** The request's locale, when the app has src/locales. */
+    locale?: string;
 }
 export interface NodeUses {
     url?: boolean;

package/dist/server/index.d.ts

@@ -1,4 +1,5 @@
 import type { Component } from 'svelte';
+import { type I18nConfig } from '../runtime/i18n.svelte.js';
 /** The server manifest generated by `tern gen` in .tern/generated/server.js. */
 export interface ServerManifest {
     layouts: {
@@ -19,6 +20,7 @@ export interface ServerManifest {
             component: Component<any>;
         }[];
     };
+    i18n?: I18nConfig | null;
 }
 /** The result of a server render, as JSON for the Go side. */
 export interface RenderResult {

package/dist/server/index.js

@@ -3,6 +3,7 @@ import DefaultError from '../runtime/DefaultError.svelte';
 import Passthrough from '../runtime/Passthrough.svelte';
 import Root from '../runtime/Root.svelte';
 import { revive } from '../runtime/deferred.js';
+import { configureI18n, useLocaleSync } from '../runtime/i18n.svelte.js';
 import { plan } from '../runtime/select.js';
 import { applyPayloadToPage } from '../runtime/state.svelte.js';
 /**
@@ -12,6 +13,7 @@ import { applyPayloadToPage } from '../runtime/state.svelte.js';
  */
 export function createRenderer(manifest) {
     const layout = (i) => manifest.layouts[i]?.component ?? Passthrough;
+    configureI18n(manifest.i18n ?? null);
     return (payloadJSON, href) => {
         const p = JSON.parse(payloadJSON);
         // Deferred values are still loading: render their pending state.
@@ -32,6 +34,7 @@ export function createRenderer(manifest) {
             case 'default-error':
                 components = [DefaultError];
         }
+        useLocaleSync(p.locale);
         applyPayloadToPage(p, new URL(href), {}, what.data);
         const form = p.hasForm ? (p.form ?? null) : null;
         const out = render(Root, { props: { components, data: what.data, form } });

package/dist/vite/image.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from 'vite';
+export declare function imagePlugin(): Plugin;
+/** The widths to generate: the requested ones, or common widths below the image's, plus its own. */
+export declare function pickWidths(original: number, requested: string | null): number[];

package/dist/vite/image.js

@@ -0,0 +1,180 @@
+import { createHash } from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+/**
+ * Responsive images: `import hero from './hero.jpg?image'` resizes the image
+ * to several widths in AVIF, WebP and its own format, and gives a Picture
+ * for the <Image> component. `?w=400,800&image` picks the widths.
+ *
+ * Images are encoded with sharp, an optional dependency. Output names are
+ * derived from the source's contents and the encoding settings, so the client
+ * and server builds agree on URLs without sharing state, and encoded files
+ * are cached in node_modules/.cache/tern-images between builds.
+ */
+/** Bumped when the encoding changes, so cached files are not reused. */
+const VERSION = 1;
+const DEFAULT_WIDTHS = [640, 1280, 1920];
+const QUALITY = { avif: 50, webp: 75, jpeg: 80, png: 100 };
+const MIME = { avif: 'image/avif', webp: 'image/webp', jpeg: 'image/jpeg', png: 'image/png' };
+const DEV_PREFIX = '@tern-image/';
+const OUT_DIR = '_app/immutable/img/';
+export function imagePlugin() {
+    let config;
+    let cacheDir;
+    let sharpPromise;
+    /** Dev: generated file name → how to make it. */
+    const pending = new Map();
+    const sharp = () => (sharpPromise ??= import('sharp').then((m) => m.default, () => {
+        throw new Error('tern: ?image imports need sharp. Install it with: npm install -D sharp');
+    }));
+    async function encode(source, v) {
+        const cached = path.join(cacheDir, `${v.key}.${v.format}`);
+        try {
+            return await fs.promises.readFile(cached);
+        }
+        catch {
+            // not cached yet
+        }
+        const s = await sharp();
+        const img = s(source).rotate().resize({ width: v.width, withoutEnlargement: true });
+        const out = await img.toFormat(v.format, { quality: QUALITY[v.format] }).toBuffer();
+        await fs.promises.mkdir(cacheDir, { recursive: true });
+        await fs.promises.writeFile(cached, out);
+        return out;
+    }
+    return {
+        name: 'tern:image',
+        enforce: 'pre',
+        configResolved(c) {
+            config = c;
+            cacheDir = path.join(c.root, 'node_modules/.cache/tern-images');
+        },
+        async load(id) {
+            const q = id.indexOf('?');
+            if (q < 0)
+                return undefined;
+            const params = new URLSearchParams(id.slice(q + 1));
+            if (!params.has('image'))
+                return undefined;
+            const source = id.slice(0, q);
+            this.addWatchFile(source);
+            const bytes = await fs.promises.readFile(source);
+            const meta = await metadata(bytes, cacheDir, sharp);
+            const fallback = fallbackFormat(meta.format, meta.hasAlpha);
+            const widths = pickWidths(meta.width, params.get('w'));
+            const formats = fallback === 'webp' ? ['avif', 'webp'] : ['avif', 'webp', fallback];
+            const contentHash = hash(bytes);
+            const name = path.basename(source, path.extname(source)).replace(/[^\w-]/g, '_');
+            const variants = new Map();
+            for (const format of formats) {
+                variants.set(format, widths.map((width) => {
+                    const key = hash(`${VERSION}:${contentHash}:${width}:${format}:${QUALITY[format]}`).slice(0, 10);
+                    return { file: `${name}-${width}-${key}.${format}`, width, format, key };
+                }));
+            }
+            const isBuild = config.command === 'build';
+            const isClient = !(this.environment?.config.consumer === 'server' || config.build.ssr);
+            const url = (v) => (isBuild ? config.base + OUT_DIR + v.file : config.base + DEV_PREFIX + v.file);
+            const all = [...variants.values()].flat();
+            if (isBuild && isClient) {
+                await Promise.all(all.map(async (v) => {
+                    this.emitFile({ type: 'asset', fileName: OUT_DIR + v.file, source: await encode(source, v) });
+                }));
+            }
+            else if (!isBuild) {
+                for (const v of all)
+                    pending.set(v.file, { ...v, source });
+            }
+            const srcset = (f) => variants
+                .get(f)
+                .map((v) => `${url(v)} ${v.width}w`)
+                .join(', ');
+            const largest = variants.get(fallback).at(-1);
+            const height = Math.round((meta.height * largest.width) / meta.width);
+            const picture = {
+                src: url(largest),
+                width: largest.width,
+                height,
+                srcset: srcset(fallback),
+                sources: formats.filter((f) => f !== fallback).map((f) => ({ type: MIME[f], srcset: srcset(f) }))
+            };
+            return `export default ${JSON.stringify(picture)};`;
+        },
+        configureServer(server) {
+            server.middlewares.use((req, res, next) => {
+                const at = req.url?.indexOf('/' + DEV_PREFIX) ?? -1;
+                if (at < 0)
+                    return next();
+                const file = decodeURIComponent(req.url.slice(at + DEV_PREFIX.length + 1).split('?')[0]);
+                const v = pending.get(file);
+                if (!v)
+                    return next();
+                encode(v.source, v).then((buf) => {
+                    res.setHeader('Content-Type', MIME[v.format]);
+                    res.setHeader('Cache-Control', 'no-cache');
+                    res.end(buf);
+                }, (err) => next(err));
+            });
+        }
+    };
+}
+function hash(data) {
+    return createHash('sha256').update(data).digest('hex');
+}
+/** The widths to generate: the requested ones, or common widths below the image's, plus its own. */
+export function pickWidths(original, requested) {
+    let widths;
+    if (requested) {
+        widths = requested
+            .split(/[,;]/)
+            .map((w) => Number.parseInt(w, 10))
+            .filter((w) => w > 0)
+            .map((w) => Math.min(w, original));
+        if (widths.length === 0)
+            throw new Error(`tern: invalid image widths "${requested}"`);
+    }
+    else {
+        widths = [...DEFAULT_WIDTHS.filter((w) => w < original), original];
+    }
+    return [...new Set(widths)].sort((a, b) => a - b);
+}
+function fallbackFormat(format, hasAlpha) {
+    switch (format) {
+        case 'jpeg':
+        case 'jpg':
+            return 'jpeg';
+        case 'webp':
+            return 'webp';
+        case 'png':
+        case 'gif':
+            return 'png';
+        default:
+            return hasAlpha ? 'png' : 'jpeg';
+    }
+}
+async function metadata(bytes, cacheDir, sharp) {
+    const cached = path.join(cacheDir, `${hash(bytes).slice(0, 16)}.json`);
+    try {
+        return JSON.parse(await fs.promises.readFile(cached, 'utf8'));
+    }
+    catch {
+        // not cached yet
+    }
+    const s = await sharp();
+    const m = await s(bytes).metadata();
+    if (m.format === 'svg')
+        throw new Error('tern: ?image is for raster images; import SVGs without ?image');
+    if (!m.width || !m.height)
+        throw new Error('tern: could not read the image size');
+    // EXIF orientations 5–8 rotate by 90°, swapping width and height.
+    const rotated = (m.orientation ?? 1) >= 5;
+    const meta = {
+        width: rotated ? m.height : m.width,
+        height: rotated ? m.width : m.height,
+        format: m.format,
+        hasAlpha: m.hasAlpha ?? false
+    };
+    await fs.promises.mkdir(cacheDir, { recursive: true });
+    await fs.promises.writeFile(cached, JSON.stringify(meta));
+    return meta;
+}

package/dist/vite/index.js

@@ -1,9 +1,12 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import fs from 'node:fs';
 import path from 'node:path';
+import { imagePlugin } from './image.js';
 /** Paths shared with the Go code generator; keep in sync with internal/codegen. */
 const CLIENT_ENTRY = '.tern/generated/client.js';
 const SERVER_ENTRY = '.tern/generated/server.js';
 const CLIENT_OUT = '.tern/output/client';
+const SW_MODULE = '$service-worker';
 const SERVER_OUT = '.tern/output/server';
 /** The dev endpoint the Go app calls to server-render a page. */
 const RENDER_PATH = '/__tern/render';
@@ -28,8 +31,10 @@ export function tern(options = {}) {
         name: 'tern',
         config(config, env) {
             root = path.resolve(config.root ?? process.cwd());
+            const basePath = readBasePath(root);
             const shared = {
                 appType: 'custom',
+                base: basePath + '/',
                 resolve: {
                     alias: {
                         $lib: path.join(root, 'src/lib'),
@@ -37,6 +42,26 @@ export function tern(options = {}) {
                     }
                 }
             };
+            if (process.env.TERN_SW_BUILD === '1') {
+                const source = ['src/service-worker.ts', 'src/service-worker.js'].map((f) => path.join(root, f)).find((f) => fs.existsSync(f));
+                if (!source)
+                    throw new Error('tern: no src/service-worker.ts to build');
+                return {
+                    ...shared,
+                    publicDir: false,
+                    build: {
+                        outDir: CLIENT_OUT,
+                        emptyOutDir: false,
+                        manifest: false,
+                        minify: true,
+                        target: 'es2022',
+                        rolldownOptions: {
+                            input: source,
+                            output: { format: 'iife', entryFileNames: 'service-worker.js' }
+                        }
+                    }
+                };
+            }
             if (env.isSsrBuild) {
                 return {
                     ...shared,
@@ -88,6 +113,14 @@ export function tern(options = {}) {
                 }
             };
         },
+        resolveId(id) {
+            return id === SW_MODULE ? '\0' + SW_MODULE : undefined;
+        },
+        load(id) {
+            if (id !== '\0' + SW_MODULE)
+                return undefined;
+            return serviceWorkerModule(root, readBasePath(root));
+        },
         configureServer(server) {
             server.middlewares.use(RENDER_PATH, (req, res) => {
                 void renderInDev(server, req).then((body) => {
@@ -113,6 +146,64 @@ export function tern(options = {}) {
         const mod = (await server.ssrLoadModule(path.join(root, SERVER_ENTRY)));
         return mod.render(payload, href);
     }
-    return [...svelte(options.svelte), plugin];
+    return [imagePlugin(), ...svelte(options.svelte), plugin];
+}
+/** The $service-worker module: what this build produced, for caching. */
+function serviceWorkerModule(root, base) {
+    const out = path.join(root, CLIENT_OUT);
+    const build = [];
+    try {
+        const manifest = JSON.parse(fs.readFileSync(path.join(out, '.vite/manifest.json'), 'utf8'));
+        const seen = new Set();
+        for (const chunk of Object.values(manifest)) {
+            for (const f of [chunk.file, ...(chunk.css ?? []), ...(chunk.assets ?? [])]) {
+                if (!seen.has(f)) {
+                    seen.add(f);
+                    build.push(`${base}/${f}`);
+                }
+            }
+        }
+    }
+    catch {
+        // Development: nothing is built yet.
+    }
+    const files = walk(path.join(root, 'static')).map((f) => `${base}/${f}`);
+    const prerendered = walk(out)
+        .filter((f) => f === 'index.html' || f.endsWith('/index.html'))
+        .map((f) => `${base}/${f.replace(/\/?index\.html$/, '')}` || '/');
+    const version = Date.now().toString(36);
+    return [
+        `export const base = ${JSON.stringify(base)};`,
+        `export const build = ${JSON.stringify(build.sort())};`,
+        `export const files = ${JSON.stringify(files.sort())};`,
+        `export const prerendered = ${JSON.stringify(prerendered.sort())};`,
+        `export const version = ${JSON.stringify(version)};`
+    ].join('\n');
+}
+/** Lists files below dir, relative to it, with forward slashes. */
+function walk(dir, prefix = '') {
+    let entries;
+    try {
+        entries = fs.readdirSync(dir, { withFileTypes: true });
+    }
+    catch {
+        return [];
+    }
+    return entries.flatMap((e) => {
+        if (e.name.startsWith('.') || e.name.endsWith('.gz'))
+            return [];
+        const rel = prefix ? `${prefix}/${e.name}` : e.name;
+        return e.isDirectory() ? walk(path.join(dir, e.name), rel) : [rel];
+    });
+}
+/** Reads basePath from tern.json; the Go side validates it. */
+function readBasePath(root) {
+    try {
+        const config = JSON.parse(fs.readFileSync(path.join(root, 'tern.json'), 'utf8'));
+        return config.basePath ?? '';
+    }
+    catch {
+        return '';
+    }
 }
 export default tern;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ternkit/tern",
-  "version": "0.4.0",
+  "version": "1.1.0",
   "description": "Client runtime and Vite plugin for Tern: Svelte on the client, Go on the server",
   "license": "MIT",
   "type": "module",
@@ -56,7 +56,8 @@
   },
   "peerDependencies": {
     "svelte": "^5.46.4",
-    "vite": "^8.0.0"
+    "vite": "^8.0.0",
+    "sharp": ">=0.33.0"
   },
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
@@ -65,10 +66,16 @@
   "devDependencies": {
     "@sveltejs/package": "^3.0.2",
     "@types/node": "^24.0.0",
+    "sharp": "^0.35.5",
     "svelte": "^5.57.3",
     "svelte-check": "^4.7.8",
     "typescript": "^6.0.0",
     "vite": "^8.3.7",
     "vitest": "^5.1.0"
+  },
+  "peerDependenciesMeta": {
+    "sharp": {
+      "optional": true
+    }
   }
 }