npm - @t09tanaka/stoneage - Versions diffs - 0.2.0 → 0.4.0 - Mend

@t09tanaka/stoneage 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,42 @@
 # Changelog
+## 0.4.0 - 2026-07-05
+- Added a global `assets.scripts` array, the every-page counterpart to
+  `assets.stylesheets`. Scripts declared here render on every page's `<head>`
+  (a `source` is emitted as a content-hashed immutable asset; an `inline` body
+  embeds directly), regardless of per-page `assets.client` islands. Global
+  scripts are part of the shared page fingerprint, so changing them regenerates
+  unchanged pages. Fixes the footgun where a page-level `islands` list silently
+  dropped a hook-injected site-wide tag.
+- Added `{ tag: "script" }` support to `SiteConfig.head` and `metadata.head`,
+  external (`attrs.src`) or inline (`children`, e.g. JSON-LD or a tag-manager
+  snippet). `<` in `children` is escaped so a `</script>` in the body cannot
+  break out of the element.
+- Added an `inline` body to `ClientScriptAsset`, symmetric with the stylesheet
+  `inline` option, so a standard analytics snippet (external loader plus inline
+  init) can be expressed without hand-bundling it into one file.
+- Added a bottom-left dev progress widget to the `stoneage dev` hot-reload
+  client, reading a new Server-Sent Events lifecycle (`building` / `ready` with
+  the build `durationMs` / `build-error` with the message). It shows a live
+  `Building <elapsed>` timer, `Ready in <n>ms`, or a persistent build-error
+  readout that does not reload the page, and is light/dark and reduced-motion
+  aware.
+- Added `STONEAGE_CHANGED_FILES` to the environment of the dev `--build-command`
+  (cwd-relative, newline-separated changed paths; omitted when more than 50 files
+  change at once). It is advisory only — build correctness never depends on it.
+  `stoneage dev` now measures and logs each rebuild's duration. Documented
+  keeping dev builds incremental by not deleting the output directory in the
+  build command.
+## 0.3.0 - 2026-06-30
+- Added global stylesheet auto-inlining via `assets.inlineStylesheets` (inline
+  every generated stylesheet) and `assets.inlineStylesheetMaxBytes` (inline only
+  bundles whose built CSS is within the byte threshold). A per-stylesheet
+  `inline` flag still wins; when both options are set the byte threshold gates
+  inlining. Google Fonts WOFF2 stay vendored and preload hints are unchanged.
 ## 0.2.0 - 2026-06-30
 - Added immutable `Cache-Control: public, max-age=31536000, immutable` coverage

package/README.md CHANGED Viewed

@@ -250,6 +250,51 @@ filename, their HTML references are rewritten, and `publishing.headers` adds an
 immutable cache-control entry. Plain string paths and `assets.public` entries
 continue to use fixed filenames.
+To load a script on **every** page — analytics, a tag manager, and the like —
+use `assets.scripts`, the counterpart to `assets.stylesheets`. Unlike per-page
+`assets.client` islands (which are merged per page and can be replaced when a
+page sets its own `islands` list), `assets.scripts` always renders on every
+page, so a site-wide tag can never silently drop out on a subset of pages. Each
+entry is a `ClientScriptAsset`: give it a `src` (a `source` is emitted as a
+content-hashed immutable asset) or an `inline` body embedded directly. Inline
+scripts are subject to the page CSP `script-src`; send `'unsafe-inline'` (or a
+hash/nonce) or use an external `src`. Google Analytics — external loader plus
+inline init — is two entries:
+```ts
+await buildSite({
+  outDir: "dist",
+  site,
+  assets: {
+    scripts: [
+      { src: "https://www.googletagmanager.com/gtag/js?id=G-XXXX", async: true },
+      {
+        inline:
+          "window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}" +
+          "gtag('js',new Date());gtag('config','G-XXXX');",
+      },
+    ],
+  },
+  routes,
+});
+```
+For tags that belong in the `<head>` markup itself — a tag manager snippet or
+JSON-LD structured data — `SiteConfig.head` (and per-page `metadata.head`) also
+accepts `{ tag: "script" }` with an external `attrs.src` or an inline `children`
+body. StoneAge escapes `<` in `children`, so a `</script>` inside JSON-LD cannot
+break out of the element:
+```ts
+site.head = [
+  {
+    tag: "script",
+    attrs: { type: "application/ld+json" },
+    children: JSON.stringify({ "@context": "https://schema.org", "@type": "WebSite" }),
+  },
+];
+```
 For Google Fonts CSS2 subsets, use `googleFontsStylesheet("/assets/fonts.css",
 { families: ["Zen Maru Gothic:wght@700;900", "Outfit:wght@700;900"], text:
 subsetText })`. StoneAge fetches the CSS and WOFF2 files at build time, rewrites
@@ -270,6 +315,36 @@ files; an inlined `<style>` is subject to the page's Content-Security-Policy
 `style-src` directive, so keep the external link if you serve a strict CSP
 without `'unsafe-inline'` (or a matching hash/nonce).
