astPlugin type definition in react-markdown/index.d.ts is wrong...or I don't understand

[dang1412]

Sorry please correct me if I am wrong but is this line correct?

https://github.com/remarkjs/react-markdown/blob/main/index.d.ts#L46

    readonly astPlugins?: PluggableList // This is closer to a 'Transformer'?
    readonly plugins?: PluggableList

I just updated the version and the astPlugin part showing type error. Can anyone please answer??
Thanks in advance.

[ChristianMurphy]

Maybe?
Can you provide an example where the JavaScript runs as expected but TypeScript throws type errors?

[dang1412]

For example, this works for me

import ReactMarkdown from 'react-markdown'
import { Node } from 'unist'

// any type astPlugin
const astPlugin: any = (node: Node) => {
  (node.children as any)[0].children[0].value += ' 123'
  return node
}

function App() {
  return (
    <ReactMarkdown astPlugins={[astPlugin]} children={`# heading`} />
  )
}

export default App

But it will show type error if i remove the : any type

[dang1412]

As I did some investigation, I think this astPlugin type is more like the transformer (but not exactly) defined here?
https://github.com/unifiedjs/unified/blob/main/types/ts4.0/index.d.ts#L314

in react-markdown code
https://github.com/remarkjs/react-markdown/blob/main/src/react-markdown.js#L38

determineAstToReactTransforms(props).forEach(function (transform) {
  tree = transform(tree, renderProps);
});

[wooorm]

Thanks for that research! A PR would be welcome to fix them. But as an FYI it’s also something slated to change again in the next major, when we’re switching to a proper HTML parser.

[dang1412]

Thank you so I guest I can wait for it.
By the way can I ask how to define a type def patch in my code while waiting for the fix? Maybe the best practice for defining types for 3rd lib (no @types available) is also helpful, thanks!

[ChristianMurphy]

By the way can I ask how to define a type def patch in my code while waiting for the fix?

Same way you define a patch for any other package, open a PR 😉 🙂

alternatively, you could use // ts-ignore to disable the typescript issue until a fix is ready.