feat: render autodoc nodes

packages/myst-to-react/src/autodoc.tsx

@@ -0,0 +1,134 @@
+import { MyST } from './MyST.js';
+
+type HasValue = {
+  value: string;
+};
+
+type HasTextChildren = {
+  children: HasValue[];
+};
+
+type HasChildren = {
+  children: any[];
+};
+
+const preParentRenderer = ({ node }: { node: HasTextChildren }) => {
+  const [child] = node.children;
+  return (
+    <span
+      style={{
+        whiteSpace: 'pre',
+      }}
+    >
+      {child.value}
+    </span>
+  );
+};
+
+const renderChildren = ({ node }: { node: HasChildren }) => {
+  return <MyST ast={node.children} />;
+};
+
+const AUTODOC_RENDERERS = {
+  descType: preParentRenderer,
+  descType_parameter: preParentRenderer,
+  descAddname: preParentRenderer,
+  descParameterlist({ node }: { node: HasChildren }) {
+    const merged: React.ReactNode[] = [];
+    node.children.slice(0, -1).forEach((item) => {
+      merged.push(<MyST ast={item} />);
+      merged.push(<>, </>);
+    });
+    if (node.children.length > 0) {
+      merged.push(<MyST ast={node.children[node.children.length - 1]} />);
+    }
+    return [<>(</>, ...merged, <>) </>];
+  },
+  descName({ node }: { node: HasTextChildren }) {
+    const [child] = node.children;
+    return (
+      <span
+        style={{
+          fontWeight: 'bold',
+          whiteSpace: 'pre',
+        }}
+      >
+        {child.value}
+      </span>
+    ); //
+  },
+  fieldList({ node }: { node: HasChildren }) {
+    return (
+      <dl>
+        <MyST ast={node.children} />
+      </dl>
+    );
+  },
+  fieldListItem({ node }: { node: HasChildren }) {
+    return (
+      <p>
+        <MyST ast={node.children} />
+      </p>
+    );
+  },
+  fieldName({ node }: { node: HasChildren }) {
+    return (
+      <dt>
+        <MyST ast={node.children} />
+      </dt>
+    );
+  },
+  fieldDescription({ node }: { node: HasChildren }) {
+    return (
+      <dd>
+        <MyST ast={node.children} />
+      </dd>
+    );
+  },
+  desc({ node }: { node: HasChildren }) {
+    return (
+      <dl>
+        <MyST ast={node.children} />
+      </dl>
+    );
+  },
+  descSignature({ node }: { node: HasChildren }) {
+    return (
+      <dt
+        style={{
+          fontWeight: 'lighter',
+          fontFamily: "Menlo, Consolas, 'DejaVu Sans Mono', monospace",
+        }}
+      >
+        <MyST ast={node.children} />
+      </dt>
+    );
+  },
+  descContent({ node }: { node: HasChildren }) {
+    return (
+      <dd>
+        <MyST ast={node.children} />
+      </dd>
+    );
+  },
+  descAnnotation: renderChildren,
+  descParameter: renderChildren,
+  descReturns({ node }: { node: HasChildren }) {
+    return (
+      <>
+        <span>&#x2192; </span>
+        <MyST ast={node.children as any} />
+      </>
+    );
+  },
+  descSigPunctuation: preParentRenderer,
+  descSigSpace: preParentRenderer,
+  descSigName: renderChildren,
+  descSigOperator: preParentRenderer,
+  descSigKeyword: preParentRenderer,
+  descSigKeywordType: preParentRenderer,
+  descSigKeywordLiteralNumber: preParentRenderer,
+  descSigKeywordLiteralString: preParentRenderer,
+  descSigKeywordLiteralChar: preParentRenderer,
+};
+export default AUTODOC_RENDERERS;

packages/myst-to-react/src/index.tsx

@@ -21,6 +21,7 @@ import PROOF_RENDERERS from './proof.js';
 import EXERCISE_RENDERERS from './exercise.js';
 import ASIDE_RENDERERS from './aside.js';
 import UNKNOWN_MYST_RENDERERS from './unknown.js';
+import AUTODOC_RENDERERS from './autodoc.js';
 
 export { CopyIcon, HoverPopover, Tooltip, LinkCard } from './components/index.js';
 export { CodeBlock } from './code.js';
@@ -32,6 +33,7 @@ export { useFetchMdast } from './crossReference.js';
 
 export const DEFAULT_RENDERERS: Record<string, NodeRenderer> = {
   ...BASIC_RENDERERS,
+  ...AUTODOC_RENDERERS,
   ...UNKNOWN_MYST_RENDERERS,
   ...IMAGE_RENDERERS,
   ...LINK_RENDERERS,