Header Component

packages/demo-app/src/main.ts

@@ -1,11 +1,11 @@
 import {
   CodeRenderer,
   DiffRenderer,
-  type FileMetadata,
   type ParsedPatch,
   isHighlighterNull,
   parsePatchContent,
   preloadHighlighter,
+  renderFileHeader,
 } from '@pierre/diff-ui';
 import type { BundledLanguage, BundledTheme } from 'shiki';
 
@@ -36,16 +36,18 @@ function startStreaming() {
   }
 }
 
-let parsedPatch: ParsedPatch | undefined;
+let parsedPatches: ParsedPatch[] | undefined;
 function handlePreloadDiff() {
-  if (parsedPatch != null || !isHighlighterNull()) return;
-  parsedPatch = parsePatchContent(DIFF_CONTENT);
-  console.log('Parsed File:', parsedPatch);
+  if (parsedPatches != null || !isHighlighterNull()) return;
+  parsedPatches = parsePatchContent(DIFF_CONTENT);
+  console.log('Parsed File:', parsedPatches);
   const langs = new Set<BundledLanguage>();
-  for (const file of parsedPatch.files) {
-    const lang = getFiletypeFromMetadata(file);
-    if (lang != null) {
-      langs.add(lang);
+  for (const parsedPatch of parsedPatches) {
+    for (const file of parsedPatch.files) {
+      const lang = getFiletypeFromMetadata(file);
+      if (lang != null) {
+        langs.add(lang);
+      }
     }
   }
   preloadHighlighter({
@@ -68,33 +70,33 @@ function renderDiff() {
     | HTMLInputElement
     | undefined;
   container.dataset.diff = '';
-  parsedPatch = parsedPatch ?? parsePatchContent(DIFF_CONTENT);
+  parsedPatches = parsedPatches ?? parsePatchContent(DIFF_CONTENT);
   const unified = checkbox?.checked ?? false;
-  for (const file of parsedPatch.files) {
-    const decorations = DIFF_DECORATIONS[file.name];
-    const header = createFileHeader(file);
-    container.appendChild(header);
-    const pre = document.createElement('pre');
-    container.appendChild(pre);
-    const instance = new DiffRenderer({
-      lang: getFiletypeFromMetadata(file),
-      themes: { dark: 'tokyo-night', light: 'solarized-light' },
-      unified,
-    });
-    instance.render(file, pre, decorations);
-    diffInstances.push(instance);
+  for (const parsedPatch of parsedPatches) {
+    if (parsedPatch.patchMetadata != null) {
+      container.appendChild(createFileMetadata(parsedPatch.patchMetadata));
+    }
+    for (const file of parsedPatch.files) {
+      const decorations = DIFF_DECORATIONS[file.name];
+      container.appendChild(renderFileHeader(file));
+      const pre = document.createElement('pre');
+      container.appendChild(pre);
+      const instance = new DiffRenderer({
+        lang: getFiletypeFromMetadata(file),
+        themes: { dark: 'tokyo-night', light: 'solarized-light' },
+        unified,
+      });
+      instance.render(file, pre, decorations);
+      diffInstances.push(instance);
+    }
   }
 }
 
-function createFileHeader(file: FileMetadata) {
-  const header = document.createElement('div');
-  header.dataset.fileInfo = '';
-  if (file.hunks.length === 0) {
-    header.textContent = `RENAME ONLY: ${file.prevName} -> ${file.name}`;
-  } else {
-    header.textContent = `${file.type.toUpperCase()}: ${file.prevName != null ? `${file.prevName} -> ` : ''}${file.name}`;
-  }
-  return header;
+function createFileMetadata(patchMetadata: string) {
+  const metadata = document.createElement('div');
+  metadata.dataset.commitMetadata = '';
+  metadata.innerText = patchMetadata.replace(/\n+$/, '');
+  return metadata;
 }
 
 function handlePreload() {