Consider how to align with the .mdx proposal

[johno]

Some thoughts inspired by rauchg's .mdx proposal and an iteration on formalizing c8r/markdown.

Inlining JSX

This is a <Text.span>span</Text.span>.

Code blocks

Specifying .jsx as the language will render the React components.
You can also specify front matter which is passed as props to the components being rendered.

---
foo: bar
---
<Awesome>{props.foo}</Awesome>

Inlining JS

{new Date()}

Providing scope/element mapping

We need to be able to provide components, props,

Perhaps this can be done with a MarkdownProvider and ScopeProvider?

Implementation details

The following detauls need to be sorted out for a solid spec/implementation:

Mdast

Depending on what syntax we arrive at, we will need to transform the MD AST to render the desired components.

Interesting related projects/implementations:

• https://github.com/jamesknelson/mdxc
• https://github.com/andreypopp/reactdown

Loaders for webpack/parcel

import Post from './posts/proposal.mdx'

export default <Post />

Import syntax

Ideas:

• imports as the beginning of a mdx file
• using front matter

Pluggable

Similarly to how remark provides a pluggable API, we should also allow plugins to be passed in.
This allows further customization down the road, and also supporting the existing remark plugin ecosystem (toc, gh integrations, etc).

Linting and prettier

Code blocks and inlined js can be run through prettier at the mdast stage and then re-output to markdown.

I suspect the same will be possible with inlined JSX as well.

Input

Hello, <World some='prop' />

Output

Hello, <World some="prop" />

[johno]

Rather than having .jsx specific syntax (assuming inline JSX support), we should have different component contexts for different syntaxes. So when you pass in your component scope you can specify components like so:

import Markdown from '@c8r/markdown'
import {
  Text,
  Heading,
  CodeBlockJSX,
  CodeBlockHTML
} from './ui'

// ...

<Markdown
  text={md}
  components={{
    p: Text.p,
    h1: Heading.h1,
    codeBlock: {
      jsx: CodeBlockJSX,
      html: CodeBlockHTML
  }}
/>

[johno]

I wonder about the inlining js portion, perhaps that can be left out? Or perhaps it should be JSX {} syntax?

[johno]

If a markdown document is imported with a custom babel loader, we need to consider the best way to provide a component mapping to the core library. For example, a trivial component mapping might be:

{
  a: Link,
  p: Text,
  h1: Heading,
  // ...
}

One option could be using a context provider:

import React from 'react'
import { MdProvider } from '@compositor/markdown'

import Document from './document.mdx'
import * as ui from './ui'

export default () =>
  <MdProvider components={ui}>
    <Document />
  </MdProvider>

[johno]

Preliminary import, component mapping, and inlined jsx support completed ✅