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
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.