elysia-rack 0.5.4 → 0.5.8

package/README.md

@@ -231,6 +231,9 @@ new Elysia().use(
 );
 
 // override panel.css (file path, raw CSS string, or { path } / { content })
+// Custom CSS is appended after the default panel.css, so it cascades over
+// the default instead of replacing it — useful for changing only a few
+// tokens or rules.
 new Elysia().use(reactPlugin({ css: "./my-panel.css" }));
 ```
 

package/dist/panel-app.js

@@ -233,25 +233,64 @@ function actionButton(action, id) {
   const target = esc(action.href.replaceAll(":id", encodeURIComponent(id)));
   const cls = "text-link hover:text-link-hover ml-3 px-1 text-sm font-medium hover:underline";
   if (action.method) {
-    const confirm = action.confirm ? ` data-rack-confirm="${esc(action.confirm)}"` : "";
-    return `<button type="button" data-rack-href="${target}" data-rack-method="${esc(action.method)}"${confirm} class="${cls}">${esc(action.label)}</button>`;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.dataset.rackHref = target;
+    btn.dataset.rackMethod = esc(action.method);
+    btn.className = cls;
+    if (action.confirm) {
+      btn.dataset.rackConfirm = esc(action.confirm);
+    }
+    btn.textContent = esc(action.label);
+    return btn;
   }
-  return `<a href="${target}" class="${cls}">${esc(action.label)}</a>`;
+  const a = document.createElement("a");
+  a.href = target;
+  a.className = cls;
+  a.textContent = esc(action.label);
+  return a;
 }
 function actionCell(id, cfg, deleted) {
-  let inner = "";
+  const td = document.createElement("td");
+  td.className = "border-table-border border-t px-3 py-2.5 whitespace-nowrap text-right";
+  const cls = "text-link hover:text-link-hover px-1 text-sm font-medium hover:underline";
   if (deleted) {
-    if (cfg.restorable)
-      inner = `<button type="button" data-restore-id="${esc(id)}" class="text-link hover:text-link-hover px-1 text-sm font-medium hover:underline">Restore</button>`;
+    if (cfg.restorable) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.dataset.restoreId = esc(id);
+      btn.className = cls;
+      btn.textContent = "Restore";
+      td.appendChild(btn);
+    }
   } else {
-    if (cfg.viewable)
-      inner += `<button type="button" data-view-id="${esc(id)}" class="text-link hover:text-link-hover px-1 text-sm font-medium hover:underline">View</button>`;
-    if (cfg.editable)
-      inner += `<button type="button" data-edit-id="${esc(id)}" class="text-link hover:text-link-hover ${cfg.viewable ? "ml-3 " : ""}px-1 text-sm font-medium hover:underline">Edit</button>` + `<button type="button" data-delete-id="${esc(id)}" class="text-destructive ml-3 px-1 text-sm font-medium hover:underline">Delete</button>`;
-    for (const action of cfg.actions)
-      inner += actionButton(action, id);
+    if (cfg.viewable) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.dataset.viewId = esc(id);
+      btn.className = cls;
+      btn.textContent = "View";
+      td.appendChild(btn);
+    }
+    if (cfg.editable) {
+      const editBtn = document.createElement("button");
+      editBtn.type = "button";
+      editBtn.dataset.editId = esc(id);
+      editBtn.className = `text-link hover:text-link-hover${cfg.viewable ? " ml-3" : ""} px-1 text-sm font-medium hover:underline`;
+      editBtn.textContent = "Edit";
+      td.appendChild(editBtn);
+      const delBtn = document.createElement("button");
+      delBtn.type = "button";
+      delBtn.dataset.deleteId = esc(id);
+      delBtn.className = "text-destructive ml-3 px-1 text-sm font-medium hover:underline";
+      delBtn.textContent = "Delete";
+      td.appendChild(delBtn);
+    }
+    for (const action of cfg.actions) {
+      td.appendChild(actionButton(action, id));
+    }
   }
-  return `<td class="border-table-border border-t px-3 py-2.5 whitespace-nowrap text-right">${inner}</td>`;
+  return td;
 }
 function numericCols(rows, cols) {
   const out = new Set;
@@ -263,37 +302,68 @@ function numericCols(rows, cols) {
   }
   return out;
 }
-function cellHtml(field, value) {
+function cellText(field, value) {
   if (value === null || value === undefined)
     return "";
-  const text = esc(displayValue(field, value));
-  if (field?.format === "badge" || field?.name === "status")
-    return `<span class="rounded-sm px-1.5 py-0.5 text-xs font-medium ${badgeClass(value)}">${text}</span>`;
-  return text;
+  return esc(displayValue(field, value));
 }
 function paintRows(tbody, cols, rows, cfg) {
   const showActions = cfg.editable || cfg.viewable || cfg.softDelete || cfg.actions.length > 0;
   const span = cols.length + (cfg.selectable ? 1 : 0) + (showActions ? 1 : 0);
-  if (!rows.length) {
-    tbody.innerHTML = `<tr><td colspan="${span || 1}" class="text-text-muted px-4 py-10 text-center">No records found.</td></tr>`;
-    return;
-  }
   const numeric = numericCols(rows, cols);
-  tbody.innerHTML = rows.map((row) => {
+  if (!rows.length) {
+    tbody.replaceChildren();
+    const tr = document.createElement("tr");
+    const td = document.createElement("td");
+    td.colSpan = span || 1;
+    td.className = "text-text-muted px-4 py-10 text-center";
+    td.textContent = "No records found.";
+    tr.appendChild(td);
+    tbody.appendChild(tr);
+    return;
+  }
+  tbody.replaceChildren();
+  for (const row of rows) {
     const id = row[cfg.pk] == null ? "" : String(row[cfg.pk]);
     const deleted = cfg.softDelete && row[cfg.deletedAt] != null;
-    let html = `<tr class="hover:bg-table-row-hover">`;
-    if (cfg.selectable)
-      html += `<td class="border-table-border border-t px-3 py-2.5"><input type="checkbox" data-select-row value="${esc(id)}" aria-label="Select row ${esc(id)}" class="accent-primary size-4"></td>`;
-    html += cols.map((col) => {
+    const tr = document.createElement("tr");
+    tr.className = "hover:bg-table-row-hover";
+    if (cfg.selectable) {
+      const td = document.createElement("td");
+      td.className = "border-table-border border-t px-3 py-2.5";
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      input.dataset.selectRow = "";
+      input.value = id;
+      input.setAttribute("aria-label", `Select row ${esc(id)}`);
+      input.className = "accent-primary size-4";
+      td.appendChild(input);
+      tr.appendChild(td);
+    }
+    for (const col of cols) {
       const field = cfg.byName.get(col);
       const align = numeric.has(col) || field && isNumericField(field) ? " text-right tabular-nums" : "";
-      return `<td class="border-table-border border-t px-3 py-2.5${align}">${cellHtml(field, row[col])}</td>`;
-    }).join("");
-    if (showActions)
-      html += actionCell(id, cfg, Boolean(deleted));
-    return html + "</tr>";
-  }).join("");
+      const td = document.createElement("td");
+      td.className = `border-table-border border-t px-3 py-2.5${align}`;
+      const value = row[col];
+      const badge = field?.format === "badge" || field?.name === "status";
+      if (value === null || value === undefined) {
+        td.textContent = "";
+      } else if (badge) {
+        const span2 = document.createElement("span");
+        span2.className = `rounded-sm px-1.5 py-0.5 text-xs font-medium ${badgeClass(value)}`;
+        span2.textContent = displayValue(field, value);
+        td.appendChild(span2);
+      } else {
+        td.textContent = cellText(field, value);
+      }
+      tr.appendChild(td);
+    }
+    if (showActions) {
+      tr.appendChild(actionCell(id, cfg, Boolean(deleted)));
+    }
+    tbody.appendChild(tr);
+  }
 }
 function paintPages(box, params, page, totalPages) {
   const linkCls = "border-border rounded-md border px-2.5 py-1 text-xs hover:bg-navigation-hover";
@@ -501,14 +571,36 @@ async function openDetail(root, id) {
   if (label)
     label.textContent = `#${id}`;
   const body = dlg.querySelector("[data-detail-body]");
