Refactor Theme API

apps/demo/src/components/App.tsx

@@ -33,8 +33,8 @@ export function App() {
           langs.push(item.options.lang);
         }
         if ('themes' in item.options) {
-          themes.push(item.options.themes.dark);
-          themes.push(item.options.themes.light);
+          themes.push(item.options.theme.dark);
+          themes.push(item.options.theme.light);
         }
         // else if ('theme' in item.options) {
         //   themes.push(item.options.theme);

apps/demo/src/main.ts

@@ -123,7 +123,7 @@ function renderDiff(parsedPatches: ParsedPatch[]) {
     for (const fileDiff of parsedPatch.files) {
       const fileAnnotations = patchAnnotations[hunkIndex];
       const instance = new FileDiff<LineCommentMetadata>({
-        themes: { dark: 'pierre-dark', light: 'pierre-light' },
+        theme: { dark: 'pierre-dark', light: 'pierre-light' },
         diffStyle: unified ? 'unified' : 'split',
         overflow: wrap ? 'wrap' : 'scroll',
         renderAnnotation: renderDiffAnnotation,
@@ -212,8 +212,8 @@ function handlePreload() {
       langs.push(item.options.lang);
     }
     if ('themes' in item.options) {
-      themes.push(item.options.themes.dark);
-      themes.push(item.options.themes.light);
+      themes.push(item.options.theme.dark);
+      themes.push(item.options.theme.light);
     }
   }
   void preloadHighlighter({ langs, themes });
@@ -393,7 +393,7 @@ if (renderFileButton != null) {
     const wrapper = document.getElementById('wrapper');
     if (wrapper == null) return;
     const instance = new File<LineCommentMetadata>({
-      themes: { dark: 'pierre-dark', light: 'pierre-light' },
+      theme: { dark: 'pierre-dark', light: 'pierre-light' },
       renderAnnotation,
     });
     void instance.render({

apps/demo/src/mocks/index.ts

@@ -18,7 +18,7 @@ export const CodeConfigs = [
     letterByLetter: false,
     options: {
       lang: 'tsx',
-      themes: { dark: 'pierre-dark', light: 'pierre-light' },
+      theme: { dark: 'pierre-dark', light: 'pierre-light' },
       ...createHighlighterCleanup(),
     } satisfies FileStreamOptions,
   },
@@ -27,7 +27,7 @@ export const CodeConfigs = [
     letterByLetter: true,
     options: {
       lang: 'markdown',
-      themes: { dark: 'pierre-dark', light: 'pierre-light' },
+      theme: { dark: 'pierre-dark', light: 'pierre-light' },
       ...createHighlighterCleanup(),
     } satisfies FileStreamOptions,
   },

apps/docs/app/diff-examples/ShikiThemes/ShikiThemes.tsx

@@ -17,7 +17,10 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { preloadHighlighter } from '@pierre/precision-diffs';
 import { MultiFileDiff } from '@pierre/precision-diffs/react';
-import type { PreloadedFileDiffResult } from '@pierre/precision-diffs/ssr';
+import type {
+  PreloadedFileDiffResult,
+  ThemesType,
+} from '@pierre/precision-diffs/ssr';
 import { ChevronDown } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
@@ -114,10 +117,16 @@ export function ShikiThemes({
 
   const [selectedLightTheme, setSelectedLightTheme] = useState<
     (typeof LIGHT_THEMES)[number]
-  >((options?.themes?.light as 'pierre-light') ?? 'pierre-light');
+  >(
+    ((options?.theme as ThemesType | undefined)?.light as 'pierre-light') ??
+      'pierre-light'
+  );
   const [selectedDarkTheme, setSelectedDarkTheme] = useState<
     (typeof DARK_THEMES)[number]
-  >((options?.themes?.dark as 'pierre-dark') ?? 'pierre-dark');
+  >(
+    ((options?.theme as ThemesType | undefined)?.dark as 'pierre-dark') ??
+      'pierre-dark'
+  );
   const [selectedColorMode, setSelectedColorMode] = useState<
     'system' | 'light' | 'dark'
   >('system');
@@ -222,10 +231,7 @@ export function ShikiThemes({
         options={{
           diffStyle: 'split',
           themeType: selectedColorMode,
-          themes: {
-            dark: selectedDarkTheme,
-            light: selectedLightTheme,
-          },
+          theme: { dark: selectedDarkTheme, light: selectedLightTheme },
         }}
       />
       <div className="flex gap-1">

apps/docs/app/diff-examples/ShikiThemes/constants.ts

@@ -36,6 +36,6 @@ export default function Home() {
   },
   options: {
     diffStyle: 'split',
-    themes: { dark: 'pierre-dark', light: 'pierre-light' },
+    theme: { dark: 'pierre-dark', light: 'pierre-light' },
   },
 };

apps/docs/app/diff-examples/SplitUnified/constants.ts

@@ -41,8 +41,7 @@ export function createRow(line: number) {
 }
 
 interface SetupWrapperNodesProps {
-  theme?: PJSThemeNames;
-  themes?: ThemesType;
+  theme?: PJSThemeNames | ThemesType;
   pre: HTMLElement;
   highlighter: PJSHighlighter;
   split: boolean;
@@ -110,8 +109,7 @@ export function createRow(line: number) {
 }
 
 interface SetupWrapperNodesProps {
-  theme?: PJSThemeNames;
-  themes?: ThemesType;
+  theme?: PJSThemeNames | ThemesType;
   pre: HTMLElement;
   highlighter: PJSHighlighter;
   split: boolean;

apps/docs/app/docs/Installation/constants.ts

@@ -6,6 +6,6 @@ export const INSTALLATION_EXAMPLE: PreloadFileOptions<undefined> = {
     contents: 'bun add @pierre/precision-diffs',
   },
   options: {
-    themes: { dark: 'pierre-dark', light: 'pierre-light' },
+    theme: { dark: 'pierre-dark', light: 'pierre-light' },
   },
 };

apps/docs/app/docs/Overview/constants.ts

@@ -4,7 +4,7 @@ import type {
 } from '@pierre/precision-diffs/ssr';
 
 const options = {
-  themes: { dark: 'pierre-dark', light: 'pierre-light' },
+  theme: { dark: 'pierre-dark', light: 'pierre-light' },
 } as const;
 
 export const OVERVIEW_INITIAL_EXAMPLE: PreloadFileDiffOptions<undefined> = {
@@ -118,17 +118,17 @@ function Patches() {
       {parsePatchFiles.map((patch, index) => (
         <Fragment key={index}>
           {patch.files.map((fileDiff, index) => (
-            // Under the hood, all instances of FileDiff will use a 
-            // shared Shiki highlighter and manage loading languages 
+            // Under the hood, all instances of FileDiff will use a
+            // shared Shiki highlighter and manage loading languages
             // and themes for you
             <FileDiff
               key={index}
-              // 'fileDiff' is a data structure that includes all 
+              // 'fileDiff' is a data structure that includes all
               // hunks for a specific file from a patch
               fileDiff={fileDiff}
               options={{
                 // Automatically theme based on users OS settings
-                themes: { dark: 'pierre-dark', light: 'pierre-light' },
+                theme: { dark: 'pierre-dark', light: 'pierre-light' },
               }}
             />
           ))}
@@ -211,9 +211,9 @@ for (const patch of parsedPatches) {
     // specific file from a patch
     const instance = new FileDiff({
       // Automatically theme based on users os settings
-      themes: { dark: 'pierre-dark', light: 'pierre-light' },
+      theme: { dark: 'pierre-dark', light: 'pierre-light' },
     });
-    // Under the hood, all instances of FileDiff will use a shared 
+    // Under the hood, all instances of FileDiff will use a shared
     // Shiki highlighter and manage loading languages and themes for
     // you automatically
     instance.render({

apps/docs/app/docs/ReactAPI/constants.ts

@@ -1,7 +1,7 @@
 import type { PreloadFileOptions } from '@pierre/precision-diffs/ssr';
 
 const options = {
-  themes: { dark: 'pierre-dark', light: 'pierre-light' },
+  theme: { dark: 'pierre-dark', light: 'pierre-light' },
 } as const;
 
 export const REACT_API_MULTI_FILE_DIFF: PreloadFileOptions<undefined> = {
@@ -56,46 +56,49 @@ export function SingleDiff() {
         return <CommentThread threadId={annotation.metadata.threadId} />;
       }}
       // Here's every property you can pass to options, with their
-      // default values if not specified. However its generally a
-      // good idea to pass a 'theme' or 'themes' property
+      // default values if not specified.
       options={{
         // You can provide a 'theme' prop that maps to any
         // built in shiki theme or you can register a custom
         // theme. We also include 2 custom themes
         //
         // 'pierre-dark' and 'pierre-light
         //
-        // For the rest of the  available shiki themes, check out:
+        // You can also pass an object with 'dark' and 'light' keys
+        // to theme based on OS or 'themeType' setting below.
+        //
+        // By default we initialize with our custom pierre themes
+        // for dark and light theme
+        //
+        // For the rest of the available shiki themes, either check
+        // typescript autocomplete or visit:
         // https://shiki.style/themes
-        theme: 'none',
-        // Or can also provide a 'themes' prop, which allows the code
-        // to adapt to your OS light or dark theme
-        // themes: { dark: 'pierre-dark', light: 'pierre-light' },
-
-        // When using the 'themes' prop, 'themeType' allows you to
-        // force 'dark' or 'light' theme, or inherit from the
-        // OS ('system') theme.
+        theme: { dark: 'pierre-dark', light: 'pierre-light' },
+
+        // When using the 'theme' prop that specifies dark and light
+        // themes, 'themeType' allows you to force 'dark' or 'light'
+        // theme, or inherit from the OS ('system') theme.
         themeType: 'system',
 
-        // Disable the line numbers for your diffs, generally 
+        // Disable the line numbers for your diffs, generally
         // not recommended
         disableLineNumbers: false,
 
         // Whether code should 'wrap' with long lines or 'scroll'.
         overflow: 'scroll',
 
-        // Normally you shouldn't need this prop, but if you don't 
-        // provide a valid filename or your file doesn't have an 
+        // Normally you shouldn't need this prop, but if you don't
+        // provide a valid filename or your file doesn't have an
         // extension you may want to override the automatic detection
         // You can specify that language here:
         // https://shiki.style/languages
         // lang?: SupportedLanguages;
 
-        // 'diffStyle' controls whether the diff is presented side by 
+        // 'diffStyle' controls whether the diff is presented side by
         // side or in a unified (single column) view
         diffStyle: 'split',
 
-        // Unchanged context regions are collapsed by default, set this 
+        // Unchanged context regions are collapsed by default, set this
         // to true to force them to always render.  This depends on using
         // the oldFile/newFile API or FileDiffMetadata including newLines.
         expandUnchanged: false,
@@ -117,11 +120,11 @@ export function SingleDiff() {
         // and deleted lines respectively. Disable that feature here
         disableBackground: false,
 
-        // Diffs are split up into hunks, this setting customizes what 
+        // Diffs are split up into hunks, this setting customizes what
         // to show between each hunk.
         //
         // 'line-info' (default):
-        // Shows a bar that tells you how many lines are collapsed. If 
+        // Shows a bar that tells you how many lines are collapsed. If
         // you are using the oldFile/newFile API then you can click those
         // bars to expand the content between them
         //
@@ -154,11 +157,11 @@ export function SingleDiff() {
         // the line lineDiffType check
         maxLineDiffLength: 1000,
 
-        // If any line in the diff exceeds this value then we won't 
+        // If any line in the diff exceeds this value then we won't
         // attempt to syntax highlight the diff
         maxLineLengthForHighlighting: 1000,
 
-        // Enabling this property will hide the file header with file 
+        // Enabling this property will hide the file header with file
         // name and diff stats.
         disableFileHeader: false,
       }}
@@ -211,46 +214,49 @@ export function SingleDiff() {
         return <CommentThread threadId={annotation.metadata.threadId} />;
       }}
       // Here's every property you can pass to options, with their
-      // default values if not specified. However its generally a
-      // good idea to pass a 'theme' or 'themes' property
+      // default values if not specified.
       options={{
         // You can provide a 'theme' prop that maps to any
         // built in shiki theme or you can register a custom
         // theme. We also include 2 custom themes
         //
         // 'pierre-dark' and 'pierre-light
         //
-        // For the rest of the  available shiki themes, check out:
+        // You can also pass an object with 'dark' and 'light' keys
+        // to theme based on OS or 'themeType' setting below.
+        //
+        // By default we initialize with our custom pierre themes
+        // for dark and light theme
+        //
+        // For the rest of the available shiki themes, either check
+        // typescript autocomplete or visit:
         // https://shiki.style/themes
-        theme: 'none',
-        // Or can also provide a 'themes' prop, which allows the code
-        // to adapt to your OS light or dark theme
-        // themes: { dark: 'pierre-dark', light: 'pierre-light' },
-
-        // When using the 'themes' prop, 'themeType' allows you to
-        // force 'dark' or 'light' theme, or inherit from the
-        // OS ('system') theme.
+        theme: { dark: 'pierre-dark', light: 'pierre-light' },
+
+        // When using the 'theme' prop that specifies dark and light
+        // themes, 'themeType' allows you to force 'dark' or 'light'
+        // theme, or inherit from the OS ('system') theme.
         themeType: 'system',
 
-        // Disable the line numbers for your diffs, generally 
+        // Disable the line numbers for your diffs, generally
         // not recommended
         disableLineNumbers: false,
 
         // Whether code should 'wrap' with long lines or 'scroll'.
         overflow: 'scroll',
 
-        // Normally you shouldn't need this prop, but if you don't 
-        // provide a valid filename or your file doesn't have an 
+        // Normally you shouldn't need this prop, but if you don't
+        // provide a valid filename or your file doesn't have an
         // extension you may want to override the automatic detection
         // You can specify that language here:
         // https://shiki.style/languages
         // lang?: SupportedLanguages;
 
-        // 'diffStyle' controls whether the diff is presented side by 
+        // 'diffStyle' controls whether the diff is presented side by
         // side or in a unified (single column) view
         diffStyle: 'split',
 
-        // Unchanged context regions are collapsed by default, set this 
+        // Unchanged context regions are collapsed by default, set this
         // to true to force them to always render.  This depends on using
         // the oldFile/newFile API or FileDiffMetadata including newLines.
         expandUnchanged: false,
@@ -272,11 +278,11 @@ export function SingleDiff() {
         // and deleted lines respectively. Disable that feature here
         disableBackground: false,
 
-        // Diffs are split up into hunks, this setting customizes what 
+        // Diffs are split up into hunks, this setting customizes what
         // to show between each hunk.
         //
         // 'line-info' (default):
-        // Shows a bar that tells you how many lines are collapsed. If 
+        // Shows a bar that tells you how many lines are collapsed. If
         // you are using the oldFile/newFile API then you can click those
         // bars to expand the content between them
         //
@@ -309,11 +315,11 @@ export function SingleDiff() {
         // the line lineDiffType check
         maxLineDiffLength: 1000,
 
-        // If any line in the diff exceeds this value then we won't 
+        // If any line in the diff exceeds this value then we won't
         // attempt to syntax highlight the diff
         maxLineLengthForHighlighting: 1000,
 
-        // Enabling this property will hide the file header with file 
+        // Enabling this property will hide the file header with file
         // name and diff stats.
         disableFileHeader: false,
       }}