@zvndev/darkmown 0.4.0

package/site/pages/reactive.wd

@@ -0,0 +1,68 @@
+---
+title: Reactive Markdown
+---
+
+@include /nav.wd
+
+<main>
+
+# Reactive Markdown
+
+This page opts into the runtime because it declares state. Static pages ship zero framework JavaScript.
+
+:state count = 0
+
+The count is { count }.
+
+:button "Increment" -> count++
+
+:state open = false
+
+:button "Show details" -> open = true
+:button "Hide details" -> open = false
+
+:if open
+The details are visible now.
+:else
+The details are hidden.
+:endif
+
+## Keyed loops over real objects
+
+The same `@loop` that unrolls static data also drives reactive lists. Items are objects, bindings use dotted paths, and the runtime patches the list by key instead of re-rendering it:
+
+:state todos = [{"id": 1, "title": "Route pages", "owner": "PM"}, {"id": 2, "title": "Ship tiny runtime", "owner": "Dev"}]
+
+@loop todos into todo
+- **{ todo.title }** — { todo.owner }
+@endloop
+
+:button "Add todo" -> todos += {"id": 3, "title": "Live compile", "owner": "Testing"}
+
+## Section-scoped state
+
+Two sections can each own a state value named `tally` without colliding. Buttons resolve to the nearest scope:
+
+::: section #left .tally-card
+:state tally = 0
+
+### Left section
+
+The left tally is { tally }.
+
+:button "Bump left" -> tally++
+:::
+
+::: section #right .tally-card
+:state tally = 10
+
+### Right section
+
+The right tally is { tally }.
+
+:button "Bump right" -> tally++
+:::
+
+Static pages like the docs stay runtime-free.
+
+</main>

package/src/builder.js

@@ -0,0 +1,87 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { compilePage } from "./compiler.js";
+import { createPaths } from "./config.js";
+import { discoverRoutes, outputPathForRoute } from "./router.js";
+import { compileSkin } from "./skin.js";
+
+const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+
+export function buildSite(cwd = process.cwd()) {
+  const paths = createPaths(cwd);
+  fs.rmSync(paths.distRoot, { recursive: true, force: true });
+  fs.mkdirSync(paths.distRoot, { recursive: true });
+  emitShelfAssets(paths);
+  const routes = discoverRoutes(paths.routesRoot);
+  const manifest = [];
+
+  const warned = new Set();
+
+  for (const route of routes) {
+    const page = compilePage(route.file, paths);
+    for (const warning of page.warnings || []) {
+      if (warned.has(warning)) continue;
+      warned.add(warning);
+      console.warn(`hint: ${warning}`);
+    }
+    const outFile = outputPathForRoute(paths.distRoot, route.route);
+    fs.mkdirSync(path.dirname(outFile), { recursive: true });
+    fs.writeFileSync(outFile, page.html);
+    emitAssets(page.assets, paths);
+    if (page.assets.runtime) emitRuntime(paths);
+    manifest.push({
+      route: route.route,
+      file: path.relative(cwd, route.file).replaceAll(path.sep, "/"),
+      assets: {
+        skins: [...page.assets.skins],
+        scripts: page.assets.runtime ? ["/__wd/runtime.js", ...page.assets.scripts] : [...page.assets.scripts],
+        runtime: page.assets.runtime
+      }
+    });
+  }
+
+  fs.writeFileSync(path.join(paths.distRoot, "routes.json"), JSON.stringify(manifest, null, 2));
+  return { routes: manifest, distRoot: paths.distRoot };
+}
+
+function emitRuntime(paths) {
+  const out = path.join(paths.distRoot, "__wd/runtime.js");
+  fs.mkdirSync(path.dirname(out), { recursive: true });
+  fs.copyFileSync(path.join(moduleDir, "runtime.js"), out);
+}
+
+function emitAssets(assets, paths) {
+  for (const [source, href] of assets.files) {
+    const out = path.join(paths.distRoot, href);
+    fs.mkdirSync(path.dirname(out), { recursive: true });
+    if (source.endsWith(".skin")) {
+      fs.writeFileSync(out, compileSkin(fs.readFileSync(source, "utf8")));
+    } else {
+      fs.copyFileSync(source, out);
+    }
+  }
+}
+
+function emitShelfAssets(paths) {
+  if (!fs.existsSync(paths.shelfRoot)) return;
+  for (const file of walk(paths.shelfRoot)) {
+    const ext = path.extname(file);
+    if ([".md", ".wd"].includes(ext)) continue;
+    const rel = path.relative(paths.shelfRoot, file);
+    const folder = ext === ".json" ? "__wd/data" : "__wd/media";
+    const out = path.join(paths.distRoot, folder, rel);
+    fs.mkdirSync(path.dirname(out), { recursive: true });
+    fs.copyFileSync(file, out);
+  }
+}
+
+function walk(dir) {
+  const files = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const abs = path.join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...walk(abs));
+    else files.push(abs);
+  }
+  return files;
+}

package/src/cli.js

