polen 0.10.0-next.11 → 0.10.0-next.13

package/src/template/components/CodeBlockEnhancer.tsx

@@ -10,13 +10,13 @@ export const CodeBlockEnhancer = () => {
     // Add styles for code block enhancements
     const styleId = 'code-block-enhancer-styles'
     let styleElement = document.getElementById(styleId) as HTMLStyleElement
-    
+
     if (!styleElement) {
       styleElement = document.createElement('style')
       styleElement.id = styleId
       document.head.appendChild(styleElement)
     }
-    
+
     styleElement.textContent = `
       /* Enhanced code block styles */
       pre.shiki {
@@ -89,7 +89,7 @@ export const CodeBlockEnhancer = () => {
         color: white !important;
       }
     `
-    
+
     return () => {
       if (styleElement && styleElement.parentNode) {
         styleElement.parentNode.removeChild(styleElement)
@@ -100,22 +100,22 @@ export const CodeBlockEnhancer = () => {
   useEffect(() => {
     const enhanceCodeBlocks = () => {
       const codeBlocks = document.querySelectorAll('pre.shiki:not([data-enhanced])')
-      
+
       codeBlocks.forEach((block) => {
         const preElement = block as HTMLPreElement
         preElement.setAttribute('data-enhanced', 'true')
-        
+
         // Get language from class name
         const classes = preElement.className.split(' ')
         const language = classes.find(c => c !== 'shiki' && c !== 'shiki-light' && c !== 'shiki-dark') || 'text'
-        
+
         // Check for title in first line
         const codeElement = preElement.querySelector('code')
         if (!codeElement) return
-        
+
         const firstLine = codeElement.textContent?.split('\n')[0] || ''
         let title = ''
-        
+
         const titleMatch = firstLine.match(/^\/\/\s*title:\s*(.+)$/i)
         if (titleMatch && titleMatch[1]) {
           title = titleMatch[1]
@@ -124,27 +124,27 @@ export const CodeBlockEnhancer = () => {
           if (firstLineElement) {
             firstLineElement.style.display = 'none'
           }
-          
+
           // Set data attributes for CSS
           preElement.setAttribute('data-title', title)
           preElement.setAttribute('data-language', language)
           preElement.style.marginTop = '3rem'
         }
-        
+
         // Create copy button
         const copyButton = document.createElement('button')
         copyButton.className = 'code-block-copy'
         copyButton.textContent = 'Copy'
         copyButton.setAttribute('data-copied', 'false')
-        
+
         copyButton.onclick = async (e) => {
           e.preventDefault()
           e.stopPropagation()
-          
+
           // Get clean code without the title line
           const code = codeElement.textContent || ''
           const cleanCode = title ? code.split('\n').slice(1).join('\n') : code
-          
+
           try {
             await navigator.clipboard.writeText(cleanCode)
             copyButton.textContent = 'Copied!'
@@ -157,15 +157,15 @@ export const CodeBlockEnhancer = () => {
             console.error('Failed to copy:', err)
           }
         }
-        
+
         // Append copy button directly to pre element
         preElement.appendChild(copyButton)
       })
     }
-    
+
     // Small delay to ensure DOM is ready
     const timeoutId = setTimeout(enhanceCodeBlocks, 100)
-    
+
     return () => {
       clearTimeout(timeoutId)
       // Clean up enhanced code blocks
@@ -181,12 +181,12 @@ export const CodeBlockEnhancer = () => {
         const firstLine = block.querySelector('span.line') as HTMLElement
         if (firstLine && firstLine.style.display === 'none') {
           firstLine.style.display = ''
-        }
-        // Reset margin
-        (block as HTMLElement).style.marginTop = ''
+        } // Reset margin
+
+        ;(block as HTMLElement).style.marginTop = ''
       })
     }
   }, [location.pathname]) // Re-run when route changes
-  
+
   return null
-}
+}

package/src/template/components/DeprecationReason.tsx

@@ -1,7 +1,7 @@
 import type { GrafaidOld } from '#lib/grafaid-old/index'
 import { Text } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { Markdown } from './Markdown.jsx'
+import { Markdown } from './Markdown.tsx'
 
 export const DeprecationReason: FC<{ data: GrafaidOld.GraphQLField }> = ({ data }) => {
   if (!data.deprecationReason) return null

package/src/template/components/Description.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { Markdown } from './Markdown.jsx'
+import { Markdown } from './Markdown.tsx'
 // import type { Grafaid } from '#lib/grafaid'
 import type { GrafaidOld } from '#lib/grafaid-old/index'
 import type { GraphQLNamedType } from 'graphql'

package/src/template/components/Field.tsx

@@ -2,10 +2,10 @@ import { GrafaidOld } from '#lib/grafaid-old/index'
 import type { BoxProps } from '@radix-ui/themes'
 import { Box, Text } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { ArgumentListAnnotation } from './ArgumentListAnnotation.jsx'
-import { DeprecationReason } from './DeprecationReason.jsx'
-import { Description } from './Description.jsx'
-import { TypeAnnotation } from './TypeAnnotation.jsx'
+import { ArgumentListAnnotation } from './ArgumentListAnnotation.tsx'
+import { DeprecationReason } from './DeprecationReason.tsx'
+import { Description } from './Description.tsx'
+import { TypeAnnotation } from './TypeAnnotation.tsx'
 
 export type Props = BoxProps & {
   data: GrafaidOld.GraphQLField

package/src/template/components/FieldList.tsx

@@ -1,7 +1,7 @@
 import { Grafaid } from '#lib/grafaid/index'
 import { Box } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { Field } from './Field.jsx'
+import { Field } from './Field.tsx'
 
 export interface Props {
   data: Grafaid.Schema.TypesLike.Named

package/src/template/components/FieldListSection.tsx

@@ -2,7 +2,7 @@ import { Grafaid } from '#lib/grafaid/index'
 import { Box, Heading } from '@radix-ui/themes'
 import type { GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
-import { FieldList } from './FieldList.jsx'
+import { FieldList } from './FieldList.tsx'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/Link.tsx

@@ -3,8 +3,8 @@ 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 type { LinkPropsRadix } from './RadixLink.tsx'
+import { LinkRadix } from './RadixLink.tsx'
 
 const reactRouterPropKeys = [
   'discover',

package/src/template/components/MDXComponents.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+
+interface PreProps {
+  children: React.ReactNode
+  className?: string
+  'data-enhanced'?: string
+}
+
+interface CodeProps {
+  children: string
+  className?: string
+}
+
+/**
+ * Custom pre component that intercepts GraphQL code blocks
+ */
+const Pre: React.FC<PreProps> = ({ children, className, ...props }) => {
+  // Check if this is a Shiki-enhanced code block
+  const isShiki = props['data-enhanced'] === 'true'
+
+  // Extract the code element
+  const codeElement = React.Children.toArray(children).find(
+    child => React.isValidElement(child) && child.type === 'code',
+  ) as React.ReactElement<CodeProps> | undefined
+
+  if (!codeElement) {
+    return <pre className={className} {...props}>{children}</pre>
+  }
+
+  // Check if it's a GraphQL code block
+  const codeClassName = codeElement.props.className || ''
+  const isGraphQL = codeClassName.includes('language-graphql') || codeClassName.includes('language-gql')
+
+  if (isGraphQL && isShiki) {
+    // Extract the plain text content from the code element
+    const plainText = extractPlainText(codeElement.props.children)
+
+    // For now, just render the Shiki-highlighted code normally
+    // The GraphQLDocument component will be enhanced client-side
+    return (
+      <div data-testid='graphql-document' data-graphql-code={plainText}>
+        <pre className={className} {...props}>{children}</pre>
+      </div>
+    )
+  }
+
+  // For non-GraphQL code blocks, render normally
+  return <pre className={className} {...props}>{children}</pre>
+}
+
+/**
+ * Extract plain text from React children (recursive)
+ */
+function extractPlainText(children: React.ReactNode): string {
+  if (typeof children === 'string') {
+    return children
+  }
+
+  if (Array.isArray(children)) {
+    return children.map(extractPlainText).join('')
+  }
+
+  if (React.isValidElement(children)) {
+    const props = (children as React.ReactElement<any>).props
+    if (props?.children) {
+      return extractPlainText(props.children)
+    }
+  }
+
+  return ''
+}
+
+/**
+ * Simple server-side rendering of React element to HTML string
+ */
+function renderToStaticMarkup(element: React.ReactNode): string {
+  // For server-side, we just need to preserve the structure
+  if (typeof element === 'string') return element
+
+  if (React.isValidElement(element)) {
+    const { type, props } = element as React.ReactElement<any>
+    const tagName = typeof type === 'string' ? type : 'div'
+    const attrs = Object.entries(props || {})
+      .filter(([key]) => key !== 'children' && !key.startsWith('__'))
+      .map(([key, value]) => `${key}="${value}"`)
+      .join(' ')
+
+    const children = props?.children ? renderToStaticMarkup(props.children) : ''
+    return `<${tagName}${attrs ? ' ' + attrs : ''}>${children}</${tagName}>`
+  }
+
+  if (Array.isArray(element)) {
+    return element.map(renderToStaticMarkup).join('')
+  }
+
+  return ''
+}
+
+export const mdxComponents = {
+  pre: Pre,
+}

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.tsx'
+import { Markdown } from './Markdown.tsx'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/TestComponent.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export const TestComponent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  console.log('TestComponent rendered!')
+  return <div style={{ border: '2px solid red', padding: '10px' }}>TEST: {children}</div>
+}

package/src/template/components/TypeAnnotation.tsx

@@ -2,7 +2,7 @@ import { Text } from '@radix-ui/themes'
 import type { GraphQLType } from 'graphql'
 import { isInputObjectType, isListType, isNamedType, isNonNullType, isScalarType } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.jsx'
+import { Link } from './Link.tsx'
 
 export interface Props {
   type: GraphQLType // Can be either GraphQLInputType or GraphQLOutputType

package/src/template/components/TypeFieldsLinkList.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Heading } from '@radix-ui/themes'
 import type { GraphQLInterfaceType, GraphQLObjectType } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.jsx'
+import { Link } from './Link.tsx'
 
 export interface Props {
   type: GraphQLObjectType | GraphQLInterfaceType

package/src/template/components/TypeIndex.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Heading } from '@radix-ui/themes'
 import { Obj } from '@wollybeard/kit'
 import type { GraphQLNamedType, GraphQLSchema } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.jsx'
+import { Link } from './Link.tsx'
 
 export interface Props {
   schema: GraphQLSchema

package/src/template/components/content/$$.ts

@@ -1 +1,2 @@
 export { Callout, Tabs } from '@radix-ui/themes'
+export { GraphQLDocumentWithSchema } from './GraphQLDocumentWithSchema.tsx'

package/src/template/components/content/GraphQLDocumentWithSchema.tsx

@@ -0,0 +1,18 @@
+import type { GraphQLSchema } from 'graphql'
+import React from 'react'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
+import { GraphQLDocument } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
+import type { GraphQLDocumentProps } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
+
+/**
+ * Wrapper component that provides schema from virtual module directly to GraphQLDocument
+ * This bypasses the context issue with MDX components
+ */
+export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema'>> = (props) => {
+  const schema = PROJECT_DATA.schema?.versions[0]?.after
+  console.log('Template wrapper - schema:', schema ? 'EXISTS' : 'UNDEFINED')
+  console.log('Template wrapper - props:', props)
+  console.log('Template wrapper - PROJECT_DATA.schema:', PROJECT_DATA.schema)
+
+  return <GraphQLDocument {...props} schema={schema} />
+}

package/src/template/components/content/GraphQLDocumentWrapper.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { useNavigate } from 'react-router'
+import { GraphQLDocument } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
+import type { GraphQLDocumentProps } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
+import { highlightCode } from '../../../lib/shiki/shiki.ts'
+
+/**
+ * Client-side wrapper that hydrates GraphQL documents with schema
+ */
+export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema'>> = (props) => {
+  try {
+    const [schema, setSchema] = React.useState<any>(null)
+    const [isClient, setIsClient] = React.useState(false)
+    const [highlightedHtml, setHighlightedHtml] = React.useState<string | null>(null)
+
+    React.useEffect(() => {
+      setIsClient(true)
+
+      // Highlight the code
+      if (typeof props.children === 'string') {
+        highlightCode({
+          code: props.children,
+          lang: 'graphql',
+          theme: 'light', // You can make this dynamic based on theme
+        }).then(html => {
+          setHighlightedHtml(html)
+        }).catch(err => {
+          console.error('Failed to highlight code:', err)
+        })
+      }
+
+      // Access virtual module only on client side
+      if (typeof window !== 'undefined') {
+        import('virtual:polen/project/data.jsonsuper').then(PROJECT_DATA => {
+          const s = PROJECT_DATA.default?.schema?.versions?.[0]?.after
+          if (s) {
+            setSchema(s)
+          }
+        }).catch(err => {
+          console.error('Failed to load schema:', err)
+        })
+      }
+    }, [props.children])
+
+    // During SSR, render a simple code block
+    if (!isClient) {
+      return (
+        <div data-testid='graphql-document' className='graphql-document graphql-document-static'>
+          <pre className='shiki shiki-themes github-light tokyo-night'>
+            <code className="language-graphql">{props.children}</code>
+          </pre>
+        </div>
+      )
+    }
+
+    // During client render, use the full component
+    // Pass a custom navigate function that doesn't require router
+    const handleNavigate = (url: string) => {
+      if (typeof window !== 'undefined') {
+        window.location.href = url
+      }
+    }
+
+    return (
+      <div data-testid='graphql-document'>
+        <GraphQLDocument
+          {...props}
+          schema={schema}
+          highlightedHtml={highlightedHtml || undefined}
+          options={{
+            ...props.options,
+            onNavigate: handleNavigate,
+            debug: false, // Disable debug mode for shipping
+          }}
+        />
+      </div>
+    )
+  } catch (err) {
+    console.error('GraphQLDocumentWithSchema error:', err)
+    return <div>Error rendering GraphQL document</div>
+  }
+}

package/src/template/components/graphql/graphql.tsx

@@ -1,2 +1,2 @@
-export * from './type-kind-icon.jsx'
-export * from './type-link.jsx'
+export * from './type-kind-icon.tsx'
+export * from './type-link.tsx'

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

@@ -1 +1 @@
-export * as Graphql from './graphql.jsx'
+export * as Graphql from './graphql.tsx'

package/src/template/components/graphql/type-link.tsx

@@ -1,7 +1,7 @@
 import { Grafaid } from '#lib/grafaid/index'
 import { Code, Flex } from '@radix-ui/themes'
-import { Link } from '../Link.jsx'
-import { TypeKindIcon } from './graphql.jsx'
+import { Link } from '../Link.tsx'
+import { TypeKindIcon } from './graphql.tsx'
 import { typeKindTokensIndex } from './type-kind-tokens.ts'
 
 export const TypeLink: React.FC<{ type: Grafaid.Schema.TypesLike.Named }> = ({ type }) => {

package/src/template/entry.client.tsx

@@ -2,12 +2,12 @@
 // But then, we won't get it from the client manifest. But we could get it from the server manifest. Should we do that?
 // But then, that wouldn't work for SPA. Does that matter? Just put a conditional here e.g. if (import.meta.env.PROD) ...?
 import '@radix-ui/themes/styles.css'
-// import './styles/code-block.css' // TODO: Handle CSS in build process
+import './styles/code-block.css'
 import { ReactDomClient } from '#dep/react-dom-client/index'
 import { StrictMode } from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { routes } from './routes.jsx'
+import { routes } from './routes.tsx'
 
 // SPA
 

package/src/template/routes/changelog.tsx

@@ -1,7 +1,7 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { Changelog } from '../components/Changelog.jsx'
+import { Changelog } from '../components/Changelog.tsx'
 
 const loader = createLoader(() => {
   return {

package/src/template/routes/reference.$type.$field.tsx

@@ -2,9 +2,9 @@ import { Grafaid } from '#lib/grafaid/index'
 import { ReactRouterAid } from '#lib/react-router-aid/index'
 import { useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { useParams } from 'react-router'
-import { Field } from '../components/Field.jsx'
-import { MissingSchema } from '../components/MissingSchema.jsx'
-import type { reference } from './reference.jsx'
+import { Field } from '../components/Field.tsx'
+import { MissingSchema } from '../components/MissingSchema.tsx'
+import type { reference } from './reference.tsx'
 
 const Component = () => {
   const params = useParams() as { type: string; field: string }

package/src/template/routes/reference.$type.tsx

@@ -1,9 +1,9 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { useParams } from 'react-router'
-import { MissingSchema } from '../components/MissingSchema.jsx'
-import { NamedType } from '../components/NamedType.jsx'
-import type { reference } from './reference.jsx'
+import { MissingSchema } from '../components/MissingSchema.tsx'
+import { NamedType } from '../components/NamedType.tsx'
+import type { reference } from './reference.tsx'
 
 const Component = () => {
   const params = useParams() as { type: string }

package/src/template/routes/reference.tsx

@@ -3,8 +3,8 @@ import { createLoader, useLoaderData } from '#lib/react-router-loader/react-rout
 import { Box } from '@radix-ui/themes'
 import { Outlet } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { MissingSchema } from '../components/MissingSchema.jsx'
-import { reference$type } from './reference.$type.jsx'
+import { MissingSchema } from '../components/MissingSchema.tsx'
+import { reference$type } from './reference.$type.tsx'
 
 const loader = createLoader(() => {
   const latestSchemaVersion = PROJECT_DATA.schema?.versions[0].after ?? null
@@ -21,7 +21,7 @@ const Component = () => {
   }
 
   return (
-    <Box className="prose">
+    <Box className='prose'>
       <Outlet />
     </Box>
   )