@ternkit/tern 1.1.0 → 1.2.0

package/dist/runtime/realtime.svelte.js

@@ -0,0 +1,163 @@
+import { onDestroy } from 'svelte';
+/** Closes c when the component that created it is destroyed, if any. */
+function closeWithComponent(c) {
+    try {
+        onDestroy(() => c.close());
+    }
+    catch {
+        // Created outside a component: the caller closes it.
+    }
+}
+const browser = typeof window !== 'undefined';
+function parse(data) {
+    try {
+        return JSON.parse(data);
+    }
+    catch {
+        return data;
+    }
+}
+/** A server-sent event stream; see stream(). */
+export class EventStreamState {
+    /** The data of the latest event, decoded from JSON when it is JSON. */
+    current = $state(undefined);
+    /** The connection's status. The browser reconnects by itself after errors. */
+    status = $state('connecting');
+    #source = null;
+    constructor(url, options = {}) {
+        this.current = options.initial;
+        if (!browser) {
+            this.status = 'closed';
+            return;
+        }
+        const source = new EventSource(url, { withCredentials: options.withCredentials });
+        this.#source = source;
+        const handle = (e) => {
+            const data = parse(e.data);
+            this.current = data;
+            options.onMessage?.(data, e.type);
+        };
+        for (const name of options.events?.length ? options.events : ['message'])
+            source.addEventListener(name, handle);
+        source.onopen = () => (this.status = 'open');
+        source.onerror = () => (this.status = source.readyState === EventSource.CLOSED ? 'closed' : 'connecting');
+        closeWithComponent(this);
+    }
+    /** Closes the stream. Streams created in a component close with it. */
+    close() {
+        this.#source?.close();
+        this.#source = null;
+        this.status = 'closed';
+    }
+}
+/**
+ * Subscribes to server-sent events from an endpoint that uses
+ * ctx.EventStream or realtime.Stream:
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { stream } from '@ternkit/tern';
+ *   let { data } = $props();
+ *   const monitors = stream<Monitor[]>('/api/monitors/events', { events: ['monitors'], initial: data.monitors });
+ * </script>
+ *
+ * {#each monitors.current ?? [] as m}…{/each}
+ * ```
+ *
+ * During server rendering it does not connect and current is the initial
+ * value. Created in a component, it closes when the component is destroyed.
+ */
+export function stream(url, options) {
+    return new EventStreamState(url, options);
+}
+/** A WebSocket connection; see socket(). */
+export class SocketState {
+    /** The latest message received. */
+    last = $state(undefined);
+    /** The connection's status. */
+    status = $state('connecting');
+    #ws = null;
+    #queue = [];
+    #closed = false;
+    #attempt = 0;
+    #timer;
+    #url;
+    #options;
+    constructor(url, options = {}) {
+        this.#url = url;
+        this.#options = options;
+        if (!browser) {
+            this.status = 'closed';
+            return;
+        }
+        this.#connect();
+        closeWithComponent(this);
+    }
+    #connect() {
+        const u = new URL(this.#url, location.href);
+        if (u.protocol === 'http:')
+            u.protocol = 'ws:';
+        else if (u.protocol === 'https:')
+            u.protocol = 'wss:';
+        const ws = new WebSocket(u, this.#options.protocols);
+        this.#ws = ws;
+        this.status = 'connecting';
+        ws.onopen = () => {
+            this.#attempt = 0;
+            this.status = 'open';
+            for (const m of this.#queue.splice(0))
+                ws.send(m);
+        };
+        ws.onmessage = (e) => {
+            const msg = (typeof e.data === 'string' ? parse(e.data) : e.data);
+            this.last = msg;
+            this.#options.onMessage?.(msg);
+        };
+        ws.onclose = (e) => {
+            this.#ws = null;
+            // 1000 is a normal close by the server: don't come back.
+            if (this.#closed || this.#options.reconnect === false || e.code === 1000) {
+                this.status = 'closed';
+                return;
+            }
+            this.status = 'connecting';
+            const delay = Math.min(10_000, 500 * 2 ** this.#attempt++) * (0.75 + Math.random() / 2);
+            this.#timer = setTimeout(() => this.#connect(), delay);
+        };
+    }
+    /** Sends a message as JSON (strings as is). Messages sent while connecting are queued. */
+    send(message) {
+        const data = typeof message === 'string' ? message : JSON.stringify(message);
+        if (this.#ws?.readyState === WebSocket.OPEN)
+            this.#ws.send(data);
+        else if (!this.#closed)
+            this.#queue.push(data);
+    }
+    /** Closes the connection. Sockets created in a component close with it. */
+    close() {
+        this.#closed = true;
+        clearTimeout(this.#timer);
+        this.#ws?.close(1000);
+        this.#ws = null;
+        this.status = 'closed';
+    }
+}
+/**
+ * Opens a WebSocket to an endpoint that uses ctx.WebSocket, with JSON
+ * messages and automatic reconnection:
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { socket } from '@ternkit/tern';
+ *   const chat = socket<ChatMessage, { text: string }>('/api/chat', { onMessage: (m) => messages.push(m) });
+ * </script>
+ *
+ * <button onclick={() => chat.send({ text })}>Send</button>
+ * ```
+ *
+ * It does not connect during server rendering. Created in a component, it
+ * closes when the component is destroyed.
+ */
+export function socket(url, options) {
+    return new SocketState(url, options);
+}

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 { setBase } from './base.js';
 import { configureI18n, useLocale } from './i18n.svelte.js';
 import { runAfter, runBefore, runOn } from './navigation.js';
 import { plan } from './select.js';
@@ -32,6 +33,7 @@ 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');

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

@@ -21,6 +21,7 @@ export interface ServerManifest {
         }[];
     };
     i18n?: I18nConfig | null;
+    base?: string;
 }
 /** The result of a server render, as JSON for the Go side. */
 export interface RenderResult {
@@ -35,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,6 +2,7 @@ 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';
@@ -14,6 +15,7 @@ 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.
@@ -41,3 +43,4 @@ export function createRenderer(manifest) {
         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;
+}