DiffViewer

const diffViewerFixture = {
  id: "diff-viewer",
  fileName: "services/ledger/charge.ts",
  lines: [
    { type: "ctx" as const, oldNo: 41, newNo: 41, code: "function charge(req) {" },
    { type: "del" as const, oldNo: 42, newNo: null, code: "  if (!acct) throw new Error();" },
    {
      type: "add" as const,
      oldNo: null,
      newNo: 42,
      code: "  if (!acct) throw new NotFoundError();",
    },
  ],
  defaultMode: "unified" as const,
};
 
import { DiffViewer } from "@grassroot/ui-react/advanced";
 
export default function DiffViewerDemo() {
  const { id: _id, ...props } = diffViewerFixture;
  return (
    <div>
      <DiffViewer {...props} />
    </div>
  );
}

<script setup lang="ts">
const diffViewerFixture = {
  id: "diff-viewer",
  fileName: "services/ledger/charge.ts",
  lines: [
    { type: "ctx" as const, oldNo: 41, newNo: 41, code: "function charge(req) {" },
    { type: "del" as const, oldNo: 42, newNo: null, code: "  if (!acct) throw new Error();" },
    {
      type: "add" as const,
      oldNo: null,
      newNo: 42,
      code: "  if (!acct) throw new NotFoundError();",
    },
  ],
  defaultMode: "unified" as const,
};
 
import { DiffViewer } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <DiffViewer
      :file-name="diffViewerFixture.fileName"
      :lines="diffViewerFixture.lines"
      :default-mode="diffViewerFixture.defaultMode"
    />
  </div>
</template>

import { Component } from "@angular/core";
const diffViewerFixture = {
  id: "diff-viewer",
  fileName: "services/ledger/charge.ts",
  lines: [
    { type: "ctx" as const, oldNo: 41, newNo: 41, code: "function charge(req) {" },
    { type: "del" as const, oldNo: 42, newNo: null, code: "  if (!acct) throw new Error();" },
    {
      type: "add" as const,
      oldNo: null,
      newNo: 42,
      code: "  if (!acct) throw new NotFoundError();",
    },
  ],
  defaultMode: "unified" as const,
};
 
import { GrassrootDiffViewer } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-diff-viewer-demo",
  standalone: true,
  imports: [GrassrootDiffViewer],
  template: `
    <div>
      <grassroot-diff-viewer
        [fileName]="fixture.fileName"
        [lines]="fixture.lines"
        [defaultMode]="fixture.defaultMode"
      />
    </div>
  `,
})
export class DiffViewerDemoComponent {
  protected readonly fixture = diffViewerFixture;
}
 
export default DiffViewerDemoComponent;

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

/** @jsxImportSource solid-js */
const diffViewerFixture = {
  id: "diff-viewer",
  fileName: "services/ledger/charge.ts",
  lines: [
    { type: "ctx" as const, oldNo: 41, newNo: 41, code: "function charge(req) {" },
    { type: "del" as const, oldNo: 42, newNo: null, code: "  if (!acct) throw new Error();" },
    {
      type: "add" as const,
      oldNo: null,
      newNo: 42,
      code: "  if (!acct) throw new NotFoundError();",
    },
  ],
  defaultMode: "unified" as const,
};
 
import { DiffViewer } from "@grassroot/ui-solid";
 
export default function DiffViewerDemo() {
  return (
    <div>
      <DiffViewer
        fileName={diffViewerFixture.fileName}
        lines={diffViewerFixture.lines}
        defaultMode={diffViewerFixture.defaultMode}
      />
    </div>
  );
}