Way to properly override data.toMarkdownExtensions?

[mturoci]

Hey, not sure if this repo is the right place to post. Feel free to redirect me as you see fit.

I am trying to override remark gfm's autolink feature. Looked into its source code and found that I basically need to fill the following with my own:

 micromarkExtensions.push(gfm(settings))
 fromMarkdownExtensions.push(gfmFromMarkdown())
 toMarkdownExtensions.push(gfmToMarkdown(settings))

My unified instance looks like the following

unified()
  .data('fromMarkdownExtensions', [
    gfmFootnoteFromMarkdown(),
    gfmStrikethroughFromMarkdown(),
    gfmTableFromMarkdown(),
    gfmTaskListItemFromMarkdown(),
  ])
  .data('micromarkExtensions', [gfm({})])
  // @ts-ignore
  .data('toMarkdownExtensions', [gfmToMarkdown({})])
  .use(remarkParse)

Everything seems to work perfectly. However, it requires the ugly ts-ignore since toMarkdownExtensions key is not recognized.

Am I missing something or is this just a bug in typing?

[ChristianMurphy]

Welcome @mturoci 👋

Everything seems to work perfectly. However, it requires the ugly ts-ignore since toMarkdownExtensions key is not recognized.

Order matters in typescript, you are referencing data properties before remark has been added to the unified typings, that may be part of it.
Remark does register those data props
https://github.com/remarkjs/remark/blob/ed7b185d304adaf5aa80fc78a912603a5cd6e85a/packages/remark-parse/index.d.ts#L44
https://github.com/remarkjs/remark/blob/ed7b185d304adaf5aa80fc78a912603a5cd6e85a/packages/remark-stringify/index.d.ts#L43

You could create a plugin as gfm itself does https://github.com/remarkjs/remark-gfm/blob/main/lib/index.js
Note how the plugin defines what type of tree it is working with https://github.com/remarkjs/remark-gfm/blob/109972e8a773bf5dac1d6d2da0776557f36971aa/lib/index.js#L27
And does a type safe add to data in case the property is not yet defined https://github.com/remarkjs/remark-gfm/blob/109972e8a773bf5dac1d6d2da0776557f36971aa/lib/index.js#L32

[mturoci]

Thanks for taking the time to answer @ChristianMurphy!

You are right, my code was missing remark-stringify as you pointed out here.

I didn't even have it installed in the first place. Installing and importing added it's type declaration file together with the missing data prop.

However, this made me wonder. Since I do not need to stringify as I use JSX as my final output, maybe I could leave out toMarkdownExtensions data prop altogether? It seems to work, but wanted to double-check.

[ChristianMurphy]

Yeah if you don't need to stringifing, you can skip all the toMarkdown extensions.

There is a renderer for JSX if wanted though https://github.com/remarkjs/react-remark

[ChristianMurphy]

And mdx also can parse plain markdown and output Javascript compatible with automatic mode of jsx https://mdxjs.com/

[mturoci]

Thanks, using https://github.com/remarkjs/remark-rehype at the moment. Seems to get the job done.