feat: Svelte renderer (#12)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
shikijs · May 5, 2024 · 587e5bb · 587e5bb
1 parent 2a3d0dc
commit 587e5bb
Show file tree

Hide file tree

Showing 12 changed files with 391 additions and 8 deletions.
diff --git a/build.config.ts b/build.config.ts
@@ -1,3 +1,4 @@
+import fs from 'node:fs/promises'
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
@@ -14,10 +15,24 @@ export default defineBuildConfig({
       input: './src',
       pattern: ['**/*.css'],
     },
+    {
+      builder: 'mkdist',
+      input: 'src/svelte',
+      outDir: 'dist/svelte',
+      format: 'esm',
+      pattern: ['**/*'],
+    },
   ],
   declaration: true,
   clean: true,
   rollup: {
     inlineDependencies: true,
   },
+  hooks: {
+    'mkdist:done': async () => {
+      await fs.writeFile('dist/svelte.mjs', 'export * from "./svelte/index.mjs"\n', 'utf-8')
+      await fs.writeFile('dist/svelte.d.ts', 'export * from "./svelte/index.mjs"\n', 'utf-8')
+      await fs.writeFile('dist/svelte.d.mts', 'export * from "./svelte/index.mjs"\n', 'utf-8')
+    },
+  },
 })
diff --git a/package.json b/package.json
@@ -37,6 +37,9 @@
     "./react": {
       "import": "./dist/react.mjs"
     },
+    "./svelte": {
+      "import": "./dist/svelte.mjs"
+    },
     "./style.css": "./dist/style.css",
     "./dist/*": "./dist/*"
   },
@@ -51,6 +54,9 @@
       "./react": [
         "./dist/react.d.ts"
       ],
+      "./svelte": [
+        "./dist/svelte.d.ts"
+      ],
       "./core": [
         "./dist/core.d.ts"
       ],
@@ -79,6 +85,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "shiki": "^1.1.6",
+    "svelte": "5.0.0-next.107",
     "vue": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -88,6 +95,9 @@
     "shiki": {
       "optional": true
     },
+    "svelte": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }
@@ -100,6 +110,7 @@
     "@antfu/eslint-config": "^2.14.0",
     "@antfu/ni": "^0.21.12",
     "@antfu/utils": "^0.7.7",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@types/diff-match-patch": "^1.0.36",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
@@ -119,6 +130,7 @@
     "rimraf": "^5.0.5",
     "shiki": "^1.3.0",
     "simple-git-hooks": "^2.11.1",
+    "svelte": "5.0.0-next.107",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
     "unocss": "^0.59.3",

diff --git a/playground/src/Playground.vue b/playground/src/Playground.vue
@@ -8,6 +8,7 @@ import { toRefs, useLocalStorage } from '@vueuse/core'
 import { vueAfter, vueBefore } from './fixture'
 import { createRendererVue } from './renderer/vue'
 import { createRendererReact } from './renderer/react'
+import { createRendererSvelte } from './renderer/svelte.svelte'
 import type { RendererFactoryOptions, RendererFactoryResult, RendererType, RendererUpdatePayload } from './renderer/types'
 
 const defaultOptions = {
@@ -93,9 +94,18 @@ function rendererUpdate() {
   }
 
   if (!renderer) {
-    renderer = rendererType.value === 'vue'
-      ? createRendererVue(rendererOptions)
-      : createRendererReact(rendererOptions)
+    switch (rendererType.value) {
+      case 'vue':
+        renderer = createRendererVue(rendererOptions)
+        break
+      case 'react':
+        renderer = createRendererReact(rendererOptions)
+        break
+      case 'svelte':
+        renderer = createRendererSvelte(rendererOptions)
+        break
+    }
+
     renderer.mount(rendererContainer.value, payload)
   }
   else {
@@ -304,6 +314,9 @@ watch(
             <option value="react">
               React Renderer
             </option>
+            <option value="svelte">
+              Svelte Renderer
+            </option>
           </select>
         </div>
         <div ref="rendererContainer" class="of-auto" />

diff --git a/playground/src/renderer/svelte.svelte.ts b/playground/src/renderer/svelte.svelte.ts
@@ -0,0 +1,33 @@
+import { mount, unmount } from 'svelte'
+import { ShikiMagicMove } from '../../../src/svelte'
+import type { RendererFactory, RendererFactoryResult } from './types'
+
+export const createRendererSvelte: RendererFactory = (options): RendererFactoryResult => {
+  let app: any
+
+  const props = $state({
+    onStart: options.onStart,
+    onEnd: options.onEnd,
+  })
+
+  return {
+    mount: (element, payload) => {
+      Object.assign(props, payload)
+      if (app)
+        return
+      app = mount(ShikiMagicMove, { target: element, props })
+      // eslint-disable-next-line no-console
+      console.log('Svelte renderer mounted')
+    },
+
+    update: (payload) => {
+      Object.assign(props, payload)
+    },
+
+    dispose: () => {
+      if (app)
+        unmount(app)
+      app = undefined
+    },
+  }
+}
diff --git a/playground/src/renderer/types.ts b/playground/src/renderer/types.ts
@@ -1,7 +1,7 @@
 import type { HighlighterCore } from 'shiki/core'
 import type { MagicMoveDifferOptions, MagicMoveRenderOptions } from '../../../src/core'
 
-export type RendererType = 'vue' | 'react'
+export type RendererType = 'vue' | 'react' | 'svelte'
 
 export interface RendererUpdatePayload {
   highlighter: HighlighterCore

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -1,10 +1,12 @@
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import UnoCSS from 'unocss/vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 export default defineConfig({
   plugins: [
     Vue(),
     UnoCSS(),
+    svelte(),
   ],
 })