polen 0.10.0-next.9 → 0.10.0

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

@@ -1,33 +1,30 @@
 import type { Config } from '#api/config/index'
-import { NavbarData } from '#api/vite/data/navbar'
+import { Content } from '#api/content/$'
+import { createNavbar } from '#api/content/navbar'
 import { VitePluginSelfContainedMode } from '#cli/_/self-contained-mode'
 import type { ReactRouter } from '#dep/react-router/index'
 import type { Vite } from '#dep/vite/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 { debugPolen } from '#singletons/debug'
 import { superjson } from '#singletons/superjson'
 import { Json, Str } from '@wollybeard/kit'
-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 { Pages } from './pages.ts'
-
-const debug = debugPolen.sub(`vite-plugin-core`)
+import type { ProjectData } from '../../../project-data.js'
+import { SchemaAugmentation } from '../../schema-augmentation/index.js'
+import { Schema } from '../../schema/index.js'
+import { createLogger } from '../logger.js'
+import { polenVirtual } from '../vi.js'
+import { Pages } from './pages.js'
 
 const viTemplateVariables = polenVirtual([`template`, `variables`])
 const viTemplateSchemaAugmentations = polenVirtual([`template`, `schema-augmentations`])
-const viProjectData = polenVirtual([`project`, `data.jsonsuper`], { allowPluginProcessing: true })
+export const viProjectData = polenVirtual([`project`, `data.jsonsuper`], { allowPluginProcessing: true })
 
-export interface ProjectPagesModule {
-  pages: ReactRouter.RouteObject[]
+export interface ProjectRoutesModule {
+  routes: ReactRouter.RouteObject[]
 }
 
 export const Core = (config: Config.Config): Vite.PluginOption[] => {
-  // Schema cache management
   let schemaCache: Awaited<ReturnType<typeof Schema.readOrThrow>> | null = null
 
   const readSchema = async () => {
@@ -46,7 +43,6 @@ 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.
@@ -59,14 +55,14 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
     }))
   }
 
