UI: improve warnings

Yinzo · Dec 27, 2024 · b5952e9 · b5952e9
1 parent 969da26
commit b5952e9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/packages/ui/src/layouts/docs.tsx b/packages/ui/src/layouts/docs.tsx
@@ -35,13 +35,13 @@ import {
 } from '@/components/layout/search-toggle';
 import { SearchOnly } from '@/contexts/search';
 import {
+  checkPageTree,
   getSidebarTabsFromOptions,
   layoutVariables,
   SidebarLinkItem,
   type SidebarOptions,
 } from '@/layouts/docs/shared';
 import { type PageStyles, StylesProvider } from '@/contexts/layout';
-import { notFound } from 'next/navigation';
 
 export interface DocsLayoutProps extends BaseLayoutProps {
   tree: PageTree.Root;
@@ -71,9 +71,9 @@ export function DocsLayout({
   i18n = false,
   ...props
 }: DocsLayoutProps): ReactNode {
+  checkPageTree(props.tree);
   const links = getLinks(props.links ?? [], props.githubUrl);
   const Aside = collapsible ? CollapsibleSidebar : Sidebar;
-  if (props.tree === undefined) notFound();
 
   const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
   const variables = cn(

diff --git a/packages/ui/src/layouts/docs/shared.tsx b/packages/ui/src/layouts/docs/shared.tsx
@@ -12,6 +12,7 @@ import { buttonVariants } from '@/components/ui/button';
 import type { PageTree } from 'fumadocs-core/server';
 import type { FC, ReactNode } from 'react';
 import type { Option } from '@/components/layout/root-toggle';
+import { notFound } from 'next/navigation';
 
 export const layoutVariables = {
   '--fd-layout-offset': 'max(calc(50vw - var(--fd-layout-width) / 2), 0px)',
@@ -99,6 +100,20 @@ export function SidebarLinkItem({ item }: { item: LinkItemType }) {
   );
 }
 
+export function checkPageTree(passed: unknown) {
+  if (!passed) notFound();
+  if (
+    typeof passed === 'object' &&
+    'children' in passed &&
+    Array.isArray(passed)
+  )
+    return;
+
+  throw new Error(
+    'You passed an invalid page tree to `<DocsLayout />`. Check your usage in layout.tsx if you have enabled i18n.',
+  );
+}
+
 export function getSidebarTabsFromOptions(
   options: SidebarOptions['tabs'],
   tree: PageTree.Root,

diff --git a/packages/ui/src/layouts/notebook.tsx b/packages/ui/src/layouts/notebook.tsx
@@ -13,7 +13,6 @@ import {
   SidebarViewport,
   SidebarPageTree,
 } from '@/layouts/docs/sidebar';
-import { notFound } from 'next/navigation';
 import { RootToggle } from '@/components/layout/root-toggle';
 import { TreeContextProvider } from '@/contexts/tree';
 import { NavProvider, Title } from '@/components/layout/nav';
@@ -35,6 +34,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import {
+  checkPageTree,
   getSidebarTabsFromOptions,
   layoutVariables,
   SidebarLinkItem,
@@ -65,9 +65,9 @@ export function DocsLayout({
   i18n = false,
   ...props
 }: DocsLayoutProps): ReactNode {
+  checkPageTree(props.tree);
   const links = getLinks(props.links ?? [], props.githubUrl);
   const Aside = sidebarCollapsible ? CollapsibleSidebar : Sidebar;
-  if (props.tree === undefined) notFound();
 
   const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
   const variables = cn(