@riebeckite/plugin-diff 0.0.15 → 0.0.16

package/dist/client.js

@@ -99,10 +99,9 @@ function initDiffHistory() {
 }
 function initDiffHistoryRoot(root) {
   const payload = readPayload(root);
-  if (!payload || payload.revisions.length === 0) return;
-  const revisions = new Map(
-    payload.revisions.map((revision) => [revision.hash, revision])
-  );
+  if (!payload) return;
+  let revisions = revisionsMap(payload.revisions ?? []);
+  let revisionsRequest = null;
   const fromSelect = root.querySelector(
     "[data-rr-diff-from]"
   );
@@ -115,23 +114,74 @@ function initDiffHistoryRoot(root) {
     button.addEventListener("click", () => {
       const toHash = button.dataset.rrDiffSelect;
       if (!toHash) return;
-      const diff = createDiff(revisions, fromSelect.value, toHash);
-      if (!diff) return;
-      fromSelect.value = diff.from?.hash ?? "";
-      toSelect.value = diff.to.hash;
-      updateSelectedCommit(root, diff.to.hash);
-      renderPanel(panel, diff);
+      void updateDiff({
+        root,
+        panel,
+        getRevisions: () => revisions,
+        setRevisions: (loaded) => {
+          revisions = loaded;
+        },
+        load: () => {
+          revisionsRequest ??= loadRevisions(payload.path);
+          return revisionsRequest;
+        },
+        fromHash: fromSelect.value,
+        toHash,
+        fromSelect,
+        toSelect
+      });
     });
   }
   const updateFromSelects = () => {
-    const diff = createDiff(revisions, fromSelect.value, toSelect.value);
-    if (!diff) return;
-    updateSelectedCommit(root, diff.to.hash);
-    renderPanel(panel, diff);
+    void updateDiff({
+      root,
+      panel,
+      getRevisions: () => revisions,
+      setRevisions: (loaded) => {
+        revisions = loaded;
+      },
+      load: () => {
+        revisionsRequest ??= loadRevisions(payload.path);
+        return revisionsRequest;
+      },
+      fromHash: fromSelect.value,
+      toHash: toSelect.value,
+      fromSelect,
+      toSelect
+    });
   };
   fromSelect.addEventListener("change", updateFromSelects);
   toSelect.addEventListener("change", updateFromSelects);
 }
