feat: rewrite to render function

build.config.ts

@@ -5,11 +5,13 @@ export default defineBuildConfig({
     'src/index',
     'src/vue',
     'src/core',
+    {
+      builder: 'mkdist',
+      outDir: 'dist',
+      input: './src',
+      pattern: ['**/*.css'],
+    },
   ],
   declaration: true,
   clean: true,
-  rollup: {
-    emitCJS: true,
-    inlineDependencies: true,
-  },
 })

package.json

@@ -13,20 +13,31 @@
     "url": "git+https://github.com/antfu/shiki-magic-move.git"
   },
   "bugs": "https://github.com/antfu/shiki-magic-move/issues",
-  "keywords": [],
+  "keywords": [
+    "shiki",
+    "animations"
+  ],
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    }
+      "import": "./dist/index.mjs"
+    },
+    "./core": {
+      "import": "./dist/core.mjs"
+    },
+    "./vue": {
+      "import": "./dist/core.mjs"
+    },
+    "./vue/style.css": "./dist/vue/style.css",
+    "./dist/*": "./dist/*"
   },
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
+      "./vue": ["./dist/vue.d.ts"],
+      "./core": ["./dist/core.d.ts"],
       "*": [
         "./dist/*",
         "./dist/index.d.ts"
@@ -53,6 +64,9 @@
     "shiki": "^1.1.6",
     "vue": "^3.4.0"
   },
+  "dependencies": {
+    "diff-match-patch": "^1.0.5"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^2.6.2",
     "@antfu/ni": "^0.21.12",
@@ -61,7 +75,6 @@
     "@types/node": "^20.10.7",
     "@unocss/reset": "^0.58.5",
     "bumpp": "^9.2.1",
-    "diff-match-patch": "^1.0.5",
     "eslint": "^8.56.0",
     "esno": "^4.0.0",
     "lint-staged": "^15.2.0",

playground/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
+import '../../src/vue/style.css'
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
 

src/core.ts

@@ -1,5 +1,5 @@
 import { diff_match_patch as DMP } from 'diff-match-patch'
-import type { CodeToTokensOptions, HighlighterCore, ThemedToken, TokensResult } from 'shiki/core'
+import type { ThemedToken } from 'shiki/core'
 
 export type Range = [number, number]
 

src/vue/components/ShikiMagicMove.ts

@@ -0,0 +1,87 @@
+import type { HighlighterCore } from 'shiki/core'
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, markRaw, nextTick, ref, watch } from 'vue'
+import { flattenTokens } from '../../core'
+import type { AnimationOptions } from '../types'
+import { StepAnimator } from './StepAnimator'
+
+export const ShikiMagicMove = defineComponent({
+  name: 'ShikiMagicMove',
+  props: {
+    highlighter: {
+      type: Object as PropType<HighlighterCore>,
+      required: true,
+    },
+    lang: {
+      type: String,
+      required: true,
+    },
+    theme: {
+      type: String,
+      required: true,
+    },
+    code: {
+      type: String,
+      required: true,
+    },
+    animation: {
+      type: Object as PropType<AnimationOptions>,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const before = ref('')
+    const isActive = ref(true)
+
+    const options = computed(() => ({
+      lang: props.lang,
+      theme: props.theme,
+    }))
+
+    const step = computed(() => {
+      const from = markRaw(flattenTokens(
+        before.value,
+        props.highlighter.codeToTokens(before.value, options.value).tokens,
+      ))
+      const toResult = props.highlighter.codeToTokens(props.code, options.value)
+      const to = markRaw(flattenTokens(
+        props.code,
+        toResult.tokens,
+      ))
+      return {
+        from,
+        to,
+        meta: toResult,
+      }
+    })
+
+    watch(
+      () => props.code,
+      (_, old) => {
+        before.value = old
+        isActive.value = false
+      },
+    )
+
+    watch(
+      step,
+      () => {
+        nextTick(() => {
+          isActive.value = true
+        })
+      },
+    )
+
+    return () => h(StepAnimator, {
+      key: step.value.to.code,
+      active: isActive.value,
+      from: step.value.from,
+      to: step.value.to,
+      animation: props.animation,
+      style: {
+        color: step.value.meta.fg,
+        backgroundColor: step.value.meta.bg,
+      },
+    })
+  },
+})