formatting
This commit is contained in:
parent
249c88da83
commit
d8918f8b36
2 changed files with 225 additions and 168 deletions
172
server.js
172
server.js
|
|
@ -1,35 +1,44 @@
|
|||
import express from 'express';
|
||||
import { execSync, spawn } from 'child_process';
|
||||
import { readFileSync, writeFileSync } from 'fs';
|
||||
import { join, dirname } from 'path';
|
||||
import { tmpdir } from 'os';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { parsePatchFiles, DEFAULT_THEMES } from '@pierre/diffs';
|
||||
import { preloadFileDiff } from '@pierre/diffs/ssr';
|
||||
import express from "express";
|
||||
import { execSync, spawn } from "child_process";
|
||||
import { readFileSync, writeFileSync } from "fs";
|
||||
import { join, dirname } from "path";
|
||||
import { tmpdir } from "os";
|
||||
import { fileURLToPath } from "url";
|
||||
import { parsePatchFiles, DEFAULT_THEMES } from "@pierre/diffs";
|
||||
import { preloadFileDiff } from "@pierre/diffs/ssr";
|
||||
|
||||
const __dirname = typeof __filename !== 'undefined'
|
||||
const __dirname =
|
||||
typeof __filename !== "undefined"
|
||||
? dirname(__filename)
|
||||
: dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
// --- arg parsing ---
|
||||
|
||||
const outIdx = process.argv.indexOf('--out');
|
||||
const outIdx = process.argv.indexOf("--out");
|
||||
const outFile = outIdx !== -1 ? process.argv[outIdx + 1] : null;
|
||||
const isStatic = process.argv.includes('--static');
|
||||
const isStatic = process.argv.includes("--static");
|
||||
|
||||
const positional = [];
|
||||
let skipNext = false;
|
||||
for (const arg of process.argv.slice(2)) {
|
||||
if (skipNext) { skipNext = false; continue; }
|
||||
if (arg === '--static') continue;
|
||||
if (arg === '--out') { skipNext = true; continue; }
|
||||
if (skipNext) {
|
||||
skipNext = false;
|
||||
continue;
|
||||
}
|
||||
if (arg === "--static") continue;
|
||||
if (arg === "--out") {
|
||||
skipNext = true;
|
||||
continue;
|
||||
}
|
||||
positional.push(arg);
|
||||
}
|
||||
const [projectDir, mainBranch, featureBranch, portArg] = positional;
|
||||
const port = parseInt(portArg, 10) || 3000;
|
||||
|
||||
if (!projectDir || !mainBranch || !featureBranch) {
|
||||
console.error('Usage: difftool.sh [--static] [--out <file>] <git-project-dir> <main branch> <feature branch> [port]');
|
||||
console.error(
|
||||
"Usage: difftool.sh [--static] [--out <file>] <git-project-dir> <main branch> <feature branch> [port]",
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
|
|
@ -37,30 +46,35 @@ if (!projectDir || !mainBranch || !featureBranch) {
|
|||
|
||||
function run(cmd) {
|
||||
try {
|
||||
return execSync(cmd, { encoding: 'utf-8', cwd: projectDir }).trim();
|
||||
return execSync(cmd, {
|
||||
encoding: "utf-8",
|
||||
cwd: projectDir,
|
||||
}).trim();
|
||||
} catch {
|
||||
return '';
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
const branchDiff = run(`git diff ${mainBranch} ${featureBranch} --no-color`);
|
||||
const stagedDiff = run('git diff --cached --no-color');
|
||||
const unstagedDiff = run('git diff --no-color');
|
||||
const stagedDiff = run("git diff --cached --no-color");
|
||||
const unstagedDiff = run("git diff --no-color");
|
||||
|
||||
const untrackedFiles = run('git ls-files --others --exclude-standard')
|
||||
.split('\n')
|
||||
const untrackedFiles = run("git ls-files --others --exclude-standard")
|
||||
.split("\n")
|
||||
.filter(Boolean);
|
||||
|
||||
let untrackedPatch = '';
|
||||
let untrackedPatch = "";
|
||||
for (const file of untrackedFiles) {
|
||||
let content;
|
||||
try {
|
||||
content = readFileSync(join(projectDir, file), 'utf-8');
|
||||
content = readFileSync(join(projectDir, file), "utf-8");
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
const lines = content.split('\n');
|
||||
const lineCount = content.endsWith('\n') ? lines.length - 1 : lines.length;
|
||||
const lines = content.split("\n");
|
||||
const lineCount = content.endsWith("\n")
|
||||
? lines.length - 1
|
||||
: lines.length;
|
||||
untrackedPatch += `diff --git a/${file} b/${file}\n`;
|
||||
untrackedPatch += `new file mode 100644\n`;
|
||||
untrackedPatch += `--- /dev/null\n`;
|
||||
|
|
@ -73,18 +87,18 @@ for (const file of untrackedFiles) {
|
|||
|
||||
const patch = [branchDiff, stagedDiff, unstagedDiff, untrackedPatch]
|
||||
.filter(Boolean)
|
||||
.join('\n');
|
||||
.join("\n");
|
||||
|
||||
if (!patch.trim()) {
|
||||
console.log('No differences found');
|
||||
console.log("No differences found");
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
const parsedEntries = parsePatchFiles(patch);
|
||||
const files = parsedEntries.flatMap(e => e.files ?? []);
|
||||
const files = parsedEntries.flatMap((e) => e.files ?? []);
|
||||
|
||||
if (files.length === 0) {
|
||||
console.log('No file diffs found in patch');
|
||||
console.log("No file diffs found in patch");
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
|
|
@ -93,23 +107,28 @@ if (files.length === 0) {
|
|||
(async () => {
|
||||
const ssrOptions = {
|
||||
theme: DEFAULT_THEMES,
|
||||
themeType: 'system',
|
||||
diffStyle: 'unified',
|
||||
themeType: "system",
|
||||
diffStyle: "unified",
|
||||
useTokenTransformer: true,
|
||||
};
|
||||
|
||||
const renderedFiles = [];
|
||||
for (const fileDiff of files) {
|
||||
try {
|
||||
const result = await preloadFileDiff({ fileDiff, options: ssrOptions });
|
||||
const result = await preloadFileDiff({
|
||||
fileDiff,
|
||||
options: ssrOptions,
|
||||
});
|
||||
renderedFiles.push({
|
||||
name: fileDiff.name || 'unknown',
|
||||
name: fileDiff.name || "unknown",
|
||||
prerenderedHTML: result.prerenderedHTML,
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn(`Failed to SSR-render ${fileDiff.name || 'unknown'}: ${err.message}`);
|
||||
console.warn(
|
||||
`Failed to SSR-render ${fileDiff.name || "unknown"}: ${err.message}`,
|
||||
);
|
||||
renderedFiles.push({
|
||||
name: fileDiff.name || 'unknown',
|
||||
name: fileDiff.name || "unknown",
|
||||
prerenderedHTML: null,
|
||||
});
|
||||
}
|
||||
|
|
@ -118,17 +137,22 @@ if (files.length === 0) {
|
|||
const finalPatch = patch;
|
||||
|
||||
function escapeHtml(str) {
|
||||
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
return str
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
function fileId(name) {
|
||||
return 'DF-' + name.replace(/[^a-zA-Z0-9_-]/g, '_');
|
||||
return "DF-" + name.replace(/[^a-zA-Z0-9_-]/g, "_");
|
||||
}
|
||||
|
||||
function pageHtml(opts) {
|
||||
const { mode, sidebarHtml, extraScript } = opts;
|
||||
|
||||
const fileSections = renderedFiles.map((f) => {
|
||||
const fileSections = renderedFiles
|
||||
.map((f) => {
|
||||
const escapedName = escapeHtml(f.name);
|
||||
const id = fileId(f.name);
|
||||
if (f.prerenderedHTML !== null) {
|
||||
|
|
@ -145,16 +169,18 @@ if (files.length === 0) {
|
|||
<div class="diff-file-header">${escapedName}</div>
|
||||
<div class="diff-fallback"><a href="/patch">View raw patch</a></div>
|
||||
</div>`;
|
||||
}).join('\n');
|
||||
})
|
||||
.join("\n");
|
||||
|
||||
const hasLocal = stagedDiff || unstagedDiff || untrackedPatch;
|
||||
const subtitle = hasLocal
|
||||
? `${escapeHtml(mainBranch)} \u2192 ${escapeHtml(featureBranch)} (includes local changes)`
|
||||
: `${escapeHtml(mainBranch)} \u2192 ${escapeHtml(featureBranch)}`;
|
||||
const title = `Diff: ${escapeHtml(mainBranch)} \u2192 ${escapeHtml(featureBranch)}`;
|
||||
const rawLink = mode === 'server'
|
||||
const rawLink =
|
||||
mode === "server"
|
||||
? '<a class="raw-link" href="/patch">View raw patch \u2192</a>'
|
||||
: '';
|
||||
: "";
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
|
@ -269,7 +295,7 @@ ${extraScript}
|
|||
const sidebarHtml = `
|
||||
<div class="sidebar">
|
||||
<div class="file-list">
|
||||
${renderedFiles.map(f => ` <a class="file-item" href="#${fileId(f.name)}">${escapeHtml(f.name)}</a>`).join('\n')}
|
||||
${renderedFiles.map((f) => ` <a class="file-item" href="#${fileId(f.name)}">${escapeHtml(f.name)}</a>`).join("\n")}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
|
|
@ -292,18 +318,24 @@ ${renderedFiles.map(f => ` <a class="file-item" href="#${fileId(f.name)
|
|||
});
|
||||
</script>`;
|
||||
|
||||
return pageHtml({ mode: 'static', sidebarHtml, extraScript })
|
||||
.replace('</body>', ` <details style="padding:0 24px 16px">
|
||||
return pageHtml({
|
||||
mode: "static",
|
||||
sidebarHtml,
|
||||
extraScript,
|
||||
}).replace(
|
||||
"</body>",
|
||||
` <details style="padding:0 24px 16px">
|
||||
<summary id="patch-toggle" style="cursor:pointer;font-size:0.8125rem;color:#2563eb">View raw patch</summary>
|
||||
<pre id="patch-content" class="raw-patch">${escapedPatch}</pre>
|
||||
</details>\n</body>`);
|
||||
</details>\n</body>`,
|
||||
);
|
||||
}
|
||||
|
||||
// --- mode dispatch ---
|
||||
|
||||
if (outFile) {
|
||||
const html = buildStaticHtml();
|
||||
writeFileSync(outFile, html, 'utf-8');
|
||||
writeFileSync(outFile, html, "utf-8");
|
||||
console.log(`Written to ${outFile}`);
|
||||
process.exit(0);
|
||||
}
|
||||
|
|
@ -311,42 +343,58 @@ ${renderedFiles.map(f => ` <a class="file-item" href="#${fileId(f.name)
|
|||
if (isStatic) {
|
||||
const html = buildStaticHtml();
|
||||
const tmpFile = join(tmpdir(), `difftool-${Date.now()}.html`);
|
||||
writeFileSync(tmpFile, html, 'utf-8');
|
||||
writeFileSync(tmpFile, html, "utf-8");
|
||||
|
||||
const openCmd = process.platform === 'darwin' ? 'open'
|
||||
: process.platform === 'win32' ? 'start'
|
||||
: 'xdg-open';
|
||||
const openCmd =
|
||||
process.platform === "darwin"
|
||||
? "open"
|
||||
: process.platform === "win32"
|
||||
? "start"
|
||||
: "xdg-open";
|
||||
console.log(`Opening ${tmpFile}`);
|
||||
try {
|
||||
spawn(openCmd, [tmpFile], { detached: true, stdio: 'ignore' }).unref();
|
||||
spawn(openCmd, [tmpFile], {
|
||||
detached: true,
|
||||
stdio: "ignore",
|
||||
}).unref();
|
||||
} catch {
|
||||
console.log(`HTML file saved to ${tmpFile}`);
|
||||
}
|
||||
} else {
|
||||
const app = express();
|
||||
app.use(express.static(join(__dirname, 'public')));
|
||||
app.use(express.static(join(__dirname, "public")));
|
||||
|
||||
app.get('/patch', (req, res) => {
|
||||
res.type('text/plain').send(finalPatch);
|
||||
app.get("/patch", (req, res) => {
|
||||
res.type("text/plain").send(finalPatch);
|
||||
});
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
const fileDataJson = JSON.stringify(renderedFiles.map(f => ({ name: f.name })))
|
||||
.replace(/<\/script>/gi, '<\\/script>');
|
||||
app.get("/", (req, res) => {
|
||||
const fileDataJson = JSON.stringify(
|
||||
renderedFiles.map((f) => ({ name: f.name })),
|
||||
).replace(/<\/script>/gi, "<\\/script>");
|
||||
|
||||
const sidebarHtml = '<div class="sidebar"><div id="file-tree"></div></div>';
|
||||
const sidebarHtml =
|
||||
'<div class="sidebar"><div id="file-tree"></div></div>';
|
||||
|
||||
const extraScript = `
|
||||
<script id="diff-files-data" type="application/json">${fileDataJson}</script>
|
||||
<script type="module" src="/client.js"></script>`;
|
||||
|
||||
const html = pageHtml({ mode: 'server', sidebarHtml, extraScript });
|
||||
res.type('html').send(html);
|
||||
const html = pageHtml({
|
||||
mode: "server",
|
||||
sidebarHtml,
|
||||
extraScript,
|
||||
});
|
||||
res.type("html").send(html);
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Difftool running at http://localhost:${port}`);
|
||||
console.log(`Patch endpoint: http://localhost:${port}/patch`);
|
||||
console.log(
|
||||
`Difftool running at http://localhost:${port}`,
|
||||
);
|
||||
console.log(
|
||||
`Patch endpoint: http://localhost:${port}/patch`,
|
||||
);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,23 +1,32 @@
|
|||
import { FileTree } from '@pierre/trees';
|
||||
import { FileTree } from "@pierre/trees";
|
||||
|
||||
const dataEl = document.getElementById('diff-files-data');
|
||||
const dataEl = document.getElementById("diff-files-data");
|
||||
const files = JSON.parse(dataEl.textContent);
|
||||
const paths = files.map(f => f.name);
|
||||
const paths = files.map((f) => f.name);
|
||||
|
||||
const mount = document.getElementById('file-tree');
|
||||
mount.style.height = (window.innerHeight - mount.getBoundingClientRect().top) + 'px';
|
||||
const mount = document.getElementById("file-tree");
|
||||
mount.style.height =
|
||||
window.innerHeight - mount.getBoundingClientRect().top + "px";
|
||||
|
||||
const tree = new FileTree({
|
||||
paths,
|
||||
initialExpansion: 'open',
|
||||
initialExpansion: "open",
|
||||
onSelectionChange: (selectedPaths) => {
|
||||
if (selectedPaths.length !== 1) return;
|
||||
const id = 'DF-' + selectedPaths[0].replace(/[^a-zA-Z0-9_-]/g, '_');
|
||||
const id =
|
||||
"DF-" +
|
||||
selectedPaths[0].replace(/[^a-zA-Z0-9_-]/g, "_");
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
el.classList.add('diff-highlight');
|
||||
setTimeout(() => el.classList.remove('diff-highlight'), 1500);
|
||||
el.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
el.classList.add("diff-highlight");
|
||||
setTimeout(
|
||||
() => el.classList.remove("diff-highlight"),
|
||||
1500,
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue