EnglishРусский Map

@pierre/trees

Toolbox toolboxtypescriptreactwebdeveloper-toolsTypeScriptApache-2.0 ↳ show in map Markdown
title
@pierre/trees
type
toolbox
summary
Рендерер дерева файлов для веба с моделью path-first и виртуализацией для очень больших деревьев
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-trees
source_updated
2026-07-21
translated
2026-09-01
translator
lllm/antigravity/gemini-3.7-flash-medium

Библиотека с открытым исходным кодом от The Pierre Computer Co. для отрисовки дерева файлов в вебе, рассчитанная на предельную производительность на больших деревьях. Как и родственный @pierre/diffs (из того же монорепозитория pierrecomputer/pierre), она предоставляет API для React и vanilla JS с поддержкой SSR и гибкой настройкой тем - это компонент файлового проводника в пару к рендереру диффов и кода.

Модель: path-first

В основе лежит модель идентификации path-first. Элементы идентифицируются по их пути, и API обеих интеграций строится вокруг этой общей модели. Вы передаёте библиотеке данные дерева (пути или формат "prepared input" для скорости), а она берёт на себя выбор, фокус, навигацию с клавиатуры, поиск, переименование, drag-and-drop и аннотации git-статуса. Для больших деревьев документация рекомендует использовать prepared (и presorted prepared) входные данные - предвычисление структуры сохраняет отрисовку дешёвой, что вместе с виртуализацией и обеспечивает заявленную высокую производительность на больших объёмах данных.

Что внутри

  • Быстрый старт на React - хук useFileTree, компонент FileTree, селекторные хуки и prepared input.
  • Быстрый старт на vanilla JS - new FileTree, render, императивные методы модели и prepared input.
  • Навигация - выбор, фокус, перемещение с клавиатуры и настраиваемый fileTreeSearchMode.
  • Изменение структуры - встроенное переименование, drag-and-drop и опциональные сценарии контекстного меню / действий над элементами.
  • Git-статус и аннотации строк - встроенные сигналы gitStatus плюс свои декорации строк (бейджи, цвета) для каждого элемента.
  • Иконки - встроенные наборы иконок, переопределения (remaps), цветовые режимы и механизм расширения через спрайт-листы (FileTreeIconConfig, приоритеты переопределений).
  • Виртуализация - настройки, оптимизированные для больших деревьев, чтобы отрисовывались только видимые строки.
  • SSR - preloadFileTree на сервере, serializeFileTreeSsrPayload, а также гидратация в React/vanilla с непрозрачной передачей SSR-данных.

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

Стилизация хост-элемента, семейства CSS-переменных с заданным порядком fallback'ов, хелперы тем (themeToTreeStyles) и возможность прямого внедрения стилей через unsafeCSS - та же философия работы с темами, что и в pierre-diffs.

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

npm install @pierre/trees

import { useFileTree, FileTree } from "@pierre/trees/react";

const tree = useFileTree({ files: preparedInput });
<FileTree tree={tree} />

В vanilla JS создаётся экземпляр через new FileTree(...), вызывается render, а управление происходит через императивные методы и подписки.

Примечания

  • Пакет @pierre/trees находится на стадии v1.0.0-beta.x - моложе @pierre/diffs (v1.2.x) и всё ещё pre-stable. Лицензия Apache-2.0.
  • Часть общего монорепозитория pierrecomputer/pierre (~5.5k★ суммарно по всему открытому коду Pierre).
  • Документация: trees.software/docs (с llms.txt / llms-full.txt).

Связанные страницы

  • pierre-diffs - родственный рендерер диффов и кода; вместе они собираются в полноценный интерфейс code review (дерево файлов + диффы)
  • developer-icons - схожая библиотека UI-примитивов для разработчиков в toolbox
Linked from