How to use the @mdx-js/mdx/mdx-hast-to-jsx.toJSX function in @mdx-js/mdx
To help you get started, we’ve selected a few @mdx-js/mdx examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
storybookjs / storybook / addons / docs / mdx-compiler-plugin.js View on Github 
function extractStories(node, options) {
// we're overriding default export
const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
const storyExports = [];
let counter = 0;
node.children.forEach(n => {
const stories = getStories(n, counter);
if (stories) {
stories.forEach(story => {
storyExports.push(story);
counter += 1;
});
}
});
const fullJsx = [
'import { DocsContainer } from "@storybook/addon-docs/blocks";',
defaultJsx,
wrapperJs,function extractExports(node, options) {
// we're overriding default export
const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
const storyExports = [];
const includeStories = [];
let metaExport = null;
let counter = 0;
node.children.forEach(n => {
const exports = getExports(n, counter);
if (exports) {
const { stories, meta } = exports;
if (stories) {
Object.entries(stories).forEach(([key, story]) => {
includeStories.push(key);
storyExports.push(story);
counter += 1;
});
}
if (meta) {function extractExports(node, options) {
// we're overriding default export
const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
const storyExports = [];
const includeStories = [];
let metaExport = null;
let counter = 0;
node.children.forEach(n => {
const exports = getExports(n, counter);
if (exports) {
const { stories, meta } = exports;
if (stories) {
Object.entries(stories).forEach(([key, story]) => {
includeStories.push(key);
storyExports.push(story);
counter += 1;
});
}
if (meta) {slides.forEach((slide) => {
const hash = mdxAstToMdxHast()({
type: 'root',
children: slide
});
const mdxJSX = toJSX(hash);
// jsx variable is established, so we don't use babel/parser
const jsx = mdxJSX.match(/([\s\S]*)<\/MDXLayout>/m);
if (jsx) {
const template = `
(props) => (
<>
${jsx[1]}
)`;
const fusumaProps = createFusumaProps(slide);
res.jsx.push(template);
res.fusumaProps.push(fusumaProps);
}function toFragment(nodes) {
if (nodes.length === 1 && nodes[0].type === 'text') {
return JSON.stringify(nodes[0].value)
}
else {
return ''+nodes.map(toJSX).join('')+''
}
}value: `<div style="{{" data-value="${n.value.replace(
/ /g,
''
)}" id="mermaid-${mermaidId}">${n.value.replace(/ /g, '')}</div>`
});
++mermaidId;
} else if (n.type === 'code' && n.meta) {
const lines = n.meta.match(/line="(.+?)"/);
if (lines === null) {
slide.push(n);
} else {
const line = lines[1];
const hash = mdxAstToMdxHast()(n);
const value = toJSX(hash).replace('<pre>', `<pre data-line="${line}">`);
slide.push({
...n,
type: 'jsx',
value
});
}
} else {
slide.push(n);
if (n.type === 'jsx') {
n.value = n.value
.replace(/src="(.+?\.(png|jpg|gif|svg?))"/g, 'src={require("$1")}')
.replace(/class=/g, 'className=');
}
}</pre></pre>
