polen 0.8.0-next.9 → 0.8.1-next.1

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

@@ -1,129 +1,156 @@
-import type { Config } from '#api/config/index.js'
-import type { ReactRouter } from '#dep/react-router/index.js'
-import type { Vite } from '#dep/vite/index.js'
-import { FileRouter } from '#lib/file-router/index.js'
-import { ViteVirtual } from '#lib/vite-virtual/index.js'
-import mdx from '@mdx-js/rollup'
-import { Cache, Idx, Json, Path, Str } from '@wollybeard/kit'
+import type { Config } from '#api/config/index'
+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 { ViteVirtual } from '#lib/vite-virtual/index'
+import { debug } from '#singletons/debug'
+import { Json, Str } from '@wollybeard/kit'
 import jsesc from 'jsesc'
-import remarkGfm from 'remark-gfm'
-import type {
-  ProjectData,
-  Sidebar,
-  SidebarIndex,
-  SidebarNav,
-  SidebarSection,
-  SiteNavigationItem,
-} from '../../../project-data.js'
-import { superjson } from '../../../singletons/superjson.js'
-import { SchemaAugmentation } from '../../schema-augmentation/index.js'
-import { Schema } from '../../schema/index.js'
-import { logger } from '../logger.js'
-import { vi as pvi } from '../vi.js'
+import type { ProjectData, SidebarIndex, SiteNavigationItem } from '../../../project-data.ts'
+import { superjson } from '../../../singletons/superjson.ts'
+import { SchemaAugmentation } from '../../schema-augmentation/index.ts'
+import { Schema } from '../../schema/index.ts'
+import { logger } from '../logger.ts'
+import { polenVirtual } from '../vi.ts'
+import { createPagesTreePlugin, getRouteTree } from './pages-tree.ts'
 
-const viTemplateVariables = pvi([`template`, `variables`])
-const viTemplateSchemaAugmentations = pvi([`template`, `schema-augmentations`])
-const viProjectData = pvi([`project`, `data`])
+const _debug = debug.sub(`vite-plugin-core`)
+
+const viTemplateVariables = polenVirtual([`template`, `variables`])
+const viTemplateSchemaAugmentations = polenVirtual([`template`, `schema-augmentations`])
+const viProjectData = polenVirtual([`project`, `data`])
 
