Skip to content

chore: trim Shiki client bundles, patch @pierre/diffs, diffkit theme names#158

Merged
stylessh merged 2 commits intomainfrom
chore/shiki-bundle-trim-diffkit-themes
Apr 18, 2026
Merged

chore: trim Shiki client bundles, patch @pierre/diffs, diffkit theme names#158
stylessh merged 2 commits intomainfrom
chore/shiki-bundle-trim-diffkit-themes

Conversation

@stylessh
Copy link
Copy Markdown
Owner

@stylessh stylessh commented Apr 18, 2026

Summary

This PR reduces client bundle weight from Shiki and @pierre/diffs by avoiding the default shiki entry (which references every language/theme chunk), and renames custom markdown highlighter themes from vercel-* to diffkit-*.

Changes

  • Markdown / @diffkit/ui: createHighlighterCore from shiki/core with explicit @shikijs/langs imports, JS regex engine, and custom diffkit-light / diffkit-dark themes. Unknown fence languages fall back to plain text.
  • @pierre/diffs: pnpm patch replaces bundledLanguages / bundledThemes imports, uses createHighlighterCore for the shared highlighter, and resolves themes only via registered custom themes. Language loading uses an allowlisted set of @shikijs/langs with a small ini fallback for rare file types.
  • Workspace: pnpm.overrides pin @pierre/diffs to Shiki 4 and matching @shikijs/transformers; patchedDependencies applies the patch.

Notes

  • Client build should show far fewer duplicate/heavy grammar chunks (e.g. duplicate WASM, emacs-lisp).
  • Full vite build may still fail on the SSR step (cloudflare:workers) if that was already an issue locally; unrelated to this PR.

Summary by CodeRabbit

  • New Features
    • Improved code block rendering with deterministic language recognition, a curated bundled language set, and new light/dark token palettes for more consistent highlighting.
  • Chores
    • Updated syntax-highlighting packages and added package-manager overrides and a local patch to stabilize behavior.
  • Bug Fixes
    • Removed runtime language-loading fallbacks to reduce flicker and improve reliability.

- Use createHighlighterCore with explicit @shikijs/langs and JS regex engine
  for markdown highlighting; drop loadLanguage fallback to full catalog.
- Patch @pierre/diffs to avoid bundledLanguages/bundledThemes from shiki;
  align on shiki 4 via pnpm overrides.
- Rename custom markdown themes from vercel-* to diffkit-*.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 18, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 74eafcd0-9a1c-46a7-91ba-ea55bb6ae8a7

📥 Commits

Reviewing files that changed from the base of the PR and between 6ea4979 and 4102d0a.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (2)
  • packages/ui/src/components/markdown.tsx
  • patches/@pierre__diffs@1.1.12.patch
🚧 Files skipped from review as they are similar to previous changes (2)

📝 Walkthrough

Walkthrough

Added pnpm overrides and a local patch for @pierre/diffs; introduced a Shiki bundle module with deterministic bundled-language loaders, swapped theme identifiers from vercel-* to diffkit-*, and updated markdown highlighting to use a new createMarkdownHighlighter() with normalized fence-language handling.

Changes

