@rasahq/xdm-tabula

API

||| |--|--| |md2Html|xxx| |md2InlineHtml|xxx| |mdx2Jsx|xxx| |mdx2InlineJsx|xxx| |mdxCompile|xxx| |MDXRenderer|renders mdx-jsx string| |MDXProvider|provides Context to MDXRenderer |

compileMDX(str, { inline: true }) renderMarkdown(str, { inline: true })

compile mdx process markdown render

questions

• does this fully work with SSR on Next and Gatsby

MDX compile and render steps

GOALS

• automatically replace a with project Link component
• automatically extract a list of the magic shortcodes contained in an MDX block

markdown compile & render steps

GOALS

• automatically replace a with project Link component

unified processing

• good thread on process vs parse, run, stringify

babel configuration

GOALS

• use the config which is local to the project
• keep processing low, as in the lessBabel option in gatsby-plugin-mdx

NOTES

• when no config is present and no targets option is passed, preset-env defaults to preset-latest, transforming everything down to ES5 (bad—planned to be revised in babel 8); therefore it must always be used with a config, or with a special targets string, e.g.:
  • targets: { esmodules: true } will ignore browser configs and build for module-supporting browsers. this is ideal for a two-part build, where you are serving two bundle types
• other options:
  • bugfixes: this option "tries to compile the broken syntax to the closest non-broken modern syntax supported by your target browsers", consolidating various features sets in a smaller and smarter way (worth a try)
  • useBuiltIns: defaults to false, could be 'entry' or 'usage': in the latter cases it's recommended to also add core-js@3 and specify the corejs: 3 option. (question: what does gatsby do here?)
  • browserslistEnv: tells babel to use a specific environment; probably should not be specified at library level but rather in project; applies to projects which specify environment sub-configs that key off of BROWSERSLIST_ENV or NODE_ENV.
• recommended configuration method:
  • babel recommends using .browserslistrc. Here you specify queries in separate lines in a plain text file.
  • browserslist recommends using browserslist key in package.json. Here you specify queries as separate strings in an array.
• about additional plugins:
  • babel-plugin-remove-export-keywords comes from @mdx-js and seems only relevant to files; we are going to assume that our MDX strings from the CMS contain neither imports nor exports, but as noted in this issue thread, the combination of skipExport: true and this plugin can be used to turn an MDX file in to a function, as a beginning transformation
  • babel-plugin-remove-make-shortcode and babel-plugin-remove-imports are being kept around here, in case they are useful for eventualy file (page-component) MDX parsing

/* CONSIDER as defaults: https://github.com/remarkjs/remark-squeeze-paragraphs https://github.com/rehypejs/rehype-minify/tree/main/packages/rehype-minify-whitespace */

module.exports = { remarkPlugins: [ // [require('./lib/remark-abbr'), {}], [require('remark-kbd'), {}], [require('remark-mark-plus'), {}], [require('remark-sources'), {}], // [require('remark-images'), {}], // [require('remark-collapse'), { test: '' }], // [require('remark-unwrap-images'), {}], // [require('./plugins/remark-figure-caption'), {}], ], rehypePlugins: [[require('./rehype-figure'), {}]], };