polen 0.10.0-next.12 → 0.10.0-next.14

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

@@ -2,118 +2,126 @@ 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'
 
 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`)) {
+              // eslint-disable-next-line
+              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.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.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) {
+      //           // 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`))
+        }
+      },
     },
-  }]
+  ]
 }
 
 const viClientManifest = polenVirtual([`vite`, `client`, `manifest`])

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

@@ -57,7 +57,7 @@ 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'),
@@ -85,7 +85,7 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
       name: `polen:internal-import-alias`,
       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
@@ -107,25 +107,24 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
         )
 
         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,
+    jsonsuper,
     VitePluginReactiveData.create({
-      moduleId: `virtual:polen/project/data/navbar`,
-      data: navbarData.value,
+      moduleId: `virtual:polen/project/data/navbar.jsonsuper`,
       codec: superjson,
+      data: navbarData.value,
       name: `polen-navbar`,
-      moduleType: 'jsonsuper',
     }),
     ...Pages({
       config,
@@ -181,12 +180,18 @@ 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()
 
             // ━ Schema presence causes adding some navbar items
-            const schemaNavbar = navbarData.get('schema')
-            schemaNavbar.length = 0 // Clear existing
             if (schema) {
+              const schemaNavbar = navbarData.get('schema')
+              schemaNavbar.length = 0 // Clear existing
+              debug('update navbar', { message: 'for 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

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

@@ -14,7 +14,7 @@ import { Arr, Cache, Path, Str } from '@wollybeard/kit'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 
-const debug = debugPolen.sub(`vite-plugin-pages`)
+const debug = debugPolen.sub(`vite-pages`)
 
 export const viProjectRoutes = polenVirtual([`project`, `routes.jsx`], { allowPluginProcessing: true })
 export const viProjectPagesCatalog = polenVirtual([`project`, `data`, 'pages-catalog.jsonsuper'], {
@@ -207,25 +207,27 @@ export const Pages = ({
         // },
         async handler(id) {
           if (id !== viProjectPagesCatalog.resolved) return
-          debug(`viProjectPagesCatalog`)
+          debug(`hook load`)
 
           const scanResult = await scanPages()
 
-          // Report any diagnostics
           reportDiagnostics(scanResult.diagnostics)
-          debug(`Found ${String(scanResult.list.length)} visible pages`)
+          debug(`found visible`, { count: scanResult.list.length })
 
           //
           // ━━ 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)
+            const data = createNavbar(scanResult.list)
+
+            debug('update navbar', data)
+
+            navbarPages.push(...data)
           }
 
           //

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

@@ -1,29 +1,80 @@
 import type { Config } from '#api/config/index'
 import { reportError } from '#api/server/report-error'
-import type { Hono } from '#dep/hono/index'
+import { Hono } from '#dep/hono/index'
 import type { Vite } from '#dep/vite/index'
 import { ResponseInternalServerError } from '#lib/kit-temp'
 import { debugPolen } from '#singletons/debug'
 import * as HonoNodeServer from '@hono/node-server'
-import { Err } from '@wollybeard/kit'
+import { Err, Obj } from '@wollybeard/kit'
 
 type App = Hono.Hono
 
+interface AppOptions {
+  hooks?: {
+    transformHtml?: Array<(html: string, ctx: Hono.Context) => Promise<string> | string>
+  }
+}
+
 interface AppServerModule {
-  app: App
+  createApp: (options: AppOptions) => App
 }
 
 export const Serve = (
   config: Config.Config,
 ): Vite.PluginOption => {
   const debug = debugPolen.sub(`serve`)
+  debug('construct')
+  const appModulePath = config.paths.framework.template.server.app
+
   let appPromise: Promise<App | Error>
 
-  const reloadApp = async ({ server }: { server: Vite.ViteDevServer }): 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')
+
     return server.ssrLoadModule(config.paths.framework.template.server.app)
       .then(module => module as AppServerModule)
-      .then(module => module.app)
+      .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)
+              },
+            ],
+          },
+        })
+      })
       .catch(async (error) => {
         if (Err.is(error)) {
           // ━ Clean Stack Trace
@@ -57,12 +108,12 @@ export const Serve = (
     handleHotUpdate({ server }) {
       debug('handleHotUpdate')
       // Reload app server immediately in the background
-      appPromise = reloadApp({ server })
+      appPromise = reloadApp(server)
     },
     async configureServer(server) {
       debug('configureServer')
       // Initial load
-      appPromise = reloadApp({ server })
+      appPromise = reloadApp(server)
 
       return () => {
         // Remove index.html serving middleware.
@@ -74,6 +125,8 @@ 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
@@ -81,8 +134,8 @@ export const Serve = (
               // Err.log(app)
               return ResponseInternalServerError()
             }
-            const response = await app.fetch(request, { viteDevServer: server })
-            return response
+
+            return await app.fetch(request)
           })(req, res)
         })
       }

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(`\n🔍 Polen found ${summary}:\n`)
+  console.warn(`\nPolen 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/graphql-document/components/CopyButton.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copy button component for GraphQL documents
+ */
+
+import type { React } from '#dep/react/index'
+import { React as ReactHooks } from '#dep/react/index'
+import { CheckIcon, CopyIcon } from '@radix-ui/react-icons'
+import { Button } from '@radix-ui/themes'
+
+export interface CopyButtonProps {
+  /** The text to copy */
+  text: string
+  /** Optional className */
+  className?: string
+  /** Size variant */
+  size?: '1' | '2' | '3'
+}
+
+/**
+ * Copy button for GraphQL code blocks
+ *
+ * Shows a copy icon that changes to a checkmark when clicked
+ */
+export const CopyButton: React.FC<CopyButtonProps> = ({
+  text,
+  className = '',
+  size = '1',
+}) => {
+  const [copied, setCopied] = ReactHooks.useState(false)
+  const timeoutRef = ReactHooks.useRef<NodeJS.Timeout | null>(null)
+
+  const handleCopy = ReactHooks.useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+
+      // Reset after 2 seconds
+      timeoutRef.current = setTimeout(() => {
+        setCopied(false)
+        timeoutRef.current = null
+      }, 2000)
+    } catch (err) {
+      console.error('Failed to copy text:', err)
+    }
+  }, [text])
+
+  // Cleanup timeout on unmount
+  ReactHooks.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <Button
+      size={size}
+      variant='ghost'
+      className={`graphql-copy-button ${className}`}
+      onClick={handleCopy}
+      aria-label={copied ? 'Copied!' : 'Copy code'}
+      data-copied={copied}
+    >
+      {copied ? <CheckIcon width='16' height='16' /> : <CopyIcon width='16' height='16' />}
+    </Button>
+  )
+}