shikijs / shiki-magic-move

Smoothly animated code blocks with Shiki
https://shiki-magic-move.netlify.app/
MIT License
1.11k stars 32 forks source link

feat: Svelte renderer #12

Closed mattcroat closed 1 month ago

mattcroat commented 2 months ago

Here's my Svelte renderer contribution. 🙏

The only thing I need help with is solving a cryptic error when trying to run npm build about importing files that aren't JavaScript — which probably has to do with importing .svelte files, but I don't know how to pass it a plugin to compile the Svelte components with Rollup.

Everything else works! 😄

https://github.com/shikijs/shiki-magic-move/assets/38083522/cc1d618b-5153-4f89-859f-2c2a555cadc1

mattcroat commented 2 months ago

@antfu can you please have a look when you have time? 😄

timscodebase commented 1 month ago

I support this addition. Svelte is becoming a major player.

antfu commented 1 month ago

I will ship .svelte file directly to npm. Hope that would work.

mattcroat commented 1 month ago

@antfu The imports inside the Svelte component can't be resolved after the build, and require the file extension to be included at the end:

-import { codeToKeyedTokens, createMagicMoveMachine } from '../core'
-import type { MagicMoveRenderOptions, MagicMoveDifferOptions } from '../types'
+import { codeToKeyedTokens, createMagicMoveMachine } from '../core.mjs'
+import type { MagicMoveRenderOptions, MagicMoveDifferOptions } from '../types.d.ts'

This fixes the problem but I'm not sure if that's the best solution because it only works for the build — TypeScript also complains about the ShikiMagicMove import:

<script lang="ts">
  import { ShikiMagicMove } from 'shiki-magic-move/svelte'
</script>
Module '"shiki-magic-move/svelte"' has no
exported member 'ShikiMagicMove'.ts(2305)

What do you propose?