+To inline without flagging each stylesheet, set a global policy on `assets`.
+`assets.inlineStylesheets: true` inlines every generated stylesheet (top-level
+and per-page client ones), and `assets.inlineStylesheetMaxBytes: <n>` inlines
+only bundles whose built CSS is at most `n` bytes (UTF-8) — handy for inlining a
+small critical bundle while larger ones stay external. A per-stylesheet `inline`
+flag always wins over the global policy: `inline: false` opts a sheet out and
+`inline: true` opts one in regardless of the threshold. When both options are
+set, `inlineStylesheetMaxBytes` acts as a gate — a bundle over the limit stays
+external even with `inlineStylesheets: true` (a non-positive or non-finite limit
+inlines nothing). The hyogo critical-path setup combines this with font preload
+— inline the small site and fonts CSS while still preloading the primary WOFF2:
+```ts
+assets: {
+  inlineStylesheetMaxBytes: 16_384, // inline bundles ≤ 16 KB
+  stylesheets: [
+    { href: "/assets/site.css", source: "dist/site.css" },
+    googleFontsStylesheet("/assets/fonts.css", {
+      families: ["Zen Maru Gothic:wght@700;900", "Outfit:wght@700;900"],
+      text: subsetText,
+      preload: 2, // keep the primary WOFF2 off the critical chain
+    }),
+  ],
+}
+```
+Both stylesheets inline as `<style>` (when within the threshold), the WOFF2
+files are still vendored as immutable assets, and the preload hints render ahead
+of the inlined CSS so fonts are discovered without waiting on CSS.
 To pull self-hosted fonts off the critical request chain (HTML → CSS → WOFF2),
 emit `<link rel="preload" as="font" type="font/woff2" crossorigin>` hints with
 `googleFontsStylesheet("/assets/fonts.css", { families, text, preload: true })`.
@@ -572,6 +647,22 @@ one or more `--watch <path>` options to rebuild on source changes; browsers
 reload only after the build command succeeds. StoneAge ignores the output
 directory, `.git`, and `node_modules` while watching to avoid rebuild loops.
+> **Keep incremental builds working (important):** pass a `--build-command`
+> that does **not** delete the output directory. `buildSite` regenerates only
+> the changed pages from the previous manifest and sweeps outputs whose source
+> disappeared on its own, so a command containing `rm -rf <out-dir>` throws away
+> the incremental cache on every change and re-renders every page — very slow on
+> large sites. For development, use a build script separate from your production
+> build that omits the clean step.
+> The dev server passes the changed file paths to the build command as
+> `STONEAGE_CHANGED_FILES` (cwd-relative, newline-separated; unset when many
+> files change at once). A build can read this to narrow what it reloads. It is
+> purely advisory — build correctness never depends on it.
+> Rebuild progress is shown by a small dev-only widget in the bottom-left of the
+> page (`Rebuilding… <elapsed>`, `Ready in <n>ms`, or a build-error message).
 `benchmark --compare-to <file>` compares the current `.stoneage/benchmark.json`
 metrics with a previous benchmark report and fails the command when size metrics
 grow beyond `--max-size-regression-percent` (default `0`). The comparison is

package/dist/assets.d.ts CHANGED Viewed

