EnglishРусский Map

@pierre/diffs

Toolbox toolboxtypescriptreactwebdeveloper-toolsTypeScriptApache-2.0 ↳ show in map Markdown
title
@pierre/diffs
type
toolbox
summary
Веб-библиотека для рендеринга кода и diff'ов на базе Shiki с API для React и vanilla JS
tags
typescript, react, web, developer-tools
repo
https://github.com/pierrecomputer/pierre
language
TypeScript
license
Apache-2.0
created
2026-07-21
updated
2026-07-21
lang
ru
translation_of
pierre-diffs
source_updated
2026-07-21
translated
2026-09-01
translator
lllm/antigravity/gemini-3.7-flash-medium

Open-source библиотека для рендеринга кода и diff'ов в вебе от The Pierre Computer Co. (команды git-клиента для совместной работы Pierre). Поставляет как высокоуровневые компоненты, так и открытые внутренние интерфейсы; подсветка синтаксиса построена на Shiki ради широкой поддержки языков и тем. Родственная библиотека в том же monorepo: @pierre/trees (рендеринг дерева файлов).

Архитектурная ставка

Главная принципиальная идея: браузеры эффективно рендерят сырой HTML, поэтому стоит опираться именно на это. Все низкоуровневые API просто формируют строки - сырой HTML, - которые затем потребляются компонентами высшего порядка и утилитами. Это держит быстрый путь вплотную к браузеру и позволяет одним и тем же примитивам лежать в основе как React API, так и vanilla-JS API. Компоненты высшего порядка рендерят в Shadow DOM с раскладкой на CSS grid (изоляция стилей от страницы-хоста, grid для колонок полей/номеров строк/содержимого). Предполагается, что большинство пользователей будет применять высокоуровневые компоненты; внутренние интерфейсы доступны, если нужно собрать нестандартную конструкцию вручную.

Что входит в состав

  • FileDiff - рендеринг diff'а двумя способами: по содержимому двух файлов (библиотека сама вычисляет diff) или по patch / unified diff. Для всего есть эквиваленты на React и vanilla JS.
  • MultiFileDiff / PatchDiff / File - diff'ы нескольких файлов, diff'ы на базе патчей и обычный рендеринг файлов (без diff'а) с той же подсветкой.
  • Виртуализация - виртуальный скроллинг для больших diff'ов и файлов, чтобы огромные наборы изменений не перегружали DOM.
  • Разделители hunk'ов - встроенные пресеты плюс хуки кастомизации через CSS (с не рекомендуемым к использованию обходным путём на чистом JS для нестандартных разделителей).
  • Утилиты - parseDiffFromFile, parsePatchFiles, управление подсветкой и хелперы для принятия/отклонения hunk'ов.
  • Worker pool - подсветка синтаксиса вне основного потока через настраиваемый пул воркеров, чтобы обработка больших файлов не приводила к лагам в UI.
  • SSR - серверный рендеринг с функциями предзагрузки для мгновенной первой отрисовки и последующей гидратацией на клиенте.

Стилизация и темы

Широкие возможности: CSS-переменные (семейство --diffs-* - цвета добавленного/изменённого/удалённого для светлой и тёмной тем, шрифты, поля, поведение полосы прокрутки), инлайн-стили и небезопасный механизм прямой вставки CSS. Поставляется со светлой и тёмной темами Pierre и поддерживает создание и регистрацию собственных тем; лежащий в основе Shiki даёт обширную поддержку языков и тем практически из коробки.

Использование

npm install @pierre/diffs

import { FileDiff } from "@pierre/diffs/react";

// Compute a diff from two versions of a file:
<FileDiff before={oldContents} after={newContents} lang="tsx" />

// Or render from a patch:
<PatchDiff patch={unifiedDiff} />

В vanilla JS есть классы FileDiff / File с теми же свойствами и низкоуровневыми рендерерами под капотом.

Примечания

  • На сегодня компоненты покрывают только vanilla JS и React; другие фреймворки появятся, "если будет спрос".
  • Часть monorepo pierrecomputer/pierre (~5.5k★ на весь репозиторий, куда входит остальной открытый код Pierre, а не только этот пакет). Пакет @pierre/diffs находится на версии v1.2.x под лицензией Apache-2.0.
  • Документация: diffs.com/docs (есть llms.txt / llms-full.txt для чтения LLM).

См. также

  • pierre-trees - родственный рендерер дерева файлов из того же monorepo и с тем же дизайн-кодом
  • developer-icons - ещё одна библиотека категории "UI primitives for developer tools" в toolbox
Linked from