polen 0.10.0-next.14 → 0.10.0-next.3

package/src/api/vite/plugins/pages.ts

@@ -1,34 +1,36 @@
 import type { Config } from '#api/config/index'
-import { Content } from '#api/content/$'
-import { createNavbar } from '#api/content/navbar'
 import type { NavbarDataRegistry } from '#api/vite/data/navbar'
 import { polenVirtual } from '#api/vite/vi'
 import type { Vite } from '#dep/vite/index'
 import { reportDiagnostics } from '#lib/file-router/diagnostic-reporter'
 import { FileRouter } from '#lib/file-router/index'
-import { debugPolen } from '#singletons/debug'
+import { Tree } from '#lib/tree/index'
+import { debug } from '#singletons/debug'
 import { superjson } from '#singletons/superjson'
 import mdx from '@mdx-js/rollup'
 import rehypeShiki from '@shikijs/rehype'
-import { Arr, Cache, Path, Str } from '@wollybeard/kit'
-import remarkFrontmatter from 'remark-frontmatter'
+import { Path, Str } from '@wollybeard/kit'
 import remarkGfm from 'remark-gfm'
 
-const debug = debugPolen.sub(`vite-pages`)
+const _debug = debug.sub(`vite-plugin-pages`)
 
-export const viProjectRoutes = polenVirtual([`project`, `routes.jsx`], { allowPluginProcessing: true })
-export const viProjectPagesCatalog = polenVirtual([`project`, `data`, 'pages-catalog.jsonsuper'], {
-  allowPluginProcessing: true,
-})
+export const viProjectPages = polenVirtual([`project`, `pages.jsx`], { allowPluginProcessing: true })
+export const viProjectPagesData = polenVirtual([`project`, `data`, 'pages.jsonsuper'], { allowPluginProcessing: true })
 
-export interface Options {
+export interface PagesTreePluginOptions {
   config: Config.Config
   navbarData?: NavbarDataRegistry
+  onPagesChange?: (pages: FileRouter.ScanResult) => void
+  onTreeChange?: (tree: FileRouter.RouteTreeNode) => void
 }
 
-export interface ProjectPagesCatalog {
-  sidebarIndex: Content.SidebarIndex
-  pages: Content.Page[]
+export interface ProjectDataPages {
+  sidebarIndex: SidebarIndex
+  pagesScanResult: FileRouter.ScanResult
+}
+
+export interface SidebarIndex {
+  [pathExpression: string]: FileRouter.Sidebar.Sidebar
 }
 
 /**
@@ -37,53 +39,77 @@ export interface ProjectPagesCatalog {
 export const Pages = ({
   config,
   navbarData,
-}: Options): Vite.Plugin[] => {
-  const scanPages = Cache.memoize(debug.trace(async function scanPages() {
-    const result = await Content.scan({
-      dir: config.paths.project.absolute.pages,
-      glob: `**/*.{md,mdx}`,
-    })
-    return result
-  }))
-
-  const invalidateVirtualModules = (server: Vite.ViteDevServer) => {
-    const routesModule = server.moduleGraph.getModuleById(viProjectRoutes.id)
-    if (routesModule) {
-      server.moduleGraph.invalidateModule(routesModule)
-      debug(`Invalidated routes virtual module`)
+  onPagesChange,
+  onTreeChange,
+}: PagesTreePluginOptions): Vite.Plugin[] => {
+  let currentPagesData: FileRouter.ScanResult | null = null
+  let currentTreeData: FileRouter.RouteTreeNode | null = null
+
+  // State management
+  let pagesCache: FileRouter.ScanResult | null = null
+  let treeCache: FileRouter.RouteTreeNode | null = null
+
+  // Helper functions
+  const scanPages = async () => {
+    if (!pagesCache) {
+      _debug(`Scanning pages - cache is null, loading fresh data`)
+      pagesCache = await FileRouter.scan({
+        dir: config.paths.project.absolute.pages,
+        glob: `**/*.{md,mdx}`,
+      })
+      _debug(`Found ${String(pagesCache.routes.length)} pages`)
+    } else {
+      _debug(`Using cached pages`)
     }
+    return pagesCache
+  }
 
-    const catalogModule = server.moduleGraph.getModuleById(viProjectPagesCatalog.id)
-    if (catalogModule) {
-      server.moduleGraph.invalidateModule(catalogModule)
-      debug(`Invalidated pages catalog virtual module`)
+  const scanTree = async () => {
+    if (!treeCache) {
+      _debug(`Scanning tree - cache is null, loading fresh data`)
+      const result = await FileRouter.scanTree({
+        dir: config.paths.project.absolute.pages,
+        glob: `**/*.{md,mdx}`,
+      })
+      treeCache = result.routeTree
+      _debug(`Built route tree`)
+    } else {
+      _debug(`Using cached tree`)
     }
+    return treeCache
+  }
+
+  const clearCache = () => {
+    _debug(`Clearing pages and tree cache`)
+    pagesCache = null
+    treeCache = null
   }
 
-  const generateRoutesModule = (pages: Content.Page[]): string => {
+  const isPageFile = (file: string) => {
+    return (file.endsWith(`.md`) || file.endsWith(`.mdx`))
+      && file.includes(config.paths.project.absolute.pages)
+  }
+
+  const generatePagesModule = (pagesScanResult: FileRouter.ScanResult): string => {
     const $ = {
-      routes: `routes`,
+      pages: `pages`,
     }
 
     const s = Str.Builder()
-    s`export const ${$.routes} = []`
+    s`export const ${$.pages} = []`
 
     // Generate imports and route objects
-    for (const { route, metadata } of pages) {
+    for (const route of pagesScanResult.routes) {
       const filePathExp = Path.format(route.file.path.absolute)
       const pathExp = FileRouter.routeToPathExpression(route)
-      const $$ = {
-        ...$,
-        Component: Str.Case.camel(`page ` + Str.titlizeSlug(pathExp)),
-      }
+      const ident = Str.Case.camel(`page ` + Str.titlizeSlug(pathExp))
 
       s`
-        import ${$$.Component} from '${filePathExp}'
+        import ${ident} from '${filePathExp}'
 
-        ${$$.routes}.push({
+        ${$.pages}.push({
           path: '${pathExp}',
-          Component: ${$$.Component},
-          metadata: ${JSON.stringify(metadata)}
+          Component: ${ident}
         })
       `
     }
@@ -97,11 +123,7 @@ export const Pages = ({
       enforce: `pre` as const,
       ...mdx({
         jsxImportSource: `polen/react`,
-        remarkPlugins: [
-          // Parse frontmatter blocks so they're removed from content
-          remarkFrontmatter,
-          remarkGfm,
-        ],
+        remarkPlugins: [remarkGfm],
         rehypePlugins: [
           [
             rehypeShiki,
@@ -110,7 +132,7 @@ export const Pages = ({
                 light: `github-light`,
                 dark: `tokyo-night`,
               },
-              defaultColor: 'light',
+              defaultColor: false,
               cssVariablePrefix: `--shiki-`,
               transformers: [
                 // Line numbers will be handled via CSS
@@ -128,77 +150,66 @@ export const Pages = ({
       // Dev server configuration
       configureServer(server) {
         // Add pages directory to watcher
-        debug(`configureServer: watch pages directory`, config.paths.project.absolute.pages)
+        _debug(`configureServer: watch pages directory`, config.paths.project.absolute.pages)
         server.watcher.add(config.paths.project.absolute.pages)
-
-        // Handle file additions and deletions
-        const handleFileStructureChange = async (file: string, event: 'add' | 'unlink') => {
-          if (!Content.isPageFile(file, config.paths.project.absolute.pages)) return
-
-          debug(`Page file ${event === 'add' ? 'added' : 'deleted'}:`, file)
-
-          // Clear cache and rescan
-          scanPages.clear()
-          const newScanResult = await scanPages()
-
-          // Invalidate virtual modules
-          invalidateVirtualModules(server)
-
-          // Report any diagnostics
-          reportDiagnostics(newScanResult.diagnostics)
-
-          // Trigger full reload to ensure routes are updated
-          server.ws.send({ type: 'full-reload' })
-        }
-
-        server.watcher.on('add', (file) => handleFileStructureChange(file, 'add'))
-        server.watcher.on('unlink', (file) => handleFileStructureChange(file, 'unlink'))
       },
 
-      // Hot update handling for existing files
+      // Hot update handling
       async handleHotUpdate({ file, server, modules }) {
-        debug(`handleHotUpdate`, file)
-        if (!Content.isPageFile(file, config.paths.project.absolute.pages)) return
+        _debug(`handleHotUpdate`, file)
+        if (!isPageFile(file)) return
 
-        debug(`Page file changed:`, file)
+        _debug(`Page file changed:`, file)
 
-        // Get current pages before clearing cache
-        const oldPages = await scanPages()
+        // Check if this is a content-only change to an existing page
+        const oldPages = pagesCache
 
         // Clear cache and rescan
-        scanPages.clear()
-        const newScanResult = await scanPages()
-
-        // Check if the visible pages list changed. This can happen when:
-        // - A page's frontmatter `hidden` field changes (true <-> false)
-        // - A page's frontmatter affects its route (though we don't support this yet)
-        // If only the content changed (not frontmatter), we can use fast HMR.
-        const pageStructureChanged = !oldPages || !Arr.equalShallowly(
-          oldPages.list.map(p => Path.format(p.route.file.path.absolute)),
-          newScanResult.list.map(p => Path.format(p.route.file.path.absolute)),
-        )
-
-        if (!pageStructureChanged) {
-          debug(`Page content changed, allowing HMR`)
-          // Let default HMR handle the MDX file change
-          return modules
-        }
+        clearCache()
+        const newPages = await scanPages()
+        currentPagesData = newPages
+
+        // Check if page structure changed (added/removed pages)
+        const structureChanged = !oldPages
+          || oldPages.routes.length !== newPages.routes.length
+          || !oldPages.routes.every((oldRoute, i) =>
+            oldRoute.file.path.absolute === newPages.routes[i]?.file.path.absolute
+          )
+
+        if (structureChanged) {
+          _debug(`Page structure changed, triggering full reload`)
+
+          // Invalidate virtual module
+          const mod = server.moduleGraph.getModuleById(viProjectPages.id)
+          if (mod) {
+            server.moduleGraph.invalidateModule(mod)
+            _debug(`Invalidated pages virtual module`)
+          }
 
-        //
-        // ━━ Manual Invalidation
-        //
+          // Notify about changes
+          if (onPagesChange) {
+            reportDiagnostics(newPages.diagnostics)
+            onPagesChange(newPages)
+          }
 
-        debug(`Page structure changed, triggering full reload`)
+          if (onTreeChange) {
+            const tree = await scanTree()
+            onTreeChange(tree)
+            currentTreeData = tree
+          }
 
-        // Invalidate virtual modules and trigger reload
-        invalidateVirtualModules(server)
-        reportDiagnostics(newScanResult.diagnostics)
-        server.ws.send({ type: `full-reload` })
-        return []
+          // Trigger full reload for structure changes
+          server.ws.send({ type: `full-reload` })
+          return []
+        } else {
+          _debug(`Page content changed, allowing HMR`)
+          // Let default HMR handle the MDX file change
+          return modules
+        }
       },
       resolveId(id) {
-        if (id === viProjectPagesCatalog.id) {
-          return viProjectPagesCatalog.resolved
+        if (id === viProjectPagesData.id) {
+          return viProjectPagesData.resolved
         }
       },
       load: {
@@ -206,56 +217,108 @@ export const Pages = ({
         //   id: viProjectPagesData.resolved,
         // },
         async handler(id) {
-          if (id !== viProjectPagesCatalog.resolved) return
-          debug(`hook load`)
-
-          const scanResult = await scanPages()
-
-          reportDiagnostics(scanResult.diagnostics)
-          debug(`found visible`, { count: scanResult.list.length })
+          if (id !== viProjectPagesData.resolved) return
+          _debug(`viProjectDataPages`)
+
+          // Get pages data from the pages plugin or load initially
+          if (!currentPagesData) {
+            _debug(`loadingPagesDataInitially`)
+            currentPagesData = await FileRouter.scan({
+              dir: config.paths.project.absolute.pages,
+              glob: `**/*.{md,mdx}`,
+            })
+            // Report any diagnostics from initial scan
+            reportDiagnostics(currentPagesData.diagnostics)
+          }
+          if (!currentTreeData) {
+            _debug(`loadingTreeDataInitially`)
+            currentTreeData = await getRouteTree(config)
+          }
+          const pagesScanResult = currentPagesData
+          const routeTree = currentTreeData
+          _debug(`usingPageRoutesFromPagesPlugin`, pagesScanResult.routes.length)
 
           //
           // ━━ Build Navbar
           //
 
+          // Update navbar if provided
           if (navbarData) {
             const navbarPages = navbarData.get('pages')
-
             navbarPages.length = 0 // Clear existing
 
-            const data = createNavbar(scanResult.list)
-
-            debug('update navbar', data)
-
-            navbarPages.push(...data)
+            // Process first-level children as navigation items
+            for (const child of routeTree.children) {
+              if (child.value.type === 'directory') {
+                // Check if this directory has an index file
+                const hasIndex = child.children.some(c => c.value.type === 'file' && c.value.name === 'index')
+
+                if (hasIndex) {
+                  const pathExp = FileRouter.pathToExpression([child.value.name])
+                  const title = Str.titlizeSlug(child.value.name)
+                  navbarPages.push({
+                    // IMPORTANT: Always ensure paths start with '/' for React Router compatibility.
+                    // Without the leading slash, React Router treats paths as relative, which causes
+                    // hydration mismatches between SSR (where base path is prepended) and client
+                    // (where basename is configured). This ensures consistent behavior.
+                    pathExp: pathExp.startsWith('/') ? pathExp : '/' + pathExp,
+                    title,
+                  })
+                }
+              } else if (child.value.type === 'file' && child.value.name !== 'index') {
+                const pathExp = FileRouter.pathToExpression([child.value.name])
+                const title = Str.titlizeSlug(child.value.name)
+                navbarPages.push({
+                  // IMPORTANT: Always ensure paths start with '/' for React Router compatibility.
+                  // Without the leading slash, React Router treats paths as relative, which causes
+                  // hydration mismatches between SSR (where base path is prepended) and client
+                  // (where basename is configured). This ensures consistent behavior.
+                  pathExp: pathExp.startsWith('/') ? pathExp : '/' + pathExp,
+                  title,
+                })
+              }
+            }
           }
 
           //
           // ━━ Build Sidebar
           //
 
-          const sidebarIndex = Content.buildSidebarIndex(scanResult)
+          const sidebarIndex: SidebarIndex = {}
+
+          // Build sidebar for each top-level directory
+          for (const child of routeTree.children) {
+            if (child.value.type === 'directory') {
+              const pathExp = `/${child.value.name}`
+              // Create a subtree starting from this directory
+              const subtree = Tree.node(child.value, child.children)
+              // Pass the directory name as base path so paths are built correctly
+              const sidebar = FileRouter.Sidebar.buildFromTree(subtree, [child.value.name])
+              _debug(`Built sidebar for ${pathExp}:`, sidebar)
+              sidebarIndex[pathExp] = sidebar
+            }
+          }
 
           //
           // ━━ Put It All together
           //
 
-          const projectPagesCatalog: ProjectPagesCatalog = {
+          const projectDataPages: ProjectDataPages = {
             sidebarIndex,
-            pages: scanResult.list,
+            pagesScanResult: pagesScanResult,
           }
 
           // Return just the JSON string - let the JSON plugin handle the transformation
-          return superjson.stringify(projectPagesCatalog)
+          return superjson.stringify(projectDataPages)
         },
       },
     },
-    // Plugin 3: Virtual Module for React Router Routes
+    // Plugin 4: Virtual Module for Pages Routes
     {
-      name: 'polen:routes',
+      name: 'polen:pages:routes',
       resolveId(id) {
-        if (id === viProjectRoutes.id) {
-          return viProjectRoutes.resolved
+        if (id === viProjectPages.id) {
+          return viProjectPages.resolved
         }
       },
       load: {
@@ -263,17 +326,19 @@ export const Pages = ({
         //   id: viProjectPages.resolved,
         // },
         handler: async (id) => {
-          if (id !== viProjectRoutes.resolved) return
+          if (id !== viProjectPages.resolved) return
 
-          debug(`Loading viProjectRoutes virtual module`)
+          _debug(`Loading viProjectPages virtual module`)
 
-          const scanResult = await scanPages()
-          reportDiagnostics(scanResult.diagnostics)
-          const code = generateRoutesModule(scanResult.list)
+          // Ensure we have pages data
+          if (!currentPagesData) {
+            currentPagesData = await scanPages()
+            reportDiagnostics(currentPagesData.diagnostics)
+          }
 
           // Generate the module code
           return {
-            code,
+            code: generatePagesModule(currentPagesData),
             moduleType: 'js',
           }
         },
@@ -281,3 +346,12 @@ export const Pages = ({
     },
   ]
 }
+
+// Helper to get tree
+export const getRouteTree = async (config: Config.Config): Promise<FileRouter.RouteTreeNode> => {
+  const result = await FileRouter.scanTree({
+    dir: config.paths.project.absolute.pages,
+    glob: `**/*.{md,mdx}`,
+  })
+  return result.routeTree
+}

package/src/api/vite/plugins/serve.ts

@@ -1,80 +1,29 @@
 import type { Config } from '#api/config/index'
 import { reportError } from '#api/server/report-error'
-import { Hono } from '#dep/hono/index'
+import type { Hono } from '#dep/hono/index'
 import type { Vite } from '#dep/vite/index'
 import { ResponseInternalServerError } from '#lib/kit-temp'
-import { debugPolen } from '#singletons/debug'
+import { debug } from '#singletons/debug'
 import * as HonoNodeServer from '@hono/node-server'
-import { Err, Obj } from '@wollybeard/kit'
+import { Err } from '@wollybeard/kit'
 
 type App = Hono.Hono
 
-interface AppOptions {
-  hooks?: {
-    transformHtml?: Array<(html: string, ctx: Hono.Context) => Promise<string> | string>
-  }
-}
-
 interface AppServerModule {
-  createApp: (options: AppOptions) => App
+  app: App
 }
 
 export const Serve = (
   config: Config.Config,
 ): Vite.PluginOption => {
-  const debug = debugPolen.sub(`serve`)
-  debug('construct')
-  const appModulePath = config.paths.framework.template.server.app
-
+  const _debug = debug.sub(`serve`)
   let appPromise: Promise<App | Error>
 
-  const isNeedAppLoadOrReload = (server: Vite.ViteDevServer): boolean => {
-    const appModule = server.moduleGraph.getModuleById(appModulePath)
-    if (!appModule) return true // Not loaded yet
-
-    // Check if the module or any of its dependencies are invalidated
-    const checkInvalidated = (mod: Vite.ModuleNode, visited = new Set<string>()): boolean => {
-      console.log(Obj.pick(mod, ['ssrInvalidationState', 'invalidationState', 'lastInvalidationTimestamp']))
-      // if (!mod.id || visited.has(mod.id)) return false
-      // visited.add(mod.id)
-
-      // // Check if this module is invalidated
-      // if (mod.transformResult === null) return true
-
-      // // Check all imported modules recursively
-      // for (const imported of mod.importedModules) {
-      //   if (checkInvalidated(imported, visited)) return true
-      // }
-
-      return false
-    }
-
-    return checkInvalidated(appModule)
-  }
-
-  const reloadApp = async (server: Vite.ViteDevServer): Promise<App | Error> => {
-    debug('reloadApp')
-
+  const reloadApp = async ({ server }: { server: Vite.ViteDevServer }): Promise<App | Error> => {
+    _debug('reloadApp')
     return server.ssrLoadModule(config.paths.framework.template.server.app)
       .then(module => module as AppServerModule)
-      .then(module => {
-        return module.createApp({
-          hooks: {
-            transformHtml: [
-              // Inject entry client script for development
-              (html: string, _ctx) => {
-                const entryClientPath = config.paths.framework.template.client.entrypoint
-                const entryClientScript = `<script type="module" src="${entryClientPath}"></script>`
-                return html.replace('</body>', `${entryClientScript}</body>`)
-              },
-              // Apply Vite's transformations
-              async (html: string, ctx) => {
-                return await server.transformIndexHtml(ctx.req.url, html)
-              },
-            ],
-          },
-        })
-      })
+      .then(module => module.app)
       .catch(async (error) => {
         if (Err.is(error)) {
           // ━ Clean Stack Trace
@@ -106,14 +55,14 @@ export const Serve = (
       }
     },
     handleHotUpdate({ server }) {
-      debug('handleHotUpdate')
+      _debug('handleHotUpdate')
       // Reload app server immediately in the background
-      appPromise = reloadApp(server)
+      appPromise = reloadApp({ server })
     },
     async configureServer(server) {
-      debug('configureServer')
+      _debug('configureServer')
       // Initial load
-      appPromise = reloadApp(server)
+      appPromise = reloadApp({ server })
 
       return () => {
         // Remove index.html serving middleware.
@@ -125,8 +74,6 @@ export const Serve = (
 
         // Add middleware that runs our entry server
         server.middlewares.use((req, res, ___next) => {
-          debug('request')
-          // isNeedAppLoadOrReload(server)
           void HonoNodeServer.getRequestListener(async request => {
             // Always await the current app promise
             const app = await appPromise
@@ -134,8 +81,8 @@ export const Serve = (
               // Err.log(app)
               return ResponseInternalServerError()
             }
-
-            return await app.fetch(request)
+            const response = await app.fetch(request, { viteDevServer: server })
+            return response
           })(req, res)
         })
       }

package/src/cli/_/self-contained-mode.ts

@@ -1,7 +1,7 @@
 import type { Vite } from '#dep/vite/index'
 import { type ImportEvent, isSpecifierFromPackage } from '#lib/kit-temp'
 import { packagePaths } from '#package-paths'
-import { debugPolen } from '#singletons/debug'
+import { debug } from '#singletons/debug'
 import type * as Module from 'node:module'
 import { fileURLToPath } from 'node:url'
 
@@ -18,7 +18,7 @@ export function initialize(data: SelfContainedModeHooksData) {
 export const resolve: Module.ResolveHook = async (specifier, context, nextResolve) => {
   if (!data_) throw new Error(`Self-contained mode not initialized`)
 
-  const debug = debugPolen.sub(`node-module-hooks`)
+  const _debug = debug.sub(`node-module-hooks`)
 
   const from: ImportEvent = {
     specifier,
@@ -32,7 +32,7 @@ export const resolve: Module.ResolveHook = async (specifier, context, nextResolv
       importerPathExpOrFileUrlExp: from.context.parentURL,
     })
   ) {
-    debug(`resolve check`, { specifier, context })
+    _debug(`resolve check`, { specifier, context })
 
     const to: ImportEvent = {
       specifier: from.specifier,
@@ -43,7 +43,7 @@ export const resolve: Module.ResolveHook = async (specifier, context, nextResolv
       },
     }
 
-    debug(`resolve`, { from, to })
+    _debug(`resolve`, { from, to })
 
     await nextResolve(to.specifier, to.context)
   }
@@ -66,7 +66,7 @@ export const checkIsSelfImportFromProject = (input: {
 }
 
 export const VitePluginSelfContainedMode = ({ projectDirPathExp }: { projectDirPathExp: string }): Vite.Plugin => {
-  const d = debugPolen.sub(`vite-plugin:self-contained-import`)
+  const d = debug.sub(`vite-plugin:self-contained-import`)
 
   return {
     name: `polen:self-contained-import`,

package/src/lib/file-router/diagnostic-reporter.ts

@@ -13,10 +13,10 @@ export const reportDiagnostics = (diagnostics: Diagnostic[]) => {
     infos.length > 0 && `${infos.length} info${infos.length === 1 ? '' : 's'}`,
   ].filter(Boolean).join(', ')
 
-  console.warn(`\nPolen found ${summary}:\n`)
+  console.warn(`\n🔍 Polen found ${summary}:\n`)
 
   diagnostics.forEach((diagnostic, index) => {
-    const icon = diagnostic.severity === 'error' ? '✗' : diagnostic.severity === 'warning' ? '⚠' : 'ⓘ'
+    const icon = diagnostic.severity === 'error' ? '❌' : diagnostic.severity === 'warning' ? '⚠️ ' : 'ℹ️ '
     console.warn(`${icon} ${index + 1}. ${diagnostic.message}\n`)
   })
 }

package/src/lib/file-router/file-router.ts

@@ -1,3 +1,5 @@
 export * from './linter.ts'
 export * from './route.ts'
+export * from './scan-tree.ts'
 export * from './scan.ts'
+export * from './sidebar/index.ts'