refactor(local): swap JSON viewer from Shiki to Twinkleplop - #1635
jared-outpost[bot] wants to merge 2 commits into
Conversation
Replaces Shiki's JS engine/JSON grammar/dual-theme setup in the local UI JSON viewer with @twinkleplop/json, which highlights synchronously (no promise, no WASM, no async effect) while keeping HTML escaping, the malformed-input source fallback, and copy behavior intact. Theming moves from Shiki's --shiki-light/--shiki-dark CSS variables to Twinkleplop's .tok.<type> classes (has_classes), mapped to the same github-light/dark colors. JSON object keys — which Twinkleplop tags as plain strings — are recovered via the render token hook (a string token followed by ':' gets .tok-key) so keys and string values stay visually distinct as they were under Shiki. Fixes #1632
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want reviews to match your repository better? Bugbot Learning can learn team-specific rules from PR activity. A team admin can enable Learning in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit b083027. Configure here.
The key span renders as `tok string tok-key`, and `.json-view .tok-key` lost the specificity tie to `.json-view .tok.string`, so keys picked up the string color. Scope the key rule to `.tok.tok-key` and order it after the string rule so keys keep their distinct color.
|
the one issue bugbot flagged (JSON keys losing their color to the string token specificity) is fixed in 0632985 and the inline thread is resolved. build + local test suite pass. |
|
the one issue bugbot flagged (object keys losing to the string token color) was a real bug — the fixed in 0632985 by scoping the rule to |

Evaluates Twinkleplop for the local UI JSON viewer (#1632) by actually performing the swap so it can be reviewed concretely. Replaces Shiki's JS engine + JSON grammar + dual-theme setup in
apps/localwith@twinkleplop/json, which highlights synchronously (no promise, no WASM, no async effect) while preserving HTML escaping, the malformed-input source fallback, and copy behavior.Theming moves from Shiki's
--shiki-light/--shiki-darkCSS variables to Twinkleplop's.tok.<type>classes (has_classes), mapped to the same github-light/dark colors. JSON object keys — which Twinkleplop tags as plain strings — are recovered via the rendertokenhook (a string token followed by:gets.tok-key) so keys and string values stay visually distinct as under Shiki.Notes for reviewers
@twinkleplop/core@0.2.1npm description reads "placeholder … real release follows", but the tarball ships a real, workingto_html/languageimplementation.@twinkleplop/json@0.1.4is the JSON language package (the issue's "language package 0.1.4"). Worth a maintainer gut-check before relying on it in production, given the version numbers.!htmlloading branch (<pre>fallback) is gone. Malformed JSON still renders as escaped source becauseformatJsonreturns the raw string and Twinkleplop degrades to plain escaped text on tokenizer failure..shikiselector assertion was updated to.json-view-code.Testing
pnpm --filter local run test— 77 passedpnpm --filter local exec tsc -b— cleanpnpm --filter local run lint(oxlint) — 0 warnings/errorspnpm --filter local run build— succeedsCloses #1632