create-volt 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.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 +267,7 @@ 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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.17.0",
+  "version": "0.18.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));
+}