-const viProjectPages = pvi([`project`, `pages.jsx`], { allowPluginProcessing: true })
 export interface ProjectPagesModule {
   pages: ReactRouter.RouteObject[]
 }
 
 export const Core = (config: Config.Config): Vite.PluginOption[] => {
-  const scanPageRoutes = Cache.memoize(async () =>
-    await FileRouter.scan({
-      dir: config.paths.project.absolute.pages,
-      glob: `**/*.{md,mdx}`,
-    })
-  )
-  const readSchema = Cache.memoize(async () => {
-    const schema = await Schema.readOrThrow({
-      ...config.schema,
-      projectRoot: config.paths.project.rootDir,
-    })
-    // todo: augmentations scoped to a version
-    schema?.versions.forEach(version => {
-      SchemaAugmentation.apply(version.after, config.schemaAugmentations)
-    })
-    return schema
-  })
+  // 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
+
+  const readSchema = async () => {
+    if (schemaCache === null) {
+      const schema = await Schema.readOrThrow({
+        ...config.schema,
+        projectRoot: config.paths.project.rootDir,
+      })
+      // todo: augmentations scoped to a version
+      schema?.versions.forEach(version => {
+        SchemaAugmentation.apply(version.after, config.schemaAugmentations)
+      })
+      schemaCache = schema
+    }
+    return schemaCache
+  }
+
+  const plugins: Vite.Plugin[] = []
+
+  // 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.
+  //
+  // If we manage to get the mdx vite plugin that defers JSX transform to Rolldown then we can remove this!
+  //
+  if (config.advanced.isSelfContainedMode) {
+    plugins.push(VitePluginSelfContainedMode({
+      projectDirPathExp: config.paths.project.rootDir,
+    }))
+  }
 
   return [
-    // @see https://mdxjs.com/docs/getting-started/#vite
-    {
-      enforce: `pre`,
-      // TODO: Use inline vite-plugin-mdx once transform hooks can change module type
-      // @see https://github.com/rolldown/rolldown/issues/4004
-      ...mdx({
-        jsxImportSource: `polen/react`,
-        remarkPlugins: [
-          remarkGfm,
-        ],
-      }),
-    },
-    // TODO: We can remove, mdx subsumes this
-    // TODO: First we need to investigate how e can make our api singleton Markdown used by MDX.
-    // If we cannot, then we might want to ditch MDX instead and use our lower level solution here.
-    // It depends in part on how complex our Markdown singleton gets.
-    // {
-    //   name: `polen:markdown`,
-    //   enforce: `pre`,
-    //   resolveId(id) {
-    //     if (id.endsWith(`.md`)) {
-    //       return id
-    //     }
-    //     return null
-    //   },
-    //   async load(id) {
-    //     if (id.endsWith(`.md`)) {
-    //       const markdownString = await Fs.read(id)
-    //       if (!markdownString) return null
-    //       const htmlString = await Markdown.parse(markdownString)
+    ...plugins,
+
+    // Self-contained pages plugin
+    ...createPagesTreePlugin({
+      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.
+     *
+     * Useful for the following cases:
+     *
+     * 1. Main: Using Polen CLI from the source code against some local example/development project.
+     *
+     * 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)
+     */
 
-    //       const code = `export default ${JSON.stringify(htmlString)}`
-    //       return code
-    //     }
-    //     return null
-    //   },
-    // },
     {
-      name: `polen:core:alias`,
+      name: `polen:internal-import-alias`,
       resolveId(id, importer) {
-        if (!(importer && pvi.includes(importer))) return null
+        const d = debug.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 })
 
         const find = Str.pattern<{ groups: [`path`] }>(/^#(?<path>.+)/)
         const match = Str.match(id, find)
         if (!match) return null
 
-        const replacement = `${config.paths.framework.sourceDir}/${match.groups.path}`
-        return replacement
+        const to = `${config.paths.framework.sourceDir}/${match.groups.path}${config.paths.framework.sourceExtension}`
+        d(`did resolve`, { from: id, to })
+
+        return to
       },
     },
     {
       name: `polen:core`,
+      configureServer(server) {
+        viteDevServer = server
+      },
       config(_, { command }) {
         // isServing = command === `serve`
         return {
           root: config.paths.framework.rootDir,
           define: {
-            __BUILDING__: Json.codec.serialize(command === `build`),
-            __SERVING__: Json.codec.serialize(command === `serve`),
-            __COMMAND__: Json.codec.serialize(command),
-            __BUILD_ARCHITECTURE__: Json.codec.serialize(config.build.architecture),
-            __BUILD_ARCHITECTURE_SSG__: Json.codec.serialize(config.build.architecture === `ssg`),
-          },
-          server: {
-            port: 3000,
+            __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`),
           },
           customLogger: logger,
           esbuild: false,
-          // oxc: {
-          //   jsx: {
-          //     runtime: 'automatic',
-          //     importSource: 'react',
-          //   },
-          // },
           build: {
             target: `esnext`,
             assetsDir: config.paths.project.relative.build.relative.assets,
@@ -159,9 +186,27 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
         {
           identifier: viProjectData,
           async loader() {
+            _debug(`loadingViProjectDataVirtualModule`)
             // todo: parallel
             const schema = await readSchema()
-            const pagesScanResult = await scanPageRoutes()
+
+            // 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[] = []
 
@@ -169,37 +214,35 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
             // ━━ Build Navbar
             //
 
-            // ━ Top pages become navigation items
-            const topPages = pagesScanResult.routes.filter(FileRouter.routeIsTopLevel)
-
-            for (const page of topPages) {
-              const path = FileRouter.routeToPathExpression(page)
-              const title = Str.titlizeSlug(path)
-              siteNavigationItems.push({ pathExp: path, title })
-            }
-
-            // ━ Top directories become navigation items
-            const topDirsPaths = pagesScanResult.routes
-              .filter(FileRouter.routeIsSubLevel)
-              // todo: kit, slice that understands non-empty
-              // Arr.slice(route.path.segments, 1)
-              .map(route => [route.logical.path[0]])
-
-            for (const dir of topDirsPaths) {
-              const pathExp = FileRouter.pathToExpression(dir)
-              const title = Str.titlizeSlug(pathExp)
-              // todo: this should never happen, if it does, swarn user
-              // Only add if not already added as a top page
-              if (!siteNavigationItems.some(item => item.pathExp === pathExp)) {
-                siteNavigationItems.push({ pathExp: pathExp, title })
+            // 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
             if (schema) {
-              siteNavigationItems.push({ pathExp: `/reference`, title: `Reference` })
+              siteNavigationItems.push({ pathExp: `reference`, title: `Reference` })
               if (schema.versions.length > 1) {
-                siteNavigationItems.push({ pathExp: `/changelog`, title: `Changelog` })
+                siteNavigationItems.push({ pathExp: `changelog`, title: `Changelog` })
               }
             }
 
@@ -209,9 +252,17 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
 
             const sidebarIndex: SidebarIndex = {}
 
-            for (const dirPath of topDirsPaths) {
-              const childPages = pagesScanResult.routes.filter(page => FileRouter.routeIsSubOf(page, dirPath))
-              sidebarIndex[FileRouter.pathToExpression(dirPath)] = buildSidebar(childPages, dirPath)
+            // 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
+              }
             }
 
             //
@@ -239,7 +290,7 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
 
             const projectDataCode = jsesc(superjson.stringify(projectData))
             const content = `
-            import { superjson } from '#singletons/superjson.js'
+            import { superjson } from '#singletons/superjson'
 
             export const PROJECT_DATA = superjson.parse('${projectDataCode}')
           `
@@ -247,126 +298,7 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
             return content
           },
         },
-        {
-          identifier: viProjectPages,
-          async loader() {
-            const pagesScanResult = await scanPageRoutes()
-
-            const $ = {
-              pages: `pages`,
-            }
-
-            const s = Str.Builder()
-            s`export const ${$.pages} = []`
-
-            // todo: kit fs should accept parsed file paths
-            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()
-          },
-        },
       ),
     },
   ]
 }
-
-/**
- * Helper function to build sidebar items recursively
- */
-const buildSidebar = (pages: FileRouter.Route[], basePath: FileRouter.Path): Sidebar => {
-  const navs: SidebarNav[] = []
-  const sections = Idx.create<SidebarSection, string>({ key: (item) => item.pathExp })
-
-  // Items
-  for (const page of pages) {
-    const pageRelative = FileRouter.makeRelativeUnsafe(page, basePath)
-
-    if (FileRouter.routeIsRootLevel(pageRelative)) {
-      continue
-    }
-
-    if (FileRouter.routeIsTopLevel(pageRelative)) {
-      // Section (index)
-      if (FileRouter.routeIsFromIndexFile(pageRelative)) {
-        const sectionPath = page.logical.path
-        const sectionPathExp = FileRouter.pathToExpression(sectionPath)
-
-        let section: SidebarSection | undefined
-        section = sections.getAt(sectionPathExp)
-
-        if (!section) {
-          const sectionTitle = Str.titlizeSlug(FileRouter.pathToExpression(pageRelative.logical.path))
-          section = {
-            type: `SidebarSection`,
-            title: sectionTitle,
-            pathExp: sectionPathExp,
-            isNavToo: false,
-            navs: [],
-          }
-
-          sections.set(section)
-        }
-        section.isNavToo = true
-        continue
-      }
-
-      // Nav
-      navs.push(pageToSidebarNav(page, basePath))
-      continue
-    }
-
-    // Section (sub-page)
-    if (FileRouter.routeIsSubLevel(pageRelative)) {
-      const sectionRelativePath = [pageRelative.logical.path[0]]
-      const sectionPath = [...basePath, ...sectionRelativePath]
-      const sectionPathExp = FileRouter.pathToExpression(sectionPath)
-
-      let section: SidebarSection | undefined
-      section = sections.getAt(sectionPathExp)
-
-      if (!section) {
-        const sectionTitle = Str.titlizeSlug(FileRouter.pathToExpression(sectionRelativePath))
-        section = {
-          type: `SidebarSection`,
-          title: sectionTitle,
-          pathExp: sectionPathExp,
-          isNavToo: false,
-          navs: [],
-        }
-        sections.set(section)
-      }
-      section.navs.push(pageToSidebarNav(page, sectionPath))
-    }
-  }
-
-  const items = [...navs, ...sections.toArray()]
-
-  return {
-    items,
-  }
-}
-
-const pageToSidebarNav = (page: FileRouter.Route, basePath: FileRouter.Path): SidebarNav => {
-  const pagePathExp = FileRouter.routeToPathExpression(page)
-  const pageRelative = FileRouter.makeRelativeUnsafe(page, basePath)
-  const pageRelativePathExp = FileRouter.routeToPathExpression(pageRelative)
-
-  return {
-    type: `SidebarItem`,
-    pathExp: pagePathExp,
-    title: Str.titlizeSlug(pageRelativePathExp),
-  }
-}

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

@@ -1,12 +1,12 @@
-import type { Config } from '#api/config/index.js'
-import type { Vite } from '#dep/vite/index.js'
+import type { Config } from '#api/config/index'
+import type { Vite } from '#dep/vite/index'
 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 { Build } from './build.js'
-import { Core } from './core.js'
-import { Serve } from './serve.js'
+import { Build } from './build.ts'
+import { Core } from './core.ts'
+import { Serve } from './serve.ts'
 
 export const Main = (
   config: Config.Config,