Issues with markdown-it-shikiji update

[adamdehaven]

Describe the bug

After following the new enhancements from https://shikiji.netlify.app/packages/markdown-it#fine-grained-bundle, a couple things I'm noticing after trying it out via #42

Shikiji is required as a devDependency

In order to get the imports to properly resolve (at least in my pnpm project) I need to explicitly run pnpm add -D shikiji. I'm guessing this should be added to the docs for the markdown-it plugin, in the Fine-grained Bundle docs section.

fromHighlighter import path

I had to use an import path like this instead of what's in the docs

import { fromHighlighter } from 'markdown-it-shikiji' // works

import { fromHighlighter } from 'markdown-it-shikiji/core' // TypeScript complains

Type mismatch when using fromHighligher

If I utilize the example provided in the docs, I get the following type error:

Argument of type 'HighlighterCore' is not assignable to parameter of type 'HighlighterGeneric<any, any>'.

As seen here:

based on this usage:

import { fromHighlighter } from 'markdown-it-shikiji'
import { getHighlighterCore } from 'shikiji/core'
import { getWasmInlined } from 'shikiji/wasm'
import MarkdownIt from 'markdown-it'

const highlighter = await getHighlighterCore({
  themes: [
    import('shikiji/themes/github-light.mjs'),
    import('shikiji/themes/github-dark.mjs'),
  ],
  langs: [
    import('shikiji/langs/typescript.mjs'),
  ],
  loadWasm: getWasmInlined,
})

md.value = MarkdownIt({
  html: false, 
  xhtmlOut: true, 
  linkify: true, 
  breaks: true, 
  typographer: true, 
  quotes: '“”‘’',
})
  .use(fromHighlighter(highlighter, { // Type Error Here
    themes: {
      light: 'github-light',
      dark: 'github-dark',
    },
  }))

Reproduction

above

System Info

//

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[antfu]

TypeScript seems to be a setup issue, can you create a reproduction repo so I can have a look?

[adamdehaven]

@antfu here you go

[antfu]

Thanks, but there are too many things involved. A minimal reproduction, please.

[adamdehaven]

😂 I definitely gave you the wrong link; sorry about that. I'll get a minimal repo set up.

Functionally things seem to work perfectly other than the type issue and the line highlighting.

[adamdehaven]

Sorry about the wrong reproduction link - I've put together a much simpler example on CodeSandbox.

In putting this together, I actually figured out everything other than the TypeScript error for the highlighter mentioned above and the imports (again, everything works fine, but TypeScript isn't happy).

The line highlighting was caused by another plugin; the leading/trailing { } default characters from markdown-it-attrs conflicted with the line highlighting syntax. That plugin is configurable so I just adjusted the defaults.

[adamdehaven]

On the type imports, the highlighter interface actually resolves correctly if I use this:

import { fromHighlighter } from markdown-it-shikiji/core';

but then I get an import warning:

Cannot find module 'markdown-it-shikiji/core' or its corresponding type declarations.

---

Installing shikiji as a devDependency may be stemming from pnpm settings; if I don't install I definitely get import errors.

[antfu]

If you change "moduleResolution": "Bundler" in your tsconfig it would work. I also have added the metadata for legacy resolution to work as well, while I would still recommend you to use Bundler, in the next version Node should work as well.

[adamdehaven]

Derp yep. I had originally just reused my tsconfig from another lib. Sorry for the noise; the added metadata also clears it up as-is