Cohort / File(s) Summary
Package manager & patch
package.json, patches/@pierre__diffs@1.1.12.patch
Added pnpm overrides and patchedDependencies; patch rewrites bundled highlighting to use @shikijs/* packages, dynamic per-language loaders, createHighlighterCore usage, and theme normalization changes.
Shiki theme & bundle infrastructure
packages/ui/src/lib/shiki-themes.ts, packages/ui/src/lib/shiki-bundle.ts, packages/ui/src/lib/diffs-themes.ts
Renamed exported themes from vercelLight/vercelDark to diffkitLight/diffkitDark (names "diffkit-light"/"diffkit-dark"). Added shiki-bundle.ts exporting SHIKI_BUNDLED_LANGS, ShikiBundledLang type, shikiBundledLangSet, and createMarkdownHighlighter() factory. Updated comments and token palette references.
UI package & markdown integration
packages/ui/package.json, packages/ui/src/components/markdown.tsx
Added @shikijs/langs@4.0.2 dependency. markdown.tsx now uses createMarkdownHighlighter(), replaces runtime language loading with FENCE_LANG_ALIASES + shikiBundledLangSet checks, and switches theme IDs to diffkit-light/diffkit-dark.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main objectives: trimming Shiki bundles, patching @pierre/diffs, and renaming theme identifiers to diffkit.
Description check ✅ Passed The description includes a comprehensive Summary, detailed Changes section, and Notes explaining implications. However, it lacks a Test Plan section with checkboxes and Screenshots section from the template.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch chore/shiki-bundle-trim-diffkit-themes

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/ui/src/components/markdown.tsx`:
- Around line 22-34: FENCE_LANG_ALIASES is missing common Shiki fence aliases so
languages like yml, gql, and md fall back to plain text; update the
FENCE_LANG_ALIASES map in components/markdown.tsx (type ShikiBundledLang) to
include at least these mappings: "yml" -> "yaml", "yaml" -> "yaml" (if not
present), "gql" -> "graphql", "graphql" -> "graphql" (if not present), and "md"
-> "markdown" (and "markdown" -> "markdown" if missing) so Shiki receives
canonical language names and highlighting is preserved. Ensure you add only
aliases that map to valid ShikiBundledLang entries used elsewhere in the file.

In `@patches/`@pierre__diffs@1.1.12.patch:
- Around line 14-44: The patch adds dynamic imports like javascript: () =>
import("@shikijs/langs/javascript") and uses `@shikijs/core` but package.json for
`@pierre/diffs`@1.1.12 doesn’t declare `@shikijs/core` or any `@shikijs/langs/`*
packages; update the package manifest to add `@shikijs/core` plus each required
language package (e.g. `@shikijs/langs/javascript`, `@shikijs/langs/typescript`,
`@shikijs/langs/jsx`, `@shikijs/langs/tsx`, `@shikijs/langs/json`,
`@shikijs/langs/html`, `@shikijs/langs/css`, `@shikijs/langs/bash`,
`@shikijs/langs/shellscript`, `@shikijs/langs/python`, `@shikijs/langs/go`,
`@shikijs/langs/rust`, `@shikijs/langs/yaml`, `@shikijs/langs/markdown`,
`@shikijs/langs/diff`, `@shikijs/langs/sql`, `@shikijs/langs/graphql`,
`@shikijs/langs/ruby`, `@shikijs/langs/java`, `@shikijs/langs/c`, `@shikijs/langs/cpp`,
`@shikijs/langs/swift`, `@shikijs/langs/kotlin`, `@shikijs/langs/dockerfile`,
`@shikijs/langs/toml`, `@shikijs/langs/vue`, `@shikijs/langs/svelte`,
`@shikijs/langs/php`, `@shikijs/langs/csharp`, `@shikijs/langs/ini`) with appropriate
versions (or a single compatible range), or alternatively consolidate imports to
only the langs that are truly needed and add those to dependencies; ensure
lockfile is updated and CI passes.
- Around line 12-45: The trimmedBundledLanguages map lacks common aliases so
resolveLanguage falls back to ini for inputs like "js", "ts", "py", "rb", "gql",
"md", "yml", "c++", etc.; update resolveLanguage or trimmedBundledLanguages to
include those aliases (or normalize inputs) so aliases map to the intended keys
(e.g., map "js" -> "javascript", "ts" -> "typescript", "py" -> "python", "rb" ->
"ruby", "gql" -> "graphql", "md" -> "markdown", "yml" -> "yaml", "c++" ->
"cpp"), and ensure resolveLanguage first checks the alias map before falling
back to ini (reference trimmedBundledLanguages and resolveLanguage in the diff).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7dc071a7-c937-451f-bdf1-d2c7f1449fe0

📥 Commits

Reviewing files that changed from the base of the PR and between 95ea21b and 6ea4979.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (7)
  • package.json
  • packages/ui/package.json
  • packages/ui/src/components/markdown.tsx
  • packages/ui/src/lib/diffs-themes.ts
  • packages/ui/src/lib/shiki-bundle.ts
  • packages/ui/src/lib/shiki-themes.ts
  • patches/@pierre__diffs@1.1.12.patch

Comment thread packages/ui/src/components/markdown.tsx
Comment thread patches/@pierre__diffs@1.1.12.patch
Comment thread patches/@pierre__diffs@1.1.12.patch
- Patch resolveLanguage: LANG_ALIASES + canonical id before ini fallback;
  resolved grammar uses canonical name.
- Patched @pierre/diffs package.json: declare @shikijs/core, @shikijs/langs,
  shiki ^4, @shikijs/transformers ^4 (subpaths use the langs package, not
  per-grammar npm deps).
- FENCE_LANG_ALIASES: yml, gql, md (yaml/graphql/markdown already canonical).
@stylessh stylessh merged commit d7adb0a into main Apr 18, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant