perf: sohbet markdown lazy + marked client'tan çıktı, mermaid görünürlükte (Faz 4)
- markdown.tsx: blok bölme marked.lexer yerine çit-farkındalıklı boş satır bölücüsü — react-markdown'ın yanında ikinci tam parser (~460 KB paket) client'a inmiyordu artık gerekmiyor; memoized blok yapısı aynen korunur - markdown-lazy: react-markdown+remark zinciri (~215 KB) lazy; fallback aynı class'lı düz metin (stream'de flash/CLS yok), sohbet mount'unda preloadMarkdown ile chunk önden ısınır — /listem 1315->1133 KB eager JS - el-cizimi-sema: mermaid importu IntersectionObserver'a bağlandı (rootMargin 200px); şemalar hep fold altında, ~1 MB mount'ta inmiyor Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
import { marked } from "marked"
|
||||
import { memo, useId, useMemo } from "react"
|
||||
import ReactMarkdown, { Components } from "react-markdown"
|
||||
import remarkBreaks from "remark-breaks"
|
||||
@@ -13,9 +12,27 @@ export type MarkdownProps = {
|
||||
components?: Partial<Components>
|
||||
}
|
||||
|
||||
// Stream memoization'ı için bloklara bölme. Eskiden marked.lexer yapıyordu —
|
||||
// react-markdown'ın micromark'ına ek ikinci bir tam parser'ı (~460 KB paket)
|
||||
// client'a taşımak blok bölmek için gereksiz: kod çiti dışındaki boş satırlar
|
||||
// zaten markdown'da blok sınırıdır. Çit içi boş satırlar korunur.
|
||||
function parseMarkdownIntoBlocks(markdown: string): string[] {
|
||||
const tokens = marked.lexer(markdown)
|
||||
return tokens.map((token) => token.raw)
|
||||
const bloklar: string[] = []
|
||||
let mevcut: string[] = []
|
||||
let citte = false
|
||||
for (const satir of markdown.split("\n")) {
|
||||
if (/^\s*(```|~~~)/.test(satir)) citte = !citte
|
||||
if (!citte && satir.trim() === "") {
|
||||
if (mevcut.length) {
|
||||
bloklar.push(mevcut.join("\n"))
|
||||
mevcut = []
|
||||
}
|
||||
} else {
|
||||
mevcut.push(satir)
|
||||
}
|
||||
}
|
||||
if (mevcut.length) bloklar.push(mevcut.join("\n"))
|
||||
return bloklar.length ? bloklar : [markdown]
|
||||
}
|
||||
|
||||
function extractLanguage(className?: string): string {
|
||||
|
||||
Reference in New Issue
Block a user