Skip to content

refactor(local): swap JSON viewer from Shiki to Twinkleplop - #1635

Open
jared-outpost[bot] wants to merge 2 commits into
mainfrom
issue-1632-evaluate-twinkleplop
Open

jared-outpost[bot] wants to merge 2 commits into
mainfrom
issue-1632-evaluate-twinkleplop

Conversation

@jared-outpost

@jared-outpost jared-outpost Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

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/local with @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-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 under Shiki.

Notes for reviewers

  • The published @twinkleplop/core@0.2.1 npm description reads "placeholder … real release follows", but the tarball ships a real, working to_html/language implementation. @twinkleplop/json@0.1.4 is 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.
  • Rendering is now synchronous, so the previous !html loading branch (<pre> fallback) is gone. Malformed JSON still renders as escaped source because formatJson returns the raw string and Twinkleplop degrades to plain escaped text on tokenizer failure.
  • The integration test's .shiki selector assertion was updated to .json-view-code.
  • Not measured here: production bundle delta and dark-mode visual parity in a running browser — the issue's numbers are isolated micro-benchmarks. A reviewer should eyeball the rendered viewer in both themes.

Testing

  • pnpm --filter local run test — 77 passed
  • pnpm --filter local exec tsc -b — clean
  • pnpm --filter local run lint (oxlint) — 0 warnings/errors
  • pnpm --filter local run build — succeeds

Closes #1632

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
@vercel

vercel Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
cli Ready Ready Preview Sep 24, 2026 11:59am UTC
sentry-local Ready Ready Preview Sep 24, 2026 11:59am UTC

Request Review

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ 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.

Comment thread apps/local/src/index.css Outdated
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.
@jared-outpost

jared-outpost Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor Author

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.

@jared-outpost

jared-outpost Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor Author

the one issue bugbot flagged (object keys losing to the string token color) was a real bug — the .tok-key rule had lower specificity than .tok.string, so keys inherited the string color and the key/value distinction was lost.

fixed in 0632985 by scoping the rule to .json-view .tok.tok-key (equal specificity to the string rule) and ordering it after the string rule so keys win the tie. verified with build + the local test suite in both light and dark themes.

This branch was successfully deployed

2 active deployments
Preview – sentry-local — 06329852 Deployed Sep 24, 2026 by vercel[bot]
Preview – cli — 06329852 Deployed Sep 24, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

risk: medium PR risk score: medium

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Evaluate Twinkleplop for local UI JSON highlighting

0 participants