shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.08k stars 54 forks source link

Escape code within Twoslash failure messages #143

Closed with-heart closed 2 years ago

with-heart commented 2 years ago

Hi there!

This PR resolves an issue I was running into when using remark-shiki-twoslash with @mdx-js/loader.

When using a twoslash code block with a TypeScript generic that has a type error, @mdx-js/loader throws an exception when attempting to render the Twoslash failure message block.

Here's the code block I was trying to use:

```ts twoslash
type MyPick<T, K> = {
  [Key in K]: T[Key]
}


This is the exception message: ``Error: Cannot turn `t, ` into a JSX identifier``. If I rename `T` to `R`, it becomes ``Error: Cannot turn `r,` into a JSX identifier``, and so on. It seems like `remark` reads `<` as the start of an element.

I was able to track this down to the fact that the code isn't escaped in `setupNodeForTwoslashException`. Escaping the code allows the failure to render as expected:

<img width="904" alt="image" src="https://user-images.githubusercontent.com/1954752/156710719-bd732516-55b4-4403-b0b5-32c632177066.png">

It's also possible this is only happening because I'm using `rehype-raw` (due to #125), but I have no way to be sure since I can't render _anything_ if I don't use it.
changeset-bot[bot] commented 2 years ago

🦋 Changeset detected

Latest commit: a77a7c6eaf08526212bda88dec4e053c7901c68f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages | Name | Type | | -------------------------------- | ----- | | remark-shiki-twoslash | Patch | | docusaurus-preset-shiki-twoslash | Patch | | eleventy-plugin-shiki-twoslash | Patch | | gatsby-remark-shiki-twoslash | Patch | | hexo-shiki-twoslash | Patch | | markdown-it-shiki-twoslash | Patch | | twoslash-cli | Patch | | vuepress-plugin-shiki-twoslash | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

orta commented 2 years ago

That feels like reasonable explanation to me 👍🏻