From 29dcad3603c9aa2a89788a52d0c96a0353875ac2 Mon Sep 17 00:00:00 2001
From: Angus Hollands <goosey15@gmail.com>
Date: Thu, 6 Mar 2025 07:09:36 +0000
Subject: [PATCH 1/3] feat: add root renderer

---
 packages/myst-to-react/src/basic.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index b9494d5d..a80761b2 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/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,15 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
       </div>
     );
   },
+  root({ node, className }) {
+    if (node.children === undefined) {
+      return <></>;
+    }
+    const childComponents = node.children.map((child) => (
+      <MyST ast={child} className={className} />
+    ));
+    return <>{...childComponents}</>;
+  },
 };
 
 export default BASIC_RENDERERS;

From f6ecda3b052854622195c24f28ea72d1270038af Mon Sep 17 00:00:00 2001
From: Angus Hollands <goosey15@gmail.com>
Date: Thu, 6 Mar 2025 07:11:00 +0000
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/large-needles-end.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/large-needles-end.md

diff --git a/.changeset/large-needles-end.md b/.changeset/large-needles-end.md
new file mode 100644
index 00000000..6e52bf3f
--- /dev/null
+++ b/.changeset/large-needles-end.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Add `root` renderer

From fe77d4d79ffa7d6f2143686f4f6811b72dd30abb Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Thu, 6 Mar 2025 12:20:50 -0700
Subject: [PATCH 3/3] updates

---
 .changeset/rotten-mangos-rescue.md         | 5 +++++
 packages/myst-demo/src/index.tsx           | 6 +++---
 packages/myst-to-react/src/MyST.tsx        | 3 ++-
 packages/myst-to-react/src/basic.tsx       | 8 +-------
 themes/article/app/components/Article.tsx  | 2 +-
 themes/book/app/components/ArticlePage.tsx | 2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/rotten-mangos-rescue.md

diff --git a/.changeset/rotten-mangos-rescue.md b/.changeset/rotten-mangos-rescue.md
new file mode 100644
index 00000000..27cd34ac
--- /dev/null
+++ b/.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.
diff --git a/packages/myst-demo/src/index.tsx b/packages/myst-demo/src/index.tsx
index b72e3aec..d7c5ad3b 100644
--- a/packages/myst-demo/src/index.tsx
+++ b/packages/myst-demo/src/index.tsx
@@ -408,7 +408,7 @@ export function MySTRenderer({
       )}
     >
       {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 @@ export function MySTRenderer({
               >
                 <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 @@ export function MySTRenderer({
           {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`}
diff --git a/packages/myst-to-react/src/MyST.tsx b/packages/myst-to-react/src/MyST.tsx
index 98800f97..ee4bf9eb 100644
--- a/packages/myst-to-react/src/MyST.tsx
+++ b/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) => {
diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index a80761b2..cb311e5b 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/packages/myst-to-react/src/basic.tsx
@@ -418,13 +418,7 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
     );
   },
   root({ node, className }) {
-    if (node.children === undefined) {
-      return <></>;
-    }
-    const childComponents = node.children.map((child) => (
-      <MyST ast={child} className={className} />
-    ));
-    return <>{...childComponents}</>;
+    return <MyST ast={node.children} className={className} />;
   },
 };
 
diff --git a/themes/article/app/components/Article.tsx b/themes/article/app/components/Article.tsx
index 044e5480..6ee93dce 100644
--- a/themes/article/app/components/Article.tsx
+++ b/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 />
diff --git a/themes/book/app/components/ArticlePage.tsx b/themes/book/app/components/ArticlePage.tsx
index 85793c47..62016555 100644
--- a/themes/book/app/components/ArticlePage.tsx
+++ b/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 />