polen 0.10.0-next.9 → 0.10.0

package/src/template/components/GraphQLInteractive/lib/semantic-nodes.ts

@@ -0,0 +1,154 @@
+/**
+ * Semantic Node Types for GraphQL Interactive
+ *
+ * This module defines the semantic node types used to represent
+ * GraphQL schema information alongside tree-sitter syntax nodes.
+ */
+
+import type {
+  GraphQLArgument,
+  GraphQLEnumType,
+  GraphQLField,
+  GraphQLInputField,
+  GraphQLInputObjectType,
+  GraphQLInputType,
+  GraphQLInterfaceType,
+  GraphQLNamedType,
+  GraphQLObjectType,
+  GraphQLScalarType,
+  GraphQLUnionType,
+} from 'graphql'
+
+/**
+ * Wrapper for output fields that need parent type context
+ */
+export interface OutputFieldNode {
+  kind: 'OutputField'
+  parentType: GraphQLObjectType | GraphQLInterfaceType
+  fieldDef: GraphQLField<any, any>
+}
+
+/**
+ * Wrapper for input fields that need parent type context
+ */
+export interface InputFieldNode {
+  kind: 'InputField'
+  parentType: GraphQLInputObjectType
+  fieldDef: GraphQLInputField
+}
+
+/**
+ * Wrapper for arguments that need parent field context
+ */
+export interface ArgumentNode {
+  kind: 'Argument'
+  parentType: GraphQLObjectType | GraphQLInterfaceType
+  parentField: GraphQLField<any, any>
+  argumentDef: GraphQLArgument
+}
+
+/**
+ * Wrapper for operation definitions
+ */
+export interface OperationNode {
+  kind: 'Operation'
+  type: 'query' | 'mutation' | 'subscription'
+  name?: string
+}
+
+/**
+ * Wrapper for variable references
+ */
+export interface VariableNode {
+  kind: 'Variable'
+  name: string
+  type?: GraphQLInputType
+}
+
+/**
+ * Wrapper for fragment definitions
+ */
+export interface FragmentNode {
+  kind: 'Fragment'
+  name: string
+  onType: GraphQLNamedType
+}
+
+/**
+ * Wrapper for invalid fields that don't exist in the schema
+ */
+export interface InvalidFieldNode {
+  kind: 'InvalidField'
+  fieldName: string
+  parentType: GraphQLObjectType | GraphQLInterfaceType
+  suggestion?: string
+}
+
+/**
+ * Union of all semantic node types
+ *
+ * This union represents the different kinds of semantic information that can
+ * be attached to GraphQL tokens during parsing. It includes both GraphQL's
+ * native type classes (for type references) and our custom wrapper interfaces
+ * (for context-dependent elements like fields and arguments).
+ *
+ * @example
+ * ```typescript
+ * // Type reference - uses GraphQL native class
+ * const userType: SemanticNode = schema.getType('User')
+ *
+ * // Field reference - uses custom wrapper with context
+ * const fieldSemantic: SemanticNode = {
+ *   kind: 'OutputField',
+ *   parentType: userType,
+ *   fieldDef: userType.getFields()['name']
+ * }
+ * ```
+ */
+export type SemanticNode =
+  // GraphQL's classes (used directly for type references)
+  | GraphQLObjectType
+  | GraphQLScalarType
+  | GraphQLInterfaceType
+  | GraphQLUnionType
+  | GraphQLEnumType
+  | GraphQLInputObjectType
+  // Our wrappers (for context-dependent cases)
+  | OutputFieldNode
+  | InputFieldNode
+  | ArgumentNode
+  | OperationNode
+  | VariableNode
+  | FragmentNode
+  | InvalidFieldNode
+
+/**
+ * Type guards for our custom wrapper types
+ */
+export function isOutputField(node: SemanticNode | undefined): node is OutputFieldNode {
+  return node != null && 'kind' in node && node.kind === 'OutputField'
+}
+
+export function isInputField(node: SemanticNode | undefined): node is InputFieldNode {
+  return node != null && 'kind' in node && node.kind === 'InputField'
+}
+
+export function isArgument(node: SemanticNode | undefined): node is ArgumentNode {
+  return node != null && 'kind' in node && node.kind === 'Argument'
+}
+
+export function isOperation(node: SemanticNode | undefined): node is OperationNode {
+  return node != null && 'kind' in node && node.kind === 'Operation'
+}
+
+export function isVariable(node: SemanticNode | undefined): node is VariableNode {
+  return node != null && 'kind' in node && node.kind === 'Variable'
+}
+
+export function isFragment(node: SemanticNode | undefined): node is FragmentNode {
+  return node != null && 'kind' in node && node.kind === 'Fragment'
+}
+
+export function isInvalidField(node: SemanticNode | undefined): node is InvalidFieldNode {
+  return node != null && 'kind' in node && node.kind === 'InvalidField'
+}

