hadars 1.0.9 → 1.0.10

package/dist/{chunk-B4NE4AIT.js → chunk-QGDQJUIU.js}

@@ -137,8 +137,8 @@ var ATTR = {
   fetchPriority: "fetchpriority",
   hrefLang: "hreflang"
 };
-function renderHeadTag(tag, id, opts, selfClose = false) {
-  let attrs = ` id="${escAttr(id)}"`;
+function renderHeadTag(tag, _id, opts, selfClose = false) {
+  let attrs = "";
   let inner = "";
   for (const [k, v] of Object.entries(opts)) {
     if (k === "key" || k === "children") continue;

package/dist/cli.js

@@ -1,12 +1,103 @@
 #!/usr/bin/env node
 import { createRequire } from "node:module";
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
+// src/utils/imageOptimizer.ts
+var exports_imageOptimizer = {};
+__export(exports_imageOptimizer, {
+  optimizeImages: () => optimizeImages
+});
+import fs from "node:fs/promises";
+import { existsSync as existsSync2 } from "node:fs";
+import path2 from "node:path";
+async function optimizeImages(srcDir, destDir, opts = {}) {
+  const widths = opts.widths ?? [640, 1280, 1920];
+  const formats = opts.formats ?? ["webp"];
+  const quality = opts.quality ?? 80;
+  let sharp;
+  try {
+    const mod = await import("sharp");
+    sharp = mod.default ?? mod;
+  } catch {
+    console.warn('[hadars] `images` config requires "sharp" — run: npm install sharp');
+    return;
+  }
+  if (!existsSync2(srcDir))
+    return;
+  const outBase = path2.join(destDir, "_images");
+  await fs.mkdir(outBase, { recursive: true });
+  await processDir(srcDir, srcDir, outBase, widths, formats, quality, sharp);
+  console.log(`[hadars] Image variants written to ${outBase}`);
+}
+async function processDir(baseDir, dir, outBase, widths, formats, quality, sharp) {
+  let entries;
+  try {
+    entries = await fs.readdir(dir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  await Promise.all(entries.map(async (entry) => {
+    const fullPath = path2.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      await processDir(baseDir, fullPath, outBase, widths, formats, quality, sharp);
+      return;
+    }
+    if (!entry.isFile())
+      return;
+    const ext = path2.extname(entry.name).toLowerCase();
+    if (!SUPPORTED_EXTS.has(ext))
+      return;
+    const rel = path2.relative(baseDir, fullPath);
+    const relNoExt = rel.slice(0, -ext.length);
+    const outDir = path2.join(outBase, path2.dirname(rel));
+    await fs.mkdir(outDir, { recursive: true });
+    const baseName = path2.basename(relNoExt);
+    let srcMtime = 0;
+    try {
+      srcMtime = (await fs.stat(fullPath)).mtimeMs;
+    } catch {
+      return;
+    }
+    await Promise.all(widths.flatMap((width) => formats.map(async (fmt) => {
+      const outFile = path2.join(outDir, `${baseName}-${width}.${fmt}`);
+      try {
+        const outMtime = (await fs.stat(outFile)).mtimeMs;
+        if (outMtime >= srcMtime)
+          return;
+      } catch {}
+      try {
+        await sharp(fullPath).resize({ width, withoutEnlargement: true })[fmt]({ quality }).toFile(outFile);
+      } catch (err) {
+        console.warn(`[hadars] Could not generate ${rel} → ${width}px.${fmt}:`, err);
+      }
+    })));
+  }));
+}
+var SUPPORTED_EXTS;
+var init_imageOptimizer = __esm(() => {
+  SUPPORTED_EXTS = new Set([".jpg", ".jpeg", ".png", ".tiff", ".bmp", ".webp", ".avif"]);
+});
+
 // cli.ts
 import { spawn as spawn2 } from "node:child_process";
 
 // cli-lib.ts
-import { existsSync as existsSync3 } from "node:fs";
+import { existsSync as existsSync4 } from "node:fs";
 import { mkdir as mkdir2, writeFile as writeFile2, unlink, readFile as readFile2 } from "node:fs/promises";
 import { resolve, join as join2, dirname as dirname2 } from "node:path";
 import { fileURLToPath as fileURLToPath3, pathToFileURL as pathToFileURL2 } from "node:url";
@@ -1182,8 +1273,8 @@ var ATTR = {
   fetchPriority: "fetchpriority",
   hrefLang: "hreflang"
 };
-function renderHeadTag(tag, id, opts, selfClose = false) {
-  let attrs = ` id="${escAttr(id)}"`;
+function renderHeadTag(tag, _id, opts, selfClose = false) {
+  let attrs = "";
   let inner = "";
   for (const [k, v] of Object.entries(opts)) {
     if (k === "key" || k === "children")
@@ -1772,11 +1863,12 @@ async function tryServeFile(filePath) {
   }
 }
 var _notFound = new Set;
+var _NOT_FOUND_MAX = 50000;
 async function tryServeFileCached(filePath) {
   if (_notFound.has(filePath))
     return null;
   const res = await tryServeFile(filePath);
-  if (!res)
+  if (!res && _notFound.size < _NOT_FOUND_MAX)
     _notFound.add(filePath);
   return res;
 }
@@ -1786,8 +1878,8 @@ import { RspackDevServer } from "@rspack/dev-server";
 import pathMod2 from "node:path";
 import { fileURLToPath as fileURLToPath2, pathToFileURL } from "node:url";
 import crypto from "node:crypto";
-import fs from "node:fs/promises";
-import { existsSync as existsSync2 } from "node:fs";
+import fs2 from "node:fs/promises";
+import { existsSync as existsSync3 } from "node:fs";
 import os from "node:os";
 import { spawn } from "node:child_process";
 import cluster from "node:cluster";
@@ -1812,6 +1904,7 @@ function buildSsrResponse(head, status, getAppBody, finalize, getPrecontentHtml)
         controller.enqueue(encoder.encode(`<script id="hadars" type="application/json">${scriptContent}</script>` + postContent));
         controller.close();
       } catch (err) {
+        console.error("[hadars] SSR render error:", err);
         controller.error(err);
       }
     }
@@ -1957,13 +2050,12 @@ class NodeStore {
     if (!node.internal?.type)
       throw new Error("[hadars] createNode: node.internal.type must be a non-empty string");
     this.byId.set(node.id, node);
-    const list = this.byType.get(node.internal.type) ?? [];
-    const idx = list.findIndex((n) => n.id === node.id);
-    if (idx >= 0)
-      list[idx] = node;
-    else
-      list.push(node);
-    this.byType.set(node.internal.type, list);
+    let typeMap = this.byType.get(node.internal.type);
+    if (!typeMap) {
+      typeMap = new Map;
+      this.byType.set(node.internal.type, typeMap);
+    }
+    typeMap.set(node.id, node);
   }
   getNode(id) {
     return this.byId.get(id);
@@ -1972,7 +2064,8 @@ class NodeStore {
     return Array.from(this.byId.values());
   }
   getNodesByType(type) {
-    return this.byType.get(type) ?? [];
+    const typeMap = this.byType.get(type);
+    return typeMap ? Array.from(typeMap.values()) : [];
   }
   getTypes() {
     return Array.from(this.byType.keys());
@@ -2361,7 +2454,7 @@ function createGraphiqlHandler(executor) {
 
 // src/build.ts
 async function processHtmlTemplate(templatePath) {
-  const html = await fs.readFile(templatePath, "utf-8");
+  const html = await fs2.readFile(templatePath, "utf-8");
   const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/gi;
   const matches = [];
   let m;
@@ -2374,7 +2467,7 @@ async function processHtmlTemplate(templatePath) {
   const sourceHash = crypto.createHash("md5").update(html).digest("hex").slice(0, 8);
   const cachedPath = pathMod2.join(HADARS_TMP_DIR, `template-${sourceHash}.html`);
   try {
-    await fs.access(cachedPath);
+    await fs2.access(cachedPath);
     return cachedPath;
   } catch {}
   const { default: postcss } = await import("postcss");
@@ -2393,7 +2486,7 @@ async function processHtmlTemplate(templatePath) {
       console.warn("[hadars] PostCSS error processing <style> block in HTML template:", err);
     }
   }
-  await fs.writeFile(cachedPath, processedHtml);
+  await fs2.writeFile(cachedPath, processedHtml);
   return cachedPath;
 }
 
@@ -2426,15 +2519,18 @@ class RenderWorkerPool {
     const w = new this._Worker(this._workerPath, { workerData: { ssrBundlePath: this._ssrBundlePath } });
     this.workerPending.set(w, new Set);
     w.on("message", (msg) => {
-      const { id, html, headHtml, status, error } = msg;
+      const { id, html, headHtml, status, error, stack } = msg;
       const p = this.pending.get(id);
       if (!p)
         return;
       this.pending.delete(id);
       this.workerPending.get(w)?.delete(id);
-      if (error)
-        p.reject(new Error(error));
-      else
+      if (error) {
+        const e = new Error(error);
+        if (stack)
+          e.stack = stack;
+        p.reject(e);
+      } else
         p.resolve({ html, headHtml, status });
     });
     w.on("error", (err) => {
@@ -2526,13 +2622,13 @@ var getSuffix = (mode) => mode === "development" ? `?v=${Date.now()}` : "";
 var HadarsFolder = "./.hadars";
 var StaticPath = `${HadarsFolder}/static`;
 var HADARS_TMP_DIR = pathMod2.join(os.tmpdir(), "hadars");
-var ensureHadarsTmpDir = () => fs.mkdir(HADARS_TMP_DIR, { recursive: true });
+var ensureHadarsTmpDir = () => fs2.mkdir(HADARS_TMP_DIR, { recursive: true });
 var readReactMajor = async () => {
   let dir = process.cwd();
   while (true) {
     try {
       const pkgPath = pathMod2.join(dir, "node_modules", "react", "package.json");
-      const pkg = JSON.parse(await fs.readFile(pkgPath, "utf-8"));
+      const pkg = JSON.parse(await fs2.readFile(pkgPath, "utf-8"));
       return parseInt(pkg.version.split(".")[0], 10);
     } catch {}
     const parent = pathMod2.dirname(dir);
@@ -2552,13 +2648,13 @@ var validateOptions = (options) => {
 var resolveWorkerCmd = (packageDir2) => {
   const tsPath = pathMod2.resolve(packageDir2, "ssr-watch.ts");
   const jsPath = pathMod2.resolve(packageDir2, "ssr-watch.js");
-  if (isBun && existsSync2(tsPath)) {
+  if (isBun && existsSync3(tsPath)) {
     return ["bun", tsPath];
   }
-  if (isDeno && existsSync2(tsPath)) {
+  if (isDeno && existsSync3(tsPath)) {
     return ["deno", "run", "--allow-all", tsPath];
   }
-  if (existsSync2(tsPath)) {
+  if (existsSync3(tsPath)) {
     const allArgs = [...process.execArgv, process.argv[1] ?? ""];
     const hasTsx = allArgs.some((a) => a.includes("tsx"));
     const hasTsNode = allArgs.some((a) => a.includes("ts-node"));
@@ -2567,7 +2663,7 @@ var resolveWorkerCmd = (packageDir2) => {
     if (hasTsNode)
       return ["ts-node", tsPath];
   }
-  if (existsSync2(jsPath)) {
+  if (existsSync3(jsPath)) {
     return ["node", jsPath];
   }
   throw new Error(`[hadars] SSR worker not found. Expected:
@@ -2576,7 +2672,7 @@ Run "npm run build:cli" to compile it, or launch hadars via a TypeScript runner:
   npx tsx cli.ts dev`);
 };
 var dev = async (options) => {
-  await fs.rm(HadarsFolder, { recursive: true, force: true });
+  await fs2.rm(HadarsFolder, { recursive: true, force: true });
   let { port = 9090, baseURL = "" } = options;
   console.log(`Starting Hadars on port ${port}`);
   validateOptions(options);
@@ -2607,14 +2703,14 @@ var dev = async (options) => {
   const clientScriptPath2 = pathMod2.resolve(packageDir2, "utils", "clientScript.tsx");
   let clientScript = "";
   try {
-    clientScript = (await fs.readFile(clientScriptPath2, "utf-8")).replace("$_MOD_PATH$", entry + getSuffix(options.mode));
+    clientScript = (await fs2.readFile(clientScriptPath2, "utf-8")).replace("$_MOD_PATH$", entry + getSuffix(options.mode));
   } catch (err) {
     console.error("Failed to read client script from package dist, falling back to src", err);
     throw err;
   }
   await ensureHadarsTmpDir();
   const tmpFilePath = pathMod2.join(HADARS_TMP_DIR, `client-${Date.now()}.tsx`);
-  await fs.writeFile(tmpFilePath, clientScript);
+  await fs2.writeFile(tmpFilePath, clientScript);
   let ssrBuildId = crypto.randomBytes(4).toString("hex");
   let cachedSsrModule = null;
   let cachedSsrBuildId = "";
@@ -2728,7 +2824,17 @@ var dev = async (options) => {
     }
   })();
   const readyPromise = Promise.all([clientBuildDone, ssrBuildDone]);
-  readyPromise.then(() => {
+  readyPromise.then(async () => {
+    if (options.images) {
+      try {
+        const { optimizeImages: optimizeImages2 } = await Promise.resolve().then(() => (init_imageOptimizer(), exports_imageOptimizer));
+        const projectStaticDir = pathMod2.resolve(__dirname3, "static");
+        const hadarStaticDir = pathMod2.resolve(__dirname3, StaticPath);
+        await optimizeImages2(projectStaticDir, hadarStaticDir, options.images);
+      } catch (err) {
+        console.warn("[hadars] Image optimization failed in dev mode:", err);
+      }
+    }
     if (stdoutReader) {
       const reader = stdoutReader;
       (async () => {
@@ -2763,7 +2869,7 @@ var dev = async (options) => {
       }
     } catch (e) {}
   })();
-  const getPrecontentHtml = makePrecontentHtmlGetter(readyPromise.then(() => fs.readFile(pathMod2.join(__dirname3, StaticPath, "out.html"), "utf-8")));
+  const getPrecontentHtml = makePrecontentHtmlGetter(readyPromise.then(() => fs2.readFile(pathMod2.join(__dirname3, StaticPath, "out.html"), "utf-8")));
   const projectStaticPath = pathMod2.resolve(process.cwd(), "static");
   await serve(port, async (req, ctx) => {
     await readyPromise;
@@ -2784,11 +2890,11 @@ var dev = async (options) => {
     if (proxied)
       return proxied;
     const url = new URL(request.url);
-    const path2 = url.pathname;
-    const staticRes = await tryServeFileCached(pathMod2.join(__dirname3, StaticPath, path2));
+    const path3 = url.pathname;
+    const staticRes = await tryServeFileCached(pathMod2.join(__dirname3, StaticPath, path3));
     if (staticRes)
       return staticRes;
-    const projectRes = await tryServeFileCached(pathMod2.join(projectStaticPath, path2));
+    const projectRes = await tryServeFileCached(pathMod2.join(projectStaticPath, path3));
     if (projectRes)
       return projectRes;
     const ssrComponentPath = pathMod2.join(__dirname3, HadarsFolder, SSR_FILENAME);
@@ -2843,14 +2949,14 @@ var build = async (options) => {
   const clientScriptPath2 = pathMod2.resolve(packageDir2, "utils", "clientScript.js");
   let clientScript = "";
   try {
-    clientScript = (await fs.readFile(clientScriptPath2, "utf-8")).replace("$_MOD_PATH$", entry + getSuffix(options.mode));
+    clientScript = (await fs2.readFile(clientScriptPath2, "utf-8")).replace("$_MOD_PATH$", entry + getSuffix(options.mode));
   } catch (err) {
     const srcClientPath = pathMod2.resolve(packageDir2, "utils", "clientScript.tsx");
-    clientScript = (await fs.readFile(srcClientPath, "utf-8")).replace("$_MOD_PATH$", entry + `?v=${Date.now()}`);
+    clientScript = (await fs2.readFile(srcClientPath, "utf-8")).replace("$_MOD_PATH$", entry + `?v=${Date.now()}`);
   }
   await ensureHadarsTmpDir();
   const tmpFilePath = pathMod2.join(HADARS_TMP_DIR, `client-${Date.now()}.tsx`);
-  await fs.writeFile(tmpFilePath, clientScript);
+  await fs2.writeFile(tmpFilePath, clientScript);
   const resolvedHtmlTemplate = options.htmlTemplate ? await processHtmlTemplate(pathMod2.resolve(__dirname3, options.htmlTemplate)) : undefined;
   const reactMajor = await readReactMajor();
   console.log("Building client and server bundles in parallel...");
@@ -2890,7 +2996,13 @@ var build = async (options) => {
       postcssPlugins: options.postcssPlugins
     })
   ]);
-  await fs.rm(tmpFilePath);
+  await fs2.rm(tmpFilePath);
+  if (options.images) {
+    const { optimizeImages: optimizeImages2 } = await Promise.resolve().then(() => (init_imageOptimizer(), exports_imageOptimizer));
+    const projectStaticDir = pathMod2.resolve(__dirname3, "static");
+    const hadarStaticDir = pathMod2.resolve(__dirname3, StaticPath);
+    await optimizeImages2(projectStaticDir, hadarStaticDir, options.images);
+  }
   console.log("Build complete.");
 };
 var run = async (options) => {
@@ -2917,12 +3029,12 @@ var run = async (options) => {
     const packageDir2 = pathMod2.dirname(fileURLToPath2(import.meta.url));
     const workerJs = pathMod2.resolve(packageDir2, "ssr-render-worker.js");
     const workerTs = pathMod2.resolve(packageDir2, "ssr-render-worker.ts");
-    const workerFile = existsSync2(workerJs) ? workerJs : workerTs;
+    const workerFile = existsSync3(workerJs) ? workerJs : workerTs;
     const ssrBundlePath = pathMod2.resolve(__dirname3, HadarsFolder, SSR_FILENAME);
     renderPool = new RenderWorkerPool(workerFile, workers, ssrBundlePath);
     console.log(`[hadars] SSR render pool: ${workers} worker threads`);
   }
-  const getPrecontentHtml = makePrecontentHtmlGetter(fs.readFile(pathMod2.join(__dirname3, StaticPath, "out.html"), "utf-8"));
+  const getPrecontentHtml = makePrecontentHtmlGetter(fs2.readFile(pathMod2.join(__dirname3, StaticPath, "out.html"), "utf-8"));
   const projectStaticPath = pathMod2.resolve(process.cwd(), "static");
   const componentPath = pathToFileURL(pathMod2.resolve(__dirname3, HadarsFolder, SSR_FILENAME)).href;
   const ssrModulePromise = import(componentPath);
@@ -2939,14 +3051,14 @@ var run = async (options) => {
     if (proxied)
       return proxied;
     const url = new URL(request.url);
-    const path2 = url.pathname;
-    const staticRes = await tryServeFileCached(pathMod2.join(__dirname3, StaticPath, path2));
+    const path3 = url.pathname;
+    const staticRes = await tryServeFileCached(pathMod2.join(__dirname3, StaticPath, path3));
     if (staticRes)
       return staticRes;
-    const projectRes = await tryServeFileCached(pathMod2.join(projectStaticPath, path2));
+    const projectRes = await tryServeFileCached(pathMod2.join(projectStaticPath, path3));
     if (projectRes)
       return projectRes;
-    const routeClean = path2.replace(/(^\/|\/$)/g, "");
+    const routeClean = path3.replace(/(^\/|\/$)/g, "");
     if (routeClean) {
       const routeRes = await tryServeFileCached(pathMod2.join(__dirname3, StaticPath, routeClean, "index.html"));
       if (routeRes)
@@ -2997,7 +3109,7 @@ var run = async (options) => {
 };
 
 // src/static.ts
-import { cp, mkdir, writeFile } from "node:fs/promises";
+import { cp, mkdir, rm, writeFile } from "node:fs/promises";
 import { join, basename } from "node:path";
 async function renderStaticSite(opts) {
   const { ssrModule, htmlSource, staticSrc, paths, outputDir } = opts;
@@ -3055,6 +3167,12 @@ async function renderStaticSite(opts) {
     recursive: true,
     filter: (src) => basename(src) !== "out.html"
   });
+  const copiedImages = join(staticDest, "_images");
+  const imagesOut = join(outputDir, "_images");
+  try {
+    await cp(copiedImages, imagesOut, { recursive: true });
+    await rm(copiedImages, { recursive: true, force: true });
+  } catch {}
   return { rendered, errors };
 }
 
@@ -3063,7 +3181,7 @@ var SUPPORTED = ["hadars.config.js", "hadars.config.mjs", "hadars.config.cjs", "
 function findConfig(cwd) {
   for (const name of SUPPORTED) {
     const p = resolve(cwd, name);
-    if (existsSync3(p))
+    if (existsSync4(p))
       return p;
   }
   return null;
@@ -3139,11 +3257,11 @@ async function exportStatic(config, outputDir, cwd) {
   const ssrBundle = resolve(cwd, ".hadars", "index.ssr.js");
   const outHtml = resolve(cwd, ".hadars", "static", "out.html");
   const staticSrc = resolve(cwd, ".hadars", "static");
-  if (!existsSync3(ssrBundle)) {
+  if (!existsSync4(ssrBundle)) {
     console.error(`SSR bundle not found: ${ssrBundle}`);
     process.exit(1);
   }
-  if (!existsSync3(outHtml)) {
+  if (!existsSync4(outHtml)) {
     console.error(`HTML template not found: ${outHtml}`);
     process.exit(1);
   }
@@ -3184,8 +3302,8 @@ Source plugins require graphql-js to be installed:
   });
   for (const p of rendered)
     console.log(`  [200] ${p}`);
-  for (const { path: path2, error } of errors)
-    console.error(`  [ERR] ${path2}: ${error.message}`);
+  for (const { path: path3, error } of errors)
+    console.error(`  [ERR] ${path3}: ${error.message}`);
   console.log(`
 Exported to ${outputDir}/`);
   if (errors.length > 0)
@@ -3199,11 +3317,11 @@ async function bundleCloudflare(config, configPath, outputFile, cwd) {
   await build({ ...config, mode: "production" });
   const ssrBundle = resolve(cwd, ".hadars", "index.ssr.js");
   const outHtml = resolve(cwd, ".hadars", "static", "out.html");
-  if (!existsSync3(ssrBundle)) {
+  if (!existsSync4(ssrBundle)) {
     console.error(`SSR bundle not found: ${ssrBundle}`);
     process.exit(1);
   }
-  if (!existsSync3(outHtml)) {
+  if (!existsSync4(outHtml)) {
     console.error(`HTML template not found: ${outHtml}`);
     process.exit(1);
   }
@@ -3256,11 +3374,11 @@ async function bundleLambda(config, configPath, outputFile, cwd) {
   await build({ ...config, mode: "production" });
   const ssrBundle = resolve(cwd, ".hadars", "index.ssr.js");
   const outHtml = resolve(cwd, ".hadars", "static", "out.html");
-  if (!existsSync3(ssrBundle)) {
+  if (!existsSync4(ssrBundle)) {
     console.error(`SSR bundle not found: ${ssrBundle}`);
     process.exit(1);
   }
-  if (!existsSync3(outHtml)) {
+  if (!existsSync4(outHtml)) {
     console.error(`HTML template not found: ${outHtml}`);
     process.exit(1);
   }
@@ -3666,7 +3784,7 @@ dist/
 }
 async function createProject(name, cwd) {
   const dir = resolve(cwd, name);
-  if (existsSync3(dir)) {
+  if (existsSync4(dir)) {
     console.error(`Directory already exists: ${dir}`);
     process.exit(1);
   }

package/dist/cloudflare.cjs

@@ -1188,8 +1188,8 @@ var ATTR = {
   fetchPriority: "fetchpriority",
   hrefLang: "hreflang"
 };
-function renderHeadTag(tag, id, opts, selfClose = false) {
-  let attrs = ` id="${escAttr(id)}"`;
+function renderHeadTag(tag, _id, opts, selfClose = false) {
+  let attrs = "";
   let inner = "";
   for (const [k, v] of Object.entries(opts)) {
     if (k === "key" || k === "children") continue;
@@ -1431,15 +1431,18 @@ function createCloudflareHandler(options, bundled) {
     if (proxied) return proxied;
     try {
       const { default: Component, getInitProps, getFinalProps } = ssrModule;
+      const isDataOnly = request.headers.get("Accept") === "application/json";
       const { head, status, getAppBody, finalize } = await getReactResponse(request, {
         document: {
           body: Component,
           lang: "en",
           getInitProps,
           getFinalProps
-        }
+        },
+        singlePass: !isDataOnly,
+        dataOnly: isDataOnly
       });
-      if (request.headers.get("Accept") === "application/json") {
+      if (isDataOnly) {
         const { clientProps: clientProps2 } = await finalize();
         const serverData = clientProps2.__serverData ?? {};
         return new Response(JSON.stringify({ serverData }), {

package/dist/cloudflare.d.cts

@@ -1,4 +1,4 @@
-import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-CPplIz_z.cjs';
+import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-gkIw8CFo.cjs';
 
 /**
  * Cloudflare Workers adapter for hadars.

package/dist/cloudflare.d.ts

@@ -1,4 +1,4 @@
-import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-CPplIz_z.js';
+import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-gkIw8CFo.js';
 
 /**
  * Cloudflare Workers adapter for hadars.

package/dist/cloudflare.js

@@ -6,7 +6,7 @@ import {
   getReactResponse,
   makePrecontentHtmlGetter,
   parseRequest
-} from "./chunk-B4NE4AIT.js";
+} from "./chunk-QGDQJUIU.js";
 import "./chunk-6SOA2HTO.js";
 import "./chunk-OZUZS2PD.js";
 
@@ -27,15 +27,18 @@ function createCloudflareHandler(options, bundled) {
     if (proxied) return proxied;
     try {
       const { default: Component, getInitProps, getFinalProps } = ssrModule;
+      const isDataOnly = request.headers.get("Accept") === "application/json";
       const { head, status, getAppBody, finalize } = await getReactResponse(request, {
         document: {
           body: Component,
           lang: "en",
           getInitProps,
           getFinalProps
-        }
+        },
+        singlePass: !isDataOnly,
+        dataOnly: isDataOnly
       });
-      if (request.headers.get("Accept") === "application/json") {
+      if (isDataOnly) {
         const { clientProps: clientProps2 } = await finalize();
         const serverData = clientProps2.__serverData ?? {};
         return new Response(JSON.stringify({ serverData }), {

package/dist/{hadars-CPplIz_z.d.cts → hadars-gkIw8CFo.d.cts}

@@ -274,6 +274,30 @@ interface HadarsOptions {
      * onError: (err, req) => console.error('[myapp]', req.method, req.url, err)
      */
     onError?: (err: Error, req: Request) => void | Promise<void>;
+    /**
+     * Build-time image variant generation. When set, `hadars build` and
+     * `hadars export static` scan the project's `static/` directory and produce
+     * resized variants for every raster image (JPG, PNG, WebP, AVIF, TIFF, BMP).
+     *
+     * Variants are written to `/_images/<original-path>-<width>.<format>` and
+     * served automatically by the production server. Use the `<HadarsImage>`
+     * component (exported from `hadars`) to generate `<picture>` elements that
+     * reference these variants with proper `srcset` / `sizes` attributes.
+     *
+     * Requires `sharp` to be installed as a project dependency:
+     *   npm install sharp
+     *
+     * @example
+     * images: { widths: [640, 1280, 1920], formats: ['webp', 'avif'], quality: 85 }
+     */
+    images?: {
+        /** Pixel widths to generate per source image. Default: `[640, 1280, 1920]` */
+        widths?: number[];
+        /** Output formats. Default: `['webp']` */
+        formats?: ('webp' | 'avif')[];
+        /** Encoding quality 1–100. Default: `80` */
+        quality?: number;
+    };
 }
 /**
  * A Gatsby-compatible source plugin entry, matching the format used in

package/dist/{hadars-CPplIz_z.d.ts → hadars-gkIw8CFo.d.ts}

@@ -274,6 +274,30 @@ interface HadarsOptions {
      * onError: (err, req) => console.error('[myapp]', req.method, req.url, err)
      */
     onError?: (err: Error, req: Request) => void | Promise<void>;
+    /**
+     * Build-time image variant generation. When set, `hadars build` and
+     * `hadars export static` scan the project's `static/` directory and produce
+     * resized variants for every raster image (JPG, PNG, WebP, AVIF, TIFF, BMP).
+     *
+     * Variants are written to `/_images/<original-path>-<width>.<format>` and
+     * served automatically by the production server. Use the `<HadarsImage>`
+     * component (exported from `hadars`) to generate `<picture>` elements that
+     * reference these variants with proper `srcset` / `sizes` attributes.
+     *
+     * Requires `sharp` to be installed as a project dependency:
+     *   npm install sharp
+     *
+     * @example
+     * images: { widths: [640, 1280, 1920], formats: ['webp', 'avif'], quality: 85 }
+     */
+    images?: {
+        /** Pixel widths to generate per source image. Default: `[640, 1280, 1920]` */
+        widths?: number[];
+        /** Output formats. Default: `['webp']` */
+        formats?: ('webp' | 'avif')[];
+        /** Encoding quality 1–100. Default: `80` */
+        quality?: number;
+    };
 }
 /**
  * A Gatsby-compatible source plugin entry, matching the format used in

package/dist/index.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   HadarsHead: () => Head,
+  HadarsImage: () => HadarsImage,
   initServerDataCache: () => initServerDataCache,
   loadModule: () => loadModule,
   useGraphQL: () => useGraphQL,
@@ -344,6 +345,55 @@ var Head = import_react.default.memo(({ children, status }) => {
   return null;
 });
 
+// src/components/Image.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FORMAT_MIME = {
+  webp: "image/webp",
+  avif: "image/avif"
+};
+function HadarsImage({
+  src,
+  alt,
+  widths = [640, 1280, 1920],
+  formats = ["webp"],
+  sizes = "100vw",
+  loading = "lazy",
+  decoding = "async",
+  ...rest
+}) {
+  const dotIdx = src.lastIndexOf(".");
+  const srcNoExt = dotIdx !== -1 ? src.slice(0, dotIdx) : src;
+  const imgBase = "/_images" + srcNoExt;
+  const buildSrcSet = (fmt) => widths.map((w) => `${imgBase}-${w}.${fmt} ${w}w`).join(", ");
+  const orderedFormats = [...formats].sort((a, b) => {
+    const rank = { avif: 0, webp: 1 };
+    return (rank[a] ?? 2) - (rank[b] ?? 2);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("picture", { children: [
+    orderedFormats.map((fmt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "source",
+      {
+        type: FORMAT_MIME[fmt] ?? `image/${fmt}`,
+        srcSet: buildSrcSet(fmt),
+        sizes
+      },
+      fmt
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src,
+        alt,
+        loading,
+        decoding,
+        sizes,
+        ...rest
+      }
+    )
+  ] });
+}
+
 // src/index.tsx
 function loadModule(path) {
   return import(
@@ -354,6 +404,7 @@ function loadModule(path) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   HadarsHead,
+  HadarsImage,
   initServerDataCache,
   loadModule,
   useGraphQL,

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { b as HadarsDocumentNode } from './hadars-CPplIz_z.cjs';
-export { G as GraphQLExecutor, c as HadarsApp, H as HadarsEntryModule, d as HadarsGetClientProps, e as HadarsGetFinalProps, f as HadarsGetInitialProps, a as HadarsOptions, g as HadarsProps, h as HadarsRequest, i as HadarsSourceEntry, j as HadarsStaticContext } from './hadars-CPplIz_z.cjs';
+import { b as HadarsDocumentNode } from './hadars-gkIw8CFo.cjs';
+export { G as GraphQLExecutor, c as HadarsApp, H as HadarsEntryModule, d as HadarsGetClientProps, e as HadarsGetFinalProps, f as HadarsGetInitialProps, a as HadarsOptions, g as HadarsProps, h as HadarsRequest, i as HadarsSourceEntry, j as HadarsStaticContext } from './hadars-gkIw8CFo.cjs';
 import React from 'react';
 
 /** Call this before hydrating to seed the client cache from the server's data.
@@ -68,6 +68,55 @@ declare const Head: React.FC<{
     status?: number;
 }>;
 
+interface HadarsImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    alt: string;
+    /**
+     * Pixel widths to include in the `srcset`. Must match (or be a subset of)
+     * the `images.widths` configured in `hadars.config.ts`.
+     * Default: `[640, 1280, 1920]`.
+     */
+    widths?: number[];
+    /**
+     * Formats to offer, in preference order (most-preferred first).
+     * Browsers pick the first format they support.
+     * Default: `['webp']`.
+     */
+    formats?: ('webp' | 'avif')[];
+    /**
+     * `sizes` attribute forwarded to both `<source>` and the fallback `<img>`.
+     * Default: `'100vw'`.
+     */
+    sizes?: string;
+}
+/**
+ * Responsive image component.
+ *
+ * Renders a `<picture>` element with `<source>` elements pointing at the
+ * build-time variants generated by `hadars build` or `hadars export static`.
+ * Variants are served from `/_images/<src-without-ext>-<width>.<format>`.
+ *
+ * Configure variant generation in `hadars.config.ts`:
+ * ```ts
+ * import type { HadarsOptions } from 'hadars';
+ * export default {
+ *   images: { widths: [640, 1280, 1920], formats: ['webp', 'avif'], quality: 85 },
+ * } satisfies HadarsOptions;
+ * ```
+ *
+ * Falls back to the original `src` for browsers without `<picture>` support,
+ * and always sets `loading="lazy"` and `decoding="async"` unless overridden.
+ *
+ * @example
+ * <HadarsImage
+ *   src="/photos/hero.jpg"
+ *   alt="A scenic mountain view"
+ *   widths={[640, 1280, 1920]}
+ *   sizes="(max-width: 768px) 100vw, 50vw"
+ * />
+ */
+declare function HadarsImage({ src, alt, widths, formats, sizes, loading, decoding, ...rest }: HadarsImageProps): React.ReactElement;
+
 /**
  * Dynamically loads a module with target-aware behaviour:
  *
@@ -92,4 +141,4 @@ declare const Head: React.FC<{
  */
 declare function loadModule<T = any>(path: string): Promise<T>;
 
-export { HadarsDocumentNode, Head as HadarsHead, initServerDataCache, loadModule, useGraphQL, useServerData };
+export { HadarsDocumentNode, Head as HadarsHead, HadarsImage, type HadarsImageProps, initServerDataCache, loadModule, useGraphQL, useServerData };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { b as HadarsDocumentNode } from './hadars-CPplIz_z.js';
-export { G as GraphQLExecutor, c as HadarsApp, H as HadarsEntryModule, d as HadarsGetClientProps, e as HadarsGetFinalProps, f as HadarsGetInitialProps, a as HadarsOptions, g as HadarsProps, h as HadarsRequest, i as HadarsSourceEntry, j as HadarsStaticContext } from './hadars-CPplIz_z.js';
+import { b as HadarsDocumentNode } from './hadars-gkIw8CFo.js';
+export { G as GraphQLExecutor, c as HadarsApp, H as HadarsEntryModule, d as HadarsGetClientProps, e as HadarsGetFinalProps, f as HadarsGetInitialProps, a as HadarsOptions, g as HadarsProps, h as HadarsRequest, i as HadarsSourceEntry, j as HadarsStaticContext } from './hadars-gkIw8CFo.js';
 import React from 'react';
 
 /** Call this before hydrating to seed the client cache from the server's data.
@@ -68,6 +68,55 @@ declare const Head: React.FC<{
     status?: number;
 }>;
 
+interface HadarsImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    alt: string;
+    /**
+     * Pixel widths to include in the `srcset`. Must match (or be a subset of)
+     * the `images.widths` configured in `hadars.config.ts`.
+     * Default: `[640, 1280, 1920]`.
+     */
+    widths?: number[];
+    /**
+     * Formats to offer, in preference order (most-preferred first).
+     * Browsers pick the first format they support.
+     * Default: `['webp']`.
+     */
+    formats?: ('webp' | 'avif')[];
+    /**
+     * `sizes` attribute forwarded to both `<source>` and the fallback `<img>`.
+     * Default: `'100vw'`.
+     */
+    sizes?: string;
+}
+/**
+ * Responsive image component.
+ *
+ * Renders a `<picture>` element with `<source>` elements pointing at the
+ * build-time variants generated by `hadars build` or `hadars export static`.
+ * Variants are served from `/_images/<src-without-ext>-<width>.<format>`.
+ *
+ * Configure variant generation in `hadars.config.ts`:
+ * ```ts
+ * import type { HadarsOptions } from 'hadars';
+ * export default {
+ *   images: { widths: [640, 1280, 1920], formats: ['webp', 'avif'], quality: 85 },
+ * } satisfies HadarsOptions;
+ * ```
+ *
+ * Falls back to the original `src` for browsers without `<picture>` support,
+ * and always sets `loading="lazy"` and `decoding="async"` unless overridden.
+ *
+ * @example
+ * <HadarsImage
+ *   src="/photos/hero.jpg"
+ *   alt="A scenic mountain view"
+ *   widths={[640, 1280, 1920]}
+ *   sizes="(max-width: 768px) 100vw, 50vw"
+ * />
+ */
+declare function HadarsImage({ src, alt, widths, formats, sizes, loading, decoding, ...rest }: HadarsImageProps): React.ReactElement;
+
 /**
  * Dynamically loads a module with target-aware behaviour:
  *
@@ -92,4 +141,4 @@ declare const Head: React.FC<{
  */
 declare function loadModule<T = any>(path: string): Promise<T>;
 
-export { HadarsDocumentNode, Head as HadarsHead, initServerDataCache, loadModule, useGraphQL, useServerData };
+export { HadarsDocumentNode, Head as HadarsHead, HadarsImage, type HadarsImageProps, initServerDataCache, loadModule, useGraphQL, useServerData };

package/dist/index.js

@@ -304,6 +304,55 @@ var Head = React.memo(({ children, status }) => {
   return null;
 });
 
+// src/components/Image.tsx
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FORMAT_MIME = {
+  webp: "image/webp",
+  avif: "image/avif"
+};
+function HadarsImage({
+  src,
+  alt,
+  widths = [640, 1280, 1920],
+  formats = ["webp"],
+  sizes = "100vw",
+  loading = "lazy",
+  decoding = "async",
+  ...rest
+}) {
+  const dotIdx = src.lastIndexOf(".");
+  const srcNoExt = dotIdx !== -1 ? src.slice(0, dotIdx) : src;
+  const imgBase = "/_images" + srcNoExt;
+  const buildSrcSet = (fmt) => widths.map((w) => `${imgBase}-${w}.${fmt} ${w}w`).join(", ");
+  const orderedFormats = [...formats].sort((a, b) => {
+    const rank = { avif: 0, webp: 1 };
+    return (rank[a] ?? 2) - (rank[b] ?? 2);
+  });
+  return /* @__PURE__ */ jsxs("picture", { children: [
+    orderedFormats.map((fmt) => /* @__PURE__ */ jsx(
+      "source",
+      {
+        type: FORMAT_MIME[fmt] ?? `image/${fmt}`,
+        srcSet: buildSrcSet(fmt),
+        sizes
+      },
+      fmt
+    )),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        loading,
+        decoding,
+        sizes,
+        ...rest
+      }
+    )
+  ] });
+}
+
 // src/index.tsx
 function loadModule(path) {
   return import(
@@ -313,6 +362,7 @@ function loadModule(path) {
 }
 export {
   Head as HadarsHead,
+  HadarsImage,
   initServerDataCache,
   loadModule,
   useGraphQL,

package/dist/lambda.cjs

@@ -1228,8 +1228,8 @@ var ATTR = {
   fetchPriority: "fetchpriority",
   hrefLang: "hreflang"
 };
-function renderHeadTag(tag, id, opts, selfClose = false) {
-  let attrs = ` id="${escAttr(id)}"`;
+function renderHeadTag(tag, _id, opts, selfClose = false) {
+  let attrs = "";
   let inner = "";
   for (const [k, v] of Object.entries(opts)) {
     if (k === "key" || k === "children") continue;
@@ -1554,15 +1554,18 @@ function createLambdaHandler(options, bundled) {
         getInitProps,
         getFinalProps
       } = await getSsrModule();
+      const isDataOnly = request.headers.get("Accept") === "application/json";
       const { head, status, getAppBody, finalize } = await getReactResponse(request, {
         document: {
           body: Component,
           lang: "en",
           getInitProps,
           getFinalProps
-        }
+        },
+        singlePass: !isDataOnly,
+        dataOnly: isDataOnly
       });
-      if (request.headers.get("Accept") === "application/json") {
+      if (isDataOnly) {
         const { clientProps: clientProps2 } = await finalize();
         const serverData = clientProps2.__serverData ?? {};
         return new Response(JSON.stringify({ serverData }), {

package/dist/lambda.d.cts

@@ -1,4 +1,4 @@
-import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-CPplIz_z.cjs';
+import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-gkIw8CFo.cjs';
 
 /**
  * AWS Lambda adapter for hadars.

package/dist/lambda.d.ts

@@ -1,4 +1,4 @@
-import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-CPplIz_z.js';
+import { H as HadarsEntryModule, a as HadarsOptions } from './hadars-gkIw8CFo.js';
 
 /**
  * AWS Lambda adapter for hadars.

package/dist/lambda.js

@@ -6,7 +6,7 @@ import {
   getReactResponse,
   makePrecontentHtmlGetter,
   parseRequest
-} from "./chunk-B4NE4AIT.js";
+} from "./chunk-QGDQJUIU.js";
 import "./chunk-6SOA2HTO.js";
 import "./chunk-OZUZS2PD.js";
 
@@ -152,15 +152,18 @@ function createLambdaHandler(options, bundled) {
         getInitProps,
         getFinalProps
       } = await getSsrModule();
+      const isDataOnly = request.headers.get("Accept") === "application/json";
       const { head, status, getAppBody, finalize } = await getReactResponse(request, {
         document: {
           body: Component,
           lang: "en",
           getInitProps,
           getFinalProps
-        }
+        },
+        singlePass: !isDataOnly,
+        dataOnly: isDataOnly
       });
-      if (request.headers.get("Accept") === "application/json") {
+      if (isDataOnly) {
         const { clientProps: clientProps2 } = await finalize();
         const serverData = clientProps2.__serverData ?? {};
         return new Response(JSON.stringify({ serverData }), {

package/dist/ssr-render-worker.js

@@ -1026,8 +1026,8 @@ var ATTR = {
   fetchPriority: "fetchpriority",
   hrefLang: "hreflang"
 };
-function renderHeadTag(tag, id, opts, selfClose = false) {
-  let attrs = ` id="${escAttr(id)}"`;
+function renderHeadTag(tag, _id, opts, selfClose = false) {
+  let attrs = "";
   let inner = "";
   for (const [k, v] of Object.entries(opts)) {
     if (k === "key" || k === "children")
@@ -1114,15 +1114,35 @@ async function runFullLifecycle(serialReq) {
   const html = `<div id="app">${appHtml}</div><script id="hadars" type="application/json">${scriptContent}</script>`;
   return { html, headHtml, status };
 }
-parentPort.on("message", async (msg) => {
-  const { id, type, request } = msg;
+var _draining = false;
+var _queue = [];
+function enqueue(task) {
+  _queue.push(task);
+  if (!_draining)
+    drain();
+}
+async function drain() {
+  _draining = true;
   try {
-    await init();
-    if (type !== "renderFull")
-      return;
-    const { html, headHtml, status } = await runFullLifecycle(request);
-    parentPort.postMessage({ id, html, headHtml, status });
-  } catch (err) {
-    parentPort.postMessage({ id, error: err?.message ?? String(err) });
+    while (_queue.length > 0) {
+      const task = _queue.shift();
+      await task();
+    }
+  } finally {
+    _draining = false;
   }
+}
+parentPort.on("message", (msg) => {
+  const { id, type, request } = msg;
+  enqueue(async () => {
+    try {
+      await init();
+      if (type !== "renderFull")
+        return;
+      const { html, headHtml, status } = await runFullLifecycle(request);
+      parentPort.postMessage({ id, html, headHtml, status });
+    } catch (err) {
+      parentPort.postMessage({ id, error: err?.message ?? String(err), stack: err?.stack });
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hadars",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Minimal SSR framework for React — rspack, HMR, TypeScript, Bun/Node/Deno",
   "module": "./dist/index.js",
   "type": "module",