@ternkit/tern 1.0.0 → 1.2.0

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.d.ts

@@ -3,6 +3,12 @@ import type { Plugin } from 'vite';
 export interface TernOptions {
     /** Options passed to @sveltejs/vite-plugin-svelte. */
     svelte?: Partial<SvelteOptions>;
+    /**
+     * Packages to bundle in their "browser" build for server rendering, for
+     * libraries whose default build needs Node APIs such as Buffer while the
+     * browser build is portable. nanoid is included by default.
+     */
+    ssrBrowserBuilds?: string[];
 }
 /**
  * The Vite plugin for Tern apps. It includes the Svelte plugin, so it is

package/dist/vite/index.js

@@ -1,13 +1,21 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import fs from 'node:fs';
+import { createRequire } from 'node:module';
 import path from 'node:path';
+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. */
+const BROWSER_BUILDS = ['nanoid'];
 /** 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';
+/** The dev endpoint the Go app calls to render an email. */
+const EMAIL_PATH = '/__tern/email';
 /**
  * The Vite plugin for Tern apps. It includes the Svelte plugin, so it is
  * the only plugin a Tern app needs:
@@ -25,6 +33,8 @@ const RENDER_PATH = '/__tern/render';
  */
 export function tern(options = {}) {
     let root = process.cwd();
+    let ssrBuild = false;
+    const browserBuilds = new Set([...BROWSER_BUILDS, ...(options.ssrBrowserBuilds ?? [])]);
     const plugin = {
         name: 'tern',
         config(config, env) {
@@ -36,11 +46,33 @@ export function tern(options = {}) {
                 resolve: {
                     alias: {
                         $lib: path.join(root, 'src/lib'),
-                        $routes: path.join(root, '.tern/generated/routes.js')
+                        $routes: path.join(root, '.tern/generated/routes.js'),
+                        $api: path.join(root, '.tern/generated/api.js')
                     }
                 }
             };
+            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) {
+                ssrBuild = true;
                 return {
                     ...shared,
                     publicDir: false,
@@ -56,8 +88,10 @@ export function tern(options = {}) {
                         }
                     },
                     // One self-contained file: the renderer runs in an embedded engine
-                    // without a module loader or Node built-ins.
-                    ssr: { noExternal: true },
+                    // without a module loader or Node built-ins. Without the "node"
+                    // condition, libraries resolve to their portable builds instead of
+                    // ones that use Buffer or node:crypto.
+                    ssr: { noExternal: true, resolve: { conditions: ['module', 'development|production'] } },
                     // Libraries often read process.env.NODE_ENV; the engine has no
                     // process object, so replace it at build time.
                     define: { 'process.env.NODE_ENV': JSON.stringify('production') }
@@ -91,7 +125,26 @@ 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(EMAIL_PATH, (req, res) => {
+                void emailInDev(server, req).then((body) => {
+                    res.setHeader('Content-Type', 'application/json');
+                    res.end(body);
+                }, (err) => {
+                    const e = err instanceof Error ? err : new Error(String(err));
+                    server.ssrFixStacktrace(e);
+                    res.statusCode = 500;
+                    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');
@@ -116,7 +169,111 @@ export function tern(options = {}) {
         const mod = (await server.ssrLoadModule(path.join(root, SERVER_ENTRY)));
         return mod.render(payload, href);
     }
-    return [...svelte(options.svelte), plugin];
+    async function emailInDev(server, req) {
+        if (req.method !== 'POST')
+            throw new Error('POST required');
+        const chunks = [];
+        for await (const chunk of req)
+            chunks.push(chunk);
+        const { name, props } = JSON.parse(Buffer.concat(chunks).toString('utf8'));
+        const mod = (await server.ssrLoadModule(path.join(root, SERVER_ENTRY)));
+        if (!mod.renderEmail)
+            return JSON.stringify(name === '' ? {} : { subject: '', html: '', error: 'the app has no src/emails' });
+        return mod.renderEmail(name, props);
+    }
+    // Runs before Vite's own resolver, which would pick the default build.
+    const browserBuildsPlugin = {
+        name: 'tern:ssr-browser-builds',
+        enforce: 'pre',
+        resolveId(id, importer) {
+            if (!ssrBuild || !browserBuilds.has(id))
+                return undefined;
+            return browserBuild(id, importer ?? path.join(root, 'package.json'));
+        }
+    };
+    // Email templates carry their styles in the HTML, since mail clients
+    // can't load the app's stylesheets.
+    const userDynamic = options.svelte?.dynamicCompileOptions;
+    const userPreprocess = options.svelte?.preprocess;
+    const svelteOptions = {
+        ...options.svelte,
+        // <script lang="go"> runs before the user's preprocessors.
+        preprocess: [goScriptPreprocessor(() => root), ...(Array.isArray(userPreprocess) ? userPreprocess : userPreprocess ? [userPreprocess] : [])],
+        dynamicCompileOptions: async (args) => {
+            const user = (await userDynamic?.(args)) ?? undefined;
+            if (args.filename.includes(`${path.sep}src${path.sep}emails${path.sep}`) || args.filename.includes('/src/emails/')) {
+                return { ...user, css: 'injected' };
+            }
+            return user;
+        }
+    };
+    return [browserBuildsPlugin, imagePlugin(), goScriptPlugin(() => root), ...svelte(svelteOptions), 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');
+}
+/** The file a package's "browser" export points to, or undefined to resolve normally. */
+function browserBuild(pkg, importer) {
+    try {
+        const require = createRequire(importer);
+        const manifestPath = require.resolve(`${pkg}/package.json`);
+        const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+        const dot = manifest.exports?.['.'];
+        let target = typeof dot === 'object' && dot !== null ? dot.browser : undefined;
+        if (typeof target === 'object' && target !== null)
+            target = target.default ?? target.import;
+        if (typeof target !== 'string' && typeof manifest.browser === 'string')
+            target = manifest.browser;
+        return typeof target === 'string' ? path.join(path.dirname(manifestPath), target) : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ternkit/tern",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Client runtime and Vite plugin for Tern: Svelte on the client, Go on the server",
   "license": "MIT",
   "type": "module",
@@ -29,6 +29,11 @@
       "svelte": "./dist/runtime/client.js",
       "default": "./dist/runtime/client.js"
     },
+    "./goscript": {
+      "types": "./dist/goscript/index.svelte.d.ts",
+      "svelte": "./dist/goscript/index.svelte.js",
+      "default": "./dist/goscript/index.svelte.js"
+    },
     "./server": {
       "types": "./dist/server/index.d.ts",
       "svelte": "./dist/server/index.js",
@@ -55,20 +60,26 @@
     "test": "vitest run"
   },
   "peerDependencies": {
+    "sharp": ">=0.33.0",
     "svelte": "^5.46.4",
     "vite": "^8.0.0"
   },
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "core-js": "^3.51.0"
+    "@sveltejs/vite-plugin-svelte": "^7.3.1"
   },
   "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
+    }
   }
 }