polen 0.10.0-next.13 → 0.10.0-next.14

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/GraphQLDocument.tsx

@@ -59,7 +59,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     onNavigate,
     validate = true,
     className = '',
-  } = options || {}
+  } = options
 
   const navigate = useNavigate()
   const handleNavigate = onNavigate || ((url: string) => navigate(url))
@@ -93,8 +93,9 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
   const analysisResult = ReactHooks.useMemo(() => {
     if (plain) return null
     const result = analyze(children, { schema })
+    // Debug logging handled by debug prop
     return result
-  }, [children, plain, schema])
+  }, [children, plain, schema, debug])
 
   // Layer 2: Schema resolution
   const resolver = ReactHooks.useMemo(() => {
@@ -130,6 +131,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
   // Prepare code block and calculate positions after render
   ReactHooks.useEffect(() => {
     if (!containerRef.current || !analysisResult || !positionCalculator || plain) {
+      // Skip position calculation - debug handled by debug prop
       return
     }
 
@@ -138,11 +140,13 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
       || containerRef.current.querySelector('pre code')
       || containerRef.current.querySelector('code')
     if (!codeElement) {
+      // No code element found - skip
       return
     }
 
     // Prepare the code block (wrap identifiers)
     const identifiers = Array.from(analysisResult.identifiers.byPosition.values())
+    // Prepare code block with identifiers
     positionCalculator.prepareCodeBlock(codeElement as Element, identifiers)
 
     // Get positions after DOM update
@@ -150,28 +154,36 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
       // Pass containerRef.current as the reference element for positioning
       if (containerRef.current) {
         const newPositions = positionCalculator.getIdentifierPositions(codeElement as Element, containerRef.current)
+        // Position calculation complete
         setPositions(newPositions)
         setIsReady(true)
       }
     })
   }, [analysisResult, positionCalculator, plain, highlightedHtml])
 
-  // Handle resize events
+  // Handle resize events with debouncing
   ReactHooks.useEffect(() => {
     if (!containerRef.current || !positionCalculator || plain) return
 
+    let resizeTimer: NodeJS.Timeout
     const handleResize = () => {
-      const codeElement = containerRef.current?.querySelector('pre.shiki code')
-        || containerRef.current?.querySelector('pre code')
-        || containerRef.current?.querySelector('code')
-      if (codeElement && containerRef.current) {
-        const newPositions = positionCalculator.getIdentifierPositions(codeElement as Element, containerRef.current)
-        setPositions(newPositions)
-      }
+      clearTimeout(resizeTimer)
+      resizeTimer = setTimeout(() => {
+        const codeElement = containerRef.current?.querySelector('pre.shiki code')
+          || containerRef.current?.querySelector('pre code')
+          || containerRef.current?.querySelector('code')
+        if (codeElement && containerRef.current) {
+          const newPositions = positionCalculator.getIdentifierPositions(codeElement as Element, containerRef.current)
+          setPositions(newPositions)
+        }
+      }, 100) // Debounce resize events
     }
 
     window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
+    return () => {
+      clearTimeout(resizeTimer)
+      window.removeEventListener('resize', handleResize)
+    }
   }, [positionCalculator, plain])
 
   // Validation errors

package/src/lib/graphql-document/positioning-simple.test.ts

