Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions .agents/skills/diffs/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
---
name: diffs
description:
Use when an app uses @pierre/diffs to render or edit code files, diffs,
patches, merge conflicts, or CodeView review surfaces, including React,
vanilla JavaScript, SSR, workers, annotations, selection, and custom Shiki
languages or themes.
---

# `@pierre/diffs`

Use `@pierre/diffs` to render syntax-highlighted files and diffs. Use its
optional editor, SSR, and worker entries for those capabilities.

## Install

```bash
pnpm add @pierre/diffs
```

Install `react` and `react-dom` when the app uses the React entry.

## Select an API reference

| Surface | Reference |
| --------------------- | -------------------------------------- |
| `@pierre/diffs/react` | [React API](references/api-react.md) |
| `@pierre/diffs/edit` | [Editor API](references/api-editor.md) |

## Select a recipe

| Task | Recipe |
| ---------------------------------- | -------------------------------------------------- |
| Render a file or diff in React | [Render with React](references/recipe-react.md) |
| Build a virtualized review surface | [Use CodeView](references/recipe-code-view.md) |
| Edit a React surface or CodeView | [Edit with React](references/recipe-edit-react.md) |

## Not vendored here

These references were not copied into this skill. There is no local file for
them. Read the package types and the upstream documentation instead.

- Core API: root components, parsing, and file extension APIs.
- Highlighting API: languages, themes, highlighter state, and streams.
- Low-level rendering API: renderers, managers, DOM helpers, and constants.
- Shared types: data, option, render, selection, and editor types.
- SSR API for `@pierre/diffs/ssr`, and the recipe for preloading server markup.
- Worker API for `@pierre/diffs/worker`, and the recipe for a worker pool.
- Recipes for vanilla JavaScript rendering and vanilla editing.
- Recipes for line annotations and selection.
- Recipe for registering a custom Shiki language or theme.
95 changes: 95 additions & 0 deletions .agents/skills/diffs/references/api-editor.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
# Editor API

This reference lists every export from `@pierre/diffs/edit` and every public
member of its classes.

## Exports

| Export | Kind | Purpose |
| --------------------- | ----- | --------------------------------------------------------- |
| `Editor` | Class | Adds text editing to a `File` or `FileDiff` instance. |
| `EditorChange` | Type | Describes one normalized editor change. |
| `EditorChangeEvent` | Type | Provides normalized edits and current document state. |
| `EditorOptions` | Type | Configures history, state, selections, and callbacks. |
| `TextDocument` | Class | Stores text, positions, edits, search, and undo history. |
| `TextDocumentChange` | Type | Describes the lines and characters changed by an edit. |
| `IStateStorage` | Type | Defines asynchronous or synchronous editor state storage. |
| `PersistStateStorage` | Type | Selects memory, IndexedDB, or custom state storage. |
| `Position` | Type | Identifies a zero-based line and character. |
| `Range` | Type | Identifies a start and end position. |
| `TextEdit` | Type | Replaces one range with new text. |

## `EditorOptions` fields

| Field | Purpose |
| ------------------------ | -------------------------------------------------------- |
| `historyMaxEntries` | Limits the undo stack. |
| `persistState` | Keeps editor state for each file cache key. |
| `persistStateStorage` | Selects the state store. |
| `roundedSelection` | Controls rounded selection corners. |
| `matchBrackets` | Controls matching-bracket highlights. |
| `autoSurround` | Controls quote and bracket insertion around a selection. |
| `languageCommentConfig` | Overrides comment tokens by language. |
| `enabledSelectionAction` | Enables the selection action surface. |
| `clipboard` | Supplies a text clipboard reader. |
| `renderSelectionAction` | Produces the selection action element. |
| `onAttach` | Receives the editor and attached surface. |
| `onChange` | Receives file state, annotations, and a change event. |
| `onFocus` | Runs after the editor gains focus. |
| `onBlur` | Runs after the editor loses focus. |

## `Editor` members

| Member | Purpose |
| ----------------------------------- | --------------------------------------------------------- |
| `new Editor(options?)` | Creates one editor. |
| `edit(instance)` | Attaches to a file or diff and returns a detach function. |
| `setOptions(options)` | Replaces editor options. |
| `applyEdits(edits, updateHistory?)` | Applies programmatic text edits. |
| `canUndo` | Reports whether undo has an entry. |
| `canRedo` | Reports whether redo has an entry. |
| `undo()` | Reverts the latest edit. |
| `redo()` | Reapplies the latest reverted edit. |
| `getFile()` | Gets the current file contents. |
| `getText()` | Gets the current text. |
| `getState()` | Gets selections and view state. |
| `setState(state)` | Sets selections and view state. |
| `setSelections(selections)` | Sets directed selection ranges. |
| `setMarkers(markers)` | Sets diagnostic markers. |
| `focus(options?)` | Focuses the editor. |
| `blur()` | Removes editor focus. |
| `cleanUp(recycle?)` | Releases editor resources. |

## `TextDocument` members

