jskelet 0.6.17 → 0.7.1

package/CHANGELOG.md

@@ -8,6 +8,25 @@ one is listed under a **Breaking** heading.
 
 ## [Unreleased]
 
+### Changed
+
+- `.jsk` codegen merges adjacent static HTML into fewer `+=` ops and drops
+  template indentation (newline-only whitespace). A lone space between
+  inline siblings is kept; `pre` / `textarea` / `script` / `style` / `code`
+  preserve whitespace. Framework default `layout.render.js` regenerated.
+- `.jsk` page layout no longer copies the full helpers object into `data`
+  each render (EJS layouts still receive helpers as locals).
+- `esc()` skips the regex replace when the string has no special characters;
+  `attrs()` builds the attribute string without an intermediate array.
+- Compiled templates and JS components load with parallel `import` on first
+  render; production skips the `.jsk` mtime scan when a template manifest
+  already exists.
+- `icon()` caches the sprite URL in production; `Image` `fill` without an
+  extra `class` skips `twMerge`; `optimizedImage()` materializes CDN-prefixed
+  variant URLs once at load time.
+- `scripts/measure-ssr.mjs` microbench for fixture `renderView` /
+  `renderPage` and live cache MISS/HIT timings against a running app.
+
 ### Fixed
 
 - S3 PutObject uses path-style URLs for bucket names that contain dots
@@ -17,6 +36,10 @@ one is listed under a **Breaking** heading.
 
 ### Added
 
+- Dev tools **Server** tab can clear the HTML cache for the open page, every
+  HTML entry, or the data cache. Live stats include HTML/data entry counts;
+  new endpoints under `devBasePath`: `POST /cache/clear-html`,
+  `/cache/clear-data`, and `/cache/invalidate`.
 - On-demand HTML cache via `cache().prewarm: false`: visited pages still
   write to L1 and Redis/disk L2 with the usual `html` TTLs, but classic
   prewarm, `onVisit` link warming, and early-expiry HTTP refresh stay off

package/docs/04-render-ve-sablonlar.md

@@ -73,6 +73,12 @@ controller data → import edilmiş render(data, helpers) → HTML
 Atama, object literal ve rastgele fonksiyon çağrısı yok — mantık controller
 veya JS bileşende kalır.
 
+Derleyici bitişik statik HTML’i tek literal’de birleştirir ve **şablon
+girintisini** düşürür: satır sonu içeren salt-whitespace metin düğümleri
+çıktıya girmez; etiketler arasında yalnızca boşluk/tab varsa tek boşluk
+kalır (inline aralık). `pre`, `textarea`, `script`, `style` ve `code`
+içinde whitespace olduğu gibi korunur.
+
 #### Şablon mu, bileşen mi?
 
 EJS’den geçerken sınırı erken çizmek işe yarar:
@@ -199,11 +205,15 @@ Dikkat edilecek noktalar:
 | `lang` | `string` | `context.lang` → `brand.lang` → `"en"` |
 | `devtools` | `boolean` | `NODE_ENV === "development"` |
 | `devBasePath` | `string` | `brand.devBasePath`, varsayılan `/__jskelet/dev` |
-| `asset`, `hasAsset` | fonksiyon | Manifest erişimi |
-| html/tags yardımcıları | fonksiyon | `esc`, `attrs`, `cx`, `cn`, `jsonScript`, `link`, `image`, `icon`, `preloadImage`, `toKebab` |
-| `views/components/**` export'ları | fonksiyon | Otomatik kayıt |
+| `asset`, `hasAsset` | fonksiyon | Manifest erişimi (EJS local; `.jsk`’de ikinci `helpers` argümanı / yerleşik etiketler) |
+| html/tags yardımcıları | fonksiyon | `esc`, `attrs`, `cx`, `cn`, `jsonScript`, `link`, `image`, `icon`, `preloadImage`, `toKebab` — aynı ayrım |
+| `views/components/**` export'ları | fonksiyon | Otomatik kayıt (PascalCase etiket veya EJS local) |
 | `hooks.layoutContext()` çıktısındaki her alan | — | Doğrudan local olur |
 
+`.jsk` layout `(data, helpers)` aldığı için framework helpers nesnesini her
+render’da `data`’ya kopyalamaz; EJS layout hâlâ bare helper adlarını local
+olarak alır.
+
 `pathname`'in boş varsayılanı bilinçli: `"/"` yazmak her sayfayı ana sayfa
 sanıp logoyu `<h1>` olarak bastıran türde hatalara yol açıyor.
 

package/docs/09-dev-araclari.md

@@ -208,6 +208,11 @@ Gösterdikleri:
   bloke süresi.
 - **Prewarm:** ısıtma turunun ilerlemesi; panelden elle tetiklenebilir, tek tek
   yollar tekrar denenebilir.
+- **Önbellek (Server sekmesi):** HTML ve veri girdisi sayıları; **Clear this
+  page** açık yolun bütün varyantlarını sert düşürüp sayfayı yeniler, **Clear
+  all HTML** / **Clear data cache** süreç önbelleğini boşaltır (onay ister).
+  Aynı işlemler admin panelindeki `html:invalidate` / `html:clear` /
+  `data:clear` ile paylaşılır.
 - **Süreç:** pid, Node sürümü, uptime, RSS ve heap kullanımı.
 - **Sürüm:** kurulu JSkelet sürümü ve npm'deki `latest` ile karşılaştırması.
   Yeni bir sürüm varsa **Server** sekmesinde `update` rozeti ve yükseltme
@@ -297,6 +302,9 @@ Rapor katmanı yalnızca development'ta yüklenir, üretim çıktısına hiç gi
 | `/report/clear` | POST | Sayfa ölçümlerini ve sunucu API kayıtlarını sıfırlar |
 | `/prewarm` | POST | Isıtmayı elle tetikler. Gövdede `paths` varsa yalnızca o yollar; ısıtma zaten çalışıyorsa 409. |
 | `/clear` | POST | İstek ve hata günlüklerini sıfırlar |
