@zvndev/darkmown 0.18.0 → 0.20.0

package/src/dev.js

@@ -8,7 +8,9 @@ export const devEventsPath = "/__wd/dev-events";
  */
 export function injectDevClient(html) {
   const script = `<script type="module" src="${devClientPath}"></script>`;
-  return html.includes("</body>") ? html.replace("</body>", `${script}\n</body>`) : `${html}\n${script}`;
+  return html.includes("</body>")
+    ? html.replace("</body>", `${script}\n</body>`)
+    : `${html}\n${script}`;
 }
 
 /**

package/src/headers.js

@@ -0,0 +1,93 @@
+/**
+ * Security headers Darkmown emits on every delivery surface — the local
+ * `darkmown serve`/preview server (`src/statics.js`), Cloudflare Pages
+ * (`dist/_headers`, written by `src/builder.js`), and Vercel (`vercel.json`).
+ *
+ * `statics.js` and the generated `_headers` derive from the values here, so they
+ * never drift. `vercel.json` is the exception: Vercel reads it BEFORE the build
+ * runs, so its CSP strings and static-route list are hand-maintained copies, not
+ * build output. The `vercel-csp-routes` test cross-checks vercel.json against the
+ * built route manifest so a new static route can't silently miss the strict CSP.
+ *
+ * The CSP is derived from what the framework's own output actually emits
+ * (verify against built `dist/` HTML):
+ *   - External script `/__wd/runtime.js` (same-origin) on reactive pages.
+ *   - Inline `<script type="application/json" data-wd-state>` (state seed) and
+ *     inline `<script type="speculationrules">` (prerender) — JSON/speculation
+ *     blocks can't be nonce'd cleanly, so `script-src 'unsafe-inline'`.
+ *   - The reactive runtime compiles validated expressions via `new Function`,
+ *     so reactive pages additionally need `script-src 'unsafe-eval'`.
+ *   - Inline `<style>` for view transitions — `style-src 'unsafe-inline'`.
+ *   - `data:` favicon and remote images — `img-src 'self' data: https:`.
+ *
+ * Static pages (zero framework JS) still emit inline `<style>` and an inline
+ * `<script type="speculationrules">`, so they keep `'unsafe-inline'`, but they
+ * never call `new Function`, so their CSP drops `'unsafe-eval'`.
+ */
+
+/**
+ * `connect-src` for the demo is `'self'`: the framework's own pages only
+ * `:fetch` same-origin endpoints. Apps whose `:fetch` targets a remote host
+ * must widen this (e.g. to `connect-src 'self' https://api.example.com` or
+ * `connect-src *`) by editing their `vercel.json` / `_headers` / serve config.
+ * @type {string}
+ */
+const CONNECT_SRC = "connect-src 'self'";
+
+/**
+ * Directives shared by both the static and reactive CSP. Order is cosmetic.
+ * @type {string[]}
+ */
+const COMMON_CSP_DIRECTIVES = [
+  "default-src 'self'",
+  "style-src 'self' 'unsafe-inline'",
+  "img-src 'self' data: https:",
+  "font-src 'self'",
+  CONNECT_SRC,
+  "object-src 'none'",
+  "base-uri 'self'",
+  "frame-ancestors 'self'"
+];
+
+/**
+ * Relaxed CSP for reactive pages: `new Function` needs `'unsafe-eval'`, the
+ * inline state/speculationrules JSON needs `'unsafe-inline'`.
+ * @type {string}
+ */
+export const REACTIVE_CSP = [
+  "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
+  ...COMMON_CSP_DIRECTIVES
+].join("; ");
+
+/**
+ * Stricter CSP for static pages: no runtime means no `new Function`, so
+ * `'unsafe-eval'` is dropped. Inline `<style>`/`<script type=speculationrules>`
+ * keep `'unsafe-inline'` on script/style.
+ * @type {string}
+ */
+export const STATIC_CSP = ["script-src 'self' 'unsafe-inline'", ...COMMON_CSP_DIRECTIVES].join(
+  "; "
+);
+
+/**
+ * Baseline security headers applied to every HTML response, independent of the
+ * CSP. CSP is added per-route (static vs reactive) by the helpers below.
+ * @type {Record<string, string>}
+ */
+export const BASE_SECURITY_HEADERS = {
+  "X-Content-Type-Options": "nosniff",
+  "Referrer-Policy": "strict-origin-when-cross-origin",
+  "X-Frame-Options": "SAMEORIGIN"
+};
+
+/**
+ * The full security-header set for one response, including the CSP variant.
+ * @param {boolean} reactive Whether the route ships the reactive runtime.
+ * @returns {Record<string, string>}
+ */
+export function securityHeaders(reactive) {
+  return {
+    ...BASE_SECURITY_HEADERS,
+    "Content-Security-Policy": reactive ? REACTIVE_CSP : STATIC_CSP
+  };
+}

