create-volt 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to `create-volt` are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/), and this project adheres to
 [Semantic Versioning](https://semver.org/).
 
+## [0.19.0] - 2026-06-29
+
+### Added
+- **`import-wxr` — WordPress importer.** `npx create-volt import-wxr <export.xml>`
+  converts a WordPress WXR export into markdown pages: published pages + posts →
+  `pages/<slug>.md` with front-matter (title, date, tags), Gutenberg block
+  comments stripped, body kept as HTML/markdown; drafts + attachments skipped;
+  slugs sanitized + de-duplicated. Flags: `--out <dir>`, `--drafts`, `--force`.
+  Zero-dep parser (WXR is a consistent format); unit-tested. Lowers the cost of
+  moving off WordPress. New `/docs/migrate`.
+
+## [0.18.0] - 2026-06-29
+
+### Added
+- **Volt SSR** — `volt-ssr.js`, a tiny server-side renderer: render the same
+  `html` / `h()` markup and signal values to an HTML string in Node (`${values}`
+  escaped by default, `raw()` for trusted HTML) via `renderToString`. Ships in
+  every template, so a scaffolded app can be server-rendered for SEO + fast first
+  paint and hydrate with `volt.js` on the client. The Volt site itself is now
+  built with it — marketing pages as Volt components, docs as markdown rendered
+  with `raw()`, the whole page composed by `renderToString`.
+
 ## [0.17.0] - 2026-06-29
 
 ### Added
@@ -256,6 +278,8 @@ All notable changes to `create-volt` are documented here. The format follows
   watching and full-page hot reload. Supports `--skip-install` and `--force`,
   and auto-detects npm / pnpm / yarn / bun for the install step.
 
+[0.19.0]: https://github.com/MIR-2025/volt/releases/tag/v0.19.0
+[0.18.0]: https://github.com/MIR-2025/volt/releases/tag/v0.18.0
 [0.17.0]: https://github.com/MIR-2025/volt/releases/tag/v0.17.0
 [0.16.0]: https://github.com/MIR-2025/volt/releases/tag/v0.16.0
 [0.15.1]: https://github.com/MIR-2025/volt/releases/tag/v0.15.1

package/index.js

@@ -61,12 +61,15 @@ const flags = new Set();
 const positionals = [];
 let portArg = null;
 let templateArg = null;
+let outArg = null;
 for (let i = 0; i < argv.length; i++) {
   const a = argv[i];
   if (a === "--port") portArg = argv[++i];
   else if (a.startsWith("--port=")) portArg = a.slice("--port=".length);
   else if (a === "--template") templateArg = argv[++i];
   else if (a.startsWith("--template=")) templateArg = a.slice("--template=".length);
+  else if (a === "--out") outArg = argv[++i];
+  else if (a.startsWith("--out=")) outArg = a.slice("--out=".length);
   else if (a.startsWith("-")) flags.add(a);
   else positionals.push(a);
 }
@@ -132,6 +135,34 @@ if (positionals[0] === "config") {
   process.exit(res.status ?? 0);
 }
 
+// --- `import-wxr` subcommand: import a WordPress export into markdown pages ---
+if (positionals[0] === "import-wxr") {
+  const xmlPath = positionals[1];
+  if (!xmlPath) die(`Usage: ${cyan("create-volt import-wxr <export.xml>")} [--out pages] [--drafts] [--force]`);
+  if (!fs.existsSync(xmlPath)) die(`No such file: ${cyan(xmlPath)}`);
+  const outDir = path.resolve(outArg || "pages");
+  const { runImport } = await import("./lib/import-wxr.js");
+  const { imported, stats } = runImport(fs.readFileSync(xmlPath, "utf8"), { drafts: flags.has("--drafts") });
+  fs.mkdirSync(outDir, { recursive: true });
+  let written = 0;
+  let skippedExisting = 0;
+  for (const d of imported) {
+    const dest = path.join(outDir, d.filename);
+    if (fs.existsSync(dest) && !flags.has("--force")) {
+      skippedExisting++;
+      continue;
+    }
+    fs.writeFileSync(dest, d.markdown);
+    written++;
+    console.log("  " + dim(path.relative(process.cwd(), dest)));
+  }
+  const types = Object.entries(stats.byType).map(([t, n]) => `${n} ${t}`).join(", ");
+  console.log(`\n${cyan(`✓ Imported ${written}`)} page(s) → ${outDir}`);
+  console.log(dim(`  source: ${stats.total} items (${types}); skipped ${stats.draftsSkipped} draft(s), ${stats.otherTypeSkipped} non-page/post item(s)${skippedExisting ? `, ${skippedExisting} already-present (use --force)` : ""}.`));
+  console.log(dim("  Enable the pages add-on to serve them: npm run dev -- --edit"));
+  process.exit(0);
+}
+
 // --- `studio` subcommand: ephemeral, localhost-only data browser (server.js --studio) ---
 if (positionals[0] === "studio") {
   const cwd = process.cwd();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
   "type": "module",
   "bin": {

package/templates/default/public/volt-ssr.js

@@ -0,0 +1,63 @@
+// volt-ssr.js — server-side rendering for Volt. Renders the same html`` markup,
+// h() elements, and signal values to an HTML string in Node (no DOM), so a Volt
+// app can be fully server-rendered for SEO and hydrate interactive islands with
+// volt.js on the client.
+//
+//   import { html, h, raw, renderToString } from "./volt-ssr.js";
+//   renderToString(html`<p>${name}</p>`)   // → "<p>Ada</p>" (name is escaped)
+//
+// Authoring matches the client: html`` interpolations render as escaped text;
+// nest html``/h() nodes for structure; use raw() for trusted pre-built HTML.
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+
+// trusted, pre-rendered HTML — emitted verbatim. Use only for content you control.
+export const raw = (s) => ({ __raw: String(s) });
+
+// tagged-template markup; the literal chunks are trusted, ${values} are escaped.
+export const html = (strings, ...values) => ({ __tpl: true, strings, values });
+
+const isNode = (x) => x && typeof x === "object" && (x.__tpl || x.__raw || x.__el);
+
+// hyperscript element: h(tag, props?, ...children)
+export function h(tag, props, ...children) {
+  if (props === undefined || props === null || isNode(props) || Array.isArray(props) || typeof props !== "object") {
+    if (props !== undefined && props !== null) children.unshift(props);
+    props = {};
+  }
+  return { __el: true, tag, props, children };
+}
+
+const read = (v) => (typeof v === "function" ? v() : v); // resolve signals/thunks (once)
+
+function attrs(props) {
+  let out = "";
+  for (const [k, rawVal] of Object.entries(props)) {
+    if (k === "children" || k.startsWith("on")) continue; // event handlers don't SSR
+    const v = read(rawVal);
+    if (v == null || v === false) continue;
+    const name = k === "className" ? "class" : k;
+    out += v === true ? ` ${name}` : ` ${name}="${esc(v)}"`;
+  }
+  return out;
+}
+
+export function renderToString(node) {
+  const v = read(node);
+  if (v == null || v === false || v === true) return "";
+  if (typeof v === "string" || typeof v === "number") return esc(v);
+  if (v.__raw != null) return v.__raw;
+  if (Array.isArray(v)) return v.map(renderToString).join("");
+  if (v.__tpl) {
+    let out = v.strings[0];
+    for (let i = 0; i < v.values.length; i++) out += renderToString(v.values[i]) + v.strings[i + 1];
+    return out;
+  }
+  if (v.__el) {
+    if (typeof v.tag === "function") return renderToString(v.tag({ ...v.props, children: v.children }));
+    const open = `<${v.tag}${attrs(v.props)}>`;
+    return VOID.has(v.tag) ? open : `${open}${v.children.map(renderToString).join("")}</${v.tag}>`;
+  }
+  return esc(String(v));
+}

package/templates/guestbook/public/volt-ssr.js

@@ -0,0 +1,63 @@
+// volt-ssr.js — server-side rendering for Volt. Renders the same html`` markup,
+// h() elements, and signal values to an HTML string in Node (no DOM), so a Volt
+// app can be fully server-rendered for SEO and hydrate interactive islands with
+// volt.js on the client.
+//
+//   import { html, h, raw, renderToString } from "./volt-ssr.js";
+//   renderToString(html`<p>${name}</p>`)   // → "<p>Ada</p>" (name is escaped)
+//
+// Authoring matches the client: html`` interpolations render as escaped text;
+// nest html``/h() nodes for structure; use raw() for trusted pre-built HTML.
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+
+// trusted, pre-rendered HTML — emitted verbatim. Use only for content you control.
+export const raw = (s) => ({ __raw: String(s) });
+
+// tagged-template markup; the literal chunks are trusted, ${values} are escaped.
+export const html = (strings, ...values) => ({ __tpl: true, strings, values });
+
+const isNode = (x) => x && typeof x === "object" && (x.__tpl || x.__raw || x.__el);
+
+// hyperscript element: h(tag, props?, ...children)
+export function h(tag, props, ...children) {
+  if (props === undefined || props === null || isNode(props) || Array.isArray(props) || typeof props !== "object") {
+    if (props !== undefined && props !== null) children.unshift(props);
+    props = {};
+  }
+  return { __el: true, tag, props, children };
+}
+
+const read = (v) => (typeof v === "function" ? v() : v); // resolve signals/thunks (once)
+
+function attrs(props) {
+  let out = "";
+  for (const [k, rawVal] of Object.entries(props)) {
+    if (k === "children" || k.startsWith("on")) continue; // event handlers don't SSR
+    const v = read(rawVal);
+    if (v == null || v === false) continue;
+    const name = k === "className" ? "class" : k;
+    out += v === true ? ` ${name}` : ` ${name}="${esc(v)}"`;
+  }
+  return out;
+}
+
+export function renderToString(node) {
+  const v = read(node);
+  if (v == null || v === false || v === true) return "";
+  if (typeof v === "string" || typeof v === "number") return esc(v);
+  if (v.__raw != null) return v.__raw;
+  if (Array.isArray(v)) return v.map(renderToString).join("");
+  if (v.__tpl) {
+    let out = v.strings[0];
+    for (let i = 0; i < v.values.length; i++) out += renderToString(v.values[i]) + v.strings[i + 1];
+    return out;
+  }
+  if (v.__el) {
+    if (typeof v.tag === "function") return renderToString(v.tag({ ...v.props, children: v.children }));
+    const open = `<${v.tag}${attrs(v.props)}>`;
+    return VOID.has(v.tag) ? open : `${open}${v.children.map(renderToString).join("")}</${v.tag}>`;
+  }
+  return esc(String(v));
+}

package/templates/starter/public/volt-ssr.js

@@ -0,0 +1,63 @@
+// volt-ssr.js — server-side rendering for Volt. Renders the same html`` markup,
+// h() elements, and signal values to an HTML string in Node (no DOM), so a Volt
+// app can be fully server-rendered for SEO and hydrate interactive islands with
+// volt.js on the client.
+//
+//   import { html, h, raw, renderToString } from "./volt-ssr.js";
+//   renderToString(html`<p>${name}</p>`)   // → "<p>Ada</p>" (name is escaped)
+//
+// Authoring matches the client: html`` interpolations render as escaped text;
+// nest html``/h() nodes for structure; use raw() for trusted pre-built HTML.
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+
+// trusted, pre-rendered HTML — emitted verbatim. Use only for content you control.
+export const raw = (s) => ({ __raw: String(s) });
+
+// tagged-template markup; the literal chunks are trusted, ${values} are escaped.
+export const html = (strings, ...values) => ({ __tpl: true, strings, values });
+
+const isNode = (x) => x && typeof x === "object" && (x.__tpl || x.__raw || x.__el);
+
+// hyperscript element: h(tag, props?, ...children)
+export function h(tag, props, ...children) {
+  if (props === undefined || props === null || isNode(props) || Array.isArray(props) || typeof props !== "object") {
+    if (props !== undefined && props !== null) children.unshift(props);
+    props = {};
+  }
+  return { __el: true, tag, props, children };
+}
+
+const read = (v) => (typeof v === "function" ? v() : v); // resolve signals/thunks (once)
+
+function attrs(props) {
+  let out = "";
+  for (const [k, rawVal] of Object.entries(props)) {
+    if (k === "children" || k.startsWith("on")) continue; // event handlers don't SSR
+    const v = read(rawVal);
+    if (v == null || v === false) continue;
+    const name = k === "className" ? "class" : k;
+    out += v === true ? ` ${name}` : ` ${name}="${esc(v)}"`;
+  }
+  return out;
+}
+
+export function renderToString(node) {
+  const v = read(node);
+  if (v == null || v === false || v === true) return "";
+  if (typeof v === "string" || typeof v === "number") return esc(v);
+  if (v.__raw != null) return v.__raw;
+  if (Array.isArray(v)) return v.map(renderToString).join("");
+  if (v.__tpl) {
+    let out = v.strings[0];
+    for (let i = 0; i < v.values.length; i++) out += renderToString(v.values[i]) + v.strings[i + 1];
+    return out;
+  }
+  if (v.__el) {
+    if (typeof v.tag === "function") return renderToString(v.tag({ ...v.props, children: v.children }));
+    const open = `<${v.tag}${attrs(v.props)}>`;
+    return VOID.has(v.tag) ? open : `${open}${v.children.map(renderToString).join("")}</${v.tag}>`;
+  }
+  return esc(String(v));
+}