@@ -0,0 +1,156 @@
+#!/usr/bin/env node
+import { execFile } from "node:child_process";
+import fs from "node:fs";
+import http from "node:http";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { buildSite } from "./builder.js";
+import { devClientPath, devClientScript, devEventsPath, injectDevClient } from "./dev.js";
+import { initProject } from "./scaffold.js";
+import { contentType, resolvePublicFile, serve } from "./statics.js";
+
+const cliPath = fileURLToPath(import.meta.url);
+const command = process.argv[2] || "build";
+
+if (command === "help" || command === "--help" || command === "-h") {
+  printHelp();
+} else if (command === "version" || command === "--version" || command === "-v") {
+  const pkg = JSON.parse(fs.readFileSync(new URL("../package.json", import.meta.url), "utf8"));
+  console.log(pkg.version);
+} else if (command === "init") {
+  const target = process.argv[3] || ".";
+  const result = initProject(path.resolve(process.cwd(), target));
+  console.log(`Created Darkmown project at ${path.relative(process.cwd(), result.root) || "."}`);
+  console.log(`Next: cd ${path.relative(process.cwd(), result.root) || "."} && npm install && npm run dev`);
+} else if (command === "build") {
+  const result = buildSite();
+  console.log(`Built ${result.routes.length} routes into ${path.relative(process.cwd(), result.distRoot)}`);
+} else if (command === "dev") {
+  const port = Number(process.env.PORT || 5173);
+  const distRoot = path.join(process.cwd(), "dist");
+  buildSite();
+  const clients = new Set();
+  let timer;
+
+  // Rebuild in a child process so changes to Darkmown's own src/ always load
+  // fresh modules — an in-process rebuild would reuse the stale import cache.
+  const rebuild = () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      const started = performance.now();
+      execFile(process.execPath, [cliPath, "build"], { cwd: process.cwd() }, (error, stdout, stderr) => {
+        if (error) {
+          const message = (stderr || stdout || String(error)).trim();
+          console.error(message);
+          broadcast(clients, `event: builderror\ndata: ${JSON.stringify({ message: message.slice(0, 4000) })}\n\n`);
+          return;
+        }
+        const elapsed = Math.round(performance.now() - started);
+        if (stderr.trim()) console.warn(stderr.trim());
+        broadcast(clients, `event: reload\ndata: ${JSON.stringify({ elapsed })}\n\n`);
+        console.log(`${stdout.trim().split("\n").at(-1)} (${elapsed}ms)`);
+      });
+    }, 30);
+  };
+
+  for (const dir of ["site", "src"]) {
+    if (fs.existsSync(dir)) {
+      fs.watch(dir, { recursive: true }, rebuild);
+    }
+  }
+
+  const server = http.createServer((req, res) => {
+    try {
+      const url = req.url || "/";
+      if (url.split("?")[0] === devEventsPath) {
+        res.writeHead(200, {
+          "content-type": "text/event-stream",
+          "cache-control": "no-cache",
+          connection: "keep-alive"
+        });
+        res.write("\n");
+        clients.add(res);
+        req.on("close", () => clients.delete(res));
+        return;
+      }
+      if (url.split("?")[0] === devClientPath) {
+        res.writeHead(200, { "content-type": "text/javascript" });
+        res.end(devClientScript());
+        return;
+      }
+      if (url.split("?")[0] === "/__wd/echo" && req.method === "POST") {
+        let body = "";
+        req.on("data", (chunk) => (body += chunk));
+        req.on("end", () => {
+          res.writeHead(200, { "content-type": "application/json" });
+          res.end(JSON.stringify({
+            ok: true,
+            received: Object.fromEntries(new URLSearchParams(body)),
+            at: new Date().toISOString()
+          }));
+        });
+        return;
+      }
+      serveDev(distRoot, url, res);
+    } catch (error) {
+      res.writeHead(500, { "content-type": "text/plain" });
+      res.end(error.stack || String(error));
+    }
+  });
+  server.listen(port, () => {
+    console.log(`Darkmown dev server ready at http://localhost:${port}`);
+    console.log(`Live compiler watching site/ and src/`);
+  });
+} else if (command === "serve") {
+  const port = Number(process.env.PORT || 4173);
+  const distRoot = path.join(process.cwd(), "dist");
+  if (!fs.existsSync(distRoot)) {
+    console.error("No dist directory found. Run `darkmown build` first.");
+    process.exit(1);
+  }
+  http.createServer((req, res) => serve(distRoot, req.url || "/", res)).listen(port, () => {
+    console.log(`Darkmown preview of dist at http://localhost:${port}`);
+  });
+} else {
+  console.error(`Unknown command: ${command}`);
+  printHelp();
+  process.exit(1);
+}
+
+function serveDev(distRoot, url, res) {
+  const file = resolvePublicFile(distRoot, url);
+  if (!file || !fs.existsSync(file)) {
+    serve(distRoot, url, res);
+    return;
+  }
+  if (file.endsWith(".html")) {
+    res.writeHead(200, { "content-type": "text/html" });
+    res.end(injectDevClient(fs.readFileSync(file, "utf8")));
+    return;
+  }
+  res.writeHead(200, { "content-type": contentType(file) });
+  fs.createReadStream(file).pipe(res);
+}
+
+function broadcast(clients, message) {
+  for (const client of clients) client.write(message);
+}
+
+function printHelp() {
+  console.log(`Darkmown
+
+Usage:
+  darkmown init [dir]   Scaffold a new Darkmown project
+  darkmown dev          Start the live compiler dev server
+  darkmown build        Compile site/pages into dist
+  darkmown serve        Preview the built dist locally
+  darkmown help         Show this help
+
+Authoring:
+  site/pages          File-based routes: .md stays plain, .wd adds directives
+  site/_              Include shelf for @include /name.wd
+  @loop x into item   Loop over JSON files, in-scope values, or :state lists
+  *.skin              Colocated indentation-based CSS
+  *.js                Colocated page behavior
+`);
+}