@@ -33,13 +33,11 @@ describe('Simple Positioning Engine', () => {
       const container = document.createElement('div')
       container.innerHTML = `
         <pre class="shiki">
-          <code>
-            <span class="line">query GetUser {</span>
-            <span class="line">  user {</span>
-            <span class="line">    name</span>
-            <span class="line">  }</span>
-            <span class="line">}</span>
-          </code>
+          <code>query GetUser {
+  user {
+    name
+  }
+}</code>
         </pre>
       `
 
@@ -49,7 +47,8 @@ describe('Simple Positioning Engine', () => {
         createTestIdentifier('name', 3, 5, 'Field'),
       ]
 
-      calculator.prepareCodeBlock(container, identifiers)
+      const codeElement = container.querySelector('code')!
+      calculator.prepareCodeBlock(codeElement, identifiers)
 
       // Check that identifiers were wrapped
       const wrappedElements = container.querySelectorAll('[data-graphql-id]')
@@ -66,9 +65,7 @@ describe('Simple Positioning Engine', () => {
       const container = document.createElement('div')
       container.innerHTML = `
         <pre class="shiki">
-          <code>
-            <span class="line">query GetUserById($id: ID!) {</span>
-          </code>
+          <code>query GetUserById($id: ID!) {</code>
         </pre>
       `
 
@@ -79,7 +76,8 @@ describe('Simple Positioning Engine', () => {
         createTestIdentifier('ID', 1, 24, 'Type'),
       ]
 
-      calculator.prepareCodeBlock(container, identifiers)
+      const codeElement = container.querySelector('code')!
+      calculator.prepareCodeBlock(codeElement, identifiers)
 
       const wrappedElements = container.querySelectorAll('[data-graphql-id]')
       expect(wrappedElements.length).toBe(4)
@@ -140,9 +138,7 @@ describe('Simple Positioning Engine', () => {
       const container = document.createElement('div')
       container.innerHTML = `
         <pre class="shiki">
-          <code>
-            <span class="line"><span data-graphql-id="existing">user</span> {</span>
-          </code>
+          <code><span data-graphql-id="existing">user</span> {</code>
         </pre>
       `
 
@@ -150,7 +146,8 @@ describe('Simple Positioning Engine', () => {
         createTestIdentifier('user', 1, 1),
       ]
 
-      calculator.prepareCodeBlock(container, identifiers)
+      const codeElement = container.querySelector('code')!
+      calculator.prepareCodeBlock(codeElement, identifiers)
 
       // Should still only have one wrapped element
       const wrappedElements = container.querySelectorAll('[data-graphql-id]')
@@ -162,11 +159,9 @@ describe('Simple Positioning Engine', () => {
       const container = document.createElement('div')
       container.innerHTML = `
         <pre class="shiki">
-          <code>
-            <span class="line">query {</span>
-            <span class="line"></span>
-            <span class="line">  user</span>
-          </code>
+          <code>query {
+
+  user</code>
         </pre>
       `
 
@@ -175,8 +170,9 @@ describe('Simple Positioning Engine', () => {
         createTestIdentifier('user', 3, 3),
       ]
 
+      const codeElement = container.querySelector('code')!
       expect(() => {
-        calculator.prepareCodeBlock(container, identifiers)
+        calculator.prepareCodeBlock(codeElement, identifiers)
       }).not.toThrow()
 
       const wrappedElements = container.querySelectorAll('[data-graphql-id]')

package/src/lib/graphql-document/positioning-simple.ts

@@ -50,21 +50,104 @@ export class SimplePositionCalculator {
     containerElement: Element,
     identifiers: Identifier[],
   ): void {
-    // Sort all identifiers by position (right to left, bottom to top)
-    const sortedIdentifiers = [...identifiers].sort((a, b) => {
-      // Sort by line first (bottom to top)
-      if (a.position.line !== b.position.line) {
-        return b.position.line - a.position.line
-      }
-      // Then by column (right to left)
-      return b.position.column - a.position.column
-    })
+    // Get the full text content of the container
+    const fullText = containerElement.textContent || ''
+    const lines = fullText.split('\n')
+
+    // Build a map of line start positions in the full text
+    const lineStartPositions: number[] = [0]
+    for (let i = 0; i < lines.length - 1; i++) {
+      const lineLength = lines[i]?.length ?? 0
+      lineStartPositions.push(lineStartPositions[i]! + lineLength + 1) // +1 for newline
+    }
+
+    // Process identifiers by line
+    for (const identifier of identifiers) {
+      const lineIndex = identifier.position.line - 1
+      if (lineIndex >= lines.length || lineIndex < 0) continue
+
+      const lineText = lines[lineIndex]
+      if (!lineText) continue
+
+      const columnIndex = identifier.position.column - 1
+
+      // Check if the identifier exists at the expected position
+      if (lineText.substring(columnIndex).startsWith(identifier.name)) {
+        // Calculate the absolute position in the full text
+        const lineStartPosition = lineStartPositions[lineIndex] ?? 0
+        const absolutePosition = lineStartPosition + columnIndex
+
+        // Check if already wrapped at this specific position
+        const existingWrapped = containerElement.querySelectorAll(`[data-graphql-id]`)
+        let alreadyWrapped = false
+        for (const wrapped of existingWrapped) {
+          if (wrapped.textContent === identifier.name) {
+            const startPos = parseInt(wrapped.getAttribute('data-graphql-start') || '0')
+            if (startPos === identifier.position.start) {
+              alreadyWrapped = true
+              break
+            }
+          }
+        }
+        if (alreadyWrapped) continue
+
+        // Create wrapper span
+        const wrapper = document.createElement('span')
+        const id = `${identifier.position.start}-${identifier.name}-${identifier.kind}`
+        wrapper.setAttribute('data-graphql-id', id)
+        wrapper.setAttribute('data-graphql-name', identifier.name)
+        wrapper.setAttribute('data-graphql-kind', identifier.kind)
+        wrapper.setAttribute('data-graphql-start', String(identifier.position.start))
+        wrapper.setAttribute('data-graphql-end', String(identifier.position.end))
+        wrapper.setAttribute('data-graphql-line', String(identifier.position.line))
+        wrapper.setAttribute('data-graphql-column', String(identifier.position.column))
+        wrapper.setAttribute('data-graphql-path', identifier.schemaPath.join(','))
+
+        // Find the position in the container and wrap the text
+        const walker = document.createTreeWalker(
+          containerElement,
+          NodeFilter.SHOW_TEXT,
+          null,
+        )
+
+        let currentPos = 0
+        let node: Node | null
+
+        while (node = walker.nextNode()) {
+          const textNode = node as Text
+          const text = textNode.textContent || ''
+
+          // Check if this text node contains our identifier
+          if (currentPos <= absolutePosition && absolutePosition < currentPos + text.length) {
+            const relativePos = absolutePosition - currentPos
+
+            if (text.substring(relativePos).startsWith(identifier.name)) {
+              // Split the text node
+              const before = text.substring(0, relativePos)
+              const identifierText = identifier.name
+              const after = text.substring(relativePos + identifierText.length)
+
+              const parent = textNode.parentNode!
+
+              if (before) {
+                parent.insertBefore(document.createTextNode(before), textNode)
+              }
+
+              wrapper.textContent = identifierText
+              parent.insertBefore(wrapper, textNode)
+
+              if (after) {
+                parent.insertBefore(document.createTextNode(after), textNode)
+              }
+
+              parent.removeChild(textNode)
+              break
+            }
+          }
 
-    // Process all identifiers
-    let wrappedCount = 0
-    for (const identifier of sortedIdentifiers) {
-      const wrapped = this.wrapIdentifier(containerElement, identifier)
-      if (wrapped) wrappedCount++
+          currentPos += text.length
+        }
+      }
     }
   }
 
@@ -117,100 +200,6 @@ export class SimplePositionCalculator {
 
     return results
   }
-
-  /**
-   * Wrap an identifier in a span for positioning
-   * Returns true if the identifier was successfully wrapped
-   */
-  private wrapIdentifier(containerElement: Element, identifier: Identifier): boolean {
-    const walker = document.createTreeWalker(
-      containerElement,
-      NodeFilter.SHOW_TEXT,
-      null,
-    )
-
-    let currentLine = 1
-    let currentColumn = 1
-    let node: Node | null
-
-    while (node = walker.nextNode()) {
-      const textNode = node as Text
-      const text = textNode.textContent || ''
-
-      // Check if already wrapped
-      if (textNode.parentElement?.hasAttribute('data-graphql-id')) {
-        // Update position tracking and continue
-        for (const char of text) {
-          if (char === '\n') {
-            currentLine++
-            currentColumn = 1
-          } else {
-            currentColumn++
-          }
-        }
-        continue
-      }
-
-      // Track position in the text
-      let textIndex = 0
-      while (textIndex < text.length) {
-        // Check if we're at the identifier's position
-        if (
-          currentLine === identifier.position.line
-          && currentColumn === identifier.position.column
-        ) {
-          // Verify it's actually our identifier
-          const remainingText = text.substring(textIndex)
-          if (remainingText.startsWith(identifier.name)) {
-            // Create a unique ID for this identifier
-            const id = `${identifier.position.start}-${identifier.name}-${identifier.kind}`
-
-            // Split the text node and wrap the identifier
-            const before = text.substring(0, textIndex)
-            const after = text.substring(textIndex + identifier.name.length)
-
-            const span = document.createElement('span')
-            span.setAttribute('data-graphql-id', id)
-            span.setAttribute('data-graphql-name', identifier.name)
-            span.setAttribute('data-graphql-kind', identifier.kind)
-            span.setAttribute('data-graphql-start', String(identifier.position.start))
-            span.setAttribute('data-graphql-end', String(identifier.position.end))
-            span.setAttribute('data-graphql-line', String(identifier.position.line))
-            span.setAttribute('data-graphql-column', String(identifier.position.column))
-            span.setAttribute('data-graphql-path', identifier.schemaPath.join(','))
-            span.textContent = identifier.name
-
-            const parent = textNode.parentNode!
-
-            if (before) {
-              parent.insertBefore(document.createTextNode(before), textNode)
-            }
-
-            parent.insertBefore(span, textNode)
-
-            if (after) {
-              parent.insertBefore(document.createTextNode(after), textNode)
-            }
-
-            parent.removeChild(textNode)
-            return true
-          }
-        }
-
-        // Update position tracking
-        const char = text[textIndex]
-        if (char === '\n') {
-          currentLine++
-          currentColumn = 1
-        } else {
-          currentColumn++
-        }
-        textIndex++
-      }
-    }
-
-    return false // Identifier not found
-  }
 }
 
 /**

package/src/lib/kit-temp.test.ts

@@ -74,8 +74,13 @@ describe('property-based tests', () => {
             expect(inAllowed).toBe(!inDenied)
           })
 
-          // Combined they reconstruct the original object
-          expect({ ...allowed, ...denied }).toEqual(obj)
+          // Combined they reconstruct the original object (only own properties)
+          const reconstructed = { ...allowed, ...denied }
+          const ownPropsObj = Object.keys(obj).reduce((acc, key) => {
+            acc[key] = obj[key]
+            return acc
+          }, {} as any)
+          expect(reconstructed).toEqual(ownPropsObj)
         },
       ),
     )
@@ -87,7 +92,14 @@ describe('property-based tests', () => {
         fc.object(),
         (obj) => {
           const filtered = objFilter(obj, () => true)
-          expect(filtered).toEqual(obj)
+
+          // Object.keys doesn't include __proto__, so we need to handle it specially
+          const objWithoutProto = Object.keys(obj).reduce((acc, key) => {
+            acc[key] = obj[key]
+            return acc
+          }, {} as any)
+
+          expect(filtered).toEqual(objWithoutProto)
 
           // Values are the same reference
           Object.keys(filtered).forEach(key => {