components prop to allow using React component in Markdown

[yhatt]

By custom function binding in HTM, we might support React component written in HTML block of plain Markdown.

import { Chart } from 'someone-react-chart-component'

const markdown = `
# Hello

<Chart type="line" data="5,8,4,9,7,2,6" />
`

ReactDOM.render(
  <Marp markdown={markdown} components={{ Chart }} />,
  document.getElementById('app')
)

⚠️ It is different from MDX. Marp React is a runtime component to support for live rendering, but MDX has no runtime (Actually it is there but not recommended). There are difference to each Markdown architectures too (markdown-it vs remark), and using Marp parser in MDX would be difficult. Thus, we have no idea to support MDX for now.

[yhatt]

The other idea is using JSX in interpolation of tagged template literal to allow using components in local scope. It won't require explicit component passing.

import { Marp, jsx } from '@marp-team/marp-react'
import { BarChart, Bar } from 'someone-react-chart-component'

// Returns something with interpolated components for parsing in Marp component
const markdown = jsx`
# Bar chart

${(
  <BarChart title="Example bar chart">
    <Bar value="5" />
    <Bar value="8" />
    <Bar value="4" />
    <Bar value="9" />
    <Bar value="7" />
    <Bar value="2" />
    <Bar value="6" />
  </BarChart>
)}
`

// Usage of Marp component is same as Markdown by plain string
ReactDOM.render(
  <Marp markdown={markdown} />,
  document.getElementById('app')
)