diffs Skill

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.

Install
npx skills add 'https://github.com/pierrecomputer/pierre/tree/main/skills/diffs'
Download bundle ↓
View on GitHub
← Back to SKILL.md

Recipe: use a worker pool

Wrap React diff surfaces in one provider:

import { WorkerPoolContextProvider } from '@pierre/diffs/react';

<WorkerPoolContextProvider
  poolOptions={{
    poolSize: 4,
    workerFactory: () =>
      new Worker(new URL('@pierre/diffs/worker/worker.js', import.meta.url), {
        type: 'module',
      }),
  }}
  highlighterOptions={{
    langs: ['typescript', 'tsx'],
    theme: { light: 'pierre-light', dark: 'pierre-dark' },
  }}
>
  {children}
</WorkerPoolContextProvider>;

For vanilla JavaScript, call getOrCreateWorkerPoolSingleton and pass the result as the second constructor argument to a render class. Call terminateWorkerPoolSingleton() when the application tears down the shared pool.

Referenced from SKILL.md