create-volt 0.55.1 → 0.56.0

package/templates/business/public/app.js

@@ -0,0 +1,89 @@
+// app.js — demo app. Shows BOTH authoring styles on one shared signal engine,
+// with live hot reload. Edit anything here (or in index.html) and save: the
+// dev server pushes a reload over Socket.io and the page refreshes.
+
+import { signal, computed, el, html, mount } from "/volt.js";
+
+// --- Counter, written with el() helpers (imperative, zero template parsing) ---
+function Counter() {
+  const n = signal(0);
+  return el("div", { class: "card-x p-4 mb-4" },
+    el("h2", { class: "h5 mb-3" }, "Counter — built with el()"),
+    el("div", { class: "d-flex align-items-center gap-3" },
+      el("button", { class: "btn btn-outline-secondary", onClick: () => n(n() - 1) }, "−"),
+      el("span", { class: "fs-4 fw-bold", style: "min-width:3ch;text-align:center" },
+        () => String(n())), // function-child: only this text node updates
+      el("button", { class: "btn btn-primary", onClick: () => n(n() + 1) }, "+"),
+      el("span", { class: "text-muted ms-2" },
+        () => (n() % 2 === 0 ? "even" : "odd")),
+    ),
+  );
+}
+
+// --- Todo list, written with html`` templates (markup-first) ---
+function Todos() {
+  const items = signal([]); // [{ id, text, done }]
+  const draft = signal("");
+  const remaining = computed(() => items().filter((t) => !t.done).length);
+
+  const add = () => {
+    const text = draft().trim();
+    if (!text) return;
+    items([...items(), { id: Date.now() + Math.random(), text, done: false }]);
+    draft("");
+  };
+  const toggle = (id) =>
+    items(items().map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
+  const remove = (id) => items(items().filter((t) => t.id !== id));
+
+  const row = (t) => html`
+    <li class="list-group-item d-flex align-items-center gap-2">
+      <input class="form-check-input mt-0" type="checkbox"
+             checked=${t.done} onchange=${() => toggle(t.id)} />
+      <span class=${() => "flex-grow-1 " + (t.done ? "text-decoration-line-through text-muted" : "")}>
+        ${t.text}
+      </span>
+      <button class="btn btn-sm btn-outline-danger" onclick=${() => remove(t.id)}>✕</button>
+    </li>`;
+
+  return html`
+    <div class="card-x p-4">
+      <h2 class="h5 mb-3">Todos — built with html\`\`</h2>
+      <div class="input-group mb-3">
+        <input class="form-control" placeholder="Add a task…"
+               value=${draft}
+               oninput=${(e) => draft(e.target.value)}
+               onkeydown=${(e) => e.key === "Enter" && add()} />
+        <button class="btn btn-primary" onclick=${add}>Add</button>
+      </div>
+      <ul class="list-group mb-2">
+        ${() => items().map(row)}
+      </ul>
+      <small class="text-muted">${remaining} remaining</small>
+    </div>`;
+}
+
+// Mount the demo, plus the UI for any enabled add-ons (auth, realtime, …).
+// Add-ons serve their own /…-ui.js when turned on in the setup wizard.
+const nodes = [Counter(), Todos()];
+let enabled = [];
+try {
+  enabled = await (await fetch("/__volt/addons")).json();
+} catch {
+  /* older app without the endpoint — just the demo */
+}
+if (enabled.includes("auth")) {
+  try {
+    nodes.unshift((await import("/auth-ui.js")).authPanel());
+  } catch {
+    /* auth UI unavailable */
+  }
+}
+if (enabled.includes("realtime")) {
+  try {
+    nodes.push((await import("/chat-ui.js")).chatPanel());
+  } catch {
+    /* realtime UI unavailable */
+  }
+}
+mount("#app", ...nodes);

package/templates/business/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/business/public/volt.js

@@ -0,0 +1,355 @@
+// volt.js — a tiny, no-build, signals-based UI library.
+//
+// Not React: there is no JSX, no virtual DOM, and no "re-render the whole
+// component" step. State lives in *signals*; reading a signal inside a piece of
+// UI subscribes that exact piece; writing the signal re-runs only those
+// subscribers and touches only the precise text node / attribute that changed.
+//
+// Two ways to author UI, same engine underneath:
+//   1. html``  — tagged-template markup with ${signal} holes
+//   2. el(...)  — imperative DOM helpers with function-children
+// They interoperate freely (drop an el() node into an html`` template, etc.).
+//
+// Public API: signal, computed, effect, el, html, mount.
+
+// ---------------------------------------------------------------------------
+// Reactive core (signals + effects with ownership-based disposal)
+// ---------------------------------------------------------------------------
+
+let activeEffect = null;
+
+// A signal is a function: call with no args to read, one arg to write.
+//   const n = signal(0);  n();      // read  → 0
+//                         n(n()+1); // write → notifies subscribers
+export function signal(value) {
+  const subs = new Set();
+  return function sig(...args) {
+    if (args.length) {
+      const next = args[0];
+      if (next === value) return value; // no-op on identical value
+      value = next;
+      for (const eff of [...subs]) eff.run(); // copy: run() mutates subs
+      return value;
+    }
+    if (activeEffect) {
+      subs.add(activeEffect);
+      activeEffect.deps.add(subs);
+    }
+    return value;
+  };
+}
+
+// effect(fn) runs fn now, tracks every signal it reads, and re-runs it whenever
+// any of those change. Effects created *inside* another effect are owned by it
+// and disposed before each re-run — so dynamic regions clean up after themselves.
+export function effect(fn) {
+  const eff = {
+    deps: new Set(),
+    children: new Set(),
+    parent: activeEffect,
+    disposed: false,
+    run() {
+      // A signal write notifies a *snapshot* of subscribers; a parent re-render
+      // can dispose this effect before its turn in that snapshot — so skip if so.
+      if (eff.disposed) return;
+      disposeChildren(eff);
+      cleanupDeps(eff);
+      const prev = activeEffect;
+      activeEffect = eff;
+      try {
+        fn();
+      } finally {
+        activeEffect = prev;
+      }
+    },
+    dispose() {
+      eff.disposed = true;
+      disposeChildren(eff);
+      cleanupDeps(eff);
+      if (eff.parent) eff.parent.children.delete(eff);
+    },
+  };
+  if (activeEffect) activeEffect.children.add(eff);
+  eff.run();
+  return () => eff.dispose();
+}
+
+// computed(fn) is a read-only derived signal: () => value, auto-updating.
+export function computed(fn) {
+  const s = signal(undefined);
+  effect(() => s(fn()));
+  return () => s();
+}
+
+function cleanupDeps(eff) {
+  for (const subs of eff.deps) subs.delete(eff);
+  eff.deps.clear();
+}
+
+function disposeChildren(eff) {
+  for (const child of [...eff.children]) child.dispose();
+  eff.children.clear();
+}
+
+// ---------------------------------------------------------------------------
+// DOM helpers
+// ---------------------------------------------------------------------------
+
+// el(tag, props?, ...children) → a real DOM element.
+//   props: { onClick: fn }        → event listener
+//          { class: () => ... }   → reactive attribute (function = live)
+//          { id: 'x' }            → static attribute
+//   children: strings, numbers, nodes, arrays, or functions (functions = live)
+export function el(tag, props, ...children) {
+  const node = document.createElement(tag);
+  if (props) {
+    for (const [key, val] of Object.entries(props)) {
+      if (key.startsWith("on") && typeof val === "function") {
+        node.addEventListener(key.slice(2).toLowerCase(), val);
+      } else if (typeof val === "function") {
+        effect(() => setAttr(node, key, val()));
+      } else {
+        setAttr(node, key, val);
+      }
+    }
+  }
+  for (const child of children) appendChild(node, child);
+  return node;
+}
+
+// mount(target, ...children) appends children into target (selector or element).
+// Top-level function-children are reactive too.
+export function mount(target, ...children) {
+  const parent = typeof target === "string" ? document.querySelector(target) : target;
+  for (const child of children) appendChild(parent, child);
+  return parent;
+}
+
+// Boolean attributes: presence means "on", so a false/null/"false" value must turn
+// them OFF (readonly="false" is still readonly in HTML). Set via the DOM property;
+// readonly's property is readOnly, so map it.
+const BOOL_ATTRS = new Set(["checked", "disabled", "selected", "readonly", "required", "multiple", "hidden", "autofocus", "open"]);
+const BOOL_PROP = { readonly: "readOnly" };
+function setAttr(node, name, value) {
+  if (name === "value") {
+    const v = value ?? "";
+    if (node.value !== v) node.value = v; // skip redundant writes — they reset the caret while typing
+    return;
+  }
+  if (BOOL_ATTRS.has(name)) {
+    node[BOOL_PROP[name] || name] = !!value && value !== "false";
+    return;
+  }
+  if (value === false || value == null) {
+    node.removeAttribute(name);
+    return;
+  }
+  node.setAttribute(name, value);
+}
+
+// Append a child, making function-children into self-updating dynamic regions
+// bounded by two comment anchors (so they can render text, nodes, or lists).
+function appendChild(parent, child) {
+  if (typeof child === "function") {
+    const start = document.createComment("");
+    const end = document.createComment("");
+    parent.appendChild(start);
+    parent.appendChild(end);
+    effect(() => renderRange(start, end, child()));
+    return;
+  }
+  for (const node of toNodes(child)) parent.appendChild(node);
+}
+
+// Replace everything between the start/end anchors with `value`'s nodes.
+function renderRange(start, end, value) {
+  if (!end.parentNode) return; // range detached (parent re-rendered) — nothing to do
+  let n = start.nextSibling;
+  while (n && n !== end) {
+    const t = n.nextSibling;
+    n.remove();
+    n = t;
+  }
+  for (const node of toNodes(value)) end.parentNode.insertBefore(node, end);
+}
+
+// Normalize any child value into an array of DOM nodes.
+function toNodes(value) {
+  if (value == null || value === false || value === true) return [];
+  if (Array.isArray(value)) return value.flatMap(toNodes);
+  if (value instanceof Node) return [value];
+  return [document.createTextNode(String(value))];
+}
+
+// ---------------------------------------------------------------------------
+// html`` template layer (parses once, wires holes to the same primitives)
+// ---------------------------------------------------------------------------
+
+const PH = (i) => `__voltph${i}__`;
+const PH_RE = /__voltph(\d+)__/g;
+
+// We're inside an open tag (attribute context) if the last '<' comes after the
+// last '>' in the accumulated string.
+function isAttrContext(str) {
+  return str.lastIndexOf("<") > str.lastIndexOf(">");
+}
+
+export function html(strings, ...values) {
+  let acc = "";
+  strings.forEach((str, i) => {
+    acc += str;
+    if (i < values.length) {
+      acc += isAttrContext(acc) ? PH(i) : `<!--${PH(i)}-->`;
+    }
+  });
+
+  const tpl = document.createElement("template");
+  tpl.innerHTML = acc.trim();
+
+  // Bind attribute holes.
+  for (const node of tpl.content.querySelectorAll("*")) {
+    for (const attr of [...node.attributes]) {
+      PH_RE.lastIndex = 0;
+      if (PH_RE.test(attr.value)) bindAttr(node, attr, values);
+    }
+  }
+
+  // Bind node holes (comment placeholders).
+  const walker = document.createTreeWalker(tpl.content, NodeFilter.SHOW_COMMENT);
+  const holes = [];
+  let c;
+  while ((c = walker.nextNode())) {
+    const m = c.data.match(/^__voltph(\d+)__$/);
+    if (m) holes.push([c, Number(m[1])]);
+  }
+  for (const [comment, i] of holes) bindNodeHole(comment, values[i]);
+
+  const nodes = [...tpl.content.childNodes];
+  return nodes.length === 1 ? nodes[0] : nodes;
+}
+
+function bindAttr(node, attr, values) {
+  const name = attr.name;
+  const raw = attr.value;
+  const single = raw.match(/^__voltph(\d+)__$/);
+  node.removeAttribute(name);
+
+  // onX=${fn} → event listener
+  if (name.startsWith("on") && single) {
+    node.addEventListener(name.slice(2).toLowerCase(), values[Number(single[1])]);
+    return;
+  }
+
+  // Otherwise a (possibly mixed) attribute value. If any hole is a function it
+  // is read inside the effect, so the attribute stays live.
+  effect(() => {
+    const text = raw.replace(PH_RE, (_, j) => {
+      const v = values[Number(j)];
+      return String(typeof v === "function" ? v() : v ?? "");
+    });
+    setAttr(node, name, text);
+  });
+}
+
+function bindNodeHole(comment, value) {
+  const start = document.createComment("");
+  comment.parentNode.insertBefore(start, comment); // `comment` becomes the end anchor
+  if (typeof value === "function") {
+    effect(() => renderRange(start, comment, value()));
+  } else {
+    renderRange(start, comment, value);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Hot reload client — listens for the dev server's reload event over Socket.io
+// ---------------------------------------------------------------------------
+
+(function startHotReload() {
+  if (typeof window === "undefined") return; // not a browser (SSR / Node imports / tests)
+
+  // Patch `from` to match `to` in place — only changed nodes are touched, so
+  // focus, caret, scroll, and untouched subtrees survive. Positional (no keys),
+  // which is plenty for a dev reload; the caller falls back to a full reload if
+  // anything throws.
+  const morph = (from, to) => {
+    const active = document.activeElement;
+    if (from.nodeType !== to.nodeType || from.nodeName !== to.nodeName) {
+      from.replaceWith(document.importNode(to, true));
+      return;
+    }
+    if (from.nodeType === 3 || from.nodeType === 8) {
+      if (from.nodeValue !== to.nodeValue) from.nodeValue = to.nodeValue;
+      return;
+    }
+    if (from.nodeType !== 1) return;
+    for (const a of [...to.attributes]) {
+      if (from === active && a.name === "value") continue; // don't fight the typist
+      if (from.getAttribute(a.name) !== a.value) from.setAttribute(a.name, a.value);
+    }
+    for (const a of [...from.attributes]) if (!to.hasAttribute(a.name)) from.removeAttribute(a.name);
+    let f = from.firstChild,
+      t = to.firstChild;
+    while (f && t) {
+      const nf = f.nextSibling,
+        nt = t.nextSibling;
+      morph(f, t);
+      f = nf;
+      t = nt;
+    }
+    while (f) {
+      const nf = f.nextSibling;
+      from.removeChild(f);
+      f = nf;
+    }
+    while (t) {
+      const nt = t.nextSibling;
+      from.appendChild(document.importNode(t, true));
+      t = nt;
+    }
+  };
+
+  const bustStyles = () => {
+    for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
+      const u = new URL(link.getAttribute("href"), location.href);
+      u.searchParams.set("_hr", Date.now());
+      link.setAttribute("href", u.pathname + u.search);
+    }
+  };
+
+  let busy = false;
+  const onChange = async (info) => {
+    const file = (info && info.file) || "";
+    if (/\.css(\?|$)/i.test(file)) return bustStyles(); // pure CSS → swap, no reload
+    if (/\.(js|mjs)(\?|$)/i.test(file)) return location.reload(); // JS changed → must re-run
+    if (busy) return;
+    busy = true;
+    try {
+      const html = await (await fetch(location.href, { headers: { "x-volt-hot": "1" } })).text();
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      // a client-rendered app (#app filled by JS, empty in server HTML) can't be
+      // morphed without wiping it — full reload instead.
+      const cur = document.querySelector("#app");
+      const next = doc.querySelector("#app");
+      if (cur && cur.children.length && next && !next.children.length) {
+        location.reload();
+        return;
+      }
+      morph(document.body, doc.body);
+      if (document.title !== doc.title) document.title = doc.title;
+      if (/_theme/.test(file)) bustStyles(); // theme/layout edit may change CSS too
+    } catch {
+      location.reload();
+    } finally {
+      busy = false;
+    }
+  };
+
+  const connect = () => {
+    if (!window.io) return false;
+    window.io().on("volt:reload", onChange);
+    console.log("[volt] hot reload connected (live morph)");
+    return true;
+  };
+  if (!connect()) window.addEventListener("load", connect);
+})();

package/templates/business/render.yaml

@@ -0,0 +1,15 @@
+# Render blueprint — https://render.com/docs/blueprint-spec
+# Push this repo to GitHub, then in Render: New → Blueprint → pick the repo.
+# Render builds the Dockerfile, gives you HTTPS + a domain, and runs it.
+services:
+  - type: web
+    name: volt-app
+    runtime: docker
+    plan: starter
+    envVars:
+      - key: VOLT_ADDONS
+        sync: false # set your add-ons (e.g. "db,auth") in the dashboard
+      # Add the rest in the dashboard as needed:
+      #   DB_DRIVER, MONGODB_URI / DATABASE_URL,
+      #   MEDIA_DRIVER, S3_ENDPOINT/S3_REGION/S3_BUCKET/S3_KEY/S3_SECRET,
+      #   SMTP_URL, MAIL_FROM