rehype-pretty / rehype-pretty-code

Beautiful code blocks for Markdown or MDX.
https://rehype-pretty.pages.dev
MIT License
999 stars 63 forks source link

rehypePrettyCode typings became incompatible with Astro v4 #194

Closed bennycode closed 4 months ago

bennycode commented 4 months ago

When I upgraded my Astro site from Astro v3 to Astro v4 the following config became invalid:

import rehypePrettyCode from 'rehype-pretty-code';

// ...

const prettyCodeOptions = {
  theme: 'github-dark-dimmed',
  onVisitLine(node) {
    // Prevent lines from collapsing in `display: grid` mode, and
    // allow empty lines to be copy/pasted
    if (node.children.length === 0) {
      node.children = [
        {
          type: 'text',
          value: ' ',
        },
      ];
    }
  },
  tokensMap: {
    fn: 'entity.name.function',
  },
};

export default defineConfig({
  // https://docs.astro.build/en/guides/markdown-content/#markdown-plugins
  markdown: {
    // ...
    rehypePlugins: [[rehypePrettyCode, prettyCodeOptions]],
  },
}

It errors at rehypePrettyCode, prettyCodeOptions with the following message:

Type '[(options?: Options | undefined) => void | Transformer<Root, Root>, { theme: string; onVisitLine(node: any): void; tokensMap: { fn: string; }; }]' is not assignable to type 'string | [string, any] | RehypePlugin<any[]> | [RehypePlugin<any[]>, any]'. Type '[(options?: Options | undefined) => void | Transformer<Root, Root>, { theme: string; onVisitLine(node: any): void; tokensMap: { fn: string; }; }]' is not assignable to type '[string, any] | RehypePlugin<any[]> | [RehypePlugin<any[]>, any]'. Type '[(options?: Options | undefined) => void | Transformer<Root, Root>, { theme: string; onVisitLine(node: any): void; tokensMap: { fn: string; }; }]' is not assignable to type '[string, any]'. Type at position 0 in source is not compatible with type at position 0 in target. Type '(options?: Options | undefined) => void | Transformer<Root, Root>' is not assignable to type 'string'.

The rehypePrettyCode type is declared as follows:

declare function rehypePrettyCode(options?: Options): void | Transformer<Root, Root>;

Can it be turned into something inheriting from Astro's RehypePlugin type?

o-az commented 4 months ago

What version of rehype-pretty-code are you running? Try it with latest

If you can share a stackblitz example with this issue I will be able to help you faster

bennycode commented 4 months ago

Thanks for the quick response. Probably something was odd with my lockfiles. I am using v0.13.1 and I just deleted my package-lock.json file, recreated it using npm i and now everything is fine. 👍

o-az commented 4 months ago

glad to hear!

bennycode commented 4 months ago

glad to hear!

Thank you for your fantastic plugin! I have it in action here: https://typescript.tv/best-practices/filtering-arrays-in-typescript-with-correct-types/