fix: svelte types generation during build (#14)

Co-authored-by: mattcroat <mattcroat.dev@gmail.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
shikijs · May 9, 2024 · c135e0a · c135e0a
1 parent 625019f
commit c135e0a
Show file tree

Hide file tree

Showing 8 changed files with 274 additions and 131 deletions.
diff --git a/build.config.ts b/build.config.ts
@@ -33,6 +33,7 @@ export default defineBuildConfig({
       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')
+      await fs.copyFile('dist/svelte/index.d.ts', 'dist/svelte/index.d.mts')
     },
   },
 })
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,7 +1,15 @@
 // @ts-check
 import antfu from '@antfu/eslint-config'
 
-export default antfu()
+export default antfu({
+  svelte: true,
+})
+  .append({
+    files: ['**/*.svelte'],
+    rules: {
+      'no-use-before-define': 'off',
+    },
+  })
   .overrideRules({
     // Not compatible with ESLint 9 yet
     'react-hooks/exhaustive-deps': 'off',

diff --git a/package.json b/package.json
@@ -122,6 +122,7 @@
     "eslint": "^9.2.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-svelte": "^2.38.0",
     "esno": "^4.7.0",
     "lint-staged": "^15.2.2",
     "pnpm": "^9.0.6",

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -1,12 +1,19 @@
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import UnoCSS from 'unocss/vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { svelte as Svelte } from '@sveltejs/vite-plugin-svelte'
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      'shiki-magic-move/core': fileURLToPath(new URL('../src/core.ts', import.meta.url)),
+      'shiki-magic-move/renderer': fileURLToPath(new URL('../src/renderer.ts', import.meta.url)),
+    },
+  },
   plugins: [
     Vue(),
     UnoCSS(),
-    svelte(),
+    Svelte(),
   ],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/svelte/ShikiMagicMove.svelte b/src/svelte/ShikiMagicMove.svelte
@@ -1,32 +1,32 @@
-<script lang="ts">
-	import { codeToKeyedTokens, createMagicMoveMachine } from '../core'
-	import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte'
-	import type { HighlighterCore } from 'shiki/core'
-	import type { MagicMoveRenderOptions, MagicMoveDifferOptions } from '../types'
-	
-	interface ShikiMagicMoveProps {
-		highlighter: HighlighterCore
-		lang: string
-		theme: string
-		code: string
-		options?: MagicMoveRenderOptions & MagicMoveDifferOptions
-		onStart?: () => void
-		onEnd?: () => void
-	}
+<script lang='ts'>
+  import { codeToKeyedTokens, createMagicMoveMachine } from 'shiki-magic-move/core'
+  import type { HighlighterCore } from 'shiki/core'
+  import type { MagicMoveDifferOptions, MagicMoveRenderOptions } from 'shiki-magic-move/types'
+  import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte'
 
-	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))
+  interface ShikiMagicMoveProps {
+    highlighter: HighlighterCore
+    lang: string
+    theme: string
+    code: string
+    options?: MagicMoveRenderOptions & MagicMoveDifferOptions
+    onStart?: () => void
+    onEnd?: () => void
+  }
+
+  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}
-/>
+  tokens={result.current}
+  previous={result.previous}
+  {options}
+  {onStart}
+  {onEnd}
+  {...props}
+/>