share page diff

app/packages/web/src/components/DiffView.tsx

@@ -0,0 +1,66 @@
+import { type Component, createSignal, onMount } from "solid-js"
+import { diffLines, type Change } from "diff"
+import CodeBlock from "./CodeBlock"
+import styles from "./diffView.module.css"
+
+type DiffRow = {
+  left: string
+  right: string
+  type: "added" | "removed" | "unchanged"
+}
+
+interface DiffViewProps {
+  oldCode: string
+  newCode: string
+  lang?: string
+  class?: string
+}
+
+const DiffView: Component<DiffViewProps> = (props) => {
+  const [rows, setRows] = createSignal<DiffRow[]>([])
+
+  onMount(() => {
+    const chunks = diffLines(props.oldCode, props.newCode)
+    const diffRows: DiffRow[] = []
+
+    chunks.forEach((chunk: Change) => {
+      const lines = chunk.value.split(/\r?\n/)
+      if (lines.at(-1) === "") lines.pop()
+
+      lines.forEach((line) => {
+        diffRows.push({
+          left: chunk.removed ? line : chunk.added ? "" : line,
+          right: chunk.added ? line : chunk.removed ? "" : line,
+          type: chunk.added ? "added"
+            : chunk.removed ? "removed"
+              : "unchanged",
+        })
+      })
+    })
+
+    setRows(diffRows)
+  })
+
+  return (
+    <div class={`${styles.diff} ${props.class ?? ""}`}>
+      {rows().map((r) => (
+        <div data-section="row">
+          <CodeBlock
+            code={r.left}
+            lang={props.lang}
+            data-section="cell"
+            data-diff-type={r.type === "removed" ? "removed" : ""}
+          />
+          <CodeBlock
+            code={r.right}
+            lang={props.lang}
+            data-section="cell"
+            data-diff-type={r.type === "added" ? "added" : ""}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default DiffView