fix: restore inspector template hot reload

bliss-cli/live-editor/artifact-editor.eta

@@ -0,0 +1,57 @@
+<article data-bliss-artifact-editor
+  data-kind="<%= it.kind %>" data-id="<%= it.artifact.id %>"
+  data-structure-id="<%= it.artifact.structure_id %>" data-method="<%= it.artifact.verb || '' %>"
+  class="border-2 border-black bg-white text-black shadow-[4px_4px_0_#000]">
+  <header class="flex items-center gap-2 border-b-4 border-double border-black p-3">
+    <strong class="min-w-0 flex-1 truncate"><% if (it.kind === 'route') { %><%= it.artifact.verb %> <%= it.artifact.path %><% } else { %><%= it.artifact.name %><% } %></strong>
+    <span class="text-xs uppercase"><%= it.kind %></span><span data-status class="text-xs"></span>
+  </header>
+  <div class="p-3">
+    <% if (it.kind === 'route' && it.artifact.verb !== 'GET') { %>
+      <p class="mb-2 border border-amber-700 bg-amber-100 p-2 text-sm">Saving does not replay this <%= it.artifact.verb %> route.</p>
+    <% } %>
+    <label class="block text-xs font-bold uppercase tracking-widest"><%= it.kind === 'route' ? 'Handler' : 'Template' %></label>
+    <div data-editor="<%= it.kind === 'route' ? 'handler' : 'content' %>" data-mode="<%= it.kind === 'route' ? 'javascript' : 'html' %>" class="h-[min(55vh,34rem)] w-full border-2 border-black"><%= it.kind === 'route' ? it.artifact.handler : it.artifact.content %></div>
+    <% if (it.kind === 'template') { %>
+      <details class="mt-3" open>
+        <summary class="cursor-pointer text-xs font-bold uppercase tracking-widest">Rendering test</summary>
+        <div data-editor="test_object" data-mode="javascript" class="mt-1 h-32 w-full border-2 border-black"><%= it.artifact.test_object || '' %></div>
+        <iframe data-template-test title="Template rendering test" src="/workshop/<%= it.artifact.structure_id %>/template/<%= it.artifact.id %>/preview" class="mt-2 h-64 w-full border-2 border-black"></iframe>
+      </details>
+    <% } %>
+    <button data-save type="button" class="mt-3 border-2 border-black bg-white px-3 py-2 font-bold shadow-[3px_3px_0_#000]">Save</button>
+  </div>
+</article>
+<script>
+(function () {
+  const card = document.currentScript.previousElementSibling;
+  if (!card || card.dataset.ready) return;
+  card.dataset.ready = "true";
+  const editors = Object.fromEntries([...card.querySelectorAll("[data-editor]")].map((node) => {
+    const editor = ace.edit(node);
+    editor.setTheme("ace/theme/monokai");
+    editor.session.setMode(`ace/mode/${node.dataset.mode}`);
+    return [node.dataset.editor, editor];
+  }));
+  card.querySelector("[data-save]").onclick = async () => {
+    const status = card.querySelector("[data-status]");
+    const { kind, id, structureId } = card.dataset;
+    status.textContent = "Saving…";
+    const body = kind === "route"
+      ? { handler: editors.handler.getValue() }
+      : { content: editors.content.getValue(), test_object: editors.test_object.getValue() };
+    const response = await fetch(`/workshop/${structureId}/${kind}/${id}`, {
+      method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
+    });
+    if (!response.ok) return void (status.textContent = "Save failed");
+    status.textContent = "Saved";
+    if (kind === "template") {
+      const frame = card.querySelector("[data-template-test]");
+      frame.src = `${frame.src.split("?")[0]}?t=${Date.now()}`;
+    }
+    document.dispatchEvent(new CustomEvent("bliss:source-saved", {
+      detail: { kind, id, method: kind === "route" ? card.dataset.verb : undefined },
+    }));
+  };
+})();
+</script>

bliss-cli/live-editor/install.js

@@ -40,6 +40,7 @@ const templates = [
   ["inspector/slideout", "slideout.eta"],
   ["inspector/route_editor", "route-editor.eta"],
   ["inspector/template_editor", "template-editor.eta"],
+  ["inspector/artifact_editor", "artifact-editor.eta"],
 ];
 for (const [name, filename] of templates) {
   let template = state.templates.find((item) => item.name === name);

bliss-cli/live-editor/route-editor.js

@@ -1,8 +1,7 @@
 function handler(req, res) {
   const sql = require("db")("bliss").sql;
-  const sourceRoute = sql
-    .prepare("SELECT * FROM routes WHERE id = ?")
-    .get(req.params.id);
-  if (!sourceRoute) return res.status(404).send("Route not found");
-  res.render("inspector/route_editor", { sourceRoute });
+  const kind = "route";
+  const artifact = sql.prepare("SELECT * FROM routes WHERE id = ?").get(req.params.id);
+  if (!artifact) return res.status(404).send("Route not found");
+  res.render("inspector/artifact_editor", { kind, artifact });
 }

bliss-cli/live-editor/template-editor.js

@@ -1,8 +1,7 @@
 function handler(req, res) {
   const sql = require("db")("bliss").sql;
-  const sourceTemplate = sql
-    .prepare("SELECT * FROM templates WHERE id = ?")
-    .get(req.params.id);
-  if (!sourceTemplate) return res.status(404).send("Template not found");
-  res.render("inspector/template_editor", { sourceTemplate });
+  const kind = "template";
+  const artifact = sql.prepare("SELECT * FROM templates WHERE id = ?").get(req.params.id);
+  if (!artifact) return res.status(404).send("Template not found");
+  res.render("inspector/artifact_editor", { kind, artifact });
 }