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 EJS sibling at modules/ui/DiffViewer/DiffViewer.ejs.
11function greet(name) {
2 console.log(`Hello, ${name}!`);
2 console.log("Hello, " + name);
33}
44
55greet("world");
6greet("kui");
67
<DiffViewer oldText={oldSrc} newText={newSrc} />1function greet(name) {
2 console.log("Hello, " + name);
3}
4
5greet("world");
6
1function greet(name) {
2 console.log(`Hello, ${name}!`);
3}
4
5greet("world");
6greet("kui");
7
<DiffViewer oldText={oldSrc} newText={newSrc} mode="split" />1import { useState, useCallback } from 'react';
1import { useState } from 'react';
22
3export 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);
3export function Counter() {
4 const [count, setCount] = useState(0);
5 const handleClick = () => {
6 setCount(count + 1);
7 };
89 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>
1216 );
<DiffViewer oldText={oldSrc} newText={newSrc} context={1} />1import { useState, useCallback } from 'react';
1import { useState } from 'react';
22
3export 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);
3export function Counter() {
4 const [count, setCount] = useState(0);
5 const handleClick = () => {
6 setCount(count + 1);
7 };
89 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>
<DiffViewer
oldText={oldSrc}
newText={newSrc}
context={3}
collapsible
/>