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

@t09tanaka/stoneage 0.3.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,34 @@
 # 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

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
@@ -602,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,6 +314,15 @@ 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

package/dist/core.js CHANGED Viewed

@@ -625,6 +625,7 @@ async function resolveStaticAssetReferences(assets) {
         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
@@ -634,6 +635,7 @@ async function resolveStaticAssetReferences(assets) {
         assets: {
             ...assets,
             ...(assets.stylesheets ? { stylesheets } : {}),
+            ...(assets.scripts ? { scripts } : {}),
             ...(client ? { client } : {}),
         },
         publicAssets: [...publicAssetsByPath.values()],
@@ -769,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;
@@ -1048,6 +1053,7 @@ 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
@@ -2131,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,
     ]);
@@ -2170,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) {
@@ -2211,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"' : "";
@@ -2222,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.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "A data-site static site generator for fast plain HTML output.",
   "keywords": [