From e21291bbf3d1085390524e3c13f70bbd3b09ce7d Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Tue, 23 Dec 2025 15:13:22 +0100
Subject: [PATCH] feat: add foldable tags through shiki-transformer-fold

---
 client/app/components/HydrationIssue.vue | 6 ++++++
 package.json                             | 3 ++-
 pnpm-lock.yaml                           | 8 ++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/app/components/HydrationIssue.vue b/client/app/components/HydrationIssue.vue
index 67b9c0a..3617f09 100644
--- a/client/app/components/HydrationIssue.vue
+++ b/client/app/components/HydrationIssue.vue
@@ -4,6 +4,7 @@ import { diffLines, type ChangeObject } from 'diff'
 import { transformerNotationDiff } from '@shikijs/transformers'
 import type { HydrationMismatchPayload, LocalHydrationMismatch } from '../../../src/runtime/hydration/types'
 import { HYDRATION_ROUTE } from '../../../src/runtime/hydration/utils'
+import { transformerRenderHtmlFold, attachFoldToggleListener } from 'shiki-transformer-fold'
 
 const props = defineProps<{
   issue: Issue
@@ -31,6 +32,7 @@ async function render(pre: string, post: string) {
   const diff = diffLines(pre, post, { stripTrailingCr: true, ignoreNewlineAtEof: true, newlineIsToken: true, ignoreWhitespace: true })
   diffHtml.value = await codeToHtml(generateDiffHtml(diff), {
     theme: 'github-dark', lang: 'html', transformers: [
+      transformerRenderHtmlFold(),
       transformerNotationDiff(),
     ],
   })
@@ -72,6 +74,10 @@ function removeSelf() {
     body: JSON.stringify({ id: [props.issue.id] }),
   })
 }
+
+onMounted(() => {
+  attachFoldToggleListener()
+})
 </script>
 
 <template>
diff --git a/package.json b/package.json
index 2f9f5c7..57dcaaa 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
     "@nuxt/schema": "^4.1.2",
     "@nuxt/test-utils": "^3.19.2",
     "@shikijs/transformers": "^3.15.0",
-    "shiki": "^3.13.0",
     "@types/node": "^24.0.0",
     "changelogen": "^0.6.0",
     "diff": "^8.0.2",
@@ -66,6 +65,8 @@
     "pkg-pr-new": "0.0.62",
     "rimraf": "^6.0.1",
     "sass-embedded": "^1.93.3",
+    "shiki": "^3.13.0",
+    "shiki-transformer-fold": "^0.1.0",
     "vitest": "^4.0.0"
   },
   "packageManager": "pnpm@10.26.0+sha512.3b3f6c725ebe712506c0ab1ad4133cf86b1f4b687effce62a9b38b4d72e3954242e643190fc51fa1642949c735f403debd44f5cb0edd657abe63a8b6a7e1e402"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7f71798..1883245 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,6 +96,9 @@ importers:
       shiki:
         specifier: ^3.13.0
         version: 3.20.0
+      shiki-transformer-fold:
+        specifier: ^0.1.0
+        version: 0.1.0
       vitest:
         specifier: ^4.0.0
         version: 4.0.16(@types/node@24.10.4)(happy-dom@20.0.11)(jiti@2.6.1)(sass-embedded@1.97.0)(sass@1.97.0)(terser@5.44.1)(yaml@2.8.2)
@@ -4672,6 +4675,9 @@ packages:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
 
+  shiki-transformer-fold@0.1.0:
+    resolution: {integrity: sha512-vOvjoIRxiIb/AJd/MPGQ5W8Is2hTH12rO4ctyqkE/rimCWIiAywKthKGnJ8JEMDVBhk7UltCWlAxHjbvwFvGeg==}
+
   shiki@3.20.0:
     resolution: {integrity: sha512-kgCOlsnyWb+p0WU+01RjkCH+eBVsjL1jOwUYWv0YDWkM2/A46+LDKVs5yZCUXjJG6bj4ndFoAg5iLIIue6dulg==}
 
@@ -10625,6 +10631,8 @@ snapshots:
 
   shell-quote@1.8.3: {}
 
+  shiki-transformer-fold@0.1.0: {}
+
   shiki@3.20.0:
     dependencies:
       '@shikijs/core': 3.20.0