polen 0.10.0-next.13 → 0.10.0-next.15

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

@@ -2,118 +2,124 @@ import type { Config } from '#api/config/index'
 import type { PolenBuildManifest } from '#api/static/manifest'
 import { Vite } from '#dep/vite/index'
 import { ViteVirtual } from '#lib/vite-virtual/index'
+import { debugPolen } from '#singletons/debug'
 import { Fs, Path } from '@wollybeard/kit'
 import packageJson from '../../../../package.json' with { type: 'json' }
-import { isKitUnusedExternalImport, isRadixModuleLevelDirective } from '../log-filters.ts'
-import { polenVirtual } from '../vi.ts'
+import { isKitUnusedExternalImport, isRadixModuleLevelDirective } from '../log-filters.js'
+import { polenVirtual } from '../vi.js'
 
 export const Build = (config: Config.Config): Vite.Plugin[] => {
+  const debug = debugPolen.sub(`vite-build`)
+  debug(`construct`)
   // let viteConfigResolved: Vite.ResolvedConfig
 
   // const outDir = Path.join(config.paths.project.rootDir, `dist`)
 
-  return [Manifest(config), BuildManifest(config), {
-    name: `polen:build-client`,
-    apply: `build`,
-    applyToEnvironment: Vite.isEnvironmentClient,
-    // HACK: For some reason the ?url import doesn't lead to a rewrite in the build.
-    // Furthermore we need to rely on the manifest to get its final name because it is
-    // generated by the client build before the server build.
-    // However, we still need the asset in development.
-    // But we cannot exclude the import in build.
-    // So this does that for us but it is really hacky.
-    // FIXME
-    // 1. Raise issue about having ?url lead to expected build path rewrite?
-    // 2. And: Move asset generation to server build?
-    // 3. And/or: Use Vite Environments API?
-    generateBundle(_, bundle, isWrite) {
-      if (isWrite) {
-        for (const chunkOrAsset of Object.values(bundle)) {
-          if (chunkOrAsset.type === `asset` && chunkOrAsset.names.includes(`entry.client.jsx`)) {
-            // eslint-disable-next-line
-            delete bundle[chunkOrAsset.fileName]
+  return [
+    Manifest(config),
+    BuildManifest(config),
+    {
+      name: `polen:build-client`,
+      apply: `build`,
+      applyToEnvironment: Vite.isEnvironmentClient,
+      // HACK: For some reason the ?url import doesn't lead to a rewrite in the build.
+      // Furthermore we need to rely on the manifest to get its final name because it is
+      // generated by the client build before the server build.
+      // However, we still need the asset in development.
+      // But we cannot exclude the import in build.
+      // So this does that for us but it is really hacky.
+      // FIXME
+      // 1. Raise issue about having ?url lead to expected build path rewrite?
+      // 2. And: Move asset generation to server build?
+      // 3. And/or: Use Vite Environments API?
+      generateBundle(_, bundle, isWrite) {
+        if (isWrite) {
+          for (const chunkOrAsset of Object.values(bundle)) {
+            if (chunkOrAsset.type === `asset` && chunkOrAsset.names.includes(`entry.client.jsx`)) {
+              delete bundle[chunkOrAsset.fileName]
+            }
           }
         }
-      }
-    },
-    onLog(_, message) {
-      if (isRadixModuleLevelDirective(message)) return
-      if (isKitUnusedExternalImport(message)) return
-    },
-    config() {
-      return {
-        environments: {
-          client: {
-            build: {
-              manifest: true,
-              rollupOptions: {
-                input: [config.paths.framework.template.client.entrypoint],
-                external: id => id.startsWith(`node:`),
-                onwarn(message) {
-                  if (isKitUnusedExternalImport(message)) return
+      },
+      onLog(_, message) {
+        if (isRadixModuleLevelDirective(message)) return
+        if (isKitUnusedExternalImport(message)) return
+      },
+      config() {
+        return {
+          environments: {
+            client: {
+              build: {
+                manifest: true,
+                rollupOptions: {
+                  input: [config.paths.framework.template.absolute.client.entrypoint],
+                  external: id => id.startsWith(`node:`),
+                  onwarn(message) {
+                    if (isKitUnusedExternalImport(message)) return
+                  },
                 },
               },
             },
           },
-        },
-      }
+        }
+      },
     },
-  }, {
-    name: `polen-ssr-build`,
-    apply: `build`,
-    applyToEnvironment: Vite.isEnvironmentSsr,
-    config() {
-      return {
-        // Have to configure this here??
-        // @see https://github.com/vitejs/vite/issues/20098
-        ssr: {
-          noExternal: true,
-        },
-        environments: {
+
+    {
+      name: `polen-ssr-build`,
+      apply: `build`,
+      applyToEnvironment: Vite.isEnvironmentSsr,
+      config() {
+        return {
+          // Have to configure this here??
+          // @see https://github.com/vitejs/vite/issues/20098
           ssr: {
-            build: {
-              // NO EFFECT (see above)
-              // Bundle all dependencies instead of externalizing them
-              // noExternal: true,
-              // The SSR build will follow the client build, and emptying the dir would lose the output of the client build.
-              emptyOutDir: false,
-              rollupOptions: {
-                input: [config.paths.framework.template.server.entrypoint],
-                output: {
-                  entryFileNames: config.paths.project.relative.build.relative.serverEntrypoint,
+            noExternal: true,
+          },
+          environments: {
+            ssr: {
+              build: {
+                // NO EFFECT (see above)
+                // Bundle all dependencies instead of externalizing them
+                // noExternal: true,
+                // The SSR build will follow the client build, and emptying the dir would lose the output of the client build.
+                emptyOutDir: false,
+                rollupOptions: {
+                  input: [config.paths.framework.template.absolute.server.entrypoint],
+                  output: {
+                    entryFileNames: config.paths.project.relative.build.relative.serverEntrypoint,
+                  },
                 },
               },
             },
           },
-        },
-      }
-    },
-
-    onLog(_, message) {
-      if (isKitUnusedExternalImport(message)) return
-    },
-    // generateBundle(_, bundle, isWrite) {
-    //   if (isWrite) {
-    //     for (const chunkOrAsset of Object.values(bundle)) {
-    //       console.log(chunkOrAsset)
-    //       if (chunkOrAsset.type === `chunk`) {
-    //         if (chunkOrAsset.facadeModuleId === viClientManifest.resolved) {
-    //           // eslint-disable-next-line
-    //           delete bundle[chunkOrAsset.fileName]
-    //         }
-    //       }
-    //     }
-    //   }
-    // },
-    async closeBundle() {
-      /**
-       * clean up the manifest. Was generated by client. For server build. Not needed after (unless debugging).
-       */
-      if (!config.advanced.debug) {
-        await Fs.remove(Path.join(config.paths.project.absolute.build.root, `.vite`))
-      }
+        }
+      },
+      onLog(_, message) {
+        if (isKitUnusedExternalImport(message)) return
+      },
+      // generateBundle(_, bundle, isWrite) {
+      //   if (isWrite) {
+      //     for (const chunkOrAsset of Object.values(bundle)) {
+      //       console.log(chunkOrAsset)
+      //       if (chunkOrAsset.type === `chunk`) {
+      //         if (chunkOrAsset.facadeModuleId === viClientManifest.resolved) {
+      //           delete bundle[chunkOrAsset.fileName]
+      //         }
+      //       }
+      //     }
+      //   }
+      // },
+      async closeBundle() {
+        /**
+         * clean up the manifest. Was generated by client. For server build. Not needed after (unless debugging).
+         */
+        if (!config.advanced.debug) {
+          await Fs.remove(Path.join(config.paths.project.absolute.build.root, `.vite`))
+        }
+      },
     },
-  }]
+  ]
 }
 
 const viClientManifest = polenVirtual([`vite`, `client`, `manifest`])
@@ -149,20 +155,20 @@ const Manifest = (config: Config.Config): Vite.Plugin => {
 
 const BuildManifest = (config: Config.Config): Vite.Plugin => {
   return {
-    name: 'polen:build-manifest',
-    apply: 'build',
+    name: `polen:build-manifest`,
+    apply: `build`,
     applyToEnvironment: Vite.isEnvironmentClient,
     async generateBundle() {
       const manifest: PolenBuildManifest = {
-        type: config.build.architecture === 'ssr' ? 'ssr' : 'ssg',
+        type: config.build.architecture === `ssr` ? `ssr` : `ssg`,
         version: packageJson.version,
-        basePath: config.build.base || '/',
+        basePath: config.build.base || `/`,
       }
 
       // Emit the manifest as an asset
       this.emitFile({
-        type: 'asset',
-        fileName: '.polen/build.json',
+        type: `asset`,
+        fileName: `.polen/build.json`,
         source: JSON.stringify(manifest, null, 2),
       })
     },

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

@@ -1,31 +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'
+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 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 () => {
@@ -44,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.
@@ -57,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`],
     },
   })
 
@@ -83,66 +81,56 @@ 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,
+          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,
@@ -181,22 +169,35 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
         {
           identifier: viProjectData,
           async loader() {
+            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
             //
@@ -205,6 +206,7 @@ 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: {
                 static: {
                   // todo

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),