feature: vor und nachteile

praesentation/node_modules/shiki-magic-move/dist/svelte/ShikiMagicMove.svelte

@@ -0,0 +1,34 @@
+<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}
+/>

praesentation/node_modules/shiki-magic-move/dist/svelte/ShikiMagicMovePrecompiled.svelte

@@ -0,0 +1,46 @@
+<script lang='ts'>
+  import type { KeyedTokensInfo, MagicMoveDifferOptions, MagicMoveRenderOptions } from 'shiki-magic-move/types'
+  import { syncTokenKeys, toKeyedTokens } from 'shiki-magic-move/core'
+  import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte'
+
+  interface ShikiMagicMovePrecompileProps {
+    steps: KeyedTokensInfo[]
+    step?: number
+    animate?: boolean
+    options?: MagicMoveRenderOptions & MagicMoveDifferOptions
+    onStart?: () => void
+    onEnd?: () => void
+    class?: string
+  }
+
+  const {
+    steps,
+    step = 0,
+    animate = true,
+    options,
+    onStart,
+    onEnd,
+  }: ShikiMagicMovePrecompileProps = $props()
+
+  const EMPTY = toKeyedTokens('', [])
+
+  let previous = EMPTY
+  const result = $derived.by(() => {
+    if (steps.length === 0)
+      return
+    const res = syncTokenKeys(previous, steps[Math.min(step, steps.length - 1)], options)
+    previous = res.to
+    return res
+  })
+</script>
+
+{#if result}
+  <ShikiMagicMoveRenderer
+    tokens={result.to}
+    previous={result.from}
+    {options}
+    {animate}
+    {onStart}
+    {onEnd}
+  />
+{/if}

praesentation/node_modules/shiki-magic-move/dist/svelte/ShikiMagicMoveRenderer.svelte

@@ -0,0 +1,72 @@
+<script lang='ts'>
+  import type { KeyedTokensInfo, MagicMoveRenderOptions } from 'shiki-magic-move/types'
+  import { MagicMoveRenderer } from 'shiki-magic-move/renderer'
+
+  interface ShikiMagicMoveRendererProps {
+    class?: string
+    animate?: boolean
+    tokens: KeyedTokensInfo
+    previous?: KeyedTokensInfo
+    options?: MagicMoveRenderOptions
+    onStart?: () => void
+    onEnd?: () => void
+  }
+
+  const {
+    animate = true,
+    tokens,
+    previous,
+    options,
+    onStart,
+    onEnd,
+    ...props
+  }: ShikiMagicMoveRendererProps = $props()
+
+  let container: HTMLPreElement
+  let renderer: MagicMoveRenderer
+  let isMounted = $state(false)
+
+  $effect(() => {
+    if (!container)
+      return
+    container.innerHTML = ''
+    isMounted = true
+    renderer = new MagicMoveRenderer(container)
+  })
+
+  $effect(() => {
+    async function render() {
+      if (!renderer)
+        return
+      Object.assign(renderer.options, options)
+      if (animate) {
+        if (previous)
+          renderer.replace(previous)
+        onStart?.()
+        await renderer.render(tokens)
+        onEnd?.()
+      }
+      else {
+        renderer.replace(tokens)
+      }
+    }
+    render()
+  })
+</script>
+
+<pre bind:this={container} class='shiki-magic-move-container {props?.class}' {...props}>
+  <!-- render initial tokens for SSR -->
+  {#if !isMounted}
+    {#each tokens.tokens as token (token.key)}
+      {#if token.content === '\n'}
+        <br />
+      {/if}
+      <span
+        class='shiki-magic-move-item'
+        style:color={token.color}
+        style={token.htmlStyle}>
+        {token.content}
+      </span>
+    {/each}
+  {/if}
+</pre>

praesentation/node_modules/shiki-magic-move/dist/svelte/index.d.mts

@@ -0,0 +1,4 @@
+import ShikiMagicMove from './ShikiMagicMove.svelte';
+import ShikiMagicMovePrecompiled from './ShikiMagicMovePrecompiled.svelte';
+import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte';
+export { ShikiMagicMove, ShikiMagicMovePrecompiled, ShikiMagicMoveRenderer };

praesentation/node_modules/shiki-magic-move/dist/svelte/index.d.ts

@@ -0,0 +1,4 @@
+import ShikiMagicMove from './ShikiMagicMove.svelte';
+import ShikiMagicMovePrecompiled from './ShikiMagicMovePrecompiled.svelte';
+import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte';
+export { ShikiMagicMove, ShikiMagicMovePrecompiled, ShikiMagicMoveRenderer };

praesentation/node_modules/shiki-magic-move/dist/svelte/index.mjs

@@ -0,0 +1,4 @@
+import ShikiMagicMove from "./ShikiMagicMove.svelte";
+import ShikiMagicMovePrecompiled from "./ShikiMagicMovePrecompiled.svelte";
+import ShikiMagicMoveRenderer from "./ShikiMagicMoveRenderer.svelte";
+export { ShikiMagicMove, ShikiMagicMovePrecompiled, ShikiMagicMoveRenderer };