🌲 Add root renderer

.changeset/large-needles-end.md

@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Add `root` renderer

.changeset/rotten-mangos-rescue.md

@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Ensure that a node with `{length: 0}` as a property can be rendered.

packages/myst-demo/src/index.tsx

@@ -7,7 +7,7 @@
 import {
   fileError,
   RuleId,
   type GenericNode,
   type GenericParent,
   type References,
 } from 'myst-common';
@@ -392,7 +392,7 @@
   );
 
   const mdastStage = astStage === 'pre' ? mdastPre : mdastPost;
   const { downloads, exports, parts, ...reducedFrontmatter } = frontmatter;
 
   return (
     <figure
@@ -408,7 +408,7 @@
       )}
     >
       {column && (
-        <div className="flex flex-row col-span-2 items-stretch px-2 h-full border dark:border-slate-600">
+        <div className="flex flex-row items-stretch h-full col-span-2 px-2 border dark:border-slate-600">
           <div className="flex-grow"></div>
           {demoMenu}
         </div>
@@ -452,7 +452,7 @@
               >
                 <GridSystemProvider gridSystem="demo-grid">
                   {TitleBlock && <TitleBlock frontmatter={frontmatter}></TitleBlock>}
-                  <MyST ast={references.article?.children as GenericNode[]} />
+                  <MyST ast={references.article} />
                 </GridSystemProvider>
               </ArticleProvider>
             </>
@@ -474,7 +474,7 @@
           {previewType === 'DOCX' && (
             <div>
               <button
-                className="p-3 rounded border"
+                className="p-3 border rounded"
                 onClick={() => saveDocxFile('demo.docx', references.article)}
                 title={`Download Micorsoft Word`}
                 aria-label={`Download Micorsoft Word`}

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

@@ -28,11 +28,12 @@ export function MyST({
   className?: string;
 }) {
   const renderers = useNodeRenderers();
-  if (!ast || ast.length === 0) return null;
+  if (!ast) return null;
   if (!Array.isArray(ast)) {
     const Component = selectRenderer(renderers, ast);
     return <Component key={ast.key} node={ast} className={className} />;
   }
+  if (ast.length === 0) return null;
   return (
     <>
       {ast?.map((node) => {

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

@@ -54,6 +54,10 @@ type Glossary = {
   type: 'glossary';
 };
 
+type Root = {
+  type: 'root';
+};
+
 type BasicNodeRenderers = {
   text: NodeRenderer<spec.Text>;
   span: NodeRenderer<GenericNode>;
@@ -95,6 +99,7 @@ type BasicNodeRenderers = {
   definitionDescription: NodeRenderer<DefinitionDescription>;
   include: NodeRenderer<Include>;
   glossary: NodeRenderer<Glossary>;
+  root: NodeRenderer<Root>;
 };
 
 const BASIC_RENDERERS: BasicNodeRenderers = {
@@ -412,6 +417,9 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
       </div>
     );
   },
+  root({ node, className }) {
+    return <MyST ast={node.children} className={className} />;
+  },
 };
 
 export default BASIC_RENDERERS;

themes/article/app/components/Article.tsx

@@ -93,7 +93,7 @@ export function Article({
           <ErrorTray pageSlug={article.slug} />
           <div id="skip-to-article" />
           <FrontmatterParts parts={parts} keywords={keywords} hideKeywords={hideKeywords} />
-          <MyST ast={tree.children as GenericParent[]} />
+          <MyST ast={tree} />
           <BackmatterParts parts={parts} />
           <Footnotes />
           <Bibliography />

themes/book/app/components/ArticlePage.tsx

@@ -116,7 +116,7 @@ export const ArticlePage = React.memo(function ({
           )}
           <div id="skip-to-article" />
           <FrontmatterParts parts={parts} keywords={keywords} hideKeywords={hideKeywords} />
-          <MyST ast={tree.children as GenericParent[]} />
+          <MyST ast={tree} />
           <BackmatterParts parts={parts} />
           <Footnotes />
           <Bibliography />