-  if (body)
-    body.innerHTML = renderDetail(root, row);
+  if (body) {
+    body.replaceChildren(renderDetail(root, row));
+  }
   dlg.showModal?.();
 }
 function renderDetail(root, row) {
   const cfg = tableConfig(root);
-  const items = cfg.fields.filter((field) => row[field.name] !== undefined && !field.hideInTable).map((field) => `<div class="flex flex-col gap-0.5"><dt class="text-text-muted text-xs font-medium">${esc(field.label)}</dt><dd class="text-foreground text-sm">${esc(displayValue(field, row[field.name])) || "—"}</dd></div>`);
-  return items.join("") || `<p class="text-text-muted text-sm">No fields</p>`;
+  const frag = document.createDocumentFragment();
+  const visibleFields = cfg.fields.filter((field) => row[field.name] !== undefined && !field.hideInTable);
+  if (!visibleFields.length) {
+    const p = document.createElement("p");
+    p.className = "text-text-muted text-sm";
+    p.textContent = "No fields";
+    frag.appendChild(p);
+    return frag;
+  }
+  for (const field of visibleFields) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "flex flex-col gap-0.5";
+    const dt = document.createElement("dt");
+    dt.className = "text-text-muted text-xs font-medium";
+    dt.textContent = String(field.label ?? "");
+    const dd = document.createElement("dd");
+    dd.className = "text-foreground text-sm";
+    dd.textContent = displayValue(field, row[field.name]) || "—";
+    wrapper.appendChild(dt);
+    wrapper.appendChild(dd);
+    frag.appendChild(wrapper);
+  }
+  return frag;
 }
 async function deleteOne(root, id) {
   if (!window.confirm(`Delete record ${id}?`))

package/dist/react/index.d.ts

@@ -1,5 +1,6 @@
 import Elysia from "elysia";
 import { ReactRack } from "./types";
+export declare const lazyPage: typeof ReactRack.lazyPage;
 export declare function page<Props = Record<string, never>>(path: string, props?: Props): ReactRack.PageDescriptor<Props>;
 export declare const pages: ReactRack.PageRegistry;
 export declare function reactPlugin(options?: ReactRack.ReactPluginOptions): Elysia<"", {

package/dist/react/index.js

@@ -149,6 +149,7 @@ function createRenderer(pages) {
 }
 
 // src/react/index.ts
+var lazyPage = ReactRack.lazyPage;
 var PANEL_ASSETS = {
   "panel.css": "text/css; charset=utf-8",
   "panel-theme.js": "text/javascript; charset=utf-8",
@@ -260,14 +261,34 @@ function reactPlugin(options = {}) {
       return status(404, "Panel asset not found");
     if (params.name === "panel.css") {
       const custom = await loadCustomPanelCss();
+      const dir2 = resolveDistDir();
+      let defaultCss = null;
+      if (dir2) {
+        try {
+          defaultCss = await readFile2(join2(dir2, "panel.css"), "utf-8");
+        } catch {}
+      }
       if (custom !== null) {
-        return new Response(custom, {
+        const combined = defaultCss ? `${defaultCss}
+
+/* Custom panel.css overrides */
+${custom}` : custom;
+        return new Response(combined, {
           headers: {
             "Content-Type": type,
             "Cache-Control": "public, max-age=3600"
           }
         });
       }
+      if (defaultCss) {
+        return new Response(defaultCss, {
+          headers: {
+            "Content-Type": type,
+            "Cache-Control": "public, max-age=3600"
+          }
+        });
+      }
+      return status(404, "Panel asset not found");
     }
     const dir = resolveDistDir();
     if (!dir)
@@ -298,5 +319,6 @@ function reactPlugin(options = {}) {
 export {
   reactPlugin,
   pages,
-  page
+  page,
+  lazyPage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elysia-rack",
-  "version": "0.5.4",
+  "version": "0.5.8",
   "description": "Model-driven CRUD rack for Elysia: REST + QUERY routes, validation, authorization, OpenAPI metadata, and React panel rendering.",
   "type": "module",
   "license": "MIT",
@@ -59,7 +59,8 @@
     "build:js": "bun build ./src/rack/index.ts ./src/react/index.ts --outdir ./dist --target node --format esm --splitting --external elysia --external react --external react-dom --external lucide-react",
     "build:client": "bun build src/react/page/client/panel.ts --outfile dist/panel-app.js --target browser --format esm && bun build src/react/page/client/theme.ts --outfile dist/panel-theme.js --target browser --format esm && mkdir -p dist && cp src/react/app.html dist/app.html 2>/dev/null || true",
     "build:dts": "tsc -p tsconfig.build.json",
-    "prepublishOnly": "bun run typecheck && bun run build"
+    "prepublishOnly": "bun run typecheck && bun run build",
+    "docs:build": "vitepress build docs"
   },
   "peerDependencies": {
     "elysia": "^1.4.0",
@@ -77,6 +78,7 @@
     "@tailwindcss/cli": "4.3.3",
     "@types/bun": "latest",
     "@types/react": "^19.2.18",
+    "vitepress": "1",
     "@types/react-dom": "^19.2.5",
     "drizzle-orm": "^0.45.2",
     "elysia": "^1.4.30",