| Member | Purpose |
| ---------------------------------------------------- | ----------------------------------------------------- |
| `new TextDocument(uri, text, languageId?, version?)` | Creates a text document. |
| `uri` | Gets the document identifier. |
| `languageId` | Gets the language identifier. |
| `version` | Gets the document version. |
| `lineCount` | Gets the line count. |
| `eol` | Gets the line-ending sequence. |
| `canUndo` | Reports whether undo has an entry. |
| `canRedo` | Reports whether redo has an entry. |
| `positionAt(offset)` | Converts an offset to a position. |
| `positionsAt(offsets)` | Converts several offsets to positions. |
| `offsetAt(position)` | Converts a position to an offset. |
| `getText(range?)` | Gets all text or one range. |
| `getLineText(line, includeLineBreak?)` | Gets one line. |
| `normalizeEol(text)` | Converts text to the document line ending. |
| `getLineLength(line, includeLineBreak?)` | Gets one line length. |
| `charAt(offsetOrPosition)` | Gets one character. |
| `getTextSlice(start, end)` | Gets text between two offsets. |
| `findNextNonOverlappingSubstring(needle, occupied)` | Finds an unused substring range. |
| `search(params)` | Finds text ranges. |
| `applyEdits(edits, ...)` | Resolves and applies position-based edits. |
| `resolveEdits(edits)` | Converts position-based edits to offset edits. |
| `applyResolvedEdits(edits, ...)` | Applies offset-based edits. |
| `setLastUndoSelectionsAfter(selections)` | Associates selections with the latest history entry. |
| `setLastUndoLineAnnotations(before, after)` | Associates annotations with the latest history entry. |
| `undo()` | Reverts one document history entry. |
| `redo()` | Reapplies one document history entry. |
| `normalizePosition(position)` | Clamps a position to the document. |

`IStateStorage` has `get(cacheKey)` and `set(cacheKey, state)` methods.
63 changes: 63 additions & 0 deletions .agents/skills/diffs/references/api-react.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# React API

This reference lists the React-specific exports from `@pierre/diffs/react`. The
entry also re-exports every type in [Shared types](api-types.md).

## Components and hooks

| Export | Kind | Purpose |
| --------------------------- | --------- | --------------------------------------------------------- |
| `File` | Component | Renders one code file. |
| `FileDiff` | Component | Renders pre-parsed diff metadata. |
| `MultiFileDiff` | Component | Parses and renders an old and new file pair. |
| `PatchDiff` | Component | Parses and renders one unified patch string. |
| `UnresolvedFile` | Component | Renders and resolves merge conflicts in one file. |
| `CodeView` | Component | Renders a virtualized list of files and diffs. |
| `Virtualizer` | Component | Provides simple viewport virtualization. |
| `useVirtualizer` | Hook | Gets the nearest simple `Virtualizer` instance. |
| `EditProvider` | Component | Supplies an editor factory. |
| `useCreateEditor` | Hook | Gets the nearest editor factory. |
| `WorkerPoolContextProvider` | Component | Creates and supplies a worker pool. |
| `useWorkerPool` | Hook | Gets the nearest worker pool. |
| `useFileInstance` | Hook | Creates and manages a vanilla `File` instance. |
| `useFileDiffInstance` | Hook | Creates and manages a vanilla `FileDiff` instance. |
| `useStableCallback` | Hook | Returns a stable callback that reads the latest function. |

## Component and provider types

| Export | Purpose |
| ----------------------------------- | ----------------------------------------------------------------- |
| `FileProps` | Defines props for `File`. |
| `FileOptions` | Defines vanilla file options and the React `options` prop. |
| `FileDiffProps` | Defines props for `FileDiff`. |
| `MultiFileDiffProps` | Defines props for `MultiFileDiff`. |
| `PatchDiffProps` | Defines props for `PatchDiff`. |
| `UnresolvedFileProps` | Defines props for `UnresolvedFile`. |
| `UnresolvedFileReactOptions` | Defines merge-conflict options for React. |
| `DiffBasePropsReact` | Defines props shared by React diff components. |
| `CodeViewProps` | Defines controlled or uncontrolled `CodeView` props. |
| `ControlledCodeViewProps` | Defines `CodeView` props with `items`. |
| `UncontrolledCodeViewProps` | Defines `CodeView` props with `initialItems`. |
| `CodeViewReactOptions` | Defines the React-safe `CodeView` option set. |
| `CodeViewHandle` | Defines imperative list, selection, scroll, and editor controls. |
| `CreateEditor` | Defines the editor factory. |
| `EditProviderProps` | Defines the `EditProvider` factory prop. |
| `MergeConflictActionsTypeOption` | Selects no actions, default actions, or a custom action renderer. |
| `RenderMergeConflictActionContext` | Supplies conflict resolution to a custom action renderer. |
| `RenderMergeConflictActions` | Defines a custom conflict action renderer. |
| `WorkerInitializationRenderOptions` | Defines initial worker languages and render options. |
| `WorkerPoolOptions` | Defines the worker factory, pool size, and cache size. |

## Contexts and render helpers

| Export | Kind | Purpose |
| ------------------------- | -------- | ------------------------------------------------------ |
| `EditContext` | Context | Holds the editor factory. |
| `WorkerPoolContext` | Context | Holds the worker pool. |
| `VirtualizerContext` | Context | Holds the simple virtualizer. |
| `GutterUtilitySlotStyles` | Value | Supplies style keys for gutter utility slots. |
| `MergeConflictSlotStyles` | Value | Supplies style keys for merge conflict slots. |
| `noopRender` | Function | Returns no React output for an optional render slot. |
| `renderDiffChildren` | Function | Builds React portals for diff slots. |
| `renderFileChildren` | Function | Builds React portals for file slots. |
| `templateRender` | Function | Renders React content through a managed template slot. |
Loading