split sidebars + optimize generated files loading

www/packages/build-scripts/src/generate-sidebar.ts

@@ -12,14 +12,26 @@ export type ItemsToAdd = Sidebar.SidebarItem & {
   sidebar_position?: number
 }
 
-type GenerateSidebarOptions = {
+export type GenerateSidebarOptions = {
   addNumbering?: boolean
+  writeToFile?: boolean
 }
 
 const customGenerators: Record<string, () => Promise<ItemsToAdd[]>> = {
   "core-flows": getCoreFlowsRefSidebarChildren,
 }
 
+function sortItems(itemA: ItemsToAdd, itemB: ItemsToAdd): number {
+  const itemASidebarPosition = itemA.sidebar_position || 0
+  const itemBSidebarPosition = itemB.sidebar_position || 0
+
+  if (itemASidebarPosition > itemBSidebarPosition) {
+    return 1
+  }
+
+  return itemASidebarPosition < itemBSidebarPosition ? -1 : 0
+}
+
 async function getAutogeneratedSidebarItems(
   dir: string,
   nested = false
@@ -211,21 +223,27 @@ async function checkItems(
 export async function generateSidebar(
   sidebars: Sidebar.RawSidebar[],
   options?: GenerateSidebarOptions
-): Promise<void> {
+): Promise<void | Sidebar.RawSidebar[]> {
   const path = await import("path")
   const { writeFileSync } = await import("fs")
 
   const normalizedSidebars: Sidebar.RawSidebar[] = []
 
+  const { writeToFile = true, ...restOptions } = options || {}
+
   validateSidebarUniqueIds(sidebars)
 
   for (const sidebarItem of sidebars) {
     normalizedSidebars.push({
       ...sidebarItem,
-      items: await checkItems(sidebarItem.items, options),
+      items: await checkItems(sidebarItem.items, restOptions),
     })
   }
 
+  if (!writeToFile) {
+    return normalizedSidebars
+  }
+
   const generatedDirPath = path.resolve("generated")
 
   if (!existsSync(generatedDirPath)) {
@@ -245,14 +263,3 @@ export async function generateSidebar(
     }
   )
 }
-
-function sortItems(itemA: ItemsToAdd, itemB: ItemsToAdd): number {
-  const itemASidebarPosition = itemA.sidebar_position || 0
-  const itemBSidebarPosition = itemB.sidebar_position || 0
-
-  if (itemASidebarPosition > itemBSidebarPosition) {
-    return 1
-  }
-
-  return itemASidebarPosition < itemBSidebarPosition ? -1 : 0
-}

www/packages/build-scripts/src/generate-split-sidebars.ts

@@ -0,0 +1,51 @@
+import { Sidebar } from "types"
+import { generateSidebar, GenerateSidebarOptions } from "./index.js"
+import path from "path"
+import { existsSync, mkdirSync } from "fs"
+import { writeFile } from "fs/promises"
+
+function toCamelCase(str: string) {
+  return str
+    .replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+    .replace(/^./, (g) => g.toUpperCase())
+}
+
+export async function generateSplitSidebars({
+  sidebars,
+  options,
+}: {
+  sidebars: Sidebar.RawSidebar[]
+  options?: GenerateSidebarOptions
+}) {
+  const generatedDirPath = path.resolve("generated")
+
+  if (!existsSync(generatedDirPath)) {
+    mkdirSync(generatedDirPath)
+  }
+
+  for (const sidebarItem of sidebars) {
+    const generatedSidebar = (
+      (await generateSidebar([sidebarItem], {
+        ...options,
+        writeToFile: false,
+      })) as Sidebar.RawSidebar[]
+    )[0]
+
+    const varName = `generated${toCamelCase(sidebarItem.sidebar_id)}Sidebar`
+
+    await writeFile(
+      path.resolve(
+        generatedDirPath,
+        `generated-${sidebarItem.sidebar_id}-sidebar.mjs`
+      ),
+      `const generated${varName}Sidebar = ${JSON.stringify(
+        generatedSidebar,
+        null,
+        2
+      )}\n\nexport default generated${varName}Sidebar`,
+      {
+        flag: "w",
+      }
+    )
+  }
+}

www/packages/build-scripts/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./generate-edited-dates.js"
 export * from "./generate-llms-full.js"
 export * from "./generate-sidebar.js"
+export * from "./generate-split-sidebars.js"
 export * from "./retrieve-mdx-pages.js"
 
 export * from "./utils/get-core-flows-ref-sidebar-children.js"