fix: improve diff mechanism

client/app/components/HydrationIssue.vue

@@ -28,26 +28,28 @@
 const diffHtml = ref('')
 
 async function render(pre: string, post: string) {
-  const diff = diffLines(pre, post, { stripTrailingCr: true, ignoreNewlineAtEof: true })
+  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: [
       transformerNotationDiff(),
     ],
   })
 }
-
 function generateDiffHtml(change: ChangeObject<string>[]) {
   return change.map((part) => {
+    if (part.value === '\n') {
+      return ''
+    }
     if (part.added) {
-      return `// [!code ++]\n${part.value}`
+      return `\n// [!code ++]\n${part.value}`
     }
     else if (part.removed) {
-      return `// [!code --]\n${part.value} `
+      return `\n// [!code --]\n${part.value} `
     }
     else {
       return part.value
     }
-  }).join('')
+  }).join('').trim()
 }
 
 const fullPre = computed(() => props.issue.htmlPreHydration ?? '')
@@ -140,8 +142,8 @@
     </div>
 
     <div
-      class="w-full mt-3 overflow-auto rounded-lg w-fit"
+      class="w-full mt-3 overflow-auto rounded-lg"
       v-html="diffHtml"
     />
   </n-card>
 </template>

playground/pages/hydration.vue

@@ -4,6 +4,15 @@
 
 <template>
   <div>
-    <p>isServer: {{ isServer }}</p>
+    <p :data-test="isServer ? 'server' : 'client'" class="fzejkebkzjefbjkzebfkjzebfkjzebfzebfkjzebkfjbzekjjjjjjjjjjjjjjjjjjjjkfzebjkfbzkjebfjkjk">
+      isServer: {{ isServer }} <span v-if="!isServer">test</span>
+    </p>
+
+    <div
+      :class="isServer ? '1561561' : 'text-green-500'"
+      :data-test="isServer ? 'server' : 'client'"
+    >
+      yolooo
+    </div>
   </div>
 </template>