Components.js

const MarkdownArray = [

  // `<Comment />`.
  { syntax: /^\/\/(.*)(?:$|\n)/,
  parser: (key, [children]) => <Comment key={key} children={parseText(children)} /> },

  // `<Header />`.
  { syntax: /^(#{1,6})( .*)(?:$|\n)/,
  parser: (key, [open, children]) => <Header key={key} open={open} children={parseText(children)} /> },

  // `<CodeBlock />`.
  // { syntax: /^```(.*)((?:\n?(?:.*\n)*?)?)```(?:$|\n)/,
  { syntax: /^```(.*)(\n(?:.*\n)*?)```(?:$|\n)/,
  parser: (key, [metadata, children]) => <CodeBlock key={key} metadata={metadata} children={children} /> },

  // `<Blockquote />`.
  { syntax: /^((?:>(?: .*)?\n)*>(?: .*)?)(?:$|\n)/,
  parser: (key, [children]) => <Blockquote key={key} children={children.split("\n").map(each => parseText(each.slice(1)))} /> },

  // `<List />`.
  { syntax: /^((?:\t*[*+\-•] .*\n)*\t*[*+\-•] .*)(?:$|\n)/,
  parser: (key, [children]) => <List key={key} children={parseList(children)} /> },

  // `<List isNumbered />`.
  { syntax: /^((?:\t*\d+[.)] .*\n)*\t*\d+[.)] .*)(?:$|\n)/,
  parser: (key, [children]) => <List key={key} isNumbered children={parseList(children)} /> },

  // `<Break />`.
  { syntax: /^(\*\*\*|---)(?:$|\n)/,
  parser: (key, [open]) => <Break key={key} open={open} /> },

  // `<Paragraph />`.
  { syntax: /^(.*)(?:$|\n)/,
  parser: (key, [children]) => <Paragraph key={key} children={parseText(children)} /> }
]

function parse(data) {
  const Components = []
  let end = 0 // Use `let`.
  while (end <= data.length) { // Use the `<=` operator. ??
    // Parse components:
    const slice = data.slice(end)
    for (const { syntax, parser } of MarkdownArray) {
      const groups = slice.match(syntax)
      if (groups) {
        const key = Components.length
        Components.push(parser(key, groups.slice(1)))
        end += groups[0].length
        if (groups[0].slice(-1) !== "\n") {
          end++
        }
        break
      }
    }
    // // React components are frozen so we can’t mutate them.
    // const [each, index] = [Components[Components.length - 1], Components.length - 1]
    // Components[index] = <each.type key={index} {...each.props} />
  }
  return Components
}

TextComponents.js

const MarkdownArray = [

  // `<Escape />`.
  { syntax: /^\\(.)/,
  parser: (key, [children]) => <Escape key={key} children={children} /> },

  // `<CommentSnippet />`.
  { syntax: /^\/\*(|.*?[^\\])\*\//,
  parser: (key, [children]) => <CommentSnippet key={key} children={children} /> },

  // `<Italics />`.
  { syntax: /^_(|.*?[^\\])_/,
  parser: (key, [children]) => <Italics key={key} children={parseText(children)} /> },

  // `<Bold />`.
  { syntax: /^\*\*(|.*?[^\\])\*\*/,
  parser: (key, [children]) => <Bold key={key} children={parseText(children)} /> },

  // `<Code />`.
  { syntax: /^`(|.*?[^\\])`/,
  parser: (key, [children]) => <Code key={key} children={children} /> },

  // `<Link />`.
  { syntax: /^\[(|.*?[^\\])\]\((|.*?[^\\])\)/,
  parser: (key, [children, href]) => <Link key={key} href={href} children={parseText(children)} /> }
]

function parseText(data) {
  // Guard breaks:
  if (!data) {
    return ""
  }
  const Components = []
  let end = 0 // Use `let`.
  while (end < data.length) { // Use the `<` operator. ??
    // Parse components:
    const slice = data.slice(end)
    let matched = false // Use `let`.
    for (const { syntax, parser } of MarkdownArray) {
      const groups = slice.match(syntax)
      if (groups) {
        const key = Components.length
        Components.push(parser(key, groups.slice(1)))
        end += groups[0].length
        matched = true
        break
      }
    }
    // Parse text:
    if (!matched) {
      if (!Components.length || typeof Components[Components.length - 1] !== "string") {
        Components.push(data[end])
      } else {
        Components[Components.length - 1] += data[end]
      }
      end++
    }
  }
  return Components
}