index.js

const { getOptions } = require('loader-utils')
const buble = require('buble')
const matter = require('gray-matter')
const stringifyObject = require('stringify-object')

const escapeTemplateString = code =>
  code.replace(/`/g, '\\`').replace(/\$/g, '\\$')

module.exports = async function(src) {
  const callback = this.async()
  const opts = getOptions(this)

  const { content, data } = matter(src)

  const parsed = buble.transform(content).code

  const scope = opts.scope
    ? opts.scope
    : data.scope
      ? data.scope
      : 'const scope = {}'

  const code = `
  import React from 'react'
  ${scope}

  const keys = Object.keys(scope)
  const values = keys.map(key => scope[key])
  const Component = new Function(
    'React',
    ...keys,
    \`return props =>
      React.createElement(React.Fragment, null,
        ${parsed}
      )
    \`
  )(React, ...values)

  export const jsx = \`${escapeTemplateString(content)}\`

  export { scope }

  Component.defaultProps = ${stringifyObject(data)}

  export default Component
  `

  return callback(null, code)
}