@acmekit/docs-app 2.13.43

package/src/docs-app.tsx

@@ -0,0 +1,99 @@
+import React, { Suspense, useEffect, useRef } from "react"
+import { BrowserRouter, Routes, Route } from "react-router-dom"
+import { routes, components, importers } from "virtual:acmekit/docs-routes"
+import { config } from "virtual:acmekit/docs-config"
+import { Loading } from "@acmekit/docs-ui"
+import { DocsProviders } from "./providers/DocsProviders"
+import { Layout } from "./components/Layout"
+import { DocPage } from "./components/DocPage"
+import { HomePage } from "./components/HomePage"
+import { RouteErrorBoundary } from "./components/RouteErrorBoundary"
+import { SearchModal } from "./components/SearchModal"
+import type { DocsPlugin } from "./types"
+
+type DocsAppProps = {
+  plugins?: DocsPlugin[]
+}
+
+export function DocsApp({ plugins = [] }: DocsAppProps) {
+  const allRoutes = [...routes]
+  const prefetched = useRef(new Set<string>())
+
+  // Merge plugin contributions
+  for (const plugin of plugins) {
+    if (plugin.routes) {
+      allRoutes.push(...plugin.routes)
+    }
+  }
+
+  // Prefetch chunks on link hover
+  useEffect(() => {
+    function onMouseOver(e: MouseEvent) {
+      const anchor = (e.target as HTMLElement).closest?.("a")
+      if (!anchor) return
+
+      const href = anchor.getAttribute("href")
+      if (!href || prefetched.current.has(href)) return
+
+      const importer = importers[href]
+      if (importer) {
+        prefetched.current.add(href)
+        importer()
+      }
+    }
+
+    document.addEventListener("mouseover", onMouseOver)
+    return () => document.removeEventListener("mouseover", onMouseOver)
+  }, [])
+
+  return (
+    <BrowserRouter basename={config.basePath}>
+      <DocsProviders config={config}>
+        <div className="h-screen w-full overflow-hidden">
+          <RouteErrorBoundary>
+            <Suspense fallback={<Loading count={8} />}>
+              <Routes>
+                <Route element={<Layout />}>
+                  <Route index element={<HomePage />} />
+                  {allRoutes.map((route) => {
+                    const Component = components[route.path]
+                    if (!Component) return null
+
+                    if (route.type === "mdx") {
+                      return (
+                        <Route
+                          key={route.path}
+                          path={route.path}
+                          element={
+                            <DocPage frontmatter={route.frontmatter}>
+                              <Suspense fallback={<Loading count={8} />}>
+                                <Component />
+                              </Suspense>
+                            </DocPage>
+                          }
+                        />
+                      )
+                    }
+
+                    return (
+                      <Route
+                        key={route.path}
+                        path={route.path}
+                        element={
+                          <Suspense fallback={<Loading count={8} />}>
+                            <Component />
+                          </Suspense>
+                        }
+                      />
+                    )
+                  })}
+                </Route>
+              </Routes>
+            </Suspense>
+          </RouteErrorBoundary>
+          <SearchModal />
+        </div>
+      </DocsProviders>
+    </BrowserRouter>
+  )
+}

package/src/entry-server.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { renderToString } from "react-dom/server"
+import { StaticRouter } from "react-router-dom/server"
+import { Routes, Route } from "react-router-dom"
+import { routes, components } from "virtual:acmekit/docs-routes"
+
+export { routes }
+
+export function render(url: string, basePath: string): string {
+  return renderToString(
+    <StaticRouter basename={basePath} location={url}>
+      <div className="h-screen w-full overflow-hidden">
+        <Routes>
+          {routes.map((route) => {
+            const Component = components[route.path]
+            if (!Component) return null
+            return (
+              <Route
+                key={route.path}
+                path={route.path}
+                element={<Component />}
+              />
+            )
+          })}
+        </Routes>
+      </div>
+    </StaticRouter>
+  )
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { DocsApp } from "./docs-app"
+export type { DocsPlugin } from "./types"

package/src/module.d.ts

@@ -0,0 +1,21 @@
+declare module "virtual:acmekit/docs-routes" {
+  import type { DocsRouteEntry } from "@acmekit/docs-shared"
+  export const routes: DocsRouteEntry[]
+  export const components: Record<string, React.ComponentType<any>>
+  export const importers: Record<string, () => Promise<any>>
+}
+
+declare module "virtual:acmekit/docs-search" {
+  import type { DocsSearchEntry } from "@acmekit/docs-shared"
+  export const searchIndex: DocsSearchEntry[]
+}
+
+declare module "virtual:acmekit/docs-sidebar" {
+  import type { DocsSidebarItem } from "@acmekit/docs-shared"
+  export const sidebar: DocsSidebarItem[]
+}
+
+declare module "virtual:acmekit/docs-config" {
+  import type { DocsConfig } from "@acmekit/docs-shared"
+  export const config: DocsConfig
+}

package/src/providers/DocsProviders.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from "react"
+import {
+  RootProviders,
+  SiteConfigProvider,
+  ScrollControllerProvider,
+  SidebarProvider,
+  NotificationProvider,
+  PaginationProvider,
+  MainNavProvider,
+  SearchProvider,
+  AiAssistantProvider,
+} from "@acmekit/docs-ui"
+type DocsProvidersProps = {
+  children: React.ReactNode
+  config: Record<string, any>
+}
+
+export function DocsProviders({ children, config }: DocsProvidersProps) {
+  const navItems = useMemo(() => {
+    if (!config.areas?.length) {
+      return []
+    }
+
+    return config.areas.map((area: any) => ({
+      type: "link" as const,
+      link: `/${area.id}`,
+      title: area.title,
+    }))
+  }, [config.areas])
+
+  return (
+    <RootProviders>
+      <SiteConfigProvider
+        config={{
+          baseUrl: "",
+          basePath: config.basePath,
+          sidebars: config.sidebars || [],
+          project: {
+            title: config.title || "Documentation",
+            key: "docs",
+          },
+          logo: config.logo || "",
+          version: config.version,
+        }}
+      >
+        <ScrollControllerProvider scrollableSelector="#main">
+          <SidebarProvider
+            sidebars={config.sidebars || []}
+            isSidebarStatic={true}
+            shouldHandlePathChange={true}
+          >
+            <NotificationProvider>
+              <PaginationProvider>
+                <MainNavProvider navItems={navItems}>
+                  <SearchProvider>
+                    <AiAssistantProvider>{children}</AiAssistantProvider>
+                  </SearchProvider>
+                </MainNavProvider>
+              </PaginationProvider>
+            </NotificationProvider>
+          </SidebarProvider>
+        </ScrollControllerProvider>
+      </SiteConfigProvider>
+    </RootProviders>
+  )
+}

package/src/routes/build-routes.ts

@@ -0,0 +1,13 @@
+import type { DocsRouteEntry } from "@acmekit/docs-shared"
+
+export function buildRoutes(
+  routes: DocsRouteEntry[],
+  components: Record<string, React.ComponentType<any>>
+) {
+  return routes
+    .filter((route) => components[route.path])
+    .map((route) => ({
+      ...route,
+      component: components[route.path],
+    }))
+}

package/src/types.ts

@@ -0,0 +1,7 @@
+import type { DocsSidebarItem, DocsRouteEntry } from "@acmekit/docs-shared"
+
+export type DocsPlugin = {
+  name: string
+  routes?: DocsRouteEntry[]
+  sidebar?: DocsSidebarItem[]
+}