@ternkit/tern 1.0.0 → 1.2.0

package/dist/runtime/router.svelte.js

@@ -3,6 +3,8 @@ import DefaultError from './DefaultError.svelte';
 import Passthrough from './Passthrough.svelte';
 import Root from './Root.svelte';
 import { DeferredScope, readStreamed, revive } from './deferred.js';
+import { setBase } from './base.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 +33,8 @@ const RELOAD = Symbol('reload');
 /** Starts the client. Called by the generated entry module. */
 export async function start(m) {
     manifest = m;
+    setBase(m.base ?? '');
+    configureI18n(m.i18n ?? null);
     const el = document.getElementById('__tern_data');
     const target = document.getElementById('tern-root');
     if (!el || !target) {
@@ -66,6 +70,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,6 +80,15 @@ 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) {
@@ -329,6 +343,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':
@@ -351,6 +366,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') {

package/dist/runtime/types.d.ts

@@ -23,6 +23,10 @@ export interface RouteEntry {
 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: {
@@ -51,6 +55,8 @@ export interface Payload {
     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/email.d.ts

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+/** An email component module from src/emails. */
+export interface EmailModule {
+    default: Component<any>;
+    /** Props for the preview page under tern dev. */
+    preview?: Record<string, unknown>;
+}
+export interface EmailResult {
+    subject: string;
+    html: string;
+    error?: string;
+}
+/**
+ * Creates the function Go calls to render emails: a component's markup
+ * becomes the body, its <svelte:head> the head, and its <title> the
+ * subject.
+ */
+export declare function createEmailRenderer(emails: Record<string, EmailModule>): (name: string, propsJSON: string) => string;

package/dist/server/email.js

@@ -0,0 +1,34 @@
+import { render } from 'svelte/server';
+const entities = { '&amp;': '&', '&lt;': '<', '&gt;': '>', '&quot;': '"', '&#39;': "'", '&#x27;': "'" };
+function decode(s) {
+    return s.replace(/&(amp|lt|gt|quot|#39|#x27);/g, (m) => entities[m] ?? m);
+}
+/**
+ * Creates the function Go calls to render emails: a component's markup
+ * becomes the body, its <svelte:head> the head, and its <title> the
+ * subject.
+ */
+export function createEmailRenderer(emails) {
+    return (name, propsJSON) => {
+        if (name === '') {
+            // The list of emails and their preview props, for the dev preview.
+            return JSON.stringify(Object.fromEntries(Object.entries(emails).map(([n, m]) => [n, m.preview ?? {}])));
+        }
+        const mod = emails[name];
+        if (!mod)
+            return JSON.stringify({ subject: '', html: '', error: `no email named ${name} in src/emails` });
+        const props = JSON.parse(propsJSON || '{}');
+        const out = render(mod.default, { props });
+        const title = /<title>([\s\S]*?)<\/title>/.exec(out.head);
+        const subject = title ? decode(title[1].trim()) : '';
+        const head = out.head.replace(/<!--[\s\S]*?-->/g, '');
+        const body = out.body.replace(/<!--[\s\S]*?-->/g, '');
+        const html = '<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">' +
+            '<meta name="color-scheme" content="light dark">' +
+            head +
+            '</head><body>' +
+            body +
+            '</body></html>';
+        return JSON.stringify({ subject, html });
+    };
+}

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,8 @@ export interface ServerManifest {
             component: Component<any>;
         }[];
     };
+    i18n?: I18nConfig | null;
+    base?: string;
 }
 /** The result of a server render, as JSON for the Go side. */
 export interface RenderResult {
@@ -33,3 +36,5 @@ export interface RenderResult {
  * exactly the same tree and hydration matches.
  */
 export declare function createRenderer(manifest: ServerManifest): (payload: string, href: string) => string;
+export { createEmailRenderer } from './email.js';
+export type { EmailModule, EmailResult } from './email.js';

package/dist/server/index.js

@@ -2,7 +2,9 @@ import { render } from 'svelte/server';
 import DefaultError from '../runtime/DefaultError.svelte';
 import Passthrough from '../runtime/Passthrough.svelte';
 import Root from '../runtime/Root.svelte';
+import { setBase } from '../runtime/base.js';
 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 +14,8 @@ import { applyPayloadToPage } from '../runtime/state.svelte.js';
  */
 export function createRenderer(manifest) {
     const layout = (i) => manifest.layouts[i]?.component ?? Passthrough;
+    configureI18n(manifest.i18n ?? null);
+    setBase(manifest.base ?? '');
     return (payloadJSON, href) => {
         const p = JSON.parse(payloadJSON);
         // Deferred values are still loading: render their pending state.
@@ -32,9 +36,11 @@ 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 } });
         return JSON.stringify({ head: out.head, body: out.body });
     };
 }
+export { createEmailRenderer } from './email.js';

package/dist/server/intl.js

@@ -33,7 +33,7 @@ class NumberFormat {
             }
         }
         const isCurrency = o.style === 'currency';
-        const max = o.maximumFractionDigits ?? (isCurrency ? 2 : o.notation === 'compact' ? 1 : 3);
+        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)));
         if (s.includes('.')) {

package/dist/server/polyfills.d.ts

@@ -1,2 +1 @@
-import 'core-js/actual/url';
-import 'core-js/actual/url-search-params';
+export {};

package/dist/server/polyfills.js

@@ -2,17 +2,44 @@
 // JavaScript engine (QuickJS) that only implements the language itself.
 // Each polyfill is skipped where the API already exists, such as in Node
 // during development.
-import 'core-js/actual/url';
-import 'core-js/actual/url-search-params';
 import { IntlShim } from './intl.js';
+import { URL, URLSearchParams } from './url.js';
+import { install } from './web.js';
 const g = globalThis;
+install(g);
 // Some libraries read process.env.SOMETHING at runtime. Give them an empty
 // environment instead of a ReferenceError.
 if (typeof g.process === 'undefined') {
     g.process = { env: { NODE_ENV: 'production' }, browser: false, version: '', versions: {} };
 }
+if (typeof g.URL === 'undefined') {
+    g.URL = URL;
+    g.URLSearchParams = URLSearchParams;
+}
 if (typeof g.Intl === 'undefined') {
     g.Intl = IntlShim;
+    // QuickJS's own toLocaleString ignores locales: (5e6).toLocaleString()
+    // is "5000000" where browsers print "5,000,000". Route them through the
+    // shim so server-rendered text matches the browser's en-US output.
+    const NF = IntlShim.NumberFormat;
+    const DF = IntlShim.DateTimeFormat;
+    Object.defineProperty(Number.prototype, 'toLocaleString', {
+        value(locales, options) {
+            return new NF(locales, options).format(Number(this));
+        },
+        configurable: true,
+        writable: true
+    });
+    const dateMethod = (defaults) => function (locales, options) {
+        return new DF(locales, { ...defaults, ...options }).format(this);
+    };
+    for (const [name, defaults] of [
+        ['toLocaleString', { dateStyle: 'short', timeStyle: 'medium' }],
+        ['toLocaleDateString', { dateStyle: 'short' }],
+        ['toLocaleTimeString', { timeStyle: 'medium' }]
+    ]) {
+        Object.defineProperty(Date.prototype, name, { value: dateMethod(defaults), configurable: true, writable: true });
+    }
 }
 if (typeof g.queueMicrotask !== 'function') {
     g.queueMicrotask = (fn) => void Promise.resolve().then(fn);

package/dist/server/url.d.ts

@@ -0,0 +1,56 @@
+export declare class URLSearchParams {
+    #private;
+    constructor(init?: string | Record<string, string> | Iterable<[string, string]> | URLSearchParams);
+    /** @internal Links the params to their URL, so changes update it. */
+    static _link(params: URLSearchParams, url: URL, query: string | null): void;
+    /** @internal */
+    static _reset(params: URLSearchParams, query: string | null): void;
+    get size(): number;
+    append(name: string, value: string): void;
+    delete(name: string, value?: string): void;
+    get(name: string): string | null;
+    getAll(name: string): string[];
+    has(name: string, value?: string): boolean;
+    set(name: string, value: string): void;
+    sort(): void;
+    forEach(fn: (value: string, name: string, params: URLSearchParams) => void, thisArg?: unknown): void;
+    entries(): IterableIterator<[string, string]>;
+    keys(): IterableIterator<string>;
+    values(): IterableIterator<string>;
+    [Symbol.iterator](): IterableIterator<[string, string]>;
+    toString(): string;
+    get [Symbol.toStringTag](): string;
+}
+export declare class URL {
+    #private;
+    constructor(url: string | URL, base?: string | URL);
+    static canParse(url: string, base?: string): boolean;
+    static parse(url: string, base?: string): URL | null;
+    /** @internal */
+    static _setQuery(url: URL, query: string): void;
+    get href(): string;
+    set href(v: string);
+    get origin(): string;
+    get protocol(): string;
+    set protocol(v: string);
+    get username(): string;
+    set username(v: string);
+    get password(): string;
+    set password(v: string);
+    get host(): string;
+    set host(v: string);
+    get hostname(): string;
+    set hostname(v: string);
+    get port(): string;
+    set port(v: string);
+    get pathname(): string;
+    set pathname(v: string);
+    get search(): string;
+    set search(v: string);
+    get searchParams(): URLSearchParams;
+    get hash(): string;
+    set hash(v: string);
+    toString(): string;
+    toJSON(): string;
+    get [Symbol.toStringTag](): string;
+}