+| `/cache/clear-html` | POST | Tüm HTML önbelleğini boşaltır; `{ cleared }` döner |
+| `/cache/clear-data` | POST | Veri önbelleğini boşaltır. Gövdede isteğe bağlı `prefix`; `{ cleared }` döner |
+| `/cache/invalidate` | POST | Gövdede `path` (zorunlu, `/` ile başlamalı) ve isteğe bağlı `hard` (varsayılan `true`). Etkilenen girdi sayısıyla `{ count }` döner |
 
 Bu uçların tamamı `mountDevtools()` tarafından yalnızca
 `NODE_ENV=development` iken bağlanır; prod sürecine dinamik import sayesinde

package/docs/en/04-rendering.md

@@ -74,6 +74,12 @@ The expression language is intentionally small (access, compare, ternary,
 `.length`). No assignments, object literals, or arbitrary calls — keep logic in
 controllers or JS components.
 
+The compiler merges adjacent static HTML into fewer `+=` ops and strips
+**template indentation**: whitespace-only text nodes that contain a newline are
+dropped; a space/tab-only gap between siblings stays as a single space (inline
+separation). Inside `pre`, `textarea`, `script`, `style`, and `code`, whitespace
+is left unchanged.
+
 #### Template or component?
 
 When moving off EJS, draw the line early:
@@ -198,11 +204,15 @@ Points to watch:
 | `lang` | `string` | `context.lang` → `brand.lang` → `"en"` |
 | `devtools` | `boolean` | `NODE_ENV === "development"` |
 | `devBasePath` | `string` | `brand.devBasePath`, defaults to `/__jskelet/dev` |
-| `asset`, `hasAsset` | function | Manifest access |
-| html/tags helpers | function | `esc`, `attrs`, `cx`, `cn`, `jsonScript`, `link`, `image`, `icon`, `preloadImage`, `toKebab` |
-| exports of `views/components/**` | function | Automatic registration |
+| `asset`, `hasAsset` | function | Manifest access (EJS local; in `.jsk` the second `helpers` argument / built-in tags) |
+| html/tags helpers | function | `esc`, `attrs`, `cx`, `cn`, `jsonScript`, `link`, `image`, `icon`, `preloadImage`, `toKebab` — same split |
+| exports of `views/components/**` | function | Automatic registration (PascalCase tags or EJS locals) |
 | every field returned by `hooks.layoutContext()` | — | Becomes a local directly |
 
+Because a `.jsk` layout receives `(data, helpers)`, the framework does not copy
+the helpers object into `data` on every render; EJS layouts still get bare
+helper names as locals.
+
 The empty default for `pathname` is deliberate: writing `"/"` leads to the kind
 of bug where every page thinks it is the home page and renders the logo as an
 `<h1>`.

package/docs/en/09-dev-tools.md

@@ -213,6 +213,11 @@ What it shows:
   blocking time.
 - **Prewarm:** the progress of the warming round; it can be triggered manually
   from the panel, and individual paths can be retried.
+- **Cache (Server tab):** HTML and data entry counts; **Clear this page**
+  hard-drops every variant of the open path and reloads, **Clear all HTML** /
+  **Clear data cache** empty the in-process caches (with a confirm). Same
+  core APIs as the admin panel's `html:invalidate` / `html:clear` /
+  `data:clear`.
 - **Process:** pid, Node version, uptime, RSS and heap usage.
 - **Version:** the installed JSkelet version compared against the `latest` tag
   on npm. When a newer release exists, the **Server** tab grows an `update` chip
@@ -302,6 +307,9 @@ Under `brand.devBasePath` (default `/__jskelet/dev`):
 | `/report/clear` | POST | Resets page measurements and server API records |
 | `/prewarm` | POST | Triggers warming manually. If the body has `paths`, only those paths; 409 if warming is already running. |
 | `/clear` | POST | Resets the request and error logs |
+| `/cache/clear-html` | POST | Clears the entire HTML cache; returns `{ cleared }` |
+| `/cache/clear-data` | POST | Clears the data cache. Optional `prefix` in the body; returns `{ cleared }` |
+| `/cache/invalidate` | POST | Body: required `path` (must start with `/`) and optional `hard` (default `true`). Returns `{ count }` for affected entries |
 
 All of these endpoints are mounted by `mountDevtools()` only when
 `NODE_ENV=development`; thanks to the dynamic import, nothing is loaded into the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jskelet",
-  "version": "0.6.17",
+  "version": "0.7.1",
   "description": "A framework that feels like no framework: Express 5 + build-time .jsk SSR (optional EJS peer), vanilla JS islands, Tailwind v4 and an in-process HTML TTL cache.",
   "type": "module",
   "license": "MIT",

package/src/client/devtools/overlay.js

@@ -861,6 +861,93 @@ async function clearAll() {
   pollServer();
 }
 
+/** Son önbellek eyleminin kısa geri bildirimi; sonraki poll'da silinmez. */
+let cacheNotice = null;
+/** @type {ReturnType<typeof setTimeout> | null} */
+let cacheNoticeTimer = null;
+
+/**
+ * @param {string} message
+ */
+function setCacheNotice(message) {
+  cacheNotice = message;
+  if (cacheNoticeTimer) clearTimeout(cacheNoticeTimer);
+  cacheNoticeTimer = setTimeout(() => {
+    cacheNotice = null;
+    cacheNoticeTimer = null;
+    lastBody = "";
+    render();
+  }, 4000);
+  lastBody = "";
+  render();
+}
+
+/**
+ * Bu sekmenin HTML önbelleğini düşürür ve sayfayı yeniler — aksi hâlde
+ * tarayıcıdaki DOM eski kalır, soğuk render görülmez.
+ */
+async function clearThisPageCache() {
+  const path = location.pathname || "/";
+  try {
+    await fetch(`${BASE}/cache/invalidate`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ path, hard: true }),
+    });
+  } catch {
+    setCacheNotice("Could not reach the server to clear this page.");
+    return;
+  }
+  saveState();
+  location.reload();
+}
+
+async function clearHtmlCacheAll() {
+  if (
+    !confirm(
+      "Clear the entire HTML cache? Every page goes cold until the next render or prewarm.",
+    )
+  ) {
+    return;
+  }
+
+  try {
+    const response = await fetch(`${BASE}/cache/clear-html`, { method: "POST" });
+    const body = await response.json().catch(() => ({}));
+    setCacheNotice(
+      `HTML cache cleared (${typeof body.cleared === "number" ? body.cleared : "?"} entries).`,
+    );
+  } catch {
+    setCacheNotice("Could not clear the HTML cache.");
+  }
+  pollServer();
+}
+
+async function clearDataCacheAll() {
+  if (
+    !confirm(
+      "Clear every data-cache entry? Upstream traffic will spike on the next renders.",
+    )
+  ) {
+    return;
+  }
+
+  try {
+    const response = await fetch(`${BASE}/cache/clear-data`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({}),
+    });
+    const body = await response.json().catch(() => ({}));
+    setCacheNotice(
+      `Data cache cleared (${typeof body.cleared === "number" ? body.cleared : "?"} entries).`,
+    );
+  } catch {
+    setCacheNotice("Could not clear the data cache.");
+  }
+  pollServer();
+}
+
 /* ---------------------------------------------------------------- arayüz */
 
 const CSS = `
@@ -1162,6 +1249,7 @@ h4 .head-action { float: inline-end; text-transform: none; letter-spacing: 0; }
 .status.warn { background: rgba(251,191,36,.14); color: var(--mid); }
 .status.bad { background: rgba(251,113,133,.14); color: var(--bad); }
 .hint { color: var(--muted); font-size: 10.5px; }
+.hint.block { display: block; margin: 0 0 8px; line-height: 1.45; }
 .row .good { color: var(--good); } .row .mid { color: var(--mid); } .row .bad { color: var(--bad); }
 .row.clickable { cursor: pointer; grid-template-columns: auto auto 1fr auto auto; }
 .row.clickable.selected { border-color: rgba(255,255,255,.22); background: var(--surface-hover); }
@@ -1200,9 +1288,14 @@ h4 .head-action { float: inline-end; text-transform: none; letter-spacing: 0; }
 .btn.mini { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: 11px; }
 .btn.mini svg { width: 12px; height: 12px; }
 .btn[disabled] { opacity: .5; cursor: default; }
-.toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
+.toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-bottom: 10px; }
+.toolbar.start { justify-content: flex-start; }
 .btn.danger { color: #ffc9d2; border-color: rgba(251,113,133,.28); background: rgba(251,113,133,.1); }
 .btn.danger:hover { color: #fff; border-color: rgba(251,113,133,.55); background: rgba(251,113,133,.22); }
+.notice {
+  margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4;
+  color: #b9f2dc; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.28);
+}
 `;
 
 let shadow = null;
@@ -2022,6 +2115,14 @@ function serverTab() {
       { label: "Avg. render", value: ms(average), tone: grade(average, [150, 500]) },
       { label: "Slowest", value: ms(slowest), tone: grade(slowest, [300, 1000]) },
       { label: "Restart", value: String(restarts), tone: offline ? "mid" : "" },
+      {
+        label: "HTML cache",
+        value: String(serverStats.cache?.html ?? 0),
+      },
+      {
+        label: "Data cache",
+        value: String(serverStats.cache?.data ?? 0),
+      },
       ...(serverStats.prewarm?.total
         ? [
             {
@@ -2033,6 +2134,7 @@ function serverTab() {
           ]
         : []),
     ])}
