frontarm / mdx-util

Utilities for working with MDX

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

js not just jsx in markdown

plexigras opened this issue · comments

i love being able to put jsx inside of markdown but im missing the ability to the same with js.

i would love to be able to do

const test = "hello world"
<p>{test}</p>

i think it should be posible

  const exec = (content.match(/^\`\`\`exec$(\r|\n|.)+?(?=^\`\`\`$)/gm)||[]).map(val => val.match(/^\`\`\`exec($(\r|\n|.)+)/m)[1]).join('\n')
  const data = frontMatter(content.replace(/^\`\`\`exec$(\r|\n|.)+?(?:^\`\`\`$)/gm, ''));
  const body = md.render(data.body, env);
  return `${body.replace(/(?=export)/, exec + '\n')}\n${loaderOptions.commonJS ? 'module.exports.meta' : 'export const meta'} = ${JSON.stringify(data.attributes, null, 2)}`

instead of

https://github.com/jamesknelson/mdx-loader/blob/0a6f4e216988314c3132df85e591e3f4de8c7cca/index.js#L71-L73

it allows you to have a exec codeblock in your mdx source

```exec
  const test = "hello world"
```
<p>{test}</p>

compiles to

import React, { createElement, createFactory } from 'react'


  const test = "hello world"

export default function({ factories={} }) {
  const {
    wrapper = createFactory('div'),
  } = factories

  return wrapper({},

createElement(
  "p",
  null,
  test
)

  )
}

export const meta = {}


// WEBPACK FOOTER //
// src/ex.md

I'm not sure ```exec blocks really fit with the design of MDX. The idea is really just to create a component from a document, whereas this feels a little more like Literate JavaScript.

You should already be able to achieve something similar by importing variables, or passing variables with the prop keyword.