package/src/index.js

@@ -0,0 +1,22 @@
+// Public API barrel for @zvndev/darkmown.
+// Mirrors the type surface declared in `types/index.d.ts`. Importing the
+// package (`import { buildSite } from "@zvndev/darkmown"`) resolves here via the
+// `exports` map; individual modules stay importable by their own path too.
+
+export { buildSite } from "./builder.js";
+
+export {
+  compileDocument,
+  compilePage,
+  escapeHtml,
+  loopKeyOf,
+  parseFrontmatter
+} from "./compiler.js";
+
+export { createPaths, isHiddenName, pageExtensions } from "./config.js";
+export { devClientScript, injectDevClient } from "./dev.js";
+export { discoverRoutes, outputPathForRoute, routeFromFile } from "./router.js";
+
+export { initProject } from "./scaffold.js";
+export { compileSkin } from "./skin.js";
+export { contentType, resolvePublicFile, serve } from "./statics.js";

package/src/router.js

@@ -43,7 +43,9 @@ export function discoverRoutes(routesRoot) {
   const seen = new Map();
   for (const route of routes) {
     if (seen.has(route.route)) {
-      throw new Error(`Duplicate route "${route.route}" from ${seen.get(route.route)} and ${route.file}`);
+      throw new Error(
+        `Duplicate route "${route.route}" from ${seen.get(route.route)} and ${route.file}`
+      );
     }
     seen.set(route.route, route.file);
   }

package/src/runtime.js

@@ -246,9 +246,15 @@ function loopKeyOf(item, counts) {
  * @returns {void}
  */
 function fillItem(node, item, meta = {}) {
+  // Nested item-relative loops (data-wd-loop-item) own their descendants' binds;
+  // when present, `skip` excludes a node living inside one so the outer row's
+  // text/meta/each-if/class passes never overwrite an inner row's values.
+  const inners = node.querySelectorAll("[data-wd-loop-item]");
+  const skip = inners.length ? (/** @type {Element} */ el) => el.closest("[data-wd-loop-item]") : () => false;
   // querySelectorAll skips <template> content, so this sees only the outermost
   // regions; recursing into each injected branch fills the rest.
   for (const region of node.querySelectorAll("[data-wd-each-if]")) {
+    if (skip(region)) continue;
     const expr = region.getAttribute("data-wd-if-expr");
     const m = region.getAttribute("data-wd-meta");
     const value = expr ? evalPredicate(expr, item) : (m ? meta[m] : getPath(item, region.getAttribute("data-wd-path")));
@@ -262,13 +268,17 @@ function fillItem(node, item, meta = {}) {
     ? [node, ...node.querySelectorAll("[data-wd-each]")]
     : [...node.querySelectorAll("[data-wd-each]")];
   for (const target of targets) {
+    if (skip(target)) continue;
     target.textContent = getPath(item, target.getAttribute("data-wd-path")) ?? "";
   }
   for (const marker of node.querySelectorAll("[data-wd-each-meta]")) {
+    if (skip(marker)) continue;
     marker.textContent = meta[marker.getAttribute("data-wd-each-meta") || ""] ?? "";
   }
   const classNodes = node.matches("[data-wd-each-class]") ? [node, ...node.querySelectorAll("[data-wd-each-class]")] : [...node.querySelectorAll("[data-wd-each-class]")];
-  for (const el of classNodes) classToggle(el, el.getAttribute("data-wd-each-class"), item);
+  for (const el of classNodes) { if (!skip(el)) classToggle(el, el.getAttribute("data-wd-each-class"), item); }
+  // Reconcile nested loops last, against the now-settled outer row.
+  for (const region of inners) reconcile(region, getPath(item, region.getAttribute("data-wd-loop-item")));
 }
 
 /**
@@ -335,6 +345,75 @@ function renderIf(node) {
   for (const nested of output.querySelectorAll("[data-wd-if]")) renderIf(nested);
 }
 
+/**
+ * Reconcile one loop region (top-level or nested) from a resolved row source:
+ * filter (`where`) → pipeline (sort/reverse/offset/limit) → @empty → keyed
+ * reconcile. Each surviving row is `fillItem`-ed, which itself recurses into any
+ * nested item-relative loops. Shared by the global pass and `fillItem`.
+ * @param {Element} region
+ * @param {any} rows Source list (state-resolved globally; item-relative inside fillItem).
+ * @returns {void}
+ */
+function reconcile(region, rows) {
+  const template = /** @type {HTMLTemplateElement | null} */ (region.querySelector("template[data-wd-loop-template]"));
+  const out = region.querySelector("[data-wd-loop-out]");
+  if (!template || !out) return;
+  let list = Array.isArray(rows) ? rows.slice() : [];
+  const where = region.getAttribute("data-wd-loop-where");
+  if (where) {
+    const predicate = loopPredicate(where);
+    list = list.filter((/** @type {any} */ item) => {
+      try {
+        return predicate((/** @type {string | null} */ path) => getPath(item, path), (/** @type {string} */ k, /** @type {string} */ r) => getPath(state[k], r || ""), containsFn);
+      } catch (error) {
+        warn(where, error);
+        return false;
+      }
+    });
+  }
+  list = pipeline(list, region);
+
+  // Empty branch: clone the [data-wd-loop-empty] template into the output.
+  const emptyTpl = /** @type {HTMLTemplateElement | null} */ (region.querySelector("template[data-wd-loop-empty]"));
+  if (!list.length && emptyTpl) {
+    if (out.getAttribute("data-wd-empty") !== "1") {
+      out.textContent = "";
+      for (const child of [...emptyTpl.content.children]) out.appendChild(child.cloneNode(true));
+      out.setAttribute("data-wd-empty", "1");
+    }
+    return;
+  }
+  if (out.getAttribute("data-wd-empty") === "1") { out.textContent = ""; out.removeAttribute("data-wd-empty"); }
+
+  /** @type {Map<string, WdRow>} */
+  const existing = new Map();
+  for (const child of [...out.children]) {
+    existing.set(child.getAttribute("data-wd-loop-key") || "", /** @type {WdRow} */ (child));
+  }
+  /** @type {Map<string, number>} */
+  const counts = new Map();
+  /** @type {Set<string>} */
+  const used = new Set();
+  const count = list.length;
+  for (let i = 0; i < count; i++) {
+    const item = list[i];
+    const key = loopKeyOf(item, counts);
+    let node = existing.get(key);
+    if (!node || used.has(key)) {
+      node = /** @type {WdRow} */ (template.content.firstElementChild?.cloneNode(true));
+      if (!node) continue;
+      node.setAttribute("data-wd-loop-key", key);
+    }
+    used.add(key);
+    fillItem(node, item, { index: i, number: i + 1, first: i === 0, last: i === count - 1, count });
+    node.__wdItem = item; /** let per-row actions resolve which row was clicked */
+    out.appendChild(node);
+  }
+  for (const [key, node] of existing) {
+    if (!used.has(key)) node.remove();
+  }
+}
+
 /**
  * Synchronously render the whole document from current `state`:
  * computed → if-regions → keyed loop reconcile → text/input binds.
@@ -348,69 +427,14 @@ function renderNow() {
   // bindings (data-wd-each-class) are handled per item inside fillItem.
   for (const el of document.querySelectorAll("[data-wd-class]")) classToggle(el, el.getAttribute("data-wd-class"), undefined);
 
+  // Nested item-relative loops use data-wd-loop-item, so this top-level query
+  // skips them; fillItem reconciles those against their enclosing row.
   for (const region of document.querySelectorAll("[data-wd-loop]")) {
     const key = region.getAttribute("data-wd-loop");
     const data = region.getAttribute("data-wd-loop-data");
     /** Source may be a dotted path (e.g. team.members) read off state via getPath. */
     const dot = key ? key.indexOf(".") : -1;
-    const rows = key ? (dot < 0 ? state[key] : getPath(state[key.slice(0, dot)], key.slice(dot + 1))) : (data ? JSON.parse(data) : []);
-    const template = /** @type {HTMLTemplateElement | null} */ (region.querySelector("template[data-wd-loop-template]"));
-    const out = region.querySelector("[data-wd-loop-out]");
-    if (!template || !out) continue;
-    let list = Array.isArray(rows) ? rows.slice() : [];
-    const where = region.getAttribute("data-wd-loop-where");
-    if (where) {
-      const predicate = loopPredicate(where);
-      list = list.filter((/** @type {any} */ item) => {
-        try {
-          return predicate((/** @type {string | null} */ path) => getPath(item, path), (/** @type {string} */ k, /** @type {string} */ r) => getPath(state[k], r || ""), containsFn);
-        } catch (error) {
-          warn(where, error);
-          return false;
-        }
-      });
-    }
-    list = pipeline(list, region);
-
-    // Empty branch: clone the [data-wd-loop-empty] template into the output.
-    const emptyTpl = /** @type {HTMLTemplateElement | null} */ (region.querySelector("template[data-wd-loop-empty]"));
-    if (!list.length && emptyTpl) {
-      if (out.getAttribute("data-wd-empty") !== "1") {
-        out.textContent = "";
-        for (const child of [...emptyTpl.content.children]) out.appendChild(child.cloneNode(true));
-        out.setAttribute("data-wd-empty", "1");
-      }
-      continue;
-    }
-    if (out.getAttribute("data-wd-empty") === "1") { out.textContent = ""; out.removeAttribute("data-wd-empty"); }
-
-    /** @type {Map<string, WdRow>} */
-    const existing = new Map();
-    for (const child of [...out.children]) {
-      existing.set(child.getAttribute("data-wd-loop-key") || "", /** @type {WdRow} */ (child));
-    }
-    /** @type {Map<string, number>} */
-    const counts = new Map();
-    /** @type {Set<string>} */
-    const used = new Set();
-    const count = list.length;
-    for (let i = 0; i < count; i++) {
-      const item = list[i];
-      const key = loopKeyOf(item, counts);
-      let node = existing.get(key);
-      if (!node || used.has(key)) {
-        node = /** @type {WdRow} */ (template.content.firstElementChild?.cloneNode(true));
-        if (!node) continue;
-        node.setAttribute("data-wd-loop-key", key);
-      }
-      used.add(key);
-      fillItem(node, item, { index: i, number: i + 1, first: i === 0, last: i === count - 1, count });
-      node.__wdItem = item; /** let per-row actions resolve which row was clicked */
-      out.appendChild(node);
-    }
-    for (const [key, node] of existing) {
-      if (!used.has(key)) node.remove();
-    }
+    reconcile(region, key ? (dot < 0 ? state[key] : getPath(state[key.slice(0, dot)], key.slice(dot + 1))) : (data ? JSON.parse(data) : []));
   }
 
   for (const node of document.querySelectorAll("[data-wd-bind]")) {

package/src/scaffold.js

@@ -12,136 +12,164 @@ const darkmownVersion = JSON.parse(
  */
 export function initProject(root) {
   fs.mkdirSync(root, { recursive: true });
-  writeNew(root, "package.json", JSON.stringify({
-    name: packageNameFromRoot(root),
-    private: true,
-    scripts: {
-      dev: "darkmown dev",
-      build: "darkmown build",
-      preview: "darkmown serve"
-    },
-    devDependencies: {
-      "@zvndev/darkmown": `^${darkmownVersion}`
-    }
-  }, null, 2));
-  writeNew(root, "site/pages/index.wd", [
-    "---",
-    "title: My Darkmown site",
-    "---",
-    "",
-    "@include /nav.wd",
-    "",
-    "<main>",
-    "",
-    "# My Darkmown site",
-    "",
-    "Plain Markdown works. Rename to `.wd` when you want directives.",
-    "",
-    ":state count = 0",
-    "",
-    "Count: { count }",
-    "",
-    ":button \"Increment\" -> count++",
-    "",
-    ":state todos = [\"Write a page\"]",
-    "",
-    "@loop todos into todo",
-    "- { todo }",
-    "@endloop",
-    "",
-    ":button \"Add\" -> todos += \"Add a loop\"",
-    "",
-    "</main>"
-  ].join("\n"));
-  writeNew(root, "site/pages/index.skin", [
-    "tokens",
-    "  ink #172026",
-    "  paper #f7f2e8",
-    "  accent #0f8b8d",
-    "",
-    "page",
-    "  margin 0",
-    "  font ui-sans-serif, system-ui, sans-serif",
-    "  color $ink",
-    "  bg $paper",
-    "",
-    "main",
-    "  max-width 760px",
-    "  margin 0 auto",
-    "  padding 3rem 1.5rem",
-    "",
-    "nav",
-    "  display flex",
-    "  align-items center",
-    "  justify-content space-between",
-    "  gap 1rem",
-    "  max-width 760px",
-    "  margin 0 auto",
-    "  padding 1.25rem 1.5rem",
-    "",
-    "nav strong",
-    "  font-size 1.1rem",
-    "",
-    "nav .links",
-    "  display flex",
-    "  gap 1.25rem",
-    "",
-    "nav a",
-    "  color $ink",
-    "  text-decoration none",
-    "  opacity .8",
-    "",
-    "nav a:hover",
-    "  opacity 1",
-    "  color $accent",
-    "",
-    "button",
-    "  bg $accent",
-    "  color white",
-    "  border 0",
-    "  padding .75rem 1rem",
-    "  radius 8px"
-  ].join("\n"));
-  writeNew(root, "site/_/nav.wd", [
-    "<nav>",
-    "  <strong>My site</strong>",
-    "  <span class=\"links\">",
-    "    <a href=\"/\">Home</a>",
-    "    <a href=\"/about/\">About</a>",
-    "  </span>",
-    "</nav>"
-  ].join("\n"));
-  writeNew(root, "site/pages/about.md", [
-    "---",
-    "title: About",
-    "---",
-    "",
-    "# About",
-    "",
-    "This page is plain Markdown (`.md`) — strict CommonMark, zero framework JavaScript.",
-    "Rename it to `.wd` when you want directives like state, loops, or forms.",
-    "",
-    "[Back home](/)"
-  ].join("\n"));
-  writeNew(root, "README.md", [
-    "# My Darkmown site",
-    "",
-    "Run `npm install` and `npm run dev` to start the live compiler.",
-    "",
-    "## Commands",
-    "",
-    "- `npm run dev` — live compiler on http://localhost:5173 with hot reload.",
-    "- `npm run build` — compile the site to `dist/`.",
-    "- `npm run preview` — serve the built `dist/` locally.",
-    "",
-    "## Layout",
-    "",
-    "- Pages live in `site/pages`.",
-    "- Shared includes live in `site/_`.",
-    "- Hidden route files start with `.` or `-`.",
-    "- Colocated `index.skin` and `index.js` attach automatically.",
-    "- Any other file under `site/pages` (images, fonts, …) copies to `dist/` at its own path."
-  ].join("\n"));
+  writeNew(
+    root,
+    "package.json",
+    JSON.stringify(
+      {
+        name: packageNameFromRoot(root),
+        private: true,
+        scripts: {
+          dev: "darkmown dev",
+          build: "darkmown build",
+          preview: "darkmown serve"
+        },
+        devDependencies: {
+          "@zvndev/darkmown": `^${darkmownVersion}`
+        }
+      },
+      null,
+      2
+    )
+  );
+  writeNew(
+    root,
+    "site/pages/index.wd",
+    [
+      "---",
+      "title: My Darkmown site",
+      "---",
+      "",
+      "@include /nav.wd",
+      "",
+      "<main>",
+      "",
+      "# My Darkmown site",
+      "",
+      "Plain Markdown works. Rename to `.wd` when you want directives.",
+      "",
+      ":state count = 0",
+      "",
+      "Count: { count }",
+      "",
+      ':button "Increment" -> count++',
+      "",
+      ':state todos = ["Write a page"]',
+      "",
+      "@loop todos into todo",
+      "- { todo }",
+      "@endloop",
+      "",
+      ':button "Add" -> todos += "Add a loop"',
+      "",
+      "</main>"
+    ].join("\n")
+  );
+  writeNew(
+    root,
+    "site/pages/index.skin",
+    [
+      "tokens",
+      "  ink #172026",
+      "  paper #f7f2e8",
+      "  accent #0f8b8d",
+      "",
+      "page",
+      "  margin 0",
+      "  font ui-sans-serif, system-ui, sans-serif",
+      "  color $ink",
+      "  bg $paper",
+      "",
+      "main",
+      "  max-width 760px",
+      "  margin 0 auto",
+      "  padding 3rem 1.5rem",
+      "",
+      "nav",
+      "  display flex",
+      "  align-items center",
+      "  justify-content space-between",
+      "  gap 1rem",
+      "  max-width 760px",
+      "  margin 0 auto",
+      "  padding 1.25rem 1.5rem",
+      "",
+      "nav strong",
+      "  font-size 1.1rem",
+      "",
+      "nav .links",
+      "  display flex",
+      "  gap 1.25rem",
+      "",
+      "nav a",
+      "  color $ink",
+      "  text-decoration none",
+      "  opacity .8",
+      "",
+      "nav a:hover",
+      "  opacity 1",
+      "  color $accent",
+      "",
+      "button",
+      "  bg $accent",
+      "  color white",
+      "  border 0",
+      "  padding .75rem 1rem",
+      "  radius 8px"
+    ].join("\n")
+  );
+  writeNew(
+    root,
+    "site/_/nav.wd",
+    [
+      "<nav>",
+      "  <strong>My site</strong>",
+      '  <span class="links">',
+      '    <a href="/">Home</a>',
+      '    <a href="/about/">About</a>',
+      "  </span>",
+      "</nav>"
+    ].join("\n")
+  );
+  writeNew(
+    root,
+    "site/pages/about.md",
+    [
+      "---",
+      "title: About",
+      "---",
+      "",
+      "# About",
+      "",
+      "This page is plain Markdown (`.md`) — strict CommonMark, zero framework JavaScript.",
+      "Rename it to `.wd` when you want directives like state, loops, or forms.",
+      "",
+      "[Back home](/)"
+    ].join("\n")
+  );
+  writeNew(
+    root,
+    "README.md",
+    [
+      "# My Darkmown site",
+      "",
+      "Run `npm install` and `npm run dev` to start the live compiler.",
+      "",
+      "## Commands",
+      "",
+      "- `npm run dev` — live compiler on http://localhost:5173 with hot reload.",
+      "- `npm run build` — compile the site to `dist/`.",
+      "- `npm run preview` — serve the built `dist/` locally.",
+      "",
+      "## Layout",
+      "",
+      "- Pages live in `site/pages`.",
+      "- Shared includes live in `site/_`.",
+      "- Hidden route files start with `.` or `-`.",
+      "- Colocated `index.skin` and `index.js` attach automatically.",
+      "- Any other file under `site/pages` (images, fonts, …) copies to `dist/` at its own path."
+    ].join("\n")
+  );
   return { root };
 }
 
@@ -159,7 +187,6 @@ function writeNew(root, file, content) {
   fs.writeFileSync(target, `${content}\n`);
 }
 
-
 /**
  * Derive a safe default npm package name from the scaffold target directory.
  * @param {string} root Absolute target directory.