尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Rivet 仓库调试利器:基于 Hono + diff2html 的 git diff 可视化浏览工具

Rivet 仓库调试利器:基于 Hono + diff2html 的 git diff 可视化浏览工具 Rivet 仓库调试利器基于 Hono diff2html 的 git diff 可视化浏览工具【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actorsdiff-viewer是 riv/actors 仓库scripts/debug调试工具箱中的一个小巧实用工具它用一个仅约 150 行的 Hono 应用把任意git diffpatch 文件、git 提交区间或整个工作区改动变成可在浏览器中按文件逐个浏览的可视化页面。读完本文你将掌握该工具的三种输入模式、自定义端口方式以及它从 patch 解析、增删行统计到 diff2html 前端渲染的完整实现原理可直接在自己的项目中复刻同款体验。工具定位scripts/debug 调试工具箱的一员在仓库的 scripts/debug 目录下汇聚了一批面向日常调试的辅助脚本例如decode_audit_entry.js、decode_epoxy_changelog.js、logfmt_to_gantt.ts等用于解码内部数据格式或可视化日志。diff-viewer正是这一体系中的 diff 查看模块其完整源码位于 scripts/debug/diff-viewer/server.js依赖与启动方式定义在 scripts/debug/diff-viewer/package.json。从源码看它依赖三个核心包hono^4.6.0轻量 Web 框架负责路由与 HTML 响应hono/node-server^1.13.0把 Hono 应用跑在 Node.js 上的适配层diff2html^3.4.56将 unified diff 文本渲染成带行号、增删高亮的 HTML 表格。项目声明为 ESM 模块type: module并预置了start: node server.js脚本安装后既可直接运行node server.js也可通过pnpm start启动。快速开始安装与启动工具本身是一个独立的 Node.js 应用不依赖仓库其他模块安装与启动只需两步cd scripts/debug/diff-viewer pnpm install node server.js my.patch启动成功后终端会打印形如http://localhost:3737 (42 files)的日志端口号与文件数量为实际值随后用浏览器打开默认地址即可看到文件列表页。如果直接运行不带任何参数程序会打印用法说明并以退出码 1 结束防止误启动usage: node server.js patch-file | git-range | dir [--port N] patch-file: path to a unified diff file git-range: e.g. abc123..HEAD or main..HEAD — runs git diff in cwd dir: path to a git repo, diffs HEAD vs working tree这一参数校验逻辑位于 server.js先遍历process.argv提取选项剩下的位置参数即为输入目标若位置参数为空则输出上表并process.exit(1)。三种输入模式patch 文件、git 区间与工作区目录工具的灵活之处在于它接受三种来源的 diff 内容使用方式分别对应 README.md 中的三个示例1. 直接读取 unified diff 补丁文件node server.js my.patch适合场景从 CI 或 Code Review 平台导出的.patch文件、他人发来的补丁、或任意git diff my.patch生成的补丁。源码中先通过statSync(target)探测目标类型若不是目录则直接用readFileSync(target, utf8)读取文件内容server.js。2. 在任意目录执行 git 区间 diffnode server.js abc123..HEAD node server.js main..HEAD适合场景在仓库任意位置即当前工作目录直接对比两个提交之间的改动。当statSync抛错目标路径不存在即不是文件也不是目录时程序会回退执行git diff targetserver.js其中target就是传入的 git 区间表达式如abc123..HEAD、main..HEAD。注意区间 diff 是相对于当前 shell 所在目录的仓库执行的因此运行前需确保处于目标 git 仓库内。3. 对比指定仓库的 HEAD 与工作区node server.js /path/to/repo适合场景快速查看某个本地仓库尚未提交的改动。当目标是一个目录时程序执行git -C dir diff HEADserver.js-C让 git 切换到该目录运行因此不要求当前 shell 在那个仓库里。这条命令输出的是HEAD 与工作区含暂存区未提交改动的差异相当于一次未提交变更总览。三种模式下git 命令的输出缓冲区上限被设为 1GBmaxBuffer: 1024 ** 3足以容纳大型仓库的海量 diff若最终拿到的 patch 内容为空程序会打印empty diff并退出server.js避免渲染空页面。自定义端口--port / -p默认端口为 3737可通过命令行选项覆盖node server.js main..HEAD --port 4000 node server.js main..HEAD -p 4000参数解析逻辑位于 server.js遍历参数时遇到--port或-p即把下一个参数强转为数字作为端口其余参数归入位置参数列表。启动时通过serve({ fetch: app.fetch, port: portArg }, ...)监听指定端口server.js回调中打印实际生效的地址与文件数量。这一设计让多个 diff 任务可以同时在不同端口上并行查看。实现原理从 patch 文本到浏览器页面整个应用只有两个路由配合一段纯 Node 侧的 patch 解析逻辑构成了完整的数据流。patch 分文件解析与增删统计拿到完整 patch 文本后程序按行扫描以diff --git行作为文件边界切分server.js每个文件块记录path、content该文件的完整 patch 片段、adds与dels两个统计值路径通过正则^diff --git a\/(.?) b\/(.)$提取取b/一侧即新路径统计增删行时以/-开头的行分别计数但排除/---即文件头标记行避免把 b/xxx这类元信息误算进增删数server.js。这个解析结果同时驱动文件列表页的排序展示与统计徽标。路由一文件列表页GET /首页路由app.get(/)server.js渲染一个暗色风格的 HTML 列表标题显示Diff Viewer — N filesN 为实际文件数每个文件一行链接路径用等宽字体展示右侧以绿色#3fb950标出adds、以红色#f85149标出-dels页面顶部内置一个客户端搜索框通过oninput对每个li做textContent.toLowerCase().includes()过滤无需后端参与即可按文件名实时筛选所有用户可控字符串文件路径都经escape()做 HTML 实体转义server.js避免注入风险。路由二单文件详情页GET /file/:i点击列表项进入/file/:i路由server.js这里完成了核心的 diff 渲染通过c.req.param(i)取索引越界时返回 404顶部 sticky 导航栏提供← all files返回链接以及← prev/next →逐个文件翻页首尾文件自动隐藏对应方向页面通过两个静态资源路由server.js提供diff2html.js与diff2html.css内容来自require.resolve(diff2html/bundles/js/diff2html.min.js)等打包产物即离线内联方式提供无需 CDN页面底部把该文件 patch 文本以JSON.stringify嵌入script随后调用window.Diff2Html.html(patch, { drawFileList: false, outputFormat: side-by-side, matching: lines })渲染成左右并排side-by-side、按行匹配的高亮表格通过一整段 CSS 覆盖 diff2html 默认样式让行号、增删背景、文件头、d2h-info等元素统一为 GitHub 风格的暗色主题背景#0d1117、新增#033a16、删除#67060c与列表页视觉一致。为什么选择 Hono从架构上看这个工具完美发挥了 Hono 的三个特性路由极简仅两个页面路由加两个静态资源路由、c.html()直接返回 HTML 字符串、配合hono/node-server在 Node 下无需额外配置即可启动。整段服务端代码只有约 150 行却完整覆盖了读 patch → 解析统计 → 列表页 → 详情页 → 客户端渲染的闭环适合作为学习 Hono 小型工具型应用的最小范例。使用建议与限制输入模式选择查看历史改动优先用 git 区间模式main..HEAD查看未提交改动用目录模式拿到外部补丁用文件模式大 diff 处理git 命令的maxBuffer已放大到 1GB但浏览器端渲染超大单文件仍可能卡顿遇到巨型改动建议先缩小区间再查看端口冲突3737 被占用时改用--port指定其他端口多个实例可并行服务不同任务无外部依赖diff2html 的 JS/CSS 由服务端内联提供离线环境也能完整工作不受网络限制。若想深入了解其运行细节可直接阅读 server.js 全文或对照 package.json 中的依赖版本在本地复现。【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actors创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表