DiffViewer
MoleculeLine-based text diff viewer with unified (GitHub-style) and split (yan yana) modes. M1 ships a zero-dep LCS algorithm, hunk headers in `@@ -old,n +new,n @@` form, old/new line-number gutters, configurable context window, and optional collapsible unchanged regions. Pixel-identical React sibling at modules/ui/DiffViewer/index.tsx.
1
1
function greet(name) {
2
console.log(`Hello, ${name}!`);
2
console.log("Hello, " + name);
3
3
}
4
4
5
5
greet("world");
6
greet("kui");
6
7
<%- include('modules/ui/DiffViewer', {
id: 'review',
oldText: oldSrc,
newText: newSrc
}) %>
1
function greet(name) {
2
console.log("Hello, " + name);
3
}
4
5
greet("world");
6
1
function greet(name) {
2
console.log(`Hello, ${name}!`);
3
}
4
5
greet("world");
6
greet("kui");
7
<%- include('modules/ui/DiffViewer', {
id: 'review',
oldText: oldSrc,
newText: newSrc,
mode: 'split'
}) %>
1
import { useState, useCallback } from 'react';
1
import { useState } from 'react';
2
2
3
export function Counter({ initial = 0 }) {
4
const [count, setCount] = useState(initial);
5
const handleClick = useCallback(() => {
6
setCount((c) => c + 1);
7
}, []);
8
const handleReset = () => setCount(initial);
3
export function Counter() {
4
const [count, setCount] = useState(0);
5
const handleClick = () => {
6
setCount(count + 1);
7
};
8
9
return (
10
<div className="flex gap-2">
11
<button onClick={handleClick}>
12
Clicked {count} times
13
</button>
14
<button onClick={handleReset}>Reset</button>
15
</div>
9
<button onClick={handleClick}>
10
Clicked {count} times
11
</button>
12
16
);
<%- include('modules/ui/DiffViewer', {
id: 'review',
oldText: oldSrc,
newText: newSrc,
context: 1
}) %>
1
import { useState, useCallback } from 'react';
1
import { useState } from 'react';
2
2
3
export function Counter({ initial = 0 }) {
4
const [count, setCount] = useState(initial);
5
const handleClick = useCallback(() => {
6
setCount((c) => c + 1);
7
}, []);
8
const handleReset = () => setCount(initial);
3
export function Counter() {
4
const [count, setCount] = useState(0);
5
const handleClick = () => {
6
setCount(count + 1);
7
};
8
9
return (
10
<div className="flex gap-2">
11
<button onClick={handleClick}>
12
Clicked {count} times
13
</button>
14
<button onClick={handleReset}>Reset</button>
15
</div>
9
<button onClick={handleClick}>
10
Clicked {count} times
11
</button>
12
16
);
13
17
}
14
18
<%- include('modules/ui/DiffViewer', {
id: 'review',
oldText: oldSrc,
newText: newSrc,
context: 3,
collapsible: true
}) %><%- include('./DiffViewer/DiffViewer', locals) %>