polen 0.9.0-next.2 → 0.9.0-next.4

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

@@ -1,38 +1,32 @@
 import type { Config } from '#api/config/index'
+import { NavbarData } from '#api/vite/data/navbar'
 import { VitePluginSelfContainedMode } from '#cli/_/self-contained-mode'
 import type { ReactRouter } from '#dep/react-router/index'
 import type { Vite } from '#dep/vite/index'
-import { reportDiagnostics } from '#lib/file-router/diagnostic-reporter'
-import { FileRouter } from '#lib/file-router/index'
-import { Tree } from '#lib/tree/index'
+import { VitePluginJson } from '#lib/vite-plugin-json/index'
+import { VitePluginReactiveData } from '#lib/vite-plugin-reactive-data/index'
 import { ViteVirtual } from '#lib/vite-virtual/index'
 import { debug } from '#singletons/debug'
+import { superjson } from '#singletons/superjson'
 import { Json, Str } from '@wollybeard/kit'
-import jsesc from 'jsesc'
-import type { ProjectData, SidebarIndex, SiteNavigationItem } from '../../../project-data.ts'
-import { superjson } from '../../../singletons/superjson.ts'
+import type { ProjectData } from '../../../project-data.ts'
 import { SchemaAugmentation } from '../../schema-augmentation/index.ts'
 import { Schema } from '../../schema/index.ts'
 import { createLogger } from '../logger.ts'
 import { polenVirtual } from '../vi.ts'
-import { createPagesPlugin, getRouteTree } from './pages-tree.ts'
+import { Pages } from './pages.ts'
 
 const _debug = debug.sub(`vite-plugin-core`)
 
 const viTemplateVariables = polenVirtual([`template`, `variables`])
 const viTemplateSchemaAugmentations = polenVirtual([`template`, `schema-augmentations`])
-const viProjectData = polenVirtual([`project`, `data`])
+const viProjectData = polenVirtual([`project`, `data.jsonsuper`], { allowPluginProcessing: true })
 
 export interface ProjectPagesModule {
   pages: ReactRouter.RouteObject[]
 }
 
 export const Core = (config: Config.Config): Vite.PluginOption[] => {
-  // State for current pages data (updated by pages plugin)
-  let currentPagesData: FileRouter.ScanResult | null = null
-  let currentTreeData: FileRouter.RouteTreeNode | null = null
-  let viteDevServer: Vite.ViteDevServer | null = null
-
   // Schema cache management
   let schemaCache: Awaited<ReturnType<typeof Schema.readOrThrow>> | null = null
 
@@ -52,6 +46,7 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
   }
 
   const plugins: Vite.Plugin[] = []
+  const navbarData = NavbarData()
 
   // Note: The main use for this right now is to resolve the react imports
   // from the mdx vite plugin which have to go through the Polen exports since Polen keeps those deps bundled.
@@ -64,26 +59,19 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
     }))
   }
 
+  const json = VitePluginJson.create({
+    codec: {
+      validate: superjson,
+      importPath: import.meta.resolve('#singletons/superjson'),
+      importExport: 'superjson',
+    },
+    filter: {
+      moduleTypes: ['jsonsuper'],
+    },
+  })
+
   return [
     ...plugins,
-
-    // Self-contained pages plugin
-    ...createPagesPlugin({
-      config,
-      onPagesChange: (pages) => {
-        currentPagesData = pages
-        // Invalidate project data virtual module to regenerate navigation/sidebar
-        if (viteDevServer) {
-          const projectDataModule = viteDevServer.moduleGraph.getModuleById(viProjectData.resolved)
-          if (projectDataModule) {
-            viteDevServer.moduleGraph.invalidateModule(projectDataModule)
-          }
-        }
-      },
-      onTreeChange: (tree) => {
-        currentTreeData = tree
-      },
-    }),
     /**
      * If a `polen*` import is encountered from the user's project, resolve it to the currently
      * running source code of Polen rather than the user's node_modules.
@@ -95,9 +83,9 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
      * 2. Secondary: Using Polen CLI on a project that does not have Polen installed.
      *    (User would likely not want to do this because they would not be able to achieve type safety)
      */
-
     {
       name: `polen:internal-import-alias`,
+      enforce: 'pre' as const,
       resolveId(id, importer) {
         const d = debug.sub(`vite-plugin:internal-import-alias`)
 
@@ -133,11 +121,20 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
         return to
       },
     },
+    json,
+    VitePluginReactiveData.create({
+      moduleId: `virtual:polen/project/data/navbar`,
+      data: navbarData.value,
+      codec: superjson,
+      name: `polen-navbar`,
+      moduleType: 'jsonsuper',
+    }),
+    ...Pages({
+      config,
+      navbarData,
+    }),
     {
       name: `polen:core`,
-      configureServer(server) {
-        viteDevServer = server
-      },
       config(_, { command }) {
         // isServing = command === `serve`
         return {
@@ -187,81 +184,15 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
           identifier: viProjectData,
           async loader() {
             _debug(`loadingViProjectDataVirtualModule`)
-            // todo: parallel
             const schema = await readSchema()
 
-            // 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)
-
-            const siteNavigationItems: SiteNavigationItem[] = []
-
-            //
-            // ━━ Build Navbar
-            //
-
-            // 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)
-                  siteNavigationItems.push({
-                    pathExp: pathExp.startsWith('/') ? pathExp.slice(1) : 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)
-                siteNavigationItems.push({
-                  pathExp: pathExp.startsWith('/') ? pathExp.slice(1) : pathExp,
-                  title,
-                })
-              }
-            }
-
             // ━ Schema presence causes adding some navbar items
+            const schemaNavbar = navbarData.get('schema')
+            schemaNavbar.length = 0 // Clear existing
             if (schema) {
-              siteNavigationItems.push({ pathExp: `reference`, title: `Reference` })
+              schemaNavbar.push({ pathExp: `reference`, title: `Reference` })
               if (schema.versions.length > 1) {
-                siteNavigationItems.push({ pathExp: `changelog`, title: `Changelog` })
-              }
-            }
-
-            //
-            // ━━ Build Sidebar
-            //
-
-            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
+                schemaNavbar.push({ pathExp: `changelog`, title: `Changelog` })
               }
             }
 
@@ -271,10 +202,7 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
 
             const projectData: ProjectData = {
               schema,
-              siteNavigationItems,
-              sidebarIndex,
               faviconPath: `/logo.svg`,
-              pagesScanResult: pagesScanResult,
               paths: config.paths.project,
               server: {
                 static: {
@@ -288,14 +216,8 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
               },
             }
 
-            const projectDataCode = jsesc(superjson.stringify(projectData))
-            const content = `
-            import { superjson } from '#singletons/superjson'
-
-            export const PROJECT_DATA = superjson.parse('${projectDataCode}')
-          `
-
-            return content
+            // Return just the JSON string - let the JSON plugin handle the transformation
+            return superjson.stringify(projectData)
           },
         },
       ),

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