@@ -70,6 +70,18 @@ export type ClientScriptAsset = {
     defer?: boolean;
     async?: boolean;
     attributes?: Record<string, ClientAssetAttributeValue>;
+} | {
+    /**
+     * Inline JavaScript embedded directly as the `<script>` body instead of an
+     * external `src`. Symmetric with {@link InlineStylesheetAsset}. The script
+     * is part of the HTML, so no hashed public file is written for it. Note: an
+     * inline `<script>` is subject to the page Content-Security-Policy
+     * `script-src`; sites that send a strict CSP without `'unsafe-inline'` (or a
+     * matching hash/nonce) should use an external `src` instead.
+     */
+    inline: string;
+    module?: boolean;
+    attributes?: Record<string, ClientAssetAttributeValue>;
 };
 export type ClientAssetDeclaration = {
     stylesheets?: ClientStylesheetAsset[];
@@ -133,8 +145,11 @@ export declare function stylesheet(href: string, options?: StylesheetAssetOption
 export declare function googleFontsStylesheet(href: string, options: GoogleFontsStylesheetOptions & {
     inline?: boolean;
 }): ClientStylesheetAsset;
-export declare function script(src: string, options?: Omit<ClientScriptAsset, "src">): ClientAssetDeclaration;
-export declare function island(src: string, options?: Omit<ClientScriptAsset, "src" | "module">): ClientAssetDeclaration;
+export type ExternalClientScriptAsset = Extract<ClientScriptAsset, {
+    src: string;
+}>;
+export declare function script(src: string, options?: Omit<ExternalClientScriptAsset, "src">): ClientAssetDeclaration;
+export declare function island(src: string, options?: Omit<ExternalClientScriptAsset, "src" | "module">): ClientAssetDeclaration;
 export declare function resolveClientAssets(registry: ClientAssetRegistry, ids: string[]): ResolvedClientAssets;
 export declare function assetsFromViteManifest(manifest: ViteManifest, options?: ViteManifestAssetOptions): ClientAssetRegistry;
 export declare function loadAssetsFromViteManifest(path: string, options?: ViteManifestAssetOptions): Promise<ClientAssetRegistry>;

package/dist/assets.js CHANGED Viewed

@@ -304,6 +304,16 @@ function stableStylesheetKey(stylesheet) {
         });
 }
 function stableScriptKey(script) {
+    const attributes = Object.entries(script.attributes ?? {})
+        .filter(([, value]) => value !== null && value !== undefined && value !== false)
+        .sort(([left], [right]) => left.localeCompare(right));
+    if ("inline" in script) {
+        return JSON.stringify({
+            inline: script.inline,
+            module: script.module === true,
+            attributes,
+        });
+    }
     return JSON.stringify({
         src: script.src,
         source: script.source,
@@ -311,9 +321,7 @@ function stableScriptKey(script) {
         module: script.module === true,
         defer: script.defer === true,
         async: script.async === true,
-        attributes: Object.entries(script.attributes ?? {})
-            .filter(([, value]) => value !== null && value !== undefined && value !== false)
-            .sort(([left], [right]) => left.localeCompare(right)),
+        attributes,
     });
 }
 function collectViteChunkCss(manifest, chunk, base) {

package/dist/core.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type ClientAssetRegistry, type ClientStylesheetAsset, type PublicAssetInput } from "./assets.js";
+import { type ClientAssetRegistry, type ClientScriptAsset, type ClientStylesheetAsset, type PublicAssetInput } from "./assets.js";
 import { type DeferredFragmentDefaults } from "./fragment.js";
 export * from "./data.js";
 export type RouteParams = Record<string, string | number>;
@@ -63,9 +63,21 @@ export type TwitterMetadata = {
     description?: string;
     image?: string;
 };
+export type HeadTagAttributes = Record<string, string | number | boolean | null | undefined>;
 export type HeadTag = {
     tag: "link" | "meta";
-    attrs: Record<string, string | number | boolean | null | undefined>;
+    attrs: HeadTagAttributes;
+} | {
+    /**
+     * A `<script>` in the document `<head>` — external (`attrs: { src }`) or
+     * inline (`children`), e.g. analytics loaders, tag managers, or JSON-LD
+     * (`attrs: { type: "application/ld+json" }` + `children: JSON.stringify(...)`).
+     * `children` is emitted verbatim except that `<` is escaped so a `</script>`
+     * inside the body cannot break out of the element.
+     */
+    tag: "script";
+    attrs?: HeadTagAttributes;
+    children?: string;
 };
 export type RobotsRule = {
     userAgent: string | string[];
@@ -302,7 +314,39 @@ export type BuildConfig = {
     site: SiteConfig;
     assets?: {
         stylesheets?: ClientStylesheetAsset[];
+        /**
+         * Scripts loaded on every page's `<head>`, the counterpart to
+         * {@link stylesheets}. Use this for site-wide tags such as analytics or a tag
+         * manager: unlike per-page `client` islands (which are merged per page and can
+         * be replaced by a page-level `islands` list), these always render on every
+         * page. A `source` is emitted as a content-hashed immutable asset; an `inline`
+         * script embeds its body directly (subject to the page CSP `script-src`).
+         */
+        scripts?: ClientScriptAsset[];
         client?: ClientAssetRegistry;
+        /**
+         * Inline every generated stylesheet's CSS into each document `<head>` as a
+         * `<style>` element instead of emitting render-blocking
+         * `<link rel="stylesheet">`s. Applies to both `assets.stylesheets` and the
+         * stylesheets resolved from per-page `assets.client` registries (inlining a
+         * client stylesheet turns it into a `<style>` on the pages that use it). A
+         * per-stylesheet `inline` flag always wins: `inline: false` opts a sheet out
+         * even when this is true, and `inline: true` opts one in. When
+         * {@link inlineStylesheetMaxBytes} is also set, the byte threshold gates this:
+         * a bundle larger than the threshold stays external even with this enabled.
+         * Defaults to the existing external-link behavior. Inlined CSS is subject to
+         * the page's CSP `style-src`; see {@link InlineStylesheetAsset} for the caveat.
+         */
+        inlineStylesheets?: boolean;
+        /**
+         * Auto-inline a generated stylesheet only when its built CSS is at most this
+         * many bytes (UTF-8), measured after Google Fonts CSS resolution. Lets small,
+         * critical bundles inline while larger ones stay external. A per-stylesheet
+         * `inline` flag still wins over this gate. When {@link inlineStylesheets} is
+         * also true, this acts as the gate: bundles over the threshold are not
+         * inlined. A non-positive or non-finite value inlines nothing.
+         */
+        inlineStylesheetMaxBytes?: number;
         public?: PublicAssetInput[];
         /**
          * Directory whose tree is copied verbatim onto the output root. Each file

package/dist/core.js CHANGED Viewed

@@ -617,16 +617,25 @@ async function resolveStaticAssetReferences(assets) {
         }
         return hashedPath;
     };
-    const stylesheets = await Promise.all((assets.stylesheets ?? []).map(async (stylesheet) => resolveStylesheetAsset(stylesheet, resolveImmutablePublicAsset, collectFontPreloads)));
+    // Global auto-inline policy, applied to any stylesheet that does not set its
+    // own `inline` flag. Threaded through both top-level and per-page client
+    // stylesheet resolution so the behavior is consistent everywhere.
+    const inlinePolicy = {
+        inlineStylesheets: assets.inlineStylesheets,
+        inlineStylesheetMaxBytes: assets.inlineStylesheetMaxBytes,
+    };
+    const stylesheets = await Promise.all((assets.stylesheets ?? []).map(async (stylesheet) => resolveStylesheetAsset(stylesheet, resolveImmutablePublicAsset, collectFontPreloads, inlinePolicy)));
+    const scripts = await Promise.all((assets.scripts ?? []).map((script) => resolveClientScriptAsset(script, resolveImmutablePublicAsset)));
     // Per-page client stylesheets are resolved without a preload collector: a
     // page-scoped font must not become a global preload hint on every page.
     const client = assets.client
-        ? await resolveClientAssetRegistry(assets.client, resolveImmutablePublicAsset)
+        ? await resolveClientAssetRegistry(assets.client, resolveImmutablePublicAsset, inlinePolicy)
         : undefined;
     return {
         assets: {
             ...assets,
             ...(assets.stylesheets ? { stylesheets } : {}),
+            ...(assets.scripts ? { scripts } : {}),
             ...(client ? { client } : {}),
         },
         publicAssets: [...publicAssetsByPath.values()],
@@ -634,25 +643,73 @@ async function resolveStaticAssetReferences(assets) {
         fontPreloads,
     };
 }
-async function resolveStylesheetAsset(stylesheet, resolveImmutablePublicAsset, onFontPreload) {
+// Decide whether a stylesheet's built CSS should be inlined. A per-stylesheet
+// `inline` flag always wins; otherwise the global policy applies, with
+// `inlineStylesheetMaxBytes` acting as a byte-size gate over `inlineStylesheets`.
+function shouldInlineStylesheet(explicitInline, css, policy) {
+    if (explicitInline !== undefined) {
+        return explicitInline;
+    }
+    if (!policy) {
+        return false;
+    }
+    const { inlineStylesheets, inlineStylesheetMaxBytes } = policy;
+    if (inlineStylesheetMaxBytes !== undefined) {
+        // The threshold gates inlining (even when `inlineStylesheets` is true): a
+        // non-positive/non-finite limit inlines nothing, otherwise the built CSS
+        // must fit within it.
+        if (!Number.isFinite(inlineStylesheetMaxBytes) || inlineStylesheetMaxBytes <= 0) {
+            return false;
+        }
+        return Buffer.byteLength(css, "utf8") <= inlineStylesheetMaxBytes;
+    }
+    return inlineStylesheets === true;
+}
+// Whether a global policy could ever inline an `inline`-unspecified stylesheet.
+// Lets the resolver skip reading a source file (and keep the byte-identical
+// external path) when inlining is impossible regardless of CSS size.
+function policyMightInline(policy) {
+    if (!policy) {
+        return false;
+    }
+    const { inlineStylesheets, inlineStylesheetMaxBytes } = policy;
+    if (inlineStylesheetMaxBytes !== undefined) {
+        return Number.isFinite(inlineStylesheetMaxBytes) && inlineStylesheetMaxBytes > 0;
+    }
+    return inlineStylesheets === true;
+}
+async function resolveStylesheetAsset(stylesheet, resolveImmutablePublicAsset, onFontPreload, inlinePolicy) {
     // Plain href strings and already-inlined CSS pass through untouched.
     if (typeof stylesheet === "string" || isResolvedInlineStylesheet(stylesheet)) {
         return stylesheet;
     }
-    const inline = stylesheet.inline === true;
+    const explicitInline = stylesheet.inline;
     if ("source" in stylesheet) {
-        if (inline) {
-            // Embed the CSS directly: no hashed public file and no `_headers` entry.
-            return { inline: await readFile(stylesheet.source, "utf8") };
-        }
-        if (stylesheet.immutable === false) {
+        // `immutable: false` is a deliberate "serve this href as-is" opt-out, so the
+        // global inline policy does not touch it; only an explicit `inline: true`
+        // can still inline such a sheet.
+        if (explicitInline !== true && stylesheet.immutable === false) {
             return stripStylesheetBuildHints(stylesheet);
         }
-        return resolveImmutablePublicAsset({ source: stylesheet.source }, stylesheet.href);
+        // When inlining is impossible (explicit opt-out, or no policy that could
+        // inline an unspecified sheet), keep the original source-backed external
+        // path so its hashed output stays byte-identical to before.
+        if (explicitInline === false || (explicitInline === undefined && !policyMightInline(inlinePolicy))) {
+            return resolveImmutablePublicAsset({ source: stylesheet.source }, stylesheet.href);
+        }
+        // Read the CSS once and reuse it for both the size check and inlining so the
+        // file is never read twice.
+        const css = await readFile(stylesheet.source, "utf8");
+        if (shouldInlineStylesheet(explicitInline, css, inlinePolicy)) {
+            // Embed the CSS directly: no hashed public file and no `_headers` entry.
+            return { inline: css };
+        }
+        return resolveImmutablePublicAsset({ content: css }, stylesheet.href);
     }
     // Google Fonts: an `immutable: false` reference is not vendored (legacy
-    // behavior), so there are no woff2 to preload or CSS to inline.
-    if (!inline && stylesheet.immutable === false) {
+    // behavior), so there are no woff2 to preload or CSS to inline. As above, the
+    // global policy leaves this opt-out alone unless `inline: true` is explicit.
+    if (explicitInline !== true && stylesheet.immutable === false) {
         return stripStylesheetBuildHints(stylesheet);
     }
     const { css, fontPaths } = await resolveGoogleFontsStylesheet(stylesheet.href, stylesheet.googleFonts, resolveImmutablePublicAsset);
@@ -663,7 +720,9 @@ async function resolveStylesheetAsset(stylesheet, resolveImmutablePublicAsset, o
         }
     }
     // The woff2 files are always vendored above; only the CSS is inlined.
-    return inline ? { inline: css } : resolveImmutablePublicAsset({ content: css }, stylesheet.href);
+    return shouldInlineStylesheet(explicitInline, css, inlinePolicy)
+        ? { inline: css }
+        : resolveImmutablePublicAsset({ content: css }, stylesheet.href);
 }
 function isResolvedInlineStylesheet(stylesheet) {
     // The resolved inline form carries the CSS text as a string; the input forms
@@ -689,13 +748,17 @@ function selectFontPreloads(fontPaths, preload) {
     }
     return fontPaths.slice(0, Math.floor(preload));
 }
-async function resolveClientAssetRegistry(registry, resolveImmutablePublicAsset) {
+async function resolveClientAssetRegistry(registry, resolveImmutablePublicAsset, inlinePolicy) {
     const entries = await Promise.all(Object.entries(registry).map(async ([id, declarations]) => [
         id,
         await Promise.all((Array.isArray(declarations) ? declarations : [declarations]).map(async (declaration) => ({
             ...(declaration.stylesheets
                 ? {
-                    stylesheets: await Promise.all(declaration.stylesheets.map((stylesheet) => resolveStylesheetAsset(stylesheet, resolveImmutablePublicAsset))),
+                    stylesheets: await Promise.all(declaration.stylesheets.map((stylesheet) =>
+                    // No preload collector here: a page-scoped client font must
+                    // not become a global hint. The global inline policy still
+                    // applies so client CSS inlines consistently.
+                    resolveStylesheetAsset(stylesheet, resolveImmutablePublicAsset, undefined, inlinePolicy))),
                 }
                 : {}),
             ...(declaration.scripts
@@ -708,6 +771,9 @@ async function resolveClientAssetRegistry(registry, resolveImmutablePublicAsset)
     return Object.fromEntries(entries);
 }
 async function resolveClientScriptAsset(script, resolveImmutablePublicAsset) {
+    if ("inline" in script) {
+        return script;
+    }
     if (!script.source || script.immutable === false) {
         const { source: _source, immutable: _immutable, ...runtimeScript } = script;
         return runtimeScript;
@@ -987,6 +1053,13 @@ export async function buildSite(config) {
     const sharedPageFingerprintHash = hashValue({
         site: config.site,
         stylesheets: assets?.stylesheets ?? [],
+        scripts: assets?.scripts ?? [],
+        // The global inline policy can flip a stylesheet between external and
+        // inlined; including the options invalidates every page when the policy
+        // changes, even for pages whose CSS lives only in `assets.client` (whose
+        // resolved forms are not part of this shared hash).
+        inlineStylesheets: assets?.inlineStylesheets ?? false,
+        inlineStylesheetMaxBytes: assets?.inlineStylesheetMaxBytes ?? null,
         fontPreloads,
         prefetch: config.prefetch ?? {},
         trailingSlash,
@@ -2064,6 +2137,7 @@ function renderDocument(site, metadata, canonical, body, assets, prefetch, trail
         : `<link rel="stylesheet" href="${escapeAttribute(stylesheetHref(stylesheet))}">`)
         .join("");
     const clientScripts = renderClientScripts([
+        ...(assets?.scripts ?? []),
         ...extraClientScripts,
         ...pageClientAssets.scripts,
     ]);
@@ -2103,11 +2177,19 @@ function renderTwitterMetadata(siteTwitter, pageTwitter) {
 function renderMetaName(name, content) {
     return `<meta name="${escapeAttribute(name)}" content="${escapeAttribute(content)}">`;
 }
+// Neutralize a "</script>" breakout in inline <script> bodies and JSON-LD.
+// Escaping "<" to its unicode form is safe for both JavaScript and JSON.
+function escapeScriptContent(content) {
+    return content.replace(/</g, "\\u003c");
+}
 function renderHeadTag(tag) {
+    if (tag.tag === "script") {
+        return `<script${renderHeadAttributes(tag.attrs)}>${escapeScriptContent(tag.children ?? "")}</script>`;
+    }
     return `<${tag.tag}${renderHeadAttributes(tag.attrs)}>`;
 }
 function renderHeadAttributes(attrs) {
-    return Object.entries(attrs)
+    return Object.entries(attrs ?? {})
         .sort(([left], [right]) => left.localeCompare(right))
         .map(([name, value]) => {
         if (value === false || value === null || value === undefined) {
@@ -2144,7 +2226,15 @@ function escapeInlineStyleContent(css) {
     return css.replace(/<\/(style)/gi, "<\\/$1");
 }
 function renderClientScripts(scripts) {
-    return scripts.map((script) => `<script${renderScriptAttributes(script)}></script>`).join("");
+    return scripts
+        .map((script) => "inline" in script
+        ? `<script${renderInlineScriptAttributes(script)}>${escapeScriptContent(script.inline)}</script>`
+        : `<script${renderScriptAttributes(script)}></script>`)
+        .join("");
+}
+function renderInlineScriptAttributes(script) {
+    const output = script.module ? ' type="module"' : "";
+    return output + renderScriptCustomAttributes(script.attributes);
 }
 function renderScriptAttributes(script) {
     let output = script.module ? ' type="module"' : "";
@@ -2155,7 +2245,11 @@ function renderScriptAttributes(script) {
     if (script.async) {
         output += " async";
     }
-    for (const [name, value] of Object.entries(script.attributes ?? {}).sort(([left], [right]) => left.localeCompare(right))) {
+    return output + renderScriptCustomAttributes(script.attributes);
+}
+function renderScriptCustomAttributes(attributes) {
+    let output = "";
+    for (const [name, value] of Object.entries(attributes ?? {}).sort(([left], [right]) => left.localeCompare(right))) {
         if (value === false || value === null || value === undefined) {
             continue;
         }

package/dist/dev.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export type DevServer = {
     url: string;
     close: () => Promise<void>;
     reload: () => void;
+    rebuild: () => void;
 };
 export type DevServerFile = {
     absolutePath: string;
@@ -19,12 +20,12 @@ export type DevServerFile = {
     injectHotReload: boolean;
 };
 export type BuildScheduler = {
-    schedule: () => Promise<void>;
+    schedule: (changedPath?: string) => Promise<void>;
 };
 type BuildSchedulerOptions = {
     debounceMs: number;
-    runBuild: () => Promise<void>;
-    onReload: () => void;
+    runBuild: (changedFiles: string[]) => Promise<void>;
+    onReload: (durationMs: number) => void;
     onError: (error: Error) => void;
     onStart?: () => void;
 };
@@ -32,5 +33,5 @@ export declare function injectHotReloadClient(html: string): string;
 export declare function resolveDevServerFile(outDir: string, requestUrl: string): Promise<DevServerFile | undefined>;
 export declare function createBuildScheduler(options: BuildSchedulerOptions): BuildScheduler;
 export declare function startDevServer(options: DevServerOptions): Promise<DevServer>;
-export declare function runBuildCommand(command: string, cwd?: string): Promise<void>;
+export declare function runBuildCommand(command: string, cwd?: string, changedFiles?: string[]): Promise<void>;
 export {};

package/dist/dev.js CHANGED Viewed

@@ -4,8 +4,132 @@ import { mkdir, readFile, readdir, realpath, stat } from "node:fs/promises";
 import { createServer } from "node:http";
 import { basename, dirname, extname, join, relative, resolve, sep } from "node:path";
 const reloadEventsPath = "/__stoneage/events";
-const hotReloadClient = `<script type="module">const events = new EventSource("${reloadEventsPath}");
-events.addEventListener("reload", () => location.reload());
+const hotReloadClient = `<script type="module">
+(() => {
+  const ENDPOINT = "${reloadEventsPath}";
+  const STORE_KEY = "__stoneage_dev_status";
+  // Format a millisecond duration the way a stopwatch would read it out:
+  // sub-second stays in ms, anything longer switches to seconds.
+  const fmtMs = (ms) => (ms < 1000 ? Math.round(ms) + "ms" : (ms / 1000).toFixed(2) + "s");
+  const fmtElapsed = (ms) => (ms / 1000).toFixed(1) + "s";
+  class StoneAgeDevStatus extends HTMLElement {
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      root.innerHTML = \`<style>
+        :host { all: initial; }
+        .w { position: fixed; bottom: 14px; left: 14px; z-index: 2147483647;
+             display: none; align-items: stretch; overflow: hidden;
+             min-height: 30px; max-width: min(52ch, 70vw); border-radius: 7px;
+             color: #e2e8f0; background: #0b1220;
+             border: 1px solid rgba(148,163,184,.22);
+             box-shadow: 0 6px 22px -8px rgba(0,0,0,.6);
+             font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+             transition: opacity .25s ease; }
+        .w[data-state="building"], .w[data-state="ready"], .w[data-state="error"] { display: inline-flex; }
+        /* Left accent rail — the instrument's status light. */
+        .rail { width: 3px; flex: 0 0 auto; background: #64748b; }
+        .w[data-state="building"] .rail { background: #f0b429; }
+        .w[data-state="ready"] .rail { background: #34d399; }
+        .w[data-state="error"] .rail { background: #f43f5e; }
+        .body { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 11px; min-width: 0; }
+        .name { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
+                color: #94a3b8; white-space: nowrap; }
+        .w[data-state="error"] .name { color: #fb7185; }
+        /* The hero: a tabular readout so ticking digits never reflow. */
+        .value { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
+                 font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
+                 color: #f8fafc; white-space: nowrap; }
+        .value:empty { display: none; }
+        /* Only the error message wraps; the timer readout always stays on one line.
+           A definite width in the error state keeps the message from collapsing to
+           one character per line inside the content-sized flex box. */
+        .w[data-state="error"] { width: min(46ch, 72vw); }
+        .w[data-state="error"] .value { font-weight: 500; color: #fecdd3; min-width: 0; flex: 1 1 auto;
+                 white-space: pre-wrap; overflow-wrap: anywhere; max-height: 4.5em; overflow-y: auto; }
+        @keyframes saw { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
+        .w[data-state="building"] .rail { position: relative; }
+        .w[data-state="building"] .rail::after {
+          content: ""; position: absolute; inset: 0;
+          background: linear-gradient(180deg, transparent, #fde68a, transparent);
+          animation: saw 1.1s linear infinite; }
+        @media (prefers-color-scheme: light) {
+          .w { color: #1e293b; background: #ffffff; border-color: rgba(15,23,42,.12);
+               box-shadow: 0 6px 22px -10px rgba(15,23,42,.35); }
+          .name { color: #64748b; }
+          .value { color: #0f172a; }
+          .w[data-state="error"] .name { color: #e11d48; }
+          .w[data-state="error"] .value { color: #9f1239; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .w { transition: none; }
+          .w[data-state="building"] .rail::after { animation: none; }
+        }
+      </style><div class="w" data-state="idle" role="status" aria-live="polite"><span class="rail"></span><span class="body"><span class="name"></span><span class="value"></span></span></div>\`;
+      this.box = root.querySelector(".w");
+      this.nameEl = root.querySelector(".name");
+      this.valueEl = root.querySelector(".value");
+    }
+    set(state, name, value) {
+      this.box.dataset.state = state;
+      this.nameEl.textContent = name;
+      this.valueEl.textContent = value || "";
+    }
+  }
+  if (!customElements.get("stoneage-dev-status")) {
+    customElements.define("stoneage-dev-status", StoneAgeDevStatus);
+  }
+  const mount = () => {
+    const widget = document.createElement("stoneage-dev-status");
+    document.body.appendChild(widget);
+    // Show the just-finished build time briefly after the reload it triggered.
+    try {
+      const raw = sessionStorage.getItem(STORE_KEY);
+      if (raw) {
+        sessionStorage.removeItem(STORE_KEY);
+        const { durationMs, at } = JSON.parse(raw);
+        if (Date.now() - at < 5000) {
+          widget.set("ready", "Ready", fmtMs(durationMs));
+          setTimeout(() => widget.set("idle", "", ""), 2000);
+        }
+      }
+    } catch (_) {}
+    let timer = null;
+    const stopTimer = () => { if (timer) { clearInterval(timer); timer = null; } };
+    const events = new EventSource(ENDPOINT);
+    events.addEventListener("building", () => {
+      stopTimer();
+      const start = Date.now();
+      widget.set("building", "Building", "0.0s");
+      timer = setInterval(() => {
+        widget.set("building", "Building", fmtElapsed(Date.now() - start));
+      }, 100);
+    });
+    events.addEventListener("ready", (e) => {
+      stopTimer();
+      let durationMs = 0;
+      try { durationMs = JSON.parse(e.data).durationMs ?? 0; } catch (_) {}
+      try { sessionStorage.setItem(STORE_KEY, JSON.stringify({ durationMs, at: Date.now() })); } catch (_) {}
+      location.reload();
+    });
+    events.addEventListener("build-error", (e) => {
+      stopTimer();
+      let message = "Build failed";
+      try { message = JSON.parse(e.data).message || message; } catch (_) {}
+      widget.set("error", "Build failed", message);
+    });
+    events.addEventListener("reload", () => location.reload());
+  };
+  if (document.body) { mount(); }
+  else { document.addEventListener("DOMContentLoaded", mount); }
+})();
 </script>`;
 export function injectHotReloadClient(html) {
     const closingBody = /<\/body\s*>/i.exec(html);
@@ -72,6 +196,7 @@ export function createBuildScheduler(options) {
     let timer;
     let active = Promise.resolve();
     let waiters = [];
+    const pendingChanges = new Set();
     const resolveWaiters = () => {
         const current = waiters;
         waiters = [];
@@ -80,17 +205,23 @@ export function createBuildScheduler(options) {
         }
     };
     const run = async () => {
+        const changedFiles = [...pendingChanges];
+        pendingChanges.clear();
+        options.onStart?.();
+        const startedAt = performance.now();
         try {
-            options.onStart?.();
-            await options.runBuild();
-            options.onReload();
+            await options.runBuild(changedFiles);
+            options.onReload(performance.now() - startedAt);
         }
         catch (error) {
             options.onError(error instanceof Error ? error : new Error(String(error)));
         }
     };
     return {
-        schedule: () => new Promise((resolveSchedule) => {
+        schedule: (changedPath) => new Promise((resolveSchedule) => {
+            if (changedPath) {
+                pendingChanges.add(changedPath);
+            }
             waiters.push(resolveSchedule);
             if (timer) {
                 clearTimeout(timer);
@@ -110,30 +241,37 @@ export async function startDevServer(options) {
     const clients = new Set();
     const watchers = [];
     const outDir = resolve(options.outDir);
-    const notifyReload = () => {
+    const cwd = options.cwd ?? process.cwd();
+    const sendEvent = (event, data) => {
+        const payload = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
         for (const client of clients) {
-            client.write("event: reload\ndata: {}\n\n");
+            client.write(payload);
         }
     };
+    const notifyReload = () => sendEvent("reload", {});
     const scheduler = createBuildScheduler({
         debounceMs,
         runBuild: options.buildCommand
-            ? () => runBuildCommand(options.buildCommand, options.cwd ?? process.cwd())
+            ? (changedFiles) => runBuildCommand(options.buildCommand, cwd, changedFiles)
             : async () => undefined,
         onStart: () => {
             if (options.buildCommand) {
                 logger.log(`StoneAge dev rebuild started: ${options.buildCommand}`);
             }
+            sendEvent("building", {});
+        },
+        onReload: (durationMs) => {
+            logger.log(`StoneAge dev reload (${Math.round(durationMs)}ms)`);
+            sendEvent("ready", { durationMs: Math.round(durationMs) });
         },
-        onReload: () => {
-            logger.log("StoneAge dev reload");
-            notifyReload();
+        onError: (error) => {
+            logger.error(`StoneAge dev build failed: ${error.message}`);
+            sendEvent("build-error", { message: error.message });
         },
-        onError: (error) => logger.error(`StoneAge dev build failed: ${error.message}`),
     });
     if (options.buildCommand) {
         logger.log(`StoneAge dev initial build: ${options.buildCommand}`);
-        await runBuildCommand(options.buildCommand, options.cwd ?? process.cwd()).catch((error) => {
+        await runBuildCommand(options.buildCommand, cwd).catch((error) => {
             logger.error(`StoneAge dev initial build failed: ${error instanceof Error ? error.message : String(error)}`);
         });
     }
@@ -174,8 +312,8 @@ export async function startDevServer(options) {
     });
     await listen(server, port, host);
     for (const watchPath of options.watchPaths ?? []) {
-        watchers.push(...(await watchDirectories(resolve(options.cwd ?? process.cwd(), watchPath), outDir, () => {
-            void scheduler.schedule();
+        watchers.push(...(await watchDirectories(resolve(cwd, watchPath), outDir, (changedPath) => {
+            void scheduler.schedule(relative(cwd, changedPath));
         })));
     }
     const address = server.address();
@@ -184,6 +322,9 @@ export async function startDevServer(options) {
     return {
         url,
         reload: notifyReload,
+        rebuild: () => {
+            void scheduler.schedule();
+        },
         close: async () => {
             for (const watcher of watchers) {
                 watcher.close();
@@ -197,12 +338,21 @@ export async function startDevServer(options) {
         },
     };
 }
-export function runBuildCommand(command, cwd = process.cwd()) {
+const changedFilesEnvLimit = 50;
+export function runBuildCommand(command, cwd = process.cwd(), changedFiles = []) {
+    const env = { ...process.env };
+    if (changedFiles.length > 0 && changedFiles.length <= changedFilesEnvLimit) {
+        env.STONEAGE_CHANGED_FILES = changedFiles.join("\n");
+    }
+    else {
+        delete env.STONEAGE_CHANGED_FILES;
+    }
     return new Promise((resolveRun, rejectRun) => {
         const child = spawn(command, {
             cwd,
             shell: true,
             stdio: "inherit",
+            env,
         });
         child.on("error", rejectRun);
         child.on("exit", (code, signal) => {
@@ -232,7 +382,7 @@ async function watchDirectories(root, outDir, onChange) {
         const fileName = basename(root);
         watchers.push(watch(fileDir, (_eventType, filename) => {
             if (!filename || String(filename) === fileName) {
-                onChange();
+                onChange(root);
             }
         }));
         return watchers;
@@ -259,8 +409,10 @@ async function watchDirectories(root, outDir, onChange) {
                         void visit(changedPath);
                     }
                 }, () => undefined);
+                onChange(changedPath);
+                return;
             }
-            onChange();
+            onChange(dir);
         }));
         const entries = await readdir(dir, { withFileTypes: true }).catch(() => []);
         for (const entry of entries) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@t09tanaka/stoneage",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "A data-site static site generator for fast plain HTML output.",
   "keywords": [