DiffViewer

import { DiffViewer } from "@grassroot/ui-react/advanced";
 
const lines = [
  { type: "ctx", oldNo: 41, newNo: 41, code: [{ text: "function charge(req) {" }] },
  { type: "del", oldNo: 42, newNo: null, code: [{ text: "  if (!acct) throw …" }] },
  { type: "add", oldNo: null, newNo: 42, code: [{ text: "  if (!acct) throw new NotFoundError();" }] },
];
 
<DiffViewer fileName="services/ledger/charge.ts" lines={lines} />

<script setup lang="ts">
import { DiffViewer } from "@grassroot/ui-vue";
 
const lines = [
  { type: "ctx", oldNo: 41, newNo: 41, code: [{ text: "function charge(req) {" }] },
  { type: "del", oldNo: 42, newNo: null, code: [{ text: "  if (!acct) throw …" }] },
  { type: "add", oldNo: null, newNo: 42, code: [{ text: "  if (!acct) throw new NotFoundError();" }] },
];
</script>
 
<template>
  <DiffViewer file-name="services/ledger/charge.ts" :lines="lines" />
</template>

<script lang="ts">
  import { DiffViewer } from "@grassroot/ui-svelte";
 
  const lines = [
    { type: "ctx", oldNo: 41, newNo: 41, code: [{ text: "function charge(req) {" }] },
    { type: "del", oldNo: 42, newNo: null, code: [{ text: "  if (!acct) throw …" }] },
    { type: "add", oldNo: null, newNo: 42, code: [{ text: "  if (!acct) throw new NotFoundError();" }] },
  ];
</script>
 
<DiffViewer fileName="services/ledger/charge.ts" lines={lines} />

import { DiffViewer } from "@grassroot/ui-solid";
 
const lines = [
  { type: "ctx", oldNo: 41, newNo: 41, code: [{ text: "function charge(req) {" }] },
  { type: "del", oldNo: 42, newNo: null, code: [{ text: "  if (!acct) throw …" }] },
  { type: "add", oldNo: null, newNo: 42, code: [{ text: "  if (!acct) throw new NotFoundError();" }] },
];
 
export function Example() {
  return (
    <>
      <DiffViewer fileName="services/ledger/charge.ts" lines={lines} />
    </>
  );
}