Fat/build script

README.md

@@ -15,6 +15,18 @@ bun install
 bun run dev
 ```
 
+## Publishing precision diffs
+
+Note that publishing precision diffs is a bit artisinal. You need to update the exports to be
+/dist/ before exporting, otherwise the package wont work.
+
+Long term, im hoping we can use publishConfig to override this, but because we
+rely on Bun for package managment, we currently don't have this functionality.
+
+This means, before publishing, you need to manually update the exports inside the package.json.
+
+This is dangerous.
+
 ## Architectural Notes
 
 This is just a basic-ass vite project, so most of what you'll probably want to

apps/demo/package.json

@@ -20,7 +20,7 @@
     "vite": "catalog:"
   },
   "dependencies": {
-    "@pierre/diff-ui": "workspace:*",
+    "@pierre/precision-diffs": "workspace:*",
     "react": "catalog:",
     "react-dom": "catalog:",
     "shiki": "catalog:"

apps/demo/src/components/App.tsx

@@ -3,7 +3,7 @@ import {
   type PJSThemeNames,
   isHighlighterNull,
   preloadHighlighter,
-} from '@pierre/diff-ui';
+} from '@pierre/precision-diffs';
 import * as React from 'react';
 import { useCallback, useState } from 'react';
 

apps/demo/src/components/CodeRenderer.tsx

@@ -1,7 +1,7 @@
 import {
   CodeRenderer as CodeRendererClass,
   type CodeRendererOptions,
-} from '@pierre/diff-ui';
+} from '@pierre/precision-diffs';
 import { useEffect, useRef, useState } from 'react';
 
 export type { CodeRendererOptions };

apps/demo/src/main.ts

@@ -10,7 +10,7 @@ import {
   parseDiffFromFile,
   parsePatchFiles,
   preloadHighlighter,
-} from '@pierre/diff-ui';
+} from '@pierre/precision-diffs';
 
 import {
   CodeConfigs,

apps/demo/src/mocks/index.ts

@@ -1,4 +1,4 @@
-import type { CodeRendererOptions, LineAnnotation } from '@pierre/diff-ui';
+import type { CodeRendererOptions, LineAnnotation } from '@pierre/precision-diffs';
 
 import { createHighlighterCleanup } from '../utils/createHighlighterCleanup';
 import mdContent from './example_md.txt?raw';

apps/demo/src/utils/createFakeContentStream.ts

@@ -1,4 +1,4 @@
-import { queueRender } from '@pierre/diff-ui';
+import { queueRender } from '@pierre/precision-diffs';
 
 export function createFakeContentStream(data: string, letterByLetter = false) {
   return new ReadableStream<string>({

apps/demo/src/utils/createHighlighterCleanup.ts

@@ -1,4 +1,4 @@
-import { disposeHighlighter } from '@pierre/diff-ui';
+import { disposeHighlighter } from '@pierre/precision-diffs';
 
 let totalInstances = 0;
 let completed = 0;

apps/demo/src/utils/renderAnnotation.ts

@@ -1,4 +1,4 @@
-import type { LineAnnotation } from '@pierre/diff-ui';
+import type { LineAnnotation } from '@pierre/precision-diffs';
 import type { LineCommentMetadata } from 'src/mocks';
 
 export function renderAnnotation(

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

@@ -2,7 +2,7 @@
 
 import { FileDiff } from '@/components/diff-ui/FileDiff';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import type { FileContents } from '@pierre/diff-ui';
+import type { FileContents } from '@pierre/precision-diffs';
 import { CornerDownRight } from 'lucide-react';
 
 import { FeatureHeader } from './FeatureHeader';

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { FileDiff } from '@/components/diff-ui/FileDiff';
-import type { FileContents } from '@pierre/diff-ui';
+import type { FileContents } from '@pierre/precision-diffs';
 import { useState } from 'react';
 
 import { FeatureHeader } from './FeatureHeader';

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

@@ -19,7 +19,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Switch } from '@/components/ui/switch';
-import type { FileContents } from '@pierre/diff-ui';
+import type { FileContents } from '@pierre/precision-diffs';
 import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
 

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

@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { InputWithIcon } from '@/components/ui/input-group';
-import type { FileContents } from '@pierre/diff-ui';
+import type { FileContents } from '@pierre/precision-diffs';
 import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
 

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

@@ -16,7 +16,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { type FileContents, preloadHighlighter } from '@pierre/diff-ui';
+import { type FileContents, preloadHighlighter } from '@pierre/precision-diffs';
 import { ChevronDown } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';

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

@@ -3,7 +3,7 @@
 import { FileDiff } from '@/components/diff-ui/FileDiff';
 import { IconDiffBlended, IconDiffSplit } from '@/components/icons';
 import { ButtonGroup, ButtonGroupItem } from '@/components/ui/button-group';
-import type { FileContents } from '@pierre/diff-ui';
+import type { FileContents } from '@pierre/precision-diffs';
 import { useState } from 'react';
 
 import { FeatureHeader } from './FeatureHeader';

apps/docs/app/page.tsx

@@ -149,7 +149,7 @@ const Hero = () => {
 
   const copyToClipboard = async () => {
     try {
-      await navigator.clipboard.writeText('npm i @pierre/precision-diffs');
+      await navigator.clipboard.writeText('bun i @pierre/precision-diffs');
       setCopied(true);
       setTimeout(() => setCopied(false), 5000);
     } catch (err) {
@@ -183,7 +183,7 @@ const Hero = () => {
               onClick={() => void copyToClipboard()}
               className="inline-flex items-center gap-2 px-4 py-3 rounded-md text-white bg-gray-900 hover:bg-gray-800 dark:bg-black dark:border dark:border-white/20 dark:hover:border-white/30 transition-colors font-mono text-sm"
             >
-              <span>npm i @pierre/precision-diffs</span>
+              <span>bun i @pierre/precision-diffs</span>
               {copied ? <IconCheck /> : <IconCopyFill />}
             </button>
           </TooltipTrigger>

apps/docs/components/diff-ui/Code.tsx

@@ -3,7 +3,7 @@
 import {
   CodeRenderer,
   type CodeRendererOptions,
-} from '@pierre/diff-ui';
+} from '@pierre/precision-diffs';
 import deepEqual from 'fast-deep-equal';
 import {
   type CSSProperties,

apps/docs/components/diff-ui/FileDiff.tsx

@@ -5,7 +5,7 @@ import {
   type FileContents,
   FileDiff as FileDiffUI,
   type LineAnnotation,
-} from '@pierre/diff-ui';
+} from '@pierre/precision-diffs';
 import deepEqual from 'fast-deep-equal';
 import {
   type CSSProperties,

apps/docs/next.config.mjs

@@ -20,7 +20,7 @@ const nextConfig = {
         loaders: ['raw-loader'],
         as: '*.js',
       },
-      '../../packages/diff-ui/src/style.css': {
+      '../../packages/precision-diffs/src/style.css': {
         loaders: ['raw-loader'],
         as: '*.js',
       },
@@ -36,7 +36,7 @@ const nextConfig = {
   //   // For specific CSS file with ?raw query parameter
   //   config.module.rules.push({
   //     resourceQuery: /raw/,
-  //     test: /packages\/diff-ui\/src\/style\.css$/,
+  //     test: /packages\/precision-diffs\/src\/style\.css$/,
   //     type: 'asset/source',
   //   });
   //   return config;

apps/docs/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "catalog:",
-    "@pierre/diff-ui": "workspace:*",
+    "@pierre/precision-diffs": "workspace:*",
     "@pierre/storage": "catalog:",
     "@pierre/storage-elements-next": "workspace:*",
     "@radix-ui/react-avatar": "catalog:",

apps/docs/tsconfig.json

@@ -11,7 +11,7 @@
   "exclude": ["node_modules"],
   "references": [
     {
-      "path": "../../packages/diff-ui"
+      "path": "../../packages/precision-diffs"
     }
   ],
   "compilerOptions": {

package.json

@@ -7,9 +7,9 @@
     "demo:dev": "bun run --elide-lines 0 --filter @pierre/js-demo dev",
     "demo:prod": "bun run --elide-lines 0 --filter @pierre/js-demo prod",
     "demo:tsc": "bun run --elide-lines 0 --filter @pierre/js-demo tsc --noEmit --pretty",
-    "diff-ui:build": "bun run --filter @pierre/diff-ui build",
-    "diff-ui:dev": "bun run --elide-lines 0 --filter @pierre/diff-ui dev",
-    "diff-ui:tsc": "bun run --elide-lines 0 --filter @pierre/diff-ui tsc --noEmit --pretty",
+    "precision-diffs:build": "bun run --filter @pierre/precision-diffs build",
+    "precision-diffs:dev": "bun run --elide-lines 0 --filter @pierre/precision-diffs dev",
+    "precision-diffs:tsc": "bun run --elide-lines 0 --filter @pierre/precision-diffs tsc --noEmit --pretty",
     "docs:registry:build": "bun run --filter @pierre/js-docs registry:build",
     "docs:build": "bun run docs:registry:build && bun run --filter @pierre/js-docs build",
     "docs:dev": "bun run --elide-lines 0 --filter @pierre/js-docs dev",

packages/precision-diffs/build-css.js

@@ -0,0 +1,62 @@
+import { copyFileSync, readFileSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+
+// Read the CSS file
+const css = readFileSync(resolve('src/style.css'), 'utf-8');
+
+// Create a JS module that exports the CSS as a string (no auto-injection)
+const cssJsContent = `// Auto-generated - do not edit
+const css = ${JSON.stringify(css)};
+
+export default css;
+export { css };
+`;
+
+// Write style.css.js to dist (so it can be imported like sprite.txt.js)
+writeFileSync(resolve('dist/style.css.js'), cssJsContent);
+
+// Also copy the CSS file for users who want to import it manually
+copyFileSync(resolve('src/style.css'), resolve('dist/style.css'));
+
+// Read the sprite file
+const sprite = readFileSync(resolve('src/sprite.txt'), 'utf-8');
+
+// Create a JS module that exports the sprite as default
+const spriteJsContent = `// Auto-generated - do not edit
+const sprite = ${JSON.stringify(sprite)};
+
+export default sprite;
+`;
+
+// Write sprite.txt.js to dist
+writeFileSync(resolve('dist/sprite.txt.js'), spriteJsContent);
+
+// Rewrite the FileDiff.js import to use the generated sprite file
+const fileDiffPath = resolve('dist/FileDiff.js');
+let fileDiffContent = readFileSync(fileDiffPath, 'utf-8');
+fileDiffContent = fileDiffContent.replace(
+  /from ['"]\.\/sprite\.txt\?raw['"]/g,
+  'from "./sprite.txt.js"'
+);
+writeFileSync(fileDiffPath, fileDiffContent);
+
+// Rewrite Container.js to import from style.css.js instead of style.css?raw
+const containerPath = resolve('dist/custom-components/Container.js');
+let containerContent = readFileSync(containerPath, 'utf-8');
+containerContent = containerContent.replace(
+  /from ['"]\.\.\/style\.css\?raw['"]/g,
+  'from "../style.css.js"'
+);
+writeFileSync(containerPath, containerContent);
+
+// Remove the style.css import from index.js since Container handles it
+const indexPath = resolve('dist/index.js');
+let indexContent = readFileSync(indexPath, 'utf-8');
+indexContent = indexContent.replace(/import ['"]\.\/style\.css['"];?\n?/g, '');
+writeFileSync(indexPath, indexContent);
+
+console.log('✓ CSS inlined to dist/style.css.js and copied to dist/style.css');
+console.log('✓ Sprite inlined to dist/sprite.txt.js');
+console.log('✓ Rewritten FileDiff.js to use sprite.txt.js');
+console.log('✓ Rewritten Container.js to use style.css.js');
+console.log('✓ Removed style.css import from index.js');

packages/diff-ui/package.json → packages/precision-diffs/package.json

@@ -1,10 +1,9 @@
 {
-  "name": "@pierre/diff-ui",
-  "private": true,
-  "version": "0.0.0",
+  "name": "@pierre/precision-diffs",
+  "version": "0.0.1-alpha.1-1",
   "type": "module",
   "scripts": {
-    "build": "tsc --build",
+    "build": "tsc --build && node build-css.js",
     "dev": "tsc --build --watch",
     "tsc": "tsc"
   },
@@ -14,13 +13,16 @@
       "types": "./src/index.ts"
     }
   },
+  "files": [
+    "src"
+  ],
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "catalog:",
     "@types/hast": "catalog:",
     "typescript": "catalog:"
   },
   "dependencies": {
-    "@pierre/shiki-stream": "workspace:*",
+    "@shikijs/core": "catalog:",
     "diff": "catalog:",
     "fast-deep-equal": "catalog:",
     "hast-util-to-html": "catalog:",

packages/diff-ui/src/CodeRenderer.ts → packages/precision-diffs/src/CodeRenderer.ts

@@ -1,7 +1,7 @@
 import {
   CodeToTokenTransformStream,
   type RecallToken,
-} from '@pierre/shiki-stream';
+} from './shiki-stream';
 
 import { getSharedHighlighter } from './SharedHighlighter';
 import { queueRender } from './UniversalRenderer';

packages/diff-ui/src/index.ts → packages/precision-diffs/src/index.ts

@@ -1,6 +1,6 @@
 import './style.css';
 
-export * from '@pierre/shiki-stream';
+export * from './shiki-stream';
 export * from './CodeRenderer';
 export * from './DiffHeaderRenderer';
 export * from './DiffHunksRenderer';