solid-markdown icon indicating copy to clipboard operation
solid-markdown copied to clipboard

update 'unified' dependency to v11

Open imkunet opened this issue 2 years ago • 0 comments

Motivation

Hi there! If you're anything like me you love SolidJS and you think solidjs-markdown is a great package.

<Suspend/> your disbelief for a moment and imagine yourself in my shoes...

You've never ventured outside of the walled AstroJS garden so you want to render some markdown with syntax highlighting then BAM! You're hit with a crazy type error. You swear that:

import { SolidMarkdown } from 'solid-markdown';
import rehypeShikiFromHighlighter from '@shikijs/rehype/core';

import { getHighlighterCore } from 'shiki/bundle/web';

const highlighter = await getHighlighterCore({
  themes: [import('shiki/themes/catppuccin-mocha.mjs')],
  langs: [import('shiki/langs/python.mjs'), import('shiki/langs/lua.mjs')],
  loadWasm: getWasm,
});

// ... 

<SolidMarkdown
          rehypePlugins={[[rehypeShikiFromHighlighter, highlighter, { theme: 'catppuccin-mocha' }]]}
          children={code().text}
          class="prose prose-invert max-w-none rounded outline outline-1 outline-offset-0 outline-ctp-base transition-all hover:outline-2 hover:outline-offset-4 hover:outline-ctp-teal"
/>

Should work in theory. Flawlessly. Without a hitch. But... you'd be so wrong. So so so wrong. You naive fool. And with only an hour of sitting there puzzled and confused the answer dawned upon you. It was solid-markdown this whole time.

Finally, the story ends here when you learn how to publish your own npm package to bump all the dependencies. The maintainer of the solidjs-markdown package hasn't touched it in a while (to what you can see) so you believe this is the best course of action.

Proposed changes

  • bump unified to any 11 version
  • include an example to highlight codeblocks for we who have not been inculcated with the markdown seed of knowledge
  • test case for this

imkunet avatar Mar 25 '24 07:03 imkunet