35 lines
1.0 KiB
Svelte
35 lines
1.0 KiB
Svelte
<script lang='ts'>
|
|
import type { MagicMoveDifferOptions, MagicMoveRenderOptions } from 'shiki-magic-move/types'
|
|
import type { HighlighterCore } from 'shiki/core'
|
|
import { codeToKeyedTokens, createMagicMoveMachine } from 'shiki-magic-move/core'
|
|
import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte'
|
|
|
|
interface ShikiMagicMoveProps {
|
|
highlighter: HighlighterCore
|
|
lang: string
|
|
theme: string
|
|
code: string
|
|
options?: MagicMoveRenderOptions & MagicMoveDifferOptions
|
|
onStart?: () => void
|
|
onEnd?: () => void
|
|
class?: string
|
|
tabindex?: number
|
|
}
|
|
|
|
const { highlighter, lang, theme, code, options, onStart, onEnd, ...props }: ShikiMagicMoveProps = $props()
|
|
const machine = createMagicMoveMachine(
|
|
code => codeToKeyedTokens(highlighter, code, { lang, theme }, options?.lineNumbers),
|
|
options,
|
|
)
|
|
const result = $derived(machine.commit(code))
|
|
</script>
|
|
|
|
<ShikiMagicMoveRenderer
|
|
tokens={result.current}
|
|
previous={result.previous}
|
|
{options}
|
|
{onStart}
|
|
{onEnd}
|
|
{...props}
|
|
/>
|