+async function updateDiff(input) {
+  const { root, panel, fromHash, toHash, fromSelect, toSelect } = input;
+  const token = `${fromHash}
+${toHash}`;
+  root.dataset.rrDiffPending = token;
+  const loaded = await input.load();
+  if (loaded) input.setRevisions(loaded);
+  if (root.dataset.rrDiffPending !== token) return;
+  const diff = createDiff(input.getRevisions(), fromHash, toHash);
+  if (!diff) return;
+  fromSelect.value = diff.from?.hash ?? "";
+  toSelect.value = diff.to.hash;
+  updateSelectedCommit(root, diff.to.hash);
+  renderPanel(panel, diff);
+}
+async function loadRevisions(path) {
+  if (!path) return null;
+  try {
+    const response = await fetch(path);
+    if (!response.ok) return null;
+    const payload = await response.json();
+    return revisionsMap(payload.revisions ?? []);
+  } catch {
+    return null;
+  }
+}
+function revisionsMap(revisions) {
+  return new Map(revisions.map((revision) => [revision.hash, revision]));
+}
 function createDiff(revisions, fromHash, toHash) {
   const to = revisions.get(toHash);
   if (!to) return null;
@@ -165,15 +215,13 @@ function updateSelectedCommit(root, hash) {
   }
 }
 function renderPanel(panel, diff) {
-  const fromLabel = diff.from?.shortHash ?? "Beginning";
-  panel.innerHTML = `<details class="rr-diff-history__diff" data-rr-diff-rendered open>
-    <summary class="rr-diff-history__diff-head">${escapeHtml(fromLabel)} → ${escapeHtml(diff.to.shortHash)}</summary>
+  panel.innerHTML = `<div class="rr-diff-history__diff" data-rr-diff-rendered>
     <div class="rr-diff-history__table-wrap">
       <table class="rr-diff-history__table">
         <tbody>${diff.lines.map(renderLine).join("")}</tbody>
       </table>
     </div>
-  </details>`;
+  </div>`;
 }
 function renderLine(line) {
   const prefix = line.type === "added" ? "+" : line.type === "removed" ? "-" : " ";

package/dist/index.js

@@ -53,15 +53,13 @@ function renderDiffViewer({
   </div>`;
 }
 function renderDiffPanel(diff2) {
-  const fromLabel = diff2.from?.shortHash ?? "Beginning";
-  return `<details class="rr-diff-history__diff" data-rr-diff-rendered open>
-    <summary class="rr-diff-history__diff-head">${escapeHtml(fromLabel)} → ${escapeHtml(diff2.to.shortHash)}</summary>
+  return `<div class="rr-diff-history__diff" data-rr-diff-rendered>
     <div class="rr-diff-history__table-wrap">
       <table class="rr-diff-history__table">
         <tbody>${diff2.lines.map((line) => renderDiffLine({ line })).join("")}</tbody>
       </table>
     </div>
-  </details>`;
+  </div>`;
 }
 function renderRevisionSelect(kind, history, value) {
   const emptyOption = kind === "from" ? `<option value="">Beginning</option>` : "";
@@ -74,19 +72,16 @@ function renderRevisionSelect(kind, history, value) {
 function renderDiffHistory(input) {
   const history = input.revisions;
   const selected = input.selected;
-  const payload = JSON.stringify({ revisions: input.revisions }).replace(
-    /</g,
-    "\\u003c"
-  );
+  const payloadPath = input.payloadPath;
   return `<section class="rr-diff-history" data-rr-diff-history>
-  <details class="rr-diff-history__panel" open>
+  <details class="rr-diff-history__panel">
   <summary class="rr-diff-history__header">
     <h2 class="rr-diff-history__title">History</h2>
     <span class="rr-diff-history__header-meta"><span class="rr-diff-history__count">${history.length} changes</span><span class="rr-diff-history__toggle-label rr-diff-history__toggle-label--open">Collapse</span><span class="rr-diff-history__toggle-label rr-diff-history__toggle-label--closed">Expand</span><span class="rr-diff-history__toggle" aria-hidden="true"><svg class="rr-diff-history__toggle-icon" viewBox="0 0 16 16" width="16" height="16" focusable="false"><path d="M5.2 3.4 10.8 8l-5.6 4.6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/></svg></span></span>
   </summary>
-  ${history.length === 0 || !selected ? renderEmptyState() : renderContent(history, selected)}
+   ${history.length === 0 || !selected ? renderEmptyState() : renderContent(history, selected)}
   </details>
-  <script type="application/json" data-rr-diff-history-data>${payload}</script>
+   ${payloadPath ? `<script type="application/json" data-rr-diff-history-data>${JSON.stringify({ path: payloadPath }).replace(/</g, "\\u003c")}</script>` : ""}
 </section>`;
 }
 function renderContent(history, selected) {
@@ -416,13 +411,25 @@ function diff(options = {}) {
       );
       const revisions = await getMarkdownRevisions(api, filePath, history);
       const selected = await api.getCurrentDiff(filePath);
+      const payloadPath = revisions.length > 0 ? diffPayloadPath(context.slug) : void 0;
+      if (payloadPath) {
+        context.output.emit({
+          path: payloadPath,
+          content: JSON.stringify({ revisions }).replace(/</g, "\\u003c"),
+          dependencies: [{ type: "content", slug: context.slug }]
+        });
+      }
       context.content.html += renderDiffHistory({
         revisions,
-        selected
+        selected,
+        payloadPath: payloadPath ? `/${payloadPath}` : void 0
       });
     }
   });
 }
+function diffPayloadPath(slug) {
+  return `_riebeckite/diff/${Buffer.from(slug).toString("base64url")}.json`;
+}
 function createPostDiffApi(options = {}) {
   const reader = new GitMarkdownHistoryReader(options);
   return {

package/dist/src/components/diff-history.d.ts

@@ -2,5 +2,6 @@ import type { MarkdownRevision, PostDiff } from "../types.js";
 export type DiffHistoryProps = {
     revisions: MarkdownRevision[];
     selected: PostDiff | null;
+    payloadPath?: string;
 };
 export declare function renderDiffHistory(input: DiffHistoryProps): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-diff",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,12 +21,12 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.15"
+    "@riebeckite/core": "0.0.16"
   },
   "devDependencies": {
     "@types/node": "^24.5.2",
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.15"
+    "@riebeckite/test": "0.0.16"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -183,7 +183,6 @@
 }
 
 .rr-diff-history__commit:focus-visible,
-.rr-diff-history__diff-head:focus-visible,
 .rr-diff-history__controls select:focus-visible {
   outline: 2px solid var(--rb-color-accent, #f66620);
   outline-offset: 2px;
@@ -222,39 +221,16 @@
     var(--rb-color-border, color-mix(in srgb, currentColor 18%, transparent));
 }
 
-.rr-diff-history__diff-head {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-block-end: 1px solid
-    var(--rb-color-border, color-mix(in srgb, currentColor 18%, transparent));
-  padding: 0.625rem 0.75rem;
-  font-family: var(
-    --rb-font-mono,
-    ui-monospace,
-    SFMono-Regular,
-    Consolas,
-    monospace
-  );
-  font-size: 0.8125rem;
-  cursor: pointer;
-  user-select: none;
-}
-
-.rr-diff-history__diff-head::marker {
-  color: var(
-    --rb-color-muted,
-    color-mix(in srgb, currentColor 62%, transparent)
-  );
-}
-
 .rr-diff-history__table-wrap {
   overflow-x: auto;
 }
 
 .rr-diff-history__table {
+  display: table;
   width: 100%;
   min-width: 42rem;
+  margin-block: 0;
+  overflow-x: visible;
   border-collapse: collapse;
   font-family: var(
     --rb-font-mono,