-  const json = VitePluginJson.create({
+  const jsonsuper = VitePluginJson.create({
     codec: {
       validate: superjson,
-      importPath: import.meta.resolve('#singletons/superjson'),
-      importExport: 'superjson',
+      importPath: import.meta.resolve(`#singletons/superjson`),
+      importExport: `superjson`,
     },
     filter: {
-      moduleTypes: ['jsonsuper'],
+      moduleTypes: [`jsonsuper`],
     },
   })
 
@@ -85,66 +81,57 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
      */
     {
       name: `polen:internal-import-alias`,
-      enforce: 'pre' as const,
+      enforce: `pre` as const,
       resolveId(id, importer) {
-        const d = debugPolen.sub(`vite-plugin:internal-import-alias`)
+        // const debug = debugPolen.sub(`vite-plugin:internal-import-alias`)
 
         const isPolenImporter = Boolean(
           importer
             && (
               importer.startsWith(config.paths.framework.sourceDir)
               || polenVirtual.includes(importer)
-              /*
-                TODO: can we make index.html be in the source dir?
-                Example case:
-
-                POLEN   VITE_PLUGIN_INTERNAL_IMPORT_ALIAS   CHECK  {
-                  id: '#singletons/superjson',
-                  importer: '/Users/jasonkuhrt/projects/the-guild-org/polen/index.html',
-                  isPolenImporter: false
-                }
-              */
               || (importer.startsWith(config.paths.framework.rootDir) && importer.endsWith(`index.html`))
             ),
         )
 
         if (!isPolenImporter) return null
-        d(`check candidate`, { id, importer, isPolenImporter })
+        // debug(`check candidate`, { id, importer, isPolenImporter })
 
         const find = Str.pattern<{ groups: [`path`] }>(/^#(?<path>.+)/)
         const match = Str.match(id, find)
         if (!match) return null
 
         const to = `${config.paths.framework.sourceDir}/${match.groups.path}${config.paths.framework.sourceExtension}`
-        d(`did resolve`, { from: id, to })
+        // debug(`did resolve`, { from: id, to })
 
         return to
       },
     },
-    json,
-    VitePluginReactiveData.create({
-      moduleId: `virtual:polen/project/data/navbar`,
-      data: navbarData.value,
-      codec: superjson,
-      name: `polen-navbar`,
-      moduleType: 'jsonsuper',
-    }),
+    jsonsuper,
     ...Pages({
       config,
-      navbarData,
     }),
     {
       name: `polen:core`,
       config(_, { command }) {
-        // isServing = command === `serve`
         return {
           root: config.paths.framework.rootDir,
+          // todo
+          // future: {
+          //   removePluginHookHandleHotUpdate: 'warn',
+          //   removePluginHookSsrArgument: 'warn',
+          //   removeServerModuleGraph: 'warn',
+          //   removeServerHot: 'warn',
+          //   removeServerTransformRequest: 'warn',
+          //   removeSsrLoadModule: 'warn',
+          // },
           define: {
             __BUILDING__: Json.encode(command === `build`),
             __SERVING__: Json.encode(command === `serve`),
             __COMMAND__: Json.encode(command),
             __BUILD_ARCHITECTURE__: Json.encode(config.build.architecture),
             __BUILD_ARCHITECTURE_SSG__: Json.encode(config.build.architecture === `ssg`),
+            'process.env.NODE_ENV': Json.encode(config.advanced.debug ? 'development' : 'production'),
           },
           customLogger: createLogger(config),
           esbuild: false,
@@ -183,23 +170,35 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
         {
           identifier: viProjectData,
           async loader() {
-            debug(`loadingViProjectDataVirtualModule`)
+            const debug = debugPolen.sub(`module-project-data`)
+
+            debug(`load`, { id: viProjectData.id })
+
             const schema = await readSchema()
 
+            const navbar = []
+
             // ━ Schema presence causes adding some navbar items
-            const schemaNavbar = navbarData.get('schema')
-            schemaNavbar.length = 0 // Clear existing
             if (schema) {
               // 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.
-              schemaNavbar.push({ pathExp: `/reference`, title: `Reference` })
+              navbar.push({ pathExp: `/reference`, title: `Reference` })
               if (schema.versions.length > 1) {
-                schemaNavbar.push({ pathExp: `/changelog`, title: `Changelog` })
+                navbar.push({ pathExp: `/changelog`, title: `Changelog` })
               }
             }
 
+            //
+            // ━━ Scan pages and add to navbar
+            //
+
+            const pagesDir = config.paths.project.absolute.pages
+            const scanResult = await Content.scan({ dir: pagesDir })
+            const data = createNavbar(scanResult.list)
+            navbar.push(...data)
+
             //
             // ━━ Put It All together
             //
@@ -208,7 +207,9 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
               schema,
               basePath: config.build.base,
               paths: config.paths.project,
+              navbar, // Complete navbar with schema and pages
               server: {
+                port: config.server.port,
                 static: {
                   // todo
                   // relative from CWD of process that boots n1ode server
@@ -219,6 +220,7 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
                     + `/*`,
                 },
               },
+              warnings: config.warnings,
             }
 
             // Return just the JSON string - let the JSON plugin handle the transformation

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

@@ -1,13 +1,14 @@
 import type { Config } from '#api/config/index'
 import type { Vite } from '#dep/vite/index'
+import { vitePluginSsrCss } from '@hiogawa/vite-plugin-ssr-css'
 import ViteReact from '@vitejs/plugin-react-oxc'
-// import { Arr, Path } from '@wollybeard/kit'
-// import Inspect from 'vite-plugin-inspect'
-// import Restart from 'vite-plugin-restart'
-import { Branding } from './branding/index.ts'
-import { Build } from './build.ts'
-import { Core } from './core.ts'
-import { Serve } from './serve.ts'
+import { Arr, Path } from '@wollybeard/kit'
+import Inspect from 'vite-plugin-inspect'
+import Restart from 'vite-plugin-restart'
+import { Branding } from './branding.js'
+import { Build } from './build.js'
+import { Core } from './core.js'
+import { Serve } from './serve.js'
 
 export const Main = (
   config: Config.Config,
@@ -15,26 +16,28 @@ export const Main = (
   const plugins: Vite.PluginOption = []
 
   // Optional Plugins based on config
-  // TODO: Re-enable when compatible with Rolldown
 
-  // if (config.advanced.explorer) {
-  //   const outputDir = Path.join(config.paths.project.rootDir, `.bundle-explorer`)
-  //   const plugin = Inspect({
-  //     build: true,
-  //     outputDir,
-  //   })
-  //   plugins.push(plugin)
-  // }
+  if (config.advanced.explorer) {
+    const outputDir = Path.join(config.paths.project.rootDir, `.bundle-explorer`)
+    const plugin = Inspect({
+      build: true,
+      outputDir,
+    })
+    plugins.push(plugin)
+  }
 
-  // if (Arr.isntEmpty(config.watch.also)) {
-  //   const plugin = Restart({
-  //     restart: config.watch.also,
-  //   })
-  //   plugins.push(plugin)
-  // }
+  if (Arr.isntEmpty(config.watch.also)) {
+    const plugin = Restart({
+      restart: config.watch.also,
+    })
+    plugins.push(plugin)
+  }
 
   plugins.push(
     ViteReact(),
+    vitePluginSsrCss({
+      entries: [`/${config.paths.framework.template.relative.client.entrypoint}`],
+    }),
     Branding(config),
     Core(config),
     Serve(config),

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

@@ -1,7 +1,5 @@
 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'
@@ -9,23 +7,24 @@ import { FileRouter } from '#lib/file-router/index'
 import { debugPolen } 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 { recmaCodeHike, remarkCodeHike } from 'codehike/mdx'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
+import { viProjectData } from './core.js'
 
-const debug = debugPolen.sub(`vite-plugin-pages`)
+const debug = debugPolen.sub(`vite-pages`)
 
-export const viProjectPages = polenVirtual([`project`, `pages.jsx`], { allowPluginProcessing: true })
-export const viProjectPagesData = polenVirtual([`project`, `data`, 'pages.jsonsuper'], { allowPluginProcessing: true })
+export const viProjectRoutes = polenVirtual([`project`, `routes.jsx`], { allowPluginProcessing: true })
+export const viProjectPagesCatalog = polenVirtual([`project`, `data`, `pages-catalog.jsonsuper`], {
+  allowPluginProcessing: true,
+})
 
 export interface Options {
   config: Config.Config
-  navbarData?: NavbarDataRegistry
-  onChange?: (scanResult: Content.ScanResult) => void
 }
 
-export interface ProjectDataPages {
+export interface ProjectPagesCatalog {
   sidebarIndex: Content.SidebarIndex
   pages: Content.Page[]
 }
@@ -35,8 +34,6 @@ export interface ProjectDataPages {
  */
 export const Pages = ({
   config,
-  navbarData,
-  onChange,
 }: Options): Vite.Plugin[] => {
   const scanPages = Cache.memoize(debug.trace(async function scanPages() {
     const result = await Content.scan({
@@ -46,18 +43,33 @@ export const Pages = ({
     return result
   }))
 
-  const isPageFile = (file: string) => {
-    return (file.endsWith(`.md`) || file.endsWith(`.mdx`))
-      && file.includes(config.paths.project.absolute.pages)
+  const invalidateVirtualModules = (server: Vite.ViteDevServer) => {
+    const routesModule = server.moduleGraph.getModuleById(viProjectRoutes.id)
+    if (routesModule) {
+      server.moduleGraph.invalidateModule(routesModule)
+      debug(`Invalidated routes virtual module`)
+    }
+
+    const catalogModule = server.moduleGraph.getModuleById(viProjectPagesCatalog.id)
+    if (catalogModule) {
+      server.moduleGraph.invalidateModule(catalogModule)
+      debug(`Invalidated pages catalog virtual module`)
+    }
+
+    const projectDataModule = server.moduleGraph.getModuleById(viProjectData.id)
+    if (projectDataModule) {
+      server.moduleGraph.invalidateModule(projectDataModule)
+      debug(`Invalidated project data virtual module`)
+    }
   }
 
-  const generatePagesModule = (pages: Content.Page[]): string => {
+  const generateRoutesModule = (pages: Content.Page[]): string => {
     const $ = {
-      pages: `pages`,
+      routes: `routes`,
     }
 
     const s = Str.Builder()
-    s`export const ${$.pages} = []`
+    s`export const ${$.routes} = []`
 
     // Generate imports and route objects
     for (const { route, metadata } of pages) {
@@ -71,7 +83,7 @@ export const Pages = ({
       s`
         import ${$$.Component} from '${filePathExp}'
 
-        ${$$.pages}.push({
+        ${$$.routes}.push({
           path: '${pathExp}',
           Component: ${$$.Component},
           metadata: ${JSON.stringify(metadata)}
@@ -82,33 +94,30 @@ export const Pages = ({
     return s.render()
   }
 
+  const chConfig = {
+    components: { code: 'CodeBlock' },
+    syntaxHighlighting: {
+      theme: `github-light`,
+    },
+  }
+
   return [
     // Plugin 1: MDX Processing
     {
-      enforce: `pre` as const,
+      enforce: `pre`,
       ...mdx({
         jsxImportSource: `polen/react`,
+        providerImportSource: `polen/mdx`,
         remarkPlugins: [
           // Parse frontmatter blocks so they're removed from content
           remarkFrontmatter,
           remarkGfm,
+          [remarkCodeHike, chConfig],
         ],
-        rehypePlugins: [
-          [
-            rehypeShiki,
-            {
-              themes: {
-                light: `github-light`,
-                dark: `tokyo-night`,
-              },
-              defaultColor: false,
-              cssVariablePrefix: `--shiki-`,
-              transformers: [
-                // Line numbers will be handled via CSS
-              ],
-            },
-          ],
+        recmaPlugins: [
+          [recmaCodeHike, chConfig],
         ],
+        rehypePlugins: [],
       }),
     },
 
@@ -121,12 +130,35 @@ export const Pages = ({
         // Add pages directory to watcher
         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
+      // Hot update handling for existing files
       async handleHotUpdate({ file, server, modules }) {
         debug(`handleHotUpdate`, file)
-        if (!isPageFile(file)) return
+        if (!Content.isPageFile(file, config.paths.project.absolute.pages)) return
 
         debug(`Page file changed:`, file)
 
@@ -137,13 +169,16 @@ export const Pages = ({
         scanPages.clear()
         const newScanResult = await scanPages()
 
-        // Check if page structure changed (added/removed pages)
-        const isJustContentChange = oldPages && !Arr.equalShallowly(
+        // 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 (isJustContentChange) {
+        if (!pageStructureChanged) {
           debug(`Page content changed, allowing HMR`)
           // Let default HMR handle the MDX file change
           return modules
@@ -155,54 +190,26 @@ export const Pages = ({
 
         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 (onChange) {
-          reportDiagnostics(newScanResult.diagnostics)
-          onChange(newScanResult)
-        }
-
-        // Trigger full reload for structure changes
+        // Invalidate virtual modules and trigger reload
+        invalidateVirtualModules(server)
+        reportDiagnostics(newScanResult.diagnostics)
         server.ws.send({ type: `full-reload` })
         return []
       },
       resolveId(id) {
-        if (id === viProjectPagesData.id) {
-          return viProjectPagesData.resolved
+        if (id === viProjectPagesCatalog.id) {
+          return viProjectPagesCatalog.resolved
         }
       },
       load: {
-        // filter: {
-        //   id: viProjectPagesData.resolved,
-        // },
         async handler(id) {
-          if (id !== viProjectPagesData.resolved) return
-          debug(`viProjectDataPages`)
+          if (id !== viProjectPagesCatalog.resolved) return
+          debug(`hook load`)
 
           const scanResult = await scanPages()
 
-          // Report any diagnostics
           reportDiagnostics(scanResult.diagnostics)
-          debug(`Found ${String(scanResult.list.length)} visible pages`)
-
-          //
-          // ━━ Build Navbar
-          //
-
-          // Update navbar if provided
-          if (navbarData) {
-            const navbarPages = navbarData.get('pages')
-            navbarPages.length = 0 // Clear existing
-
-            const navbarItems = createNavbar(scanResult.list)
-            navbarPages.push(...navbarItems)
-          }
+          debug(`found visible`, { count: scanResult.list.length })
 
           //
           // ━━ Build Sidebar
@@ -214,41 +221,38 @@ export const Pages = ({
           // ━━ Put It All together
           //
 
-          const projectDataPages: ProjectDataPages = {
+          const projectPagesCatalog: ProjectPagesCatalog = {
             sidebarIndex,
             pages: scanResult.list,
           }
 
           // Return just the JSON string - let the JSON plugin handle the transformation
-          return superjson.stringify(projectDataPages)
+          return superjson.stringify(projectPagesCatalog)
         },
       },
     },
-    // Plugin 3: Virtual Module for Pages Routes
+    // Plugin 3: Virtual Module for React Router Routes
     {
-      name: 'polen:pages:routes',
+      name: `polen:routes`,
       resolveId(id) {
-        if (id === viProjectPages.id) {
-          return viProjectPages.resolved
+        if (id === viProjectRoutes.id) {
+          return viProjectRoutes.resolved
         }
       },
       load: {
-        // filter: {
-        //   id: viProjectPages.resolved,
-        // },
         handler: async (id) => {
-          if (id !== viProjectPages.resolved) return
+          if (id !== viProjectRoutes.resolved) return
 
-          debug(`Loading viProjectPages virtual module`)
+          debug(`Loading viProjectRoutes virtual module`)
 
           const scanResult = await scanPages()
           reportDiagnostics(scanResult.diagnostics)
-          const code = generatePagesModule(scanResult.list)
+          const code = generateRoutesModule(scanResult.list)
 
           // Generate the module code
           return {
             code,
-            moduleType: 'js',
+            moduleType: `js`,
           }
         },
       },