@ternkit/tern 1.8.0 → 1.9.0

package/dist/index.d.ts

@@ -30,4 +30,4 @@ export type { MessageKey } from './runtime/i18n.svelte.js';
 export interface Messages {
 }
 /** The version of the Tern client runtime. */
-export declare const VERSION = "1.8.0";
+export declare const VERSION = "1.9.0";

package/dist/index.js

@@ -18,4 +18,4 @@ export { default as Image } from './image/Image.svelte';
 export { t, i18n, setLocale } from './runtime/i18n.svelte.js';
 export { passkeysSupported, registerPasskey, signInWithPasskey, PasskeyError } from './runtime/passkeys.js';
 /** The version of the Tern client runtime. */
-export const VERSION = '1.8.0';
+export const VERSION = '1.9.0';

package/dist/runtime/builtin.js

@@ -16,6 +16,8 @@ export const builtin = {
     "tern.accounts.error.passkey": "That passkey didn’t work.",
     "tern.accounts.error.tooMany": "Too many attempts. Try again in a few minutes.",
     "tern.accounts.error.wrongPassword": "That isn’t your current password.",
+    "tern.accounts.new_device.subject": "A new sign-in to your account",
+    "tern.accounts.new_device.text": "Hello {name},\n\nYour account was just signed in to from a device it hadn’t been used on before: {device}, from {ip}, on {time}.\n\nIf this was you, there’s nothing to do. If it wasn’t, change your password now and sign that device out in your account’s security settings.",
     "tern.accounts.reset.button": "Choose a new password",
     "tern.accounts.reset.subject": "Reset your password",
     "tern.accounts.reset.text": "Hello {name},\n\nSomeone asked to reset your password. If it was you, choose a new one here within an hour:\n{link}\n\nIf it wasn’t you, ignore this email: your password stays as it is.",

package/dist/runtime/router.svelte.js

@@ -46,8 +46,15 @@ export async function start(m) {
     catch {
         scrollPositions = {};
     }
-    historyIndex = history.state?.ternIndex ?? 0;
-    if (history.state?.ternIndex == null) {
+    // A page loaded into a new history entry (a link from elsewhere, the
+    // address bar) has no index yet. It takes its place in the tab's
+    // history, and starts at the top: a position saved for that place came
+    // from a page the browser has since left behind. A reload, or going
+    // back to the page, restores where the reader was.
+    const fresh = history.state?.ternIndex == null;
+    historyIndex = fresh ? history.length - 1 : history.state.ternIndex;
+    if (fresh) {
+        delete scrollPositions[historyIndex];
         history.replaceState({ ...history.state, ternIndex: historyIndex, ternState: {} }, '');
     }
     history.scrollRestoration = 'manual';
@@ -70,14 +77,19 @@ export async function start(m) {
     }
     started = true;
     await tick();
+    // tern dev puts the page's CSS in the HTML for the first paint; Vite's
+    // own style tags, which hot-reload, have replaced it by now.
+    if (import.meta.env?.DEV)
+        for (const el of document.querySelectorAll('style[data-tern-dev]'))
+            el.remove();
     runAfter({ from: null, to: current(), type: 'enter' });
     registerServiceWorker();
-    const saved = scrollPositions[historyIndex];
+    const saved = fresh ? undefined : scrollPositions[historyIndex];
     if (saved) {
-        scrollTo(saved.x, saved.y);
+        jump(saved.x, saved.y);
     }
     else if (url.hash) {
-        scrollToHash(url.hash);
+        scrollToHash(url.hash, true);
     }
     listen();
 }
@@ -293,13 +305,13 @@ async function navigate(url, opts, type, redirects, popIndex, fromIndex) {
     await tick();
     if (type === 'popstate') {
         const pos = popIndex != null ? scrollPositions[popIndex] : undefined;
-        scrollTo(pos?.x ?? 0, pos?.y ?? 0);
+        jump(pos?.x ?? 0, pos?.y ?? 0);
     }
     else if (!opts.noScroll) {
         if (url.hash)
-            scrollToHash(url.hash);
+            scrollToHash(url.hash, true);
         else
-            scrollTo(0, 0);
+            jump(0, 0);
     }
     if (!opts.keepFocus) {
         resetFocus();
@@ -393,13 +405,22 @@ function saveScroll() {
         // Storage can be full or disabled; scroll restoration is best effort.
     }
 }
-function scrollToHash(hash) {
+/**
+ * Scrolls to a position at once. A page change is a jump, even on pages
+ * whose CSS asks for smooth scrolling: an animation from the old page's
+ * position would be cut short by the new page's layout, and stop halfway.
+ */
+function jump(x, y) {
+    scrollTo({ left: x, top: y, behavior: 'instant' });
+}
+/** Scrolls to an anchor: smoothly within the page if the CSS says so, at once when arriving on a new page. */
+function scrollToHash(hash, instant = false) {
     const id = decodeURIComponent(hash.slice(1));
     const el = document.getElementById(id) ?? document.getElementsByName(id)[0];
     if (el)
-        el.scrollIntoView();
+        el.scrollIntoView(instant ? { behavior: 'instant' } : undefined);
     else
-        scrollTo(0, 0);
+        jump(0, 0);
 }
 /** Moves focus to the document and announces the new page to screen readers. */
 function resetFocus() {

package/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
 import { type Options as SvelteOptions } from '@sveltejs/vite-plugin-svelte';
-import type { Plugin } from 'vite';
+import { type Plugin } from 'vite';
 export interface TernOptions {
     /** Options passed to @sveltejs/vite-plugin-svelte. */
     svelte?: Partial<SvelteOptions>;

package/dist/vite/index.js

@@ -3,6 +3,7 @@ import fs from 'node:fs';
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import { nativePlugin } from './native.js';
+import { searchForWorkspaceRoot } from 'vite';
 import { goScriptPlugin, goScriptPreprocessor } from './goscript.js';
 import { imagePlugin } from './image.js';
 /** Packages whose browser build works in the server renderer and whose default build needs Node. */
@@ -17,6 +18,9 @@ const SERVER_OUT = '.tern/output/server';
 const RENDER_PATH = '/__tern/render';
 /** The dev endpoint the Go app calls to render an email. */
 const EMAIL_PATH = '/__tern/email';
+// The CSS a page's components import, for tern dev to inline in the
+// server-rendered page, so its first paint is styled.
+const STYLES_PATH = '/__tern/dev/styles';
 /**
  * The Vite plugin for Tern apps. It includes the Svelte plugin, so it is
  * the only plugin a Tern app needs:
@@ -121,7 +125,10 @@ export function tern(options = {}) {
                     strictPort: vitePort !== undefined,
                     // The browser talks to the Go app, which proxies HMR to Vite.
                     ws: appPort ? { clientPort: appPort } : undefined,
-                    fs: { allow: [root] }
+                    // The app, and the workspace it is in: in a pnpm or npm
+                    // workspace, dependencies (and their fonts and images) live in
+                    // the workspace's node_modules, outside the app.
+                    fs: { allow: [root, searchForWorkspaceRoot(root)] }
                 },
                 optimizeDeps: {
                     entries: [CLIENT_ENTRY, 'src/**/*.svelte'],
@@ -157,6 +164,18 @@ export function tern(options = {}) {
                     res.end(e.stack ?? e.message);
                 });
             });
+            server.middlewares.use(STYLES_PATH, (req, res) => {
+                void stylesInDev(server, req.url ?? '').then((css) => {
+                    res.setHeader('Content-Type', 'text/css; charset=utf-8');
+                    res.setHeader('Cache-Control', 'no-store');
+                    res.end(css);
+                }, (err) => {
+                    const e = err instanceof Error ? err : new Error(String(err));
+                    res.statusCode = 500;
+                    res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+                    res.end(e.stack ?? e.message);
+                });
+            });
             server.middlewares.use(RENDER_PATH, (req, res) => {
                 void renderInDev(server, req).then((body) => {
                     res.setHeader('Content-Type', 'application/json');
@@ -181,6 +200,66 @@ export function tern(options = {}) {
         const mod = (await server.ssrLoadModule(path.join(root, SERVER_ENTRY)));
         return mod.render(payload, href);
     }
+    /**
+     * The CSS the given components import, directly or through other
+     * modules, as the browser will load it: stylesheets and Svelte
+     * components' styles, in import order. It walks the client's module
+     * graph, transforming modules the browser hasn't asked for yet, so it
+     * works on the first load too.
+     */
+    async function stylesInDev(server, url) {
+        const components = new URL(url, 'http://localhost').searchParams.getAll('c');
+        const client = server.environments.client;
+        const seen = new Set();
+        const out = [];
+        const failed = [];
+        const isCSS = (id) => /\.(css|scss|sass|less|styl|stylus|pcss|postcss|sss)(\?|$)/.test(id) || /[?&]type=style\b/.test(id);
+        // Vite knows a stylesheet by its URL ending in .css, so the flag
+        // goes first in the query: /x.svelte?direct&svelte&type=style&lang.css.
+        const withQuery = (u, q) => {
+            const i = u.indexOf('?');
+            return i < 0 ? u + '?' + q : u.slice(0, i + 1) + q + '&' + u.slice(i + 1);
+        };
+        const visit = async (mod) => {
+            // The ?direct forms this function requests join the graph too:
+            // skip them, or each would be read again.
+            if (seen.has(mod.url) || seen.size > 5000 || /[?&](direct|inline)\b/.test(mod.url))
+                return;
+            seen.add(mod.url);
+            try {
+                if (isCSS(mod.url)) {
+                    const res = await client.transformRequest(withQuery(mod.url, 'direct'));
+                    if (res?.code)
+                        out.push(res.code);
+                    return;
+                }
+                // Dependencies' JavaScript has no stylesheets of the app's.
+                if (mod.url.includes('/node_modules/'))
+                    return;
+                if (!mod.transformResult)
+                    await client.transformRequest(mod.url);
+            }
+            catch (err) {
+                // The browser will report it; the page is styled when it loads.
+                failed.push(mod.url + ': ' + (err instanceof Error ? err.message.split('\n')[0] : String(err)));
+                return;
+            }
+            // A copy: transforming adds to the graph while it is walked.
+            for (const dep of [...mod.importedModules])
+                await visit(dep);
+        };
+        for (const c of components) {
+            const file = path.join(root, c);
+            if (!file.startsWith(root + path.sep) || !fs.existsSync(file))
+                continue;
+            await client.transformRequest('/' + c.split(path.sep).join('/'));
+            for (const mod of client.moduleGraph.getModulesByFile(file) ?? [])
+                await visit(mod);
+        }
+        if (failed.length && process.env.TERN_DEBUG_STYLES)
+            console.warn('tern: styles not collected:\n' + failed.join('\n'));
+        return out.join('\n');
+    }
     async function emailInDev(server, req) {
         if (req.method !== 'POST')
             throw new Error('POST required');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ternkit/tern",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Client runtime and Vite plugin for Tern: Svelte on the client, Go on the server",
   "license": "MIT",
   "type": "module",