git.iko.soy/rowtype-yoga/psfp
on 2003541 help sign in
rowtype-yoga/psfp/blog/.storybook/middleware.js
47 lines 1.4 kB history raw
1const express = require("express");
3const babel = require('@babel/core')
4const React = require('react')
5const { renderToStaticMarkup } = require('react-dom/server')
6const mdx = require('@mdx-js/mdx')
7const { MDXProvider, mdx: createElement } = require('@mdx-js/react')
9const expressMiddleWare = router => {
10 router.use(express.text())
11 router.use("/mdx", async (req, res) => {
12 const rendered = await renderWithReact(req.body)
13 res.send(rendered)
14 });
15};
17const transform = code =>
18 babel.transform(code, {
19 plugins: [
20 '@babel/plugin-transform-react-jsx',
21 '@babel/plugin-proposal-object-rest-spread'
22 ]
23 }).code
25const renderWithReact = async mdxCode => {
26 const jsx = await mdx(mdxCode, { skipExport: true })
27 const code = transform(jsx)
28 const fn = new Function(
29 'React',
30 'mdx',
31 `${code}; return React.createElement(MDXContent)`
32 )
33 const element = fn(React, createElement)
34 const components = {
35 h1: ({ children }) =>
36 React.createElement('h1', { style: { color: 'tomato' } }, children)
37 }
38 const elementWithProvider = React.createElement(
39 MDXProvider,
40 { components },
41 element
42 )
43 const result = renderToStaticMarkup(elementWithProvider)
44 return code
47module.exports = expressMiddleWare;