polen 0.10.0-next.10 → 0.10.0-next.12

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

@@ -0,0 +1,252 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createSimpleOverlay, createSimplePositionCalculator } from './positioning-simple.ts'
+import type { Identifier } from './types.ts'
+
+// Helper to create test identifier
+const createTestIdentifier = (
+  name: string,
+  line: number,
+  column: number,
+  kind: Identifier['kind'] = 'Field',
+): Identifier => ({
+  name,
+  kind,
+  position: {
+    start: column - 1,
+    end: column - 1 + name.length,
+    line,
+    column,
+  },
+  schemaPath: [name],
+  context: { selectionPath: [] },
+})
+
+describe('Simple Positioning Engine', () => {
+  describe('SimplePositionCalculator', () => {
+    const calculator = createSimplePositionCalculator()
+
+    it('should wrap identifiers in spans', () => {
+      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>
+        </pre>
+      `
+
+      const identifiers = [
+        createTestIdentifier('query', 1, 1),
+        createTestIdentifier('user', 2, 3, 'Field'),
+        createTestIdentifier('name', 3, 5, 'Field'),
+      ]
+
+      calculator.prepareCodeBlock(container, identifiers)
+
+      // Check that identifiers were wrapped
+      const wrappedElements = container.querySelectorAll('[data-graphql-id]')
+      expect(wrappedElements.length).toBe(3)
+
+      // Check first wrapped element
+      const firstWrapped = wrappedElements[0] as HTMLElement
+      expect(firstWrapped.textContent).toBe('query')
+      expect(firstWrapped.getAttribute('data-graphql-name')).toBe('query')
+      expect(firstWrapped.getAttribute('data-graphql-kind')).toBe('Field')
+    })
+
+    it('should handle multiple identifiers in same line', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pre class="shiki">
+          <code>
+            <span class="line">query GetUserById($id: ID!) {</span>
+          </code>
+        </pre>
+      `
+
+      const identifiers = [
+        createTestIdentifier('query', 1, 1),
+        createTestIdentifier('GetUserById', 1, 7),
+        createTestIdentifier('$id', 1, 19, 'Variable'),
+        createTestIdentifier('ID', 1, 24, 'Type'),
+      ]
+
+      calculator.prepareCodeBlock(container, identifiers)
+
+      const wrappedElements = container.querySelectorAll('[data-graphql-id]')
+      expect(wrappedElements.length).toBe(4)
+    })
+
+    it('should get positions of wrapped identifiers', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pre class="shiki">
+          <code>
+            <span class="line"><span data-graphql-id="0-user-Field" data-graphql-name="user" data-graphql-kind="Field" data-graphql-start="0" data-graphql-end="4" data-graphql-line="1" data-graphql-column="1" data-graphql-path="user">user</span> {</span>
+          </code>
+        </pre>
+      `
+
+      // Mock getBoundingClientRect
+      container.getBoundingClientRect = () => ({
+        top: 0,
+        left: 0,
+        right: 100,
+        bottom: 100,
+        width: 100,
+        height: 100,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      })
+
+      const userSpan = container.querySelector('[data-graphql-id]') as HTMLElement
+      userSpan.getBoundingClientRect = () => ({
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 30,
+        width: 40,
+        height: 20,
+        x: 20,
+        y: 10,
+        toJSON: () => ({}),
+      })
+
+      const positions = calculator.getIdentifierPositions(container)
+
+      expect(positions.size).toBe(1)
+      const result = positions.get('0-user-Field')
+      expect(result).toBeDefined()
+      expect(result!.position).toEqual({
+        top: 10,
+        left: 20,
+        width: 40,
+        height: 20,
+      })
+      expect(result!.identifier.name).toBe('user')
+      expect(result!.identifier.kind).toBe('Field')
+    })
+
+    it('should skip already wrapped identifiers', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pre class="shiki">
+          <code>
+            <span class="line"><span data-graphql-id="existing">user</span> {</span>
+          </code>
+        </pre>
+      `
+
+      const identifiers = [
+        createTestIdentifier('user', 1, 1),
+      ]
+
+      calculator.prepareCodeBlock(container, identifiers)
+
+      // Should still only have one wrapped element
+      const wrappedElements = container.querySelectorAll('[data-graphql-id]')
+      expect(wrappedElements.length).toBe(1)
+      expect(wrappedElements[0]!.getAttribute('data-graphql-id')).toBe('existing')
+    })
+
+    it('should handle empty lines gracefully', () => {
+      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>
+        </pre>
+      `
+
+      const identifiers = [
+        createTestIdentifier('query', 1, 1),
+        createTestIdentifier('user', 3, 3),
+      ]
+
+      expect(() => {
+        calculator.prepareCodeBlock(container, identifiers)
+      }).not.toThrow()
+
+      const wrappedElements = container.querySelectorAll('[data-graphql-id]')
+      expect(wrappedElements.length).toBe(2)
+    })
+  })
+
+  describe('createSimpleOverlay', () => {
+    it('should create positioned overlay element', () => {
+      const position = { top: 10, left: 20, width: 40, height: 20 }
+      const identifier = createTestIdentifier('user', 1, 1)
+
+      const overlay = createSimpleOverlay(position, identifier)
+
+      expect(overlay.style.position).toBe('absolute')
+      expect(overlay.style.top).toBe('10px')
+      expect(overlay.style.left).toBe('20px')
+      expect(overlay.style.width).toBe('40px')
+      expect(overlay.style.height).toBe('20px')
+      expect(overlay.style.cursor).toBe('pointer')
+      expect(overlay.getAttribute('data-graphql-overlay')).toBe('true')
+      expect(overlay.getAttribute('data-graphql-name')).toBe('user')
+      expect(overlay.getAttribute('data-graphql-kind')).toBe('Field')
+    })
+
+    it('should handle click events', () => {
+      const position = { top: 10, left: 20, width: 40, height: 20 }
+      const identifier = createTestIdentifier('user', 1, 1)
+      let clickedIdentifier: Identifier | null = null
+
+      const overlay = createSimpleOverlay(position, identifier, {
+        onClick: (id) => {
+          clickedIdentifier = id
+        },
+      })
+
+      // Simulate click
+      const event = new MouseEvent('click')
+      overlay.dispatchEvent(event)
+
+      expect(clickedIdentifier).toBe(identifier)
+    })
+
+    it('should handle hover events', () => {
+      const position = { top: 10, left: 20, width: 40, height: 20 }
+      const identifier = createTestIdentifier('user', 1, 1)
+      let hoveredIdentifier: Identifier | null = null
+
+      const overlay = createSimpleOverlay(position, identifier, {
+        onHover: (id) => {
+          hoveredIdentifier = id
+        },
+      })
+
+      // Simulate hover
+      const event = new MouseEvent('mouseenter')
+      overlay.dispatchEvent(event)
+
+      expect(hoveredIdentifier).toBe(identifier)
+    })
+
+    it('should apply custom className', () => {
+      const position = { top: 10, left: 20, width: 40, height: 20 }
+      const identifier = createTestIdentifier('user', 1, 1)
+
+      const overlay = createSimpleOverlay(position, identifier, {
+        className: 'custom-overlay-class',
+      })
+
+      expect(overlay.className).toBe('custom-overlay-class')
+    })
+  })
+})

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

@@ -0,0 +1,271 @@
+/**
+ * Layer 3: Simplified Positioning & Layout Engine
+ *
+ * Maps GraphQL AST positions to DOM coordinates for overlay placement.
+ * This simplified version focuses on working with Polen's existing infrastructure.
+ */
+
+import type { Identifier } from './types.ts'
+
+/**
+ * DOM position for rendering overlays
+ */
+export interface DOMPosition {
+  /** Distance from top of container in pixels */
+  top: number
+  /** Distance from left of container in pixels */
+  left: number
+  /** Width of the identifier in pixels */
+  width: number
+  /** Height of the identifier in pixels */
+  height: number
+}
+
+/**
+ * Position calculation result
+ */
+export interface PositionResult {
+  /** The calculated DOM position */
+  position: DOMPosition
+  /** The identifier this position is for */
+  identifier: Identifier
+}
+
+/**
+ * Simplified position calculator for Shiki-rendered code
+ *
+ * This version uses a more straightforward approach:
+ * 1. Find the line element by line number
+ * 2. Search for the identifier text within that line
+ * 3. Create a span around the identifier for positioning
+ *
+ * This approach modifies the DOM but is more reliable for testing
+ * and works well with React's reconciliation.
+ */
+export class SimplePositionCalculator {
+  /**
+   * Prepare a code block for positioning by wrapping identifiers in spans
+   */
+  prepareCodeBlock(
+    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
+    })
+
+    // Process all identifiers
+    let wrappedCount = 0
+    for (const identifier of sortedIdentifiers) {
+      const wrapped = this.wrapIdentifier(containerElement, identifier)
+      if (wrapped) wrappedCount++
+    }
+  }
+
+  /**
+   * Get positions of all wrapped identifiers
+   */
+  getIdentifierPositions(
+    containerElement: Element,
+    relativeToElement?: Element,
+  ): Map<string, PositionResult> {
+    const results = new Map<string, PositionResult>()
+
+    // Find all wrapped identifiers
+    const wrappedIdentifiers = containerElement.querySelectorAll('[data-graphql-id]')
+
+    // Use the provided element for relative positioning, or the container itself
+    const referenceElement = relativeToElement || containerElement
+
+    for (const element of wrappedIdentifiers) {
+      const id = element.getAttribute('data-graphql-id')
+      if (!id) continue
+
+      // Get position relative to the reference element
+      const referenceRect = referenceElement.getBoundingClientRect()
+      const elementRect = element.getBoundingClientRect()
+
+      const position: DOMPosition = {
+        top: elementRect.top - referenceRect.top,
+        left: elementRect.left - referenceRect.left,
+        width: elementRect.width,
+        height: elementRect.height,
+      }
+
+      // Reconstruct identifier from data attributes
+      const identifier: Identifier = {
+        name: element.getAttribute('data-graphql-name') || '',
+        kind: (element.getAttribute('data-graphql-kind') || 'Field') as Identifier['kind'],
+        position: {
+          start: parseInt(element.getAttribute('data-graphql-start') || '0'),
+          end: parseInt(element.getAttribute('data-graphql-end') || '0'),
+          line: parseInt(element.getAttribute('data-graphql-line') || '1'),
+          column: parseInt(element.getAttribute('data-graphql-column') || '1'),
+        },
+        schemaPath: (element.getAttribute('data-graphql-path') || '').split(',').filter(Boolean),
+        context: { selectionPath: [] },
+      }
+
+      results.set(id, { position, identifier })
+    }
+
+    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
+  }
+}
+
+/**
+ * Create invisible overlay for a position
+ */
+export const createSimpleOverlay = (
+  position: DOMPosition,
+  identifier: Identifier,
+  options?: {
+    onClick?: (identifier: Identifier) => void
+    onHover?: (identifier: Identifier, event: MouseEvent) => void
+    className?: string
+  },
+): HTMLElement => {
+  const overlay = document.createElement('div')
+
+  // Base styles for positioning
+  overlay.style.position = 'absolute'
+  overlay.style.top = `${position.top}px`
+  overlay.style.left = `${position.left}px`
+  overlay.style.width = `${position.width}px`
+  overlay.style.height = `${position.height}px`
+  overlay.style.cursor = 'pointer'
+  overlay.style.zIndex = '10'
+
+  // Add custom class if provided
+  if (options?.className) {
+    overlay.className = options.className
+  }
+
+  // Data attributes
+  overlay.setAttribute('data-graphql-overlay', 'true')
+  overlay.setAttribute('data-graphql-name', identifier.name)
+  overlay.setAttribute('data-graphql-kind', identifier.kind)
+
+  // Event handlers
+  if (options?.onClick) {
+    overlay.addEventListener('click', (e) => {
+      e.preventDefault()
+      options.onClick!(identifier)
+    })
+  }
+
+  if (options?.onHover) {
+    overlay.addEventListener('mouseenter', (e) => {
+      options.onHover!(identifier, e)
+    })
+  }
+
+  return overlay
+}
+
+/**
+ * Factory function for position calculator
+ */
+export const createSimplePositionCalculator = (): SimplePositionCalculator => {
+  return new SimplePositionCalculator()
+}

package/src/lib/graphql-document/schema-context.tsx

@@ -0,0 +1,20 @@
+import type { GraphQLSchema } from 'graphql'
+import React from 'react'
+
+export const GraphQLSchemaContext = React.createContext<GraphQLSchema | null>(null)
+
+export const useGraphQLSchema = () => {
+  const schema = React.useContext(GraphQLSchemaContext)
+  return schema
+}
+
+export const GraphQLSchemaProvider: React.FC<React.PropsWithChildren<{ schema: GraphQLSchema | null }>> = ({
+  children,
+  schema,
+}) => {
+  return (
+    <GraphQLSchemaContext.Provider value={schema}>
+      {children}
+    </GraphQLSchemaContext.Provider>
+  )
+}