package/src/template/components/GraphQLInteractive/tests/parser-comment.test.ts

@@ -0,0 +1,33 @@
+import { buildSchema } from 'graphql'
+import { describe, expect, test } from 'vitest'
+import { parseGraphQLWithTreeSitter } from '../lib/parser.js'
+
+describe('parseGraphQLWithTreeSitter - comments', () => {
+  test('should recognize comments and apply correct styling class', async () => {
+    const schema = buildSchema(`
+      type Query {
+        pokemon(id: ID!): Pokemon
+      }
+      
+      type Pokemon {
+        id: ID!
+        name: String!
+      }
+    `)
+
+    const code = `query {
+      pokemon(id: "025") {
+        id
+        name  # This is a comment
+      }
+    }`
+
+    const tokens = await parseGraphQLWithTreeSitter(code, [], schema)
+
+    // Find the comment token (tree-sitter may parse this as a single comment node)
+    const commentToken = tokens.find(t => t.text.startsWith('#') && t.text.includes('comment'))
+
+    expect(commentToken).toBeDefined()
+    expect(commentToken?.highlighter.getCssClass()).toBe('graphql-comment')
+  })
+})

package/src/template/components/GraphQLInteractive/tests/parser-error-hint.test.ts

@@ -0,0 +1,102 @@
+import { buildSchema } from 'graphql'
+import { describe, expect, test } from 'vitest'
+import { parseGraphQLWithTreeSitter } from '../lib/parser.js'
+import { isInvalidField } from '../lib/semantic-nodes.js'
+
+describe('parseGraphQLWithTreeSitter - error hints', () => {
+  test('should create error hint tokens after invalid fields', async () => {
+    const schema = buildSchema(`
+      type Query {
+        pokemon(id: ID!): Pokemon
+      }
+      
+      type Pokemon {
+        id: ID!
+        name: String!
+      }
+    `)
+
+    const code = `query {
+      pokemon(id: "123") {
+        id
+        name
+        invalidField
+      }
+    }`
+
+    const tokens = await parseGraphQLWithTreeSitter(code, [], schema)
+
+    // Find the invalid field token
+    const invalidToken = tokens.find(t =>
+      t.text === 'invalidField'
+      && isInvalidField(t.semantic)
+    )
+
+    expect(invalidToken).toBeDefined()
+
+    // Find the error hint token that follows the invalid field
+    const invalidTokenIndex = tokens.indexOf(invalidToken!)
+    const errorHintToken = tokens[invalidTokenIndex + 1]
+
+    expect(errorHintToken).toBeDefined()
+    expect(errorHintToken?.text).toBe(' ← No such field')
+    expect(errorHintToken?.highlighter.getCssClass()).toBe('graphql-error-hint')
+  })
+
+  test('should place error hint after arguments for invalid fields with args', async () => {
+    const schema = buildSchema(`
+      type Query {
+        pokemon(id: ID!): Pokemon
+      }
+      
+      type Pokemon {
+        id: ID!
+        name: String!
+      }
+    `)
+
+    const code = `query {
+      invalidField(limit: 10, offset: 20) {
+        id
+      }
+    }`
+
+    const tokens = await parseGraphQLWithTreeSitter(code, [], schema)
+
+    // Find the closing parenthesis
+    const closingParenIndex = tokens.findIndex(t => t.text === ')' && t.start > 35)
+    expect(closingParenIndex).toBeGreaterThan(-1)
+
+    // The error hint should come after the closing parenthesis
+    const errorHintToken = tokens[closingParenIndex + 1]
+    expect(errorHintToken?.highlighter.getCssClass()).toBe('graphql-error-hint')
+    expect(errorHintToken?.text).toBe(' ← No such field')
+  })
+
+  test('should not create error hint tokens for valid fields', async () => {
+    const schema = buildSchema(`
+      type Query {
+        pokemon(id: ID!): Pokemon
+      }
+      
+      type Pokemon {
+        id: ID!
+        name: String!
+      }
+    `)
+
+    const code = `query {
+      pokemon(id: "123") {
+        id
+        name
+      }
+    }`
+
+    const tokens = await parseGraphQLWithTreeSitter(code, [], schema)
+
+    // Check that no error hint tokens were created
+    const errorHintTokens = tokens.filter(t => t.highlighter.getCssClass() === 'graphql-error-hint')
+
+    expect(errorHintTokens.length).toBe(0)
+  })
+})

package/src/template/components/GraphQLInteractive/tests/parser.test.ts

@@ -0,0 +1,131 @@
+import { buildSchema } from 'graphql'
+import { describe, expect, test } from 'vitest'
+import { parseGraphQLWithTreeSitter } from '../lib/parser.js'
+import { isArgument } from '../lib/semantic-nodes.js'
+
+describe('parseGraphQLWithTreeSitter', () => {
+  describe('argument parsing', () => {
+    test('should recognize argument names as interactive tokens', async () => {
+      const schema = buildSchema(`
+        type Query {
+          pokemon(id: ID!): String
+        }
+      `)
+
+      const code = `query {
+        pokemon(id: "123") {
+          __typename
+        }
+      }`
+
+      const tokens = await parseGraphQLWithTreeSitter(code, [], schema)
+
+      // Find the argument "id" token
+      const argumentToken = tokens.find(t =>
+        t.text === 'id'
+        && isArgument(t.semantic)
+      )
+
+      expect(argumentToken).toBeDefined()
+      expect(argumentToken?.polen.isInteractive()).toBe(true)
+      expect(argumentToken?.polen.getReferenceUrl()).toBe('/reference/Query#pokemon__id')
+    })
+
+    test('should handle multiple arguments', async () => {
+      const schema = buildSchema(`
+        type Query {
+          search(query: String!, limit: Int, offset: Int): [String!]!
+        }
+      `)
+
+      const code = `query {
+        search(query: "test", limit: 10) {
+          __typename
+        }
+      }`
+
+      const tokens = await parseGraphQLWithTreeSitter(code, [], schema)
+
+      const queryArg = tokens.find(t => t.text === 'query' && isArgument(t.semantic))
+      const limitArg = tokens.find(t => t.text === 'limit' && isArgument(t.semantic))
+
+      expect(queryArg).toBeDefined()
+      expect(queryArg?.polen.isInteractive()).toBe(true)
+      expect(queryArg?.polen.getReferenceUrl()).toBe('/reference/Query#search__query')
+
+      expect(limitArg).toBeDefined()
+      expect(limitArg?.polen.isInteractive()).toBe(true)
+      expect(limitArg?.polen.getReferenceUrl()).toBe('/reference/Query#search__limit')
+    })
+
+    test('should handle arguments with variables', async () => {
+      const schema = buildSchema(`
+        type Query {
+          pokemon(id: ID!): String
+        }
+      `)
+
+      const code = `query GetPokemon($pokemonId: ID!) {
+        pokemon(id: $pokemonId) {
+          __typename
+        }
+      }`
+
+      const tokens = await parseGraphQLWithTreeSitter(code, [], schema)
+
+      // The argument name "id" should still be recognized even when value is a variable
+      const idArgument = tokens.find(t =>
+        t.text === 'id'
+        && isArgument(t.semantic)
+      )
+
+      expect(idArgument).toBeDefined()
+      expect(idArgument?.polen.isInteractive()).toBe(true)
+
+      // Variable tokens - basic implementation completed
+      const variable = tokens.find(t => t.text === '$pokemonId')
+      if (variable && variable.semantic && 'kind' in variable.semantic) {
+        expect(variable.semantic.kind).toBe('Variable')
+      }
+    })
+  })
+
+  describe('field parsing', () => {
+    test('should recognize fields as interactive', async () => {
+      const schema = buildSchema(`
+        type Pokemon {
+          id: ID!
+          name: String!
+        }
+        
+        type Query {
+          pokemon: Pokemon
+        }
+      `)
+
+      const code = `query {
+        pokemon {
+          id
+          name
+        }
+      }`
+
+      const tokens = await parseGraphQLWithTreeSitter(code, [], schema)
+
+      const pokemonField = tokens.find(t =>
+        t.text === 'pokemon' && t.semantic && 'kind' in t.semantic && t.semantic.kind === 'OutputField'
+      )
+      const idField = tokens.find(t =>
+        t.text === 'id' && t.semantic && 'kind' in t.semantic && t.semantic.kind === 'OutputField'
+      )
+
+      expect(pokemonField).toBeDefined()
+      expect(pokemonField?.polen.isInteractive()).toBe(true)
+      expect(pokemonField?.polen.getReferenceUrl()).toBe('/reference/Query#pokemon')
+
+      expect(idField).toBeDefined()
+      expect(idField?.polen.isInteractive()).toBe(true)
+      expect(idField?.polen.getReferenceUrl()).toBe('/reference/Pokemon#id')
+    })
+  })
+})

package/src/template/components/HamburgerMenu.tsx

@@ -2,7 +2,7 @@ import type { Content } from '#api/content/$'
 import { Cross2Icon, HamburgerMenuIcon } from '@radix-ui/react-icons'
 import { Box, Flex, IconButton, Text } from '@radix-ui/themes'
 import { useEffect } from 'react'
-import { Sidebar } from '../components/sidebar/Sidebar.tsx'
+import { Sidebar } from '../components/sidebar/Sidebar.js'
 
 export interface HamburgerMenuProps {
   isOpen: boolean
@@ -20,21 +20,21 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
   // Prevent body scroll when mobile menu is open
   useEffect(() => {
     if (isOpen) {
-      document.body.style.overflow = 'hidden'
+      document.body.style.overflow = `hidden`
     } else {
-      document.body.style.overflow = ''
+      document.body.style.overflow = ``
     }
 
     // Cleanup
     return () => {
-      document.body.style.overflow = ''
+      document.body.style.overflow = ``
     }
   }, [isOpen])
 
   return (
     <>
       {/* Mobile menu button - show on mobile/tablet, hide on desktop */}
-      <Box display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}>
+      <Box display={{ initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` }}>
         <IconButton
           size='2'
           variant='ghost'
@@ -53,11 +53,11 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
             position='fixed'
             inset='0'
             style={{
-              backgroundColor: 'var(--black-a9)',
+              backgroundColor: `var(--black-a9)`,
               zIndex: 50,
             }}
             onClick={onClose}
-            display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
+            display={{ initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` }}
           />
 
           {/* Drawer */}
@@ -68,13 +68,13 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
             bottom='0'
             width='280px'
             style={{
-              backgroundColor: 'var(--color-background)',
-              boxShadow: 'var(--shadow-6)',
+              backgroundColor: `var(--color-background)`,
+              boxShadow: `var(--shadow-6)`,
               zIndex: 100,
-              overflowY: 'auto',
+              overflowY: `auto`,
             }}
             p='4'
-            display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
+            display={{ initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` }}
           >
             <Flex justify='between' align='center' mb='4'>
               <Text size='5' weight='bold'>Navigation</Text>

package/src/template/components/Link.tsx

@@ -2,38 +2,46 @@ import type { FC } from 'react'
 import type { LinkProps as LinkPropsReactRouter } from 'react-router'
 import { Link as LinkReactRouter, useLocation } from 'react-router'
 // todo: #lib/kit-temp does not work as import
-import { ObjPartition } from '../../lib/kit-temp.ts'
-import type { LinkPropsRadix } from './RadixLink.jsx'
-import { LinkRadix } from './RadixLink.jsx'
+import { ObjPartition } from '../../lib/kit-temp.js'
+import { useClientOnly } from '../hooks/useClientOnly.js'
+import type { LinkPropsRadix } from './RadixLink.js'
+import { LinkRadix } from './RadixLink.js'
 
 const reactRouterPropKeys = [
-  'discover',
-  'prefetch',
-  'reloadDocument',
-  'replace',
-  'state',
-  'preventScrollReset',
-  'relative',
-  'to',
-  'viewTransition',
-  'children',
+  `discover`,
+  `prefetch`,
+  `reloadDocument`,
+  `replace`,
+  `state`,
+  `preventScrollReset`,
+  `relative`,
+  `to`,
+  `viewTransition`,
+  `children`,
 ] as const
 
-export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, 'asChild'>> = props => {
+export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, `asChild`>> = props => {
   const location = useLocation()
-  const toPathExp = typeof props.to === 'string' ? props.to : props.to.pathname || ''
-  const active = getPathActiveReport(toPathExp, location.pathname)
+  const toPathExp = typeof props.to === `string` ? props.to : props.to.pathname || ``
+
+  const active = useClientOnly(
+    () => getPathActiveReport(toPathExp, location.pathname),
+    { is: false, isDirect: false, isDescendant: false },
+  )
 
   const { picked: reactRouterProps, omitted: radixProps } = ObjPartition(props, reactRouterPropKeys)
 
+  // Only add data attributes if they're true
+  const linkRadixProps = {
+    ...radixProps,
+    asChild: true,
+    ...(active.is && { 'data-active': true }),
+    ...(active.isDirect && { 'data-active-direct': true }),
+    ...(active.isDescendant && { 'data-active-descendant': true }),
+  }
+
   return (
-    <LinkRadix
-      asChild
-      {...radixProps}
-      data-active={active.is || undefined}
-      data-active-direct={active.isDirect || undefined}
-      data-active-descendant={active.isdescendant || undefined}
-    >
+    <LinkRadix {...linkRadixProps}>
       <LinkReactRouter {...reactRouterProps} />
     </LinkRadix>
   )
@@ -42,7 +50,7 @@ export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, 'asChild'>> =
 export interface PathActiveReport {
   is: boolean
   isDirect: boolean
-  isdescendant: boolean
+  isDescendant: boolean
 }
 
 export const getPathActiveReport = (
@@ -50,17 +58,17 @@ export const getPathActiveReport = (
   currentPathExp: string,
 ): PathActiveReport => {
   // Normalize both paths for comparison
-  const normalizedPath = pathExp.startsWith('/') ? pathExp.slice(1) : pathExp
-  const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
+  const normalizedPath = pathExp.startsWith(`/`) ? pathExp.slice(1) : pathExp
+  const normalizedCurrentPath = currentPathExp.startsWith(`/`) ? currentPathExp.slice(1) : currentPathExp
 
   const isDirect = normalizedCurrentPath === normalizedPath
-  const isdescendant = normalizedCurrentPath.startsWith(normalizedPath + '/')
+  const isDescendant = normalizedCurrentPath.startsWith(normalizedPath + `/`)
     && normalizedCurrentPath !== normalizedPath
-  const is = isDirect || isdescendant
+  const is = isDirect || isDescendant
 
   return {
     is,
     isDirect,
-    isdescendant,
+    isDescendant,
   }
 }

package/src/template/components/Logo.tsx

@@ -10,16 +10,16 @@ interface Props {
 export const Logo: React.FC<Props> = ({ src, title, height = 30, showTitle = true }) => {
   return (
     <Flex align='center' gap='2'>
-      <Box style={{ height, display: 'flex', alignItems: 'center' }}>
+      <Box style={{ height, display: `flex`, alignItems: `center` }}>
         <img
           src={src}
           alt={title}
           height={height}
           className='polen-logo'
           style={{
-            height: '100%',
-            width: 'auto',
-            transition: 'filter 0.2s ease-in-out',
+            height: `100%`,
+            width: `auto`,
+            transition: `filter 0.2s ease-in-out`,
           }}
         />
       </Box>

package/src/template/components/NamedType.tsx

@@ -1,8 +1,8 @@
 import { Box, Heading, Text } from '@radix-ui/themes'
 import { type GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
-import { FieldListSection } from './FieldListSection.jsx'
-import { Markdown } from './Markdown.jsx'
+import { FieldListSection } from './FieldListSection.js'
+import { Markdown } from './Markdown.js'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/Texts/MinorHeading.tsx

@@ -8,10 +8,10 @@ export const MinorHeading: React.FC<TextProps> = (props) => {
       weight='bold'
       style={{
         ...props.style,
-        color: 'var(--accent-10)',
-        fontSize: '0.6rem',
-        letterSpacing: '0.025rem',
-        textTransform: 'uppercase',
+        color: `var(--accent-10)`,
+        fontSize: `0.6rem`,
+        letterSpacing: `0.025rem`,
+        textTransform: `uppercase`,
       }}
     />
   )

package/src/template/components/Texts/index.ts

@@ -1 +1 @@
-export * as Texts from './texts.ts'
+export * as Texts from './texts.js'

package/src/template/components/Texts/texts.ts

@@ -1 +1 @@
-export * from './MinorHeading.tsx'
+export * from './MinorHeading.js'