+    ${cacheSection()}
     ${upstreamSection()}
     <h4>Recent requests</h4>
     ${
@@ -2052,6 +2154,42 @@ function serverTab() {
   `;
 }
 
+/**
+ * HTML / veri önbelleğini panelden boşaltma. Admin panelindeki aynı işlemlerin
+ * kısa yolu; "bu sayfa" mevcut `location.pathname` için sert düşürme yapar.
+ *
+ * @returns {string}
+ */
+function cacheSection() {
+  const path = location.pathname || "/";
+  const html = serverStats?.cache?.html ?? 0;
+  const data = serverStats?.cache?.data ?? 0;
+
+  return `
+    <h4>Cache</h4>
+    ${
+      cacheNotice
+        ? `<div class="notice">${escapeHtml(cacheNotice)}</div>`
+        : ""
+    }
+    <p class="hint block">
+      In-process HTML (${html}) and data (${data}) entries.
+      Clearing this page drops every variant of <code>${escapeHtml(path)}</code> and reloads.
+    </p>
+    <div class="toolbar start">
+      <button class="btn mini" data-action="cache-page" title="Hard-drop HTML for ${escapeHtml(path)}">
+        ${TRASH_ICON} Clear this page
+      </button>
+      <button class="btn mini danger" data-action="cache-html" title="Clear every HTML cache entry">
+        ${TRASH_ICON} Clear all HTML
+      </button>
+      <button class="btn mini danger" data-action="cache-data" title="Clear every data-cache entry">
+        ${TRASH_ICON} Clear data cache
+      </button>
+    </div>
+  `;
+}
+
 /**
  * Upstream hız freninin durumu. Fren kapalıysa (varsayılan) hiçbir şey
  * basılmaz; açıkken 429 fırtınasında hızın nereye indiğini görmek, ayarı
@@ -2224,7 +2362,7 @@ const ABOUT = {
       <div class="step"><span class="n">1</span><span><b>Route</b><span><code>server/routes/</code> matches the URL and hands the request to the right controller.</span></span></div>
       <div class="step"><span class="n">2</span><span><b>Controller</b><span><code>server/controllers/</code> gathers the data it needs from the <code>lib/</code> services and prepares the model for the template.</span></span></div>
       <div class="step"><span class="n">3</span><span><b>Render</b><span><code>server/render.js</code> runs the EJS template and prints manifest entries and head hints into the layout.</span></span></div>
-      <div class="step"><span class="n">4</span><span><b>HTML cache</b><span><code>server/html-cache.js</code> stores the output; if the same URL is requested again the template never runs. The <code>cached</code> label on the Server tab shows this.</span></span></div>
+      <div class="step"><span class="n">4</span><span><b>HTML cache</b><span><code>server/html-cache.js</code> stores the output; if the same URL is requested again the template never runs. The Server tab shows entry counts and can clear this page, all HTML, or the data cache.</span></span></div>
       <div class="step"><span class="n">5</span><span><b>Response</b><span>Compression and cache headers are decided in <code>server/middleware/</code>; responses like event streams skip compression.</span></span></div>
     </div>
     <p><strong>Prewarming:</strong> <code>server/prewarm.js</code> visits the most travelled
@@ -2734,6 +2872,21 @@ function bind(root) {
     }
 
     if (target.dataset.action === "clear") clearAll();
+
+    if (target.dataset.action === "cache-page") {
+      void clearThisPageCache();
+      return;
+    }
+
+    if (target.dataset.action === "cache-html") {
+      void clearHtmlCacheAll();
+      return;
+    }
+
+    if (target.dataset.action === "cache-data") {
+      void clearDataCacheAll();
+      return;
+    }
   });
 }
 

package/src/compile/codegen.js

@@ -1,6 +1,10 @@
 /**
  * AST → ESM kaynak metni. `eval` / `new Function` yok; çıktı diskteki
  * `.mjs` dosyasına yazılır ve runtime'da normal `import` ile yüklenir.
+ *
+ * Statik HTML parçaları bitişik `s +=` yerine tek literal'de birleşir;
+ * şablon girintisi (satır sonu içeren salt-whitespace) derlemede düşer.
+ * `pre` / `textarea` / `script` / `style` / `code` içinde whitespace korunur.
  */
 import { codegenExpr } from "./expr.js";
 import { CompileError } from "./errors.js";
@@ -10,6 +14,9 @@ import { CompileError } from "./errors.js";
  * @typedef {import('./parse.js').AttrNode} AttrNode
  */
 
+/** İçinde girinti sıkıştırması yapılmayan etiketler. */
+const PRESERVE_WS = new Set(["pre", "textarea", "script", "style", "code"]);
+
 /**
  * @param {AstNode[]} ast
  * @param {{ viewId: string, file?: string, knownComponents?: Set<string> }} options
@@ -49,6 +56,21 @@ export function toPascalCase(name) {
     .join("");
 }
 
+/**
+ * Şablon girintisini düşür: satır sonu içeren salt-whitespace → boş;
+ * yalnızca boşluk/tab → tek boşluk (inline aralık). Koruma alanı dışında.
+ *
+ * @param {string} value
+ * @param {boolean} preserve
+ * @returns {string}
+ */
+export function collapseTemplateWhitespace(value, preserve) {
+  if (preserve || !value) return value;
+  if (!/^[\t\n\r\f\v ]+$/.test(value)) return value;
+  if (/[\n\r]/.test(value)) return "";
+  return " ";
+}
+
 class CodegenContext {
   /**
    * @param {{ viewId: string, file?: string, knownComponents?: Set<string> }} options
@@ -71,6 +93,10 @@ class CodegenContext {
     this.locals = new Set();
     /** Çocuk gövdesinde `s` yerine kullanılacak değişken. */
     this.outVar = "s";
+    /** Bitişik statik parçalar — flush edilene kadar birikir. */
+    this.staticBuf = "";
+    /** `pre` vb. iç içe derinliği. */
+    this.preserveWs = 0;
   }
 
   /**
@@ -81,9 +107,28 @@ class CodegenContext {
   }
 
   /**
+   * Birikmiş statik HTML'i tek `+=` olarak yazar.
+   * @returns {void}
+   */
+  flushStatic() {
+    if (!this.staticBuf) return;
+    this.line(`${this.outVar} += ${JSON.stringify(this.staticBuf)};`);
+    this.staticBuf = "";
+  }
+
+  /**
+   * @param {string} text
+   */
+  appendStatic(text) {
+    if (text) this.staticBuf += text;
+  }
+
+  /**
+   * Dinamik ifade — önce statik tamponu boşaltır.
    * @param {string} exprJs
    */
   append(exprJs) {
+    this.flushStatic();
     this.line(`${this.outVar} += ${exprJs};`);
   }
 
@@ -105,9 +150,14 @@ class CodegenContext {
    */
   emit(node) {
     switch (node.type) {
-      case "Text":
-        if (node.value) this.append(JSON.stringify(node.value));
+      case "Text": {
+        const value = collapseTemplateWhitespace(
+          node.value,
+          this.preserveWs > 0,
+        );
+        if (value) this.appendStatic(value);
         break;
+      }
       case "Interp": {
         const expr = codegenExpr(node.expr, this.locals);
         if (node.raw) this.append(`(${expr} ?? "")`);
@@ -139,17 +189,21 @@ class CodegenContext {
    */
   emitElement(node) {
     const bound = node.attrs.some((a) => a.bound);
+    const preserve = PRESERVE_WS.has(node.name.toLowerCase());
+
     if (bound) {
       this.append(
         `"<${node.name}" + helpers.attrs({${this.attrsObject(node.attrs)}}) + ">"`,
       );
     } else {
-      this.append(JSON.stringify(`<${node.name}${staticAttrString(node.attrs)}>`));
+      this.appendStatic(`<${node.name}${staticAttrString(node.attrs)}>`);
     }
 
     if (!node.selfClosing) {
+      if (preserve) this.preserveWs += 1;
       this.emitNodes(node.children);
-      this.append(JSON.stringify(`</${node.name}>`));
+      if (preserve) this.preserveWs -= 1;
+      this.appendStatic(`</${node.name}>`);
     }
   }
 
@@ -186,13 +240,18 @@ class CodegenContext {
 
     if (node.children.length) {
       const tmp = this.nextTemp();
+      this.flushStatic();
       this.line(`{`);
       this.indent += 1;
       this.line(`let ${tmp} = "";`);
       const prevOut = this.outVar;
+      const prevStatic = this.staticBuf;
       this.outVar = tmp;
+      this.staticBuf = "";
       this.emitNodes(node.children);
+      this.flushStatic();
       this.outVar = prevOut;
+      this.staticBuf = prevStatic;
       const propsWithChildren = props
         ? `${props}, children: ${tmp}`
         : `children: ${tmp}`;
@@ -209,14 +268,17 @@ class CodegenContext {
    */
   emitIf(node) {
     const test = codegenExpr(node.test, this.locals);
+    this.flushStatic();
     this.line(`if (${test}) {`);
     this.indent += 1;
     this.emitNodes(node.consequent);
+    this.flushStatic();
     this.indent -= 1;
     if (node.alternate.length) {
       this.line(`} else {`);
       this.indent += 1;
       this.emitNodes(node.alternate);
+      this.flushStatic();
       this.indent -= 1;
     }
     this.line(`}`);
@@ -228,6 +290,7 @@ class CodegenContext {
   emitEach(node) {
     const list = codegenExpr(node.list, this.locals);
     const idx = node.indexName ?? `__i${++this.temp}`;
+    this.flushStatic();
     this.line(`{`);
     this.indent += 1;
     this.line(`const __list = ${list} ?? [];`);
@@ -239,6 +302,7 @@ class CodegenContext {
     this.locals.add(idx);
     if (node.indexName) this.locals.add(node.indexName);
     this.emitNodes(node.children);
+    this.flushStatic();
     this.locals = prev;
     this.indent -= 1;
     this.line(`}`);
@@ -259,6 +323,8 @@ class CodegenContext {
 
   /** @returns {string} */
   finish() {
+    this.flushStatic();
+
     const imports = [...this.includes]
       .map((id) => {
         const alias = includeAlias(id);

package/src/compile/compile-all.js

@@ -3,6 +3,7 @@
  */
 import fs from "node:fs";
 import path from "node:path";
+import process from "node:process";
 import { parseTemplate } from "./parse.js";
 import { codegen, normalizeIncludeId } from "./codegen.js";
 import { CompileError } from "./errors.js";
@@ -97,7 +98,9 @@ export async function compileAll(config, _options = {}) {
 }
 
 /**
- * Manifest yoksa veya herhangi bir `.jsk` daha yeniyse yeniden derler.
+ * Manifest yoksa veya (dev'de) herhangi bir `.jsk` daha yeniyse yeniden derler.
+ * Production'da manifest varsa mtime taraması atlanır — `jskelet build` CI
+ * güvencesi; ilk istekte yüzlerce `statSync` cold start'ı şişirmesin.
  * Dev sunucu restart'ında build watch kaçırmış olsa bile şablonlar güncel kalır.
  *
  * @param {{ root: string, dirs: Record<string, string> }} config
@@ -112,6 +115,12 @@ export async function ensureTemplatesCompiled(config) {
 
   const outDir = path.join(config.dirs.generated, "templates");
   const manifestPath = path.join(outDir, "manifest.json");
+  const isProd = process.env.NODE_ENV === "production";
+
+  if (fs.existsSync(manifestPath) && isProd) {
+    return { count: jskFiles.size, rebuilt: false };
+  }
+
   let needs = !fs.existsSync(manifestPath);
 
   if (!needs) {

package/src/compile/index.js

@@ -4,7 +4,12 @@
 export { CompileError, indexToLocation } from "./errors.js";
 export { parseExpr, codegenExpr } from "./expr.js";
 export { parseTemplate, isComponentTag } from "./parse.js";
-export { codegen, toPascalCase, normalizeIncludeId } from "./codegen.js";
+export {
+  codegen,
+  toPascalCase,
+  normalizeIncludeId,
+  collapseTemplateWhitespace,
+} from "./codegen.js";
 export {
   getViewRoots,
   getComponentDirs,

package/src/server/assets.js

@@ -151,6 +151,55 @@ export function getBuildId() {
 /** @type {Record<string, OptimizedImage> | null} */
 let images = null;
 
+/** Prefix uygulanmış kopya — her `optimizedImage` çağrısında map/spread yok. */
+/** @type {Record<string, OptimizedImage> | null} */
+let imagesPrefixed = null;
+
+/** @type {string | null} */
+let imagesPrefix = null;
+
+/**
+ * `images.json` yükler; CDN prefix varsa varyant URL'lerini bir kez materialize eder.
+ * @returns {Record<string, OptimizedImage>}
+ */
+function loadImages() {
+  const prefix = assetPrefix();
+  if (!isDev && images && imagesPrefix === prefix) {
+    return imagesPrefixed ?? images;
+  }
+
+  /** @type {Record<string, OptimizedImage>} */
+  let raw = {};
+  try {
+    const file = path.join(getConfig().dirs.generated, "images.json");
+    raw = JSON.parse(fs.readFileSync(file, "utf8")).images ?? {};
+  } catch {
+    raw = {};
+  }
+
+  images = raw;
+  imagesPrefix = prefix;
+
+  if (!prefix) {
+    imagesPrefixed = raw;
+    return raw;
+  }
+
+  /** @type {Record<string, OptimizedImage>} */
+  const prefixed = {};
+  for (const [key, entry] of Object.entries(raw)) {
+    prefixed[key] = {
+      ...entry,
+      variants: entry.variants.map((variant) => ({
+        ...variant,
+        url: applyAssetPrefix(prefix, variant.url),
+      })),
+    };
+  }
+  imagesPrefixed = prefixed;
+  return prefixed;
+}
+
 /**
  * `build/tasks/images.mjs` çıktısı: kaynak yolundan webp varyantlarına.
  * Build çalışmadıysa boş kalır ve görseller orijinalleriyle servis edilir.
@@ -159,29 +208,9 @@ let images = null;
  * @returns {OptimizedImage | undefined}
  */
 export function optimizedImage(src) {
-  if (isDev || !images) {
-    try {
-      const file = path.join(getConfig().dirs.generated, "images.json");
-      images = JSON.parse(fs.readFileSync(file, "utf8")).images ?? {};
-    } catch {
-      images = {};
-    }
-  }
-
+  const table = loadImages();
   if (!src) return undefined;
-  const entry = images[src];
-  if (!entry) return undefined;
-
-  const prefix = assetPrefix();
-  if (!prefix) return entry;
-
-  return {
-    ...entry,
-    variants: entry.variants.map((variant) => ({
-      ...variant,
-      url: applyAssetPrefix(prefix, variant.url),
-    })),
-  };
+  return table[src];
 }
 
 /** @type {{ url: string, ids: Set<string> } | null} */

package/src/server/dev/devtools.js

@@ -15,7 +15,12 @@ import * as log from "../../log.mjs";
 import { FRAMEWORK_ROOT, getConfig } from "../../config/index.js";
 import { getRequestContext } from "../../http/request-context.js";
 import { prewarm, prewarmProgress } from "../prewarm.js";
-import { clearHtmlCache } from "../html-cache.js";
+import {
+  clearHtmlCache,
+  getHtmlCacheSize,
+  invalidateHtmlCache,
+} from "../html-cache.js";
+import { clearDataCache, getDataCacheSize } from "../data-cache.js";
 import {
   buildReport,
   clearPageReports,
@@ -325,6 +330,12 @@ function statsPayload() {
     version: versionStatus(),
     memory: { rss: usage.rss, heapUsed: usage.heapUsed },
     prewarm: { ...prewarmProgress },
+    // Overlay Server sekmesindeki önbellek sayaçları; her kalp atışında
+    // güncellenir ki temizleme sonrası yenilemeye gerek kalmasın.
+    cache: {
+      html: getHtmlCacheSize(),
+      data: getDataCacheSize(),
+    },
     requests: requests.slice(-25).reverse(),
     errors: errors.slice(-25).reverse(),
     // SSR dış çağrıları: overlay API sekmesi hangi sayfanın hangi
@@ -557,6 +568,41 @@ function router() {
     res.json({ ok: true });
   });
 
+  // Panelden HTML / veri önbelleğini elle boşaltma. Admin panelindeki
+  // `html:clear` / `html:invalidate` / `data:clear` ile aynı çekirdek API;
+  // yalnızca development'ta ve CSRF'siz — overlay zaten aynı origin'den gelir.
+  api.post("/cache/clear-html", (req, res) => {
+    const cleared = getHtmlCacheSize();
+    clearHtmlCache();
+    pushStats();
+    res.json({ ok: true, cleared });
+  });
+
+  api.post("/cache/clear-data", express.json({ limit: "8kb" }), (req, res) => {
+    const prefix =
+      typeof req.body?.prefix === "string" && req.body.prefix
+        ? req.body.prefix
+        : undefined;
+    const cleared = clearDataCache(prefix);
+    pushStats();
+    res.json({ ok: true, cleared });
+  });
+
+  api.post("/cache/invalidate", express.json({ limit: "8kb" }), (req, res) => {
+    const target = String(req.body?.path ?? "");
+    if (!target.startsWith("/")) {
+      res.status(400).json({ ok: false, reason: "path" });
+      return;
+    }
+
+    // Dev panelinde "bu sayfayı sil" soğuk render bekler; yumuşak bayatlatma
+    // eski HTML'i servis etmeye devam eder ve etkisi görünmez kalır.
+    const hard = req.body?.hard !== false;
+    const count = invalidateHtmlCache(target, { hard });
+    pushStats();
+    res.json({ ok: true, count, path: target, hard });
+  });
+
   return api;
 }
 

package/src/server/render.js

@@ -161,11 +161,21 @@ async function loadCompiledTemplates(config, helpers) {
   const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
   const bust = isDev ? `?t=${Date.now()}` : "";
 
-  for (const [viewId, rel] of Object.entries(manifest)) {
-    const file = path.join(templatesDir, rel);
-    if (!fs.existsSync(file)) continue;
-    const mod = await import(pathToFileURL(file).href + bust);
-    if (typeof mod.render !== "function") continue;
+  // Paralel import — sıralı await cold start'ı şişiriyordu.
+  const entries = await Promise.all(
+    Object.entries(manifest).map(async ([viewId, rel]) => {
+      const file = path.join(templatesDir, rel);
+      try {
+        const mod = await import(pathToFileURL(file).href + bust);
+        return /** @type {const} */ ([viewId, mod]);
+      } catch {
+        return /** @type {const} */ ([viewId, null]);
+      }
+    }),
+  );
+
+  for (const [viewId, mod] of entries) {
+    if (!mod || typeof mod.render !== "function") continue;
     compiled.set(viewId, mod.render);
 
     // `components/*.jsk` → helpers.PascalName
@@ -259,8 +269,9 @@ export async function renderPage(page) {
     hook("layoutContext", {}, { pathname: page.pathname ?? "", metadata }),
   ]);
 
-  const locals = {
-    ...helpers,
+  // Layout local'leri. `.jsk` `(data, helpers)` aldığı için helpers'ı data'ya
+  // kopyalamak gereksiz allocation; EJS layout hâlâ bare helper adları bekler.
+  const pageLocals = {
     ...context,
     metadata,
     // Boş varsayılan bilinçli: "/" yazmak her sayfayı ana sayfa sanıp
@@ -286,7 +297,7 @@ export async function renderPage(page) {
   };
 
   if (layoutRender) {
-    return layoutRender(locals, helpers);
+    return layoutRender(pageLocals, helpers);
   }
 
   if (layout.endsWith(".jsk")) {
@@ -296,7 +307,7 @@ export async function renderPage(page) {
     );
   }
 
-  return renderEjsFile(layout, locals, options);
+  return renderEjsFile(layout, { ...helpers, ...pageLocals }, options);
 }
 
 /**

package/src/templates/layout.jsk

@@ -5,10 +5,10 @@
   anda bu dosya devre dışı kalır; amacı yeni bir projenin tek route ile
   çalışabilmesi. Kopyalayıp başlangıç noktası olarak kullanın.
 
-  Kullanılabilir local'ler: metadata, headMeta, extraHead, structuredData,
-  body, bodyClass, entries, styles, pathname, lang, devtools, devBasePath,
-  asset, hasAsset + tüm html/tag helper'ları ve views/components/** export'ları.
-  `hooks.layoutContext()` döndürdüğü her alan da buraya eklenir.
+  Kullanılabilir data alanları: metadata, headMeta, extraHead, structuredData,
+  body, bodyClass, entries, styles, pathname, lang, devtools, devBasePath.
+  Yardımcılar ikinci `helpers` argümanında (PascalCase etiketler /
+  helpers.esc). `hooks.layoutContext()` alanları data'ya eklenir.
 
   Stylesheets / JsonLd / BodyScripts: `.jsk` ifade dilinde fonksiyon çağrısı
   olmadığı için asset döngüleri bu yerleşik etiketlere taşındı.

package/src/templates/layout.render.js

@@ -6,36 +6,17 @@
  */
 export function render(data, helpers) {
   let s = "";
-  s += "\r\n";
   s += "<!DOCTYPE html>";
-  s += "\r\n";
   s += "<html" + helpers.attrs({"lang": data.lang}) + ">";
-  s += "\r\n  ";
-  s += "<head>";
-  s += "\r\n    ";
-  s += "<meta charset=\"utf-8\">";
-  s += "\r\n    ";
-  s += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
-  s += "\r\n    ";
+  s += "<head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
   s += (data.extraHead ?? "");
-  s += "\r\n    ";
   s += (helpers.Stylesheets({ "styles": data.styles }) ?? "");
-  s += "\r\n    ";
   s += (data.headMeta ?? "");
-  s += "\r\n    ";
   s += (helpers.JsonLd({ "items": data.structuredData }) ?? "");
-  s += "\r\n  ";
   s += "</head>";
-  s += "\r\n  ";
   s += "<body" + helpers.attrs({"class": data.bodyClass}) + ">";
-  s += "\r\n    ";
   s += (data.body ?? "");
-  s += "\r\n    ";
   s += (helpers.BodyScripts({ "entries": data.entries, "devtools": data.devtools, "devBasePath": data.devBasePath }) ?? "");
-  s += "\r\n  ";
-  s += "</body>";
-  s += "\r\n";
-  s += "</html>";
-  s += "\r\n";
+  s += "</body></html>";
   return s;
 }

package/src/views/components/loader.js

@@ -43,7 +43,8 @@ function collect(dir, out = []) {
 }
 
 /**
- * Tek bir `components/` dizinini yükler.
+ * Modülleri paralel import eder; export uygulama sırası dosya listesiyle
+ * aynı kalır (barrel önce, sonra sıralı bileşenler).
  *
  * @param {string} dir
  * @param {Record<string, unknown>} components
@@ -59,12 +60,16 @@ async function loadDir(dir, components, origin) {
     ...collect(dir).sort(),
   ];
 
-  for (const file of files) {
-    const isBarrel = path.basename(file) === BARREL;
-    // Kimlik mutlak yol — çoklu components kökünde göreli ad çakışmasın.
-    const fileId = isBarrel ? BARREL : file.split(path.sep).join("/");
-    const module = await import(pathToFileURL(file).href);
+  const loaded = await Promise.all(
+    files.map(async (file) => {
+      const isBarrel = path.basename(file) === BARREL;
+      const fileId = isBarrel ? BARREL : file.split(path.sep).join("/");
+      const module = await import(pathToFileURL(file).href);
+      return { fileId, module };
+    }),
+  );
 
+  for (const { fileId, module } of loaded) {
     for (const [name, value] of Object.entries(module)) {
       if (name === "default") continue;
 

package/src/views/helpers/html.js

@@ -9,6 +9,11 @@ const ESCAPE_MAP = {
   "'": "'",
 };
 
+/** Kaçış gerektiren karakter var mı — yoksa `replace` callback'ine girilmez. */
+const NEEDS_ESCAPE = /[&<>"']/;
+/** Tüm eşleşmeleri değiştirmek için ayrı global kopya (`test` lastIndex'i kirletmesin). */
+const ESCAPE_ALL = /[&<>"']/g;
+
 /**
  * Metin içeriği ve attribute değerleri için kaçış.
  * @param {unknown} value
@@ -16,7 +21,9 @@ const ESCAPE_MAP = {
  */
 export function esc(value) {
   if (value == null || value === false) return "";
-  return String(value).replace(/[&<>"']/g, (char) => ESCAPE_MAP[char]);
+  const str = typeof value === "string" ? value : String(value);
+  if (!NEEDS_ESCAPE.test(str)) return str;
+  return str.replace(ESCAPE_ALL, (char) => ESCAPE_MAP[char]);
 }
 
 /**
@@ -41,16 +48,17 @@ export function jsonScript(value) {
  * @returns {string}
  */
 export function attrs(attrs) {
-  const parts = [];
+  // Dizi + join yerine doğrudan birikim: tipik etiket 2–6 attribute.
+  let out = "";
   for (const [key, value] of Object.entries(attrs)) {
     if (value == null || value === false) continue;
     if (value === true) {
-      parts.push(key);
+      out += ` ${key}`;
       continue;
     }
-    parts.push(`${key}="${esc(value)}"`);
+    out += ` ${key}="${esc(value)}"`;
   }
-  return parts.length ? ` ${parts.join(" ")}` : "";
+  return out;
 }
 
 /**

package/src/views/helpers/tags.js

@@ -24,6 +24,12 @@ const isDev = process.env.NODE_ENV === "development";
 /** Aynı eksik ikon için tek uyarı. */
 const warnedIcons = new Set();
 
+/** `fill` Image varsayılan sınıfları — `cn`/`twMerge` olmadan sabit. */
+const IMAGE_FILL_CLASS = "absolute inset-0 h-full w-full object-cover";
+
+/** Sprite URL process ömründe bir kez çözülür (hash değişince process yenilenir). */
+let cachedSpritePath = /** @type {string | null} */ (null);
+
 /**
  * `SeoLink` karşılığı: title otomatik doldurulur.
  * @param {{ href: string, text?: string, html?: string, class?: string,
@@ -101,14 +107,19 @@ export function image(props) {
     (optimized && optimized.variants.length > 1) ||
     (remote && remote.srcset);
 
+  // `fill` + ek sınıf yoksa twMerge'e girme; ek sınıf varsa çakışma çözümü gerekir.
+  const fillClass = fill
+    ? className
+      ? cn(IMAGE_FILL_CLASS, className)
+      : IMAGE_FILL_CLASS
+    : className;
+
   const attributes = attrs({
     src: largest?.url ?? remote?.src ?? src,
     alt: alt ?? "",
     width: fill ? undefined : (width ?? optimized?.width),
     height: fill ? undefined : (height ?? optimized?.height),
-    class: fill
-      ? cn("absolute inset-0 h-full w-full object-cover", className)
-      : className,
+    class: fillClass,
     sizes: responsive
       ? (sizes ?? (optimized ? defaultSizes(optimized) : remote?.sizes))
       : sizes,
@@ -213,7 +224,13 @@ export function icon(props) {
     attrs: extra = {},
   } = props;
 
-  const spritePath = asset("sprite.svg", { origin: "document" });
+  // Prod'da hash deploy ile birlikte değişir (process yenilenir); dev'de
+  // watch rebuild sprite yolunu güncelleyebildiği için her seferinde çözülür.
+  let spritePath = cachedSpritePath;
+  if (spritePath == null || isDev) {
+    spritePath = asset("sprite.svg", { origin: "document" });
+    if (!isDev) cachedSpritePath = spritePath;
+  }
   const id = `${toKebab(name)}-${weight}`;
 
   if (isDev && !warnedIcons.has(id)) {

package/types/compile/codegen.d.ts

@@ -1,9 +1,5 @@
 export type AstNode = import('./parse.js').AstNode;
 export type AttrNode = import('./parse.js').AttrNode;
-/**
- * @typedef {import('./parse.js').AstNode} AstNode
- * @typedef {import('./parse.js').AttrNode} AttrNode
- */
 /**
  * @param {AstNode[]} ast
  * @param {{ viewId: string, file?: string, knownComponents?: Set<string> }} options
@@ -30,3 +26,12 @@ export declare function normalizeIncludeId(includePath: string): string;
  * @returns {string}
  */
 export declare function toPascalCase(name: string): string;
+/**
+ * Şablon girintisini düşür: satır sonu içeren salt-whitespace → boş;
+ * yalnızca boşluk/tab → tek boşluk (inline aralık). Koruma alanı dışında.
+ *
+ * @param {string} value
+ * @param {boolean} preserve
+ * @returns {string}
+ */
+export declare function collapseTemplateWhitespace(value: string, preserve: boolean): string;

package/types/compile/compile-all.d.ts

@@ -12,7 +12,9 @@ export declare function compileAll(config: {
     outDir: string;
 }>;
 /**
- * Manifest yoksa veya herhangi bir `.jsk` daha yeniyse yeniden derler.
+ * Manifest yoksa veya (dev'de) herhangi bir `.jsk` daha yeniyse yeniden derler.
+ * Production'da manifest varsa mtime taraması atlanır — `jskelet build` CI
+ * güvencesi; ilk istekte yüzlerce `statSync` cold start'ı şişirmesin.
  * Dev sunucu restart'ında build watch kaçırmış olsa bile şablonlar güncel kalır.
  *
  * @param {{ root: string, dirs: Record<string, string> }} config

package/types/compile/index.d.ts

@@ -4,7 +4,7 @@
 export { CompileError, indexToLocation } from "./errors.js";
 export { parseExpr, codegenExpr } from "./expr.js";
 export { parseTemplate, isComponentTag } from "./parse.js";
-export { codegen, toPascalCase, normalizeIncludeId } from "./codegen.js";
+export { codegen, toPascalCase, normalizeIncludeId, collapseTemplateWhitespace, } from "./codegen.js";
 export { getViewRoots, getComponentDirs, discoverJskFiles, componentNameFromViewId, collectKnownComponents, toComponentTag, } from "./resolve.js";
 export { scanNamedExports } from "./scan-exports.js";
 export { compileAll, compileSource, ensureTemplatesCompiled } from "./compile-all.js";