@@ -0,0 +1,332 @@
+import type { Config } from '#api/config/index'
+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 { Tree } from '#lib/tree/index'
+import { debug } from '#singletons/debug'
+import { superjson } from '#singletons/superjson'
+import mdx from '@mdx-js/rollup'
+import { Path, Str } from '@wollybeard/kit'
+import remarkGfm from 'remark-gfm'
+
+const _debug = debug.sub(`vite-plugin-pages`)
+
+export const viProjectPages = polenVirtual([`project`, `pages.jsx`], { allowPluginProcessing: true })
+export const viProjectPagesData = polenVirtual([`project`, `data`, 'pages.jsonsuper'], { allowPluginProcessing: true })
+
+export interface PagesTreePluginOptions {
+  config: Config.Config
+  navbarData?: NavbarDataRegistry
+  onPagesChange?: (pages: FileRouter.ScanResult) => void
+  onTreeChange?: (tree: FileRouter.RouteTreeNode) => void
+}
+
+export interface ProjectDataPages {
+  sidebarIndex: SidebarIndex
+  pagesScanResult: FileRouter.ScanResult
+}
+
+export interface SidebarIndex {
+  [pathExpression: string]: FileRouter.Sidebar.Sidebar
+}
+
+/**
+ * Pages plugin with tree support
+ */
+export const Pages = ({
+  config,
+  navbarData,
+  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 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 isPageFile = (file: string) => {
+    return (file.endsWith(`.md`) || file.endsWith(`.mdx`))
+      && file.includes(config.paths.project.absolute.pages)
+  }
+
+  const generatePagesModule = (pagesScanResult: FileRouter.ScanResult): string => {
+    const $ = {
+      pages: `pages`,
+    }
+
+    const s = Str.Builder()
+    s`export const ${$.pages} = []`
+
+    // Generate imports and route objects
+    for (const route of pagesScanResult.routes) {
+      const filePathExp = Path.format(route.file.path.absolute)
+      const pathExp = FileRouter.routeToPathExpression(route)
+      const ident = Str.Case.camel(`page ` + Str.titlizeSlug(pathExp))
+
+      s`
+        import ${ident} from '${filePathExp}'
+
+        ${$.pages}.push({
+          path: '${pathExp}',
+          Component: ${ident}
+        })
+      `
+    }
+
+    return s.render()
+  }
+
+  return [
+    // Plugin 1: MDX Processing
+    {
+      enforce: `pre` as const,
+      ...mdx({
+        jsxImportSource: `polen/react`,
+        remarkPlugins: [remarkGfm],
+      }),
+    },
+
+    // Plugin 2: Pages Management
+    {
+      name: `polen:pages`,
+
+      // Dev server configuration
+      configureServer(server) {
+        // Add pages directory to watcher
+        _debug(`configureServer: watch pages directory`, config.paths.project.absolute.pages)
+        server.watcher.add(config.paths.project.absolute.pages)
+      },
+
+      // Hot update handling
+      async handleHotUpdate({ file, server, modules }) {
+        _debug(`handleHotUpdate`, file)
+        if (!isPageFile(file)) return
+
+        _debug(`Page file changed:`, file)
+
+        // Check if this is a content-only change to an existing page
+        const oldPages = pagesCache
+
+        // Clear cache and rescan
+        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`)
+          }
+
+          // Notify about changes
+          if (onPagesChange) {
+            reportDiagnostics(newPages.diagnostics)
+            onPagesChange(newPages)
+          }
+
+          if (onTreeChange) {
+            const tree = await scanTree()
+            onTreeChange(tree)
+            currentTreeData = tree
+          }
+
+          // 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 === viProjectPagesData.id) {
+          return viProjectPagesData.resolved
+        }
+      },
+      load: {
+        // filter: {
+        //   id: viProjectPagesData.resolved,
+        // },
+        async handler(id) {
+          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
+
+            // 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({
+                    pathExp: pathExp.startsWith('/') ? pathExp.slice(1) : 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({
+                  pathExp: pathExp.startsWith('/') ? pathExp.slice(1) : pathExp,
+                  title,
+                })
+              }
+            }
+          }
+
+          //
+          // ━━ Build Sidebar
+          //
+
+          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 projectDataPages: ProjectDataPages = {
+            sidebarIndex,
+            pagesScanResult: pagesScanResult,
+          }
+
+          // Return just the JSON string - let the JSON plugin handle the transformation
+          return superjson.stringify(projectDataPages)
+        },
+      },
+    },
+    // Plugin 4: Virtual Module for Pages Routes
+    {
+      name: 'polen:pages:routes',
+      resolveId(id) {
+        if (id === viProjectPages.id) {
+          return viProjectPages.resolved
+        }
+      },
+      load: {
+        // filter: {
+        //   id: viProjectPages.resolved,
+        // },
+        handler: async (id) => {
+          if (id !== viProjectPages.resolved) return
+
+          _debug(`Loading viProjectPages virtual module`)
+
+          // Ensure we have pages data
+          if (!currentPagesData) {
+            currentPagesData = await scanPages()
+            reportDiagnostics(currentPagesData.diagnostics)
+          }
+
+          // Generate the module code
+          return {
+            code: generatePagesModule(currentPagesData),
+            moduleType: 'js',
+          }
+        },
+      },
+    },
+  ]
+}
+
+// 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,11 +1,11 @@
 import type { Config } from '#api/config/index'
+import { reportError } from '#api/server/report-error'
 import type { Hono } from '#dep/hono/index'
 import type { Vite } from '#dep/vite/index'
+import { ResponseInternalServerError } from '#lib/kit-temp'
 import { debug } from '#singletons/debug'
 import * as HonoNodeServer from '@hono/node-server'
-import { Err, Http } from '@wollybeard/kit'
-import cleanStack from 'clean-stack'
-import { ErrorParser } from 'youch-core'
+import { Err } from '@wollybeard/kit'
 
 type App = Hono.Hono
 
@@ -28,25 +28,7 @@ export const Serve = (
         if (Err.is(error)) {
           // ━ Clean Stack Trace
           server.ssrFixStacktrace(error)
-          const stack = cleanStack(error.stack, {
-            pathFilter: (path) => {
-              return !path.match(/.*rolldown-vite.*/)
-            },
-            basePath: config.paths.project.rootDir,
-            // pretty: true,
-          })
-          error.stack = stack
-          // ━ Log Error
-          Err.log(error)
-          const parser = new ErrorParser()
-          const parsedError = await parser.parse(error)
-          const snippet = parsedError.frames[0]?.source?.map(line => {
-            return line.lineNumber.toString().padStart(4, ' ') + `: ` + line.chunk
-          }).join(`\n`)
-          if (snippet) {
-            console.log('-----------------------------')
-            console.log(snippet)
-          }
+          reportError(error)
           return error
         }
         throw error
@@ -97,10 +79,7 @@ export const Serve = (
             const app = await appPromise
             if (Err.is(app)) {
               // Err.log(app)
-              return new Response(null, {
-                status: Http.Status.InternalServerError.code,
-                statusText: Http.Status.InternalServerError.description,
-              })
+              return ResponseInternalServerError()
             }
             const response = await app.fetch(request, { viteDevServer: server })
             return response

package/src/cli/commands/dev.ts

@@ -8,6 +8,7 @@ import { Err, Path } from '@wollybeard/kit'
 import { z } from 'zod'
 
 const args = Command.create()
+  .parameter(`--debug -d`, z.boolean().optional())
   .parameter(
     `--project -p`,
     // @ts-expect-error
@@ -28,7 +29,14 @@ const args = Command.create()
 
 const dir = ensureOptionalAbsoluteWithCwd(args.project) as string
 
-const viteUserConfig = await Api.ConfigResolver.fromFile({ dir })
+const viteUserConfig = await Api.ConfigResolver.fromFile({
+  dir,
+  overrides: {
+    advanced: {
+      debug: args.debug,
+    },
+  },
+})
 
 const viteDevServer = await Err.tryCatch(() => Vite.createServer(viteUserConfig))