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

Svelte renderer doesn't work #13

Closed mattcroat closed 1 month ago

mattcroat commented 1 month ago

Imports can't be resolved

After the build, files are transformed from .ts to .mjs files, so they can't be resolved inside the Svelte components.

-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'

The fix is simple as adding the extension, which would at least make it work for the build.

No type definitions

TypeScript complains about the import.

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

The solution might be to include a separate type declaration file, but I'm not familiar with the build system.

azat-io commented 1 month ago

The same problem

azat-io commented 1 month ago
✘ [ERROR] Could not resolve "../core"

    node_modules/.pnpm/shiki-magic-move@0.4.0_shiki@1.5.1_svelte@4.2.16_vue@3.4.27_typescript@5.3.2_/node_modules/shiki-magic-move/dist/svelte/ShikiMagicMove.svelte:22:58:
      22 │ import { codeToKeyedTokens, createMagicMoveMachine } from "../core";
         ╵                                                           ~~~~~~~~~

✘ [ERROR] Could not resolve "../core"

    node_modules/.pnpm/shiki-magic-move@0.4.0_shiki@1.5.1_svelte@4.2.16_vue@3.4.27_typescript@5.3.2_/node_modules/shiki-magic-move/dist/svelte/ShikiMagicMovePrecompiled.svelte:23:45:
      23 │ import { syncTokenKeys, toKeyedTokens } from "../core";
         ╵                                              ~~~~~~~~~

✘ [ERROR] Could not resolve "../renderer"

    node_modules/.pnpm/shiki-magic-move@0.4.0_shiki@1.5.1_svelte@4.2.16_vue@3.4.27_typescript@5.3.2_/node_modules/shiki-magic-move/dist/svelte/ShikiMagicMoveRenderer.svelte:35:34:
      35 │ import { MagicMoveRenderer } from "../renderer";
         ╵                                   ~~~~~~~~~~~~~