AXIS
Agentic UI/DiffViewer

DiffViewer

코드 변경 사항을 시각적으로 비교하는 컴포넌트입니다. Unified/Split 뷰 모드를 지원합니다.

Installation

bash
npx axis-cli add diff-viewer --agentic

Interactive Demo

counter.tsx
+13-5
1-import { useState } from 'react'
1+import { useState, useCallback } from 'react'
22
3-function Counter() {
4- const [count, setCount] = useState(0)
3+interface CounterProps {
4+ initialValue?: number
5+}
56
7+function Counter({ initialValue = 0 }: CounterProps) {
8+ const [count, setCount] = useState(initialValue)
9+
10+ const increment = useCallback(() => {
11+ setCount(prev => prev + 1)
12+ }, [])
13+
614 return (
7- <div>
15+ <div className="counter">
816 <p>Count: {count}</p>
9- <button onClick={() => setCount(count + 1)}>
17+ <button onClick={increment}>
1018 Increment
1119 </button>
1220 </div>
1321 )
1422 }

View Modes

Unified

example.ts
+2-1
11 const a = 1
2-const b = 2
2+const b = 3
3+const c = 4

Split

example.ts
+2-1
Before
1const a = 1
2const b = 2
After
1const a = 1
2const b = 3
3const c = 4

Usage

tsx
import { DiffViewer } from '@axis-ds/agentic-ui'

const before = `function greet(name) {
  console.log("Hello, " + name)
}`

const after = `function greet(name: string) {
  console.log(\`Hello, \${name}!\`)
  return name
}`

export function Example() {
  return (
    <DiffViewer
      before={before}
      after={after}
      filename="greet.ts"
      viewMode="unified"
    />
  )
}

Props

beforeRequired
Type:string

변경 전 코드

afterRequired
Type:string

변경 후 코드

filename
Type:string
Default:-

파일 이름

viewMode
Type:"unified" | "split"
Default:"unified"

뷰 모드

className
Type:string
Default:-

추가 CSS 클래스