|
| 1 | +# 📦 Dependencies Documentation |
| 2 | + |
| 3 | +This document provides information about the core dependencies used in GhostPaste and their edge runtime compatibility. |
| 4 | + |
| 5 | +## Core Dependencies |
| 6 | + |
| 7 | +### ID Generation |
| 8 | + |
| 9 | +- **nanoid** (v5.1.5) - Secure, URL-safe unique ID generator |
| 10 | + - ✅ Edge compatible |
| 11 | + - Used for generating unique gist IDs |
| 12 | + - Generates 21-character IDs by default |
| 13 | + |
| 14 | +### Code Editor |
| 15 | + |
| 16 | +- **CodeMirror 6** - Modern code editor framework |
| 17 | + - ✅ Edge compatible (when using state-only features) |
| 18 | + - Core packages: |
| 19 | + - `codemirror` - Core editor framework |
| 20 | + - `@codemirror/state` - Editor state management |
| 21 | + - `@codemirror/view` - Editor view (use carefully in edge runtime) |
| 22 | + |
| 23 | +### Language Support |
| 24 | + |
| 25 | +Installed language modes for syntax highlighting: |
| 26 | + |
| 27 | +- `@codemirror/lang-javascript` - JavaScript/TypeScript |
| 28 | +- `@codemirror/lang-python` - Python |
| 29 | +- `@codemirror/lang-html` - HTML |
| 30 | +- `@codemirror/lang-css` - CSS |
| 31 | +- `@codemirror/lang-json` - JSON |
| 32 | +- `@codemirror/lang-markdown` - Markdown |
| 33 | +- `@codemirror/lang-sql` - SQL |
| 34 | +- `@codemirror/lang-xml` - XML |
| 35 | +- `@codemirror/lang-yaml` - YAML |
| 36 | + |
| 37 | +### Themes |
| 38 | + |
| 39 | +- `@codemirror/theme-one-dark` - One Dark theme |
| 40 | +- `@uiw/codemirror-theme-github` - GitHub light/dark themes |
| 41 | + |
| 42 | +### UI Framework |
| 43 | + |
| 44 | +- **shadcn/ui** - Component library built on Radix UI |
| 45 | + - `@radix-ui/react-slot` - Composition primitive |
| 46 | + - `class-variance-authority` - Variant styling |
| 47 | + - `clsx` - Class name utility |
| 48 | + - `tailwind-merge` - Tailwind class merging |
| 49 | + - `lucide-react` - Icon library |
| 50 | + |
| 51 | +### Theme Management |
| 52 | + |
| 53 | +- **next-themes** - Theme switching for Next.js |
| 54 | + - ✅ Edge compatible |
| 55 | + - Handles dark/light mode with system preference support |
| 56 | + |
| 57 | +### Type Definitions |
| 58 | + |
| 59 | +- **@cloudflare/workers-types** - TypeScript types for Cloudflare Workers |
| 60 | + - Provides types for R2, KV, Durable Objects, etc. |
| 61 | + |
| 62 | +## Edge Runtime Compatibility |
| 63 | + |
| 64 | +All core dependencies have been tested and verified to work in Cloudflare Workers edge runtime: |
| 65 | + |
| 66 | +1. **nanoid** - Fully compatible, uses Web Crypto API |
| 67 | +2. **CodeMirror** - State management is compatible, DOM operations should be client-side only |
| 68 | +3. **UI libraries** - React components work in SSR/edge runtime |
| 69 | +4. **Type definitions** - Development only, no runtime impact |
| 70 | + |
| 71 | +## Usage Notes |
| 72 | + |
| 73 | +### CodeMirror in Edge Runtime |
| 74 | + |
| 75 | +When using CodeMirror in edge runtime (SSR), only use state-related features: |
| 76 | + |
| 77 | +```typescript |
| 78 | +// ✅ Safe for edge runtime |
| 79 | +import { EditorState } from "@codemirror/state"; |
| 80 | +const state = EditorState.create({ doc: "code" }); |
| 81 | + |
| 82 | +// ❌ Not safe for edge runtime (requires DOM) |
| 83 | +import { EditorView } from "@codemirror/view"; |
| 84 | +// Only use EditorView on client-side |
| 85 | +``` |
| 86 | + |
| 87 | +### nanoid Usage |
| 88 | + |
| 89 | +```typescript |
| 90 | +import { nanoid } from "nanoid"; |
| 91 | +const id = nanoid(); // Generates 21-char ID |
| 92 | +const customId = nanoid(10); // Custom length |
| 93 | +``` |
| 94 | + |
| 95 | +## Bundle Size Considerations |
| 96 | + |
| 97 | +- CodeMirror language modes are modular - only import what you need |
| 98 | +- Consider dynamic imports for large language modes |
| 99 | +- Tree-shaking will remove unused exports |
0 commit comments