48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { visit } from 'unist-util-visit';
|
|
|
|
const MDX_ELEMENTS = ['mdxJsxFlowElement', 'mdxJsxTextElement'];
|
|
export default function rehypeJsx(): any {
|
|
return function (node: any): any {
|
|
visit(node, 'element', (child: any) => {
|
|
child.tagName = `${child.tagName}`;
|
|
});
|
|
visit(node, MDX_ELEMENTS, (child: any, index: number | null, parent: any) => {
|
|
if (index === null || !Boolean(parent)) return;
|
|
|
|
const attrs = child.attributes.reduce((acc: any[], entry: any) => {
|
|
let attr = entry.value;
|
|
if (attr && typeof attr === 'object') {
|
|
attr = `{${attr.value}}`;
|
|
} else if (attr && entry.type === 'mdxJsxExpressionAttribute') {
|
|
attr = `{${attr}}`;
|
|
} else if (attr === null) {
|
|
attr = '';
|
|
} else if (typeof attr === 'string') {
|
|
attr = `"${attr}"`;
|
|
}
|
|
if (!entry.name) {
|
|
return acc + ` ${attr}`;
|
|
}
|
|
return acc + ` ${entry.name}${attr ? '=' : ''}${attr}`;
|
|
}, '');
|
|
|
|
if (child.children.length === 0) {
|
|
child.type = 'raw';
|
|
child.value = `<${child.name}${attrs} />`;
|
|
return;
|
|
}
|
|
|
|
// Replace the current child node with its children
|
|
// wrapped by raw opening and closing tags
|
|
const openingTag = {
|
|
type: 'raw',
|
|
value: `\n<${child.name}${attrs}>`,
|
|
};
|
|
const closingTag = {
|
|
type: 'raw',
|
|
value: `</${child.name}>\n`,
|
|
};
|
|
parent.children.splice(index, 1, openingTag, ...child.children, closingTag);
|
|
});
|
|
};
|
|
}
|