feat: introduce ShikiMagicMoveCompiled component

src/vue/components/ShikiMagicMove.ts

@@ -1,7 +1,7 @@
 import type { HighlighterCore } from 'shiki/core'
 import type { PropType } from 'vue'
 import { computed, defineComponent, h } from 'vue'
-import { codeToKeyedTokens, createMagicMoveMachine, syncTokenKeys, toKeyedTokens } from '../../core'
+import { codeToKeyedTokens, createMagicMoveMachine } from '../../core'
 import type { AnimationOptions } from '../types'
 import { TokensRenderer } from './TokensRenderer'
 
@@ -36,7 +36,6 @@ export const ShikiMagicMove = /* #__PURE__ */ defineComponent({
         theme: props.theme,
       }),
     )
-
     const tokens = computed(() => machine.commit(props.code))
 
     return () => h(TokensRenderer, {

src/vue/components/ShikiMagicMoveCompiled.ts

@@ -0,0 +1,35 @@
+import type { PropType } from 'vue'
+import { computed, defineComponent, h } from 'vue'
+import type { KeyedTokensInfo } from '../../core'
+import type { AnimationOptions } from '..'
+import { TokensRenderer } from './TokensRenderer'
+
+/**
+ * Component to render a compiled magic move step,
+ * Where the tokens can be generated on build time.
+ */
+export const ShikiMagicMoveCompiled = /* #__PURE__ */ defineComponent({
+  name: 'ShikiMagicMoveCompiled',
+  props: {
+    steps: {
+      type: Array as PropType<KeyedTokensInfo[]>,
+      required: true,
+    },
+    step: {
+      type: Number,
+      default: 0,
+    },
+    animation: {
+      type: Object as PropType<AnimationOptions>,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const current = computed(() => props.steps[props.step])
+
+    return () => h(TokensRenderer, {
+      tokens: current.value,
+      animation: props.animation,
+    })
+  },
+})

src/vue/components/TokensRenderer.ts

@@ -1,8 +1,12 @@
 import type { PropType } from 'vue'
-import { TransitionGroup, computed, defineComponent, h, nextTick, onMounted, reactive, ref, renderList } from 'vue'
+import { TransitionGroup, computed, defineComponent, h, nextTick, onMounted, ref, renderList } from 'vue'
 import type { KeyedTokensInfo } from '../../core'
 import type { AnimationOptions } from '../types'
 
+/**
+ * Component to render a compiled tokens and animate them.
+ * This is a low-level component.
+ */
 export const TokensRenderer = /* #__PURE__ */ defineComponent({
   name: 'TokensRenderer',
   props: {

src/vue/index.ts

@@ -2,9 +2,9 @@ import type { App } from 'vue'
 import { ShikiMagicMove } from './components/ShikiMagicMove'
 
 export * from './types'
-export * from '../core'
 
 export { ShikiMagicMove }
+export { ShikiMagicMoveCompiled } from './components/ShikiMagicMoveCompiled'
 export { TokensRenderer } from './components/TokensRenderer'
 
 export function install(app: App<any>) {