polen 0.10.0 → 0.11.0-next.10

package/src/project-data.ts

@@ -1,18 +1,10 @@
 import type { Config } from '#api/config/index'
 import type { NavbarItem } from '#api/content/navbar'
-import type { Schema } from './api/schema/index.js'
 
 export interface ProjectData {
-  schema: null | Schema.Schema
   basePath: string
-  paths: Config.Config[`paths`][`project`]
+  paths: Config.Config['paths']
   navbar: NavbarItem[]
-  server: {
-    port: number
-    static: {
-      directory: string
-      route: string
-    }
-  }
-  warnings: Config.Config[`warnings`]
+  server: Config.Config['server']
+  warnings: Config.Config['warnings']
 }

package/src/template/components/Changelog.tsx

@@ -1,15 +1,14 @@
-import type { GrafaidOld } from '#lib/grafaid-old/index'
+import type { Api } from '#api/index'
 import { CRITICALITY_LEVELS } from '#lib/graphql-change/criticality'
 import { GraphqlChange } from '#lib/graphql-change/index'
 import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
 import type { CriticalityLevel } from '@graphql-inspector/core'
 import { Box } from '@radix-ui/themes'
-import { neverCase } from '@wollybeard/kit/language'
-import type React from 'react'
+import React from 'react'
 import { useMemo } from 'react'
-import type { Schema as ChangelogData } from '../../api/schema/index.js'
 import { CriticalitySection } from './Changelog/CriticalitySection.js'
 import * as Group from './Changelog/groups/index.js'
+import { ComponentDispatch } from './ComponentDispatch.js'
 
 export const renderDate = (date: Date) => {
   return date.toLocaleString(`default`, {
@@ -20,10 +19,10 @@ export const renderDate = (date: Date) => {
   })
 }
 
-export const Changelog: React.FC<{ schema: ChangelogData.Schema }> = ({ schema }) => {
+export const Changelog: React.FC<{ changesets: Api.Schema.NonEmptyChangeSets }> = ({ changesets }) => {
   return (
     <Box>
-      {schema.versions.map(changeset => <Changeset key={changeset.date.toISOString()} changeset={changeset} />)}
+      {changesets.map(changeset => <Changeset key={changeset.date.toISOString()} changeset={changeset} />)}
     </Box>
   )
 }
@@ -62,69 +61,19 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
       </h1>
       {groupedChanges.map(group => (
         <CriticalitySection key={group.level} level={group.level} changes={group.changes}>
-          {group.changes.map(change => (
-            <Change key={`${change.type}-${change.path || change.message}`} change={change} schema={changeset.after} />
-          ))}
+          {group.changes.map(change => {
+            const type = GraphqlChange.Group.getType(change)
+            return (
+              <ComponentDispatch
+                key={`${change.type}-${change.path || change.message}`}
+                components={Group}
+                name={type}
+                props={{ change }}
+              />
+            )
+          })}
         </CriticalitySection>
       ))}
     </Box>
   )
 }
-
-const Change: React.FC<{ change: GraphqlChange.Change; schema: GrafaidOld.Schema.Schema }> = (
-  { change, schema },
-) => {
-  if (GraphqlChange.Group.isTypeOperation(change)) {
-    return <Group.TypeOperation change={change} />
-  } else if (GraphqlChange.Group.isTypeDescription(change)) {
-    return <Group.TypeDescription change={change} />
-  } else if (GraphqlChange.Group.isFieldOperation(change)) {
-    return <Group.FieldOperation change={change} />
-  } else if (GraphqlChange.Group.isFieldDescription(change)) {
-    return <Group.FieldDescription change={change} />
-  } else if (GraphqlChange.Group.isFieldDeprecation(change)) {
-    return <Group.FieldDeprecation change={change} />
-  } else if (GraphqlChange.Group.isFieldDeprecationReason(change)) {
-    return <Group.FieldDeprecationReason change={change} />
-  } else if (GraphqlChange.Group.isFieldArgumentOperation(change)) {
-    return <Group.FieldArgumentOperation change={change} />
-  } else if (GraphqlChange.Group.isFieldArgument(change)) {
-    return <Group.FieldArgument change={change} />
-  } else if (GraphqlChange.Group.isFieldArgumentDescription(change)) {
-    return <Group.FieldArgumentDescription change={change} />
-  } else if (GraphqlChange.Group.isEnumValueOperation(change)) {
-    return <Group.EnumValueOperation change={change} />
-  } else if (GraphqlChange.Group.isEnumValueDescription(change)) {
-    return <Group.EnumValueDescription change={change} />
-  } else if (GraphqlChange.Group.isEnumValueDeprecationReason(change)) {
-    return <Group.EnumValueDeprecationReason change={change} />
-  } else if (GraphqlChange.Group.isInputFieldOperation(change)) {
-    return <Group.InputFieldOperation change={change} />
-  } else if (GraphqlChange.Group.isInputFieldDescription(change)) {
-    return <Group.InputFieldDescription change={change} />
-  } else if (GraphqlChange.Group.isInputFieldDefaultValue(change)) {
-    return <Group.InputFieldDefaultValue change={change} />
-  } else if (GraphqlChange.Group.isUnionMemberOperation(change)) {
-    return <Group.UnionMemberOperation change={change} />
-  } else if (GraphqlChange.Group.isObjectTypeInterfaceOperation(change)) {
-    return <Group.ObjectTypeInterfaceOperation change={change} />
-  } else if (GraphqlChange.Group.isDirectiveOperation(change)) {
-    return <Group.DirectiveOperation change={change} />
-  } else if (GraphqlChange.Group.isDirectiveDescription(change)) {
-    return <Group.DirectiveDescription change={change} />
-  } else if (GraphqlChange.Group.isDirectiveLocationOperation(change)) {
-    return <Group.DirectiveLocationOperation change={change} />
-  } else if (GraphqlChange.Group.isDirectiveArgumentOperation(change)) {
-    return <Group.DirectiveArgumentOperation change={change} />
-  } else if (GraphqlChange.Group.isDirectiveArgument(change)) {
-    return <Group.DirectiveArgument change={change} />
-  } else if (GraphqlChange.Group.isDirectiveArgumentDescription(change)) {
-    return <Group.DirectiveArgumentDescription change={change} />
-  } else if (GraphqlChange.Group.isSchemaRootType(change)) {
-    return <Group.SchemaRootType change={change} />
-  } else if (GraphqlChange.Group.isDirectiveUsage(change)) {
-    return <Group.DirectiveUsage change={change} />
-  } else {
-    neverCase(change)
-  }
-}

package/src/template/components/CodeBlock.tsx

@@ -1,23 +1,21 @@
 import { type HighlightedCode, Pre } from 'codehike/code'
+import type { GraphQLSchema } from 'graphql'
 import React from 'react'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { GraphQLInteractive } from './GraphQLInteractive/index.js'
 
 interface CodeBlockProps {
   codeblock: HighlightedCode
+  schema?: GraphQLSchema
 }
 
 /**
  * Code block component for Code Hike
  * Handles pre-highlighted code blocks and interactive GraphQL blocks
  */
-export const CodeBlock: React.FC<CodeBlockProps> = ({ codeblock }) => {
+export const CodeBlock: React.FC<CodeBlockProps> = ({ codeblock, schema }) => {
   // Check if this is an interactive GraphQL block
   if (codeblock.lang === 'graphql' && codeblock.meta?.includes('interactive')) {
-    const schema = typeof window !== 'undefined'
-      ? (window as any).__POLEN_GRAPHQL_SCHEMA__
-      : null
-
     return (
       <GraphQLInteractive
         codeblock={codeblock}

package/src/template/components/ComponentDispatch.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+/**
+ * A generic component dispatcher that dynamically renders components from a namespace.
+ *
+ * Useful for cases where you need to select and render a component at runtime based on
+ * a string key, while maintaining some level of type safety through generics.
+ *
+ * @template TComponents - The object/namespace containing the components
+ * @template TName - The key type for component selection (constrained to keyof TComponents)
+ *
+ * @param components - The namespace/object containing the components to choose from
+ * @param name - The key to select which component to render
+ * @param props - The props to pass to the selected component
+ *
+ * @example
+ * ```tsx
+ * import * as MyComponents from './MyComponents'
+ *
+ * const componentName = getComponentName(data)
+ * return (
+ *   <ComponentDispatch
+ *     components={MyComponents}
+ *     name={componentName}
+ *     props={{ data }}
+ *   />
+ * )
+ * ```
+ */
+export const ComponentDispatch = <
+  TComponents extends Record<string, React.ComponentType<any>>,
+  TName extends keyof TComponents,
+>(
+  { components, name, props }: {
+    components: TComponents
+    name: TName
+    props: object
+  },
+) => {
+  const Component = components[name]
+  return React.createElement(Component as any, props)
+}

package/src/template/components/ReferenceLink.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+import { useVersionPath } from '../hooks/useVersionPath.js'
+import { Link } from './Link.js'
+
+interface Props {
+  /** The GraphQL type name */
+  type: string
+  /** Optional field name for field-specific links */
+  field?: string
+  /** Link content */
+  children: ReactNode
+}
+
+/**
+ * Link component for GraphQL schema references that preserves version context
+ *
+ * @example
+ * <ReferenceLink type="User">User</ReferenceLink>
+ * <ReferenceLink type="User" field="name">User.name</ReferenceLink>
+ */
+export const ReferenceLink = ({ type, field, children }: Props) => {
+  const versionPath = useVersionPath()
+
+  let path = `/reference/${versionPath}${type}`
+  if (field) {
+    path += `/${field}`
+  }
+
+  return (
+    <Link to={path}>
+      {children}
+    </Link>
+  )
+}

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.js'
+import { ReferenceLink } from './ReferenceLink.js'
 
 export interface Props {
   type: GraphQLType // Can be either GraphQLInputType or GraphQLOutputType
@@ -40,20 +40,18 @@ export const TypeAnnotation: FC<Props> = ({ type }) => {
     // Handle input object types
     if (isInputObjectType(namedType)) {
       return (
-        <Link
-          to={`/reference/${namedType.name}`}
-        >
+        <ReferenceLink type={namedType.name}>
           <Text color='green'>{namedType.name}</Text>
-        </Link>
+        </ReferenceLink>
       )
     }
 
     // If it's an expandable type (object or interface), make it a link
     // if (Grafaid.isExpandableType(namedType)) {
     return (
-      <Link to={`/reference/${namedType.name}`}>
+      <ReferenceLink type={namedType.name}>
         <Text color={isScalarType(namedType) ? `purple` : `blue`}>{namedType.name}</Text>
-      </Link>
+      </ReferenceLink>
     )
 
     // For scalar and other non-expandable types, just render the name

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.js'
+import { ReferenceLink } from './ReferenceLink.js'
 
 export interface Props {
   type: GraphQLObjectType | GraphQLInterfaceType
@@ -9,27 +9,24 @@ export interface Props {
 
 export const TypeFieldsLinkList: FC<Props> = ({ type }) => {
   return (
-    (
-      <Box>
-        <Heading>{type.name}</Heading>
-        <Flex direction='column'>
-          {Object.values(type.getFields()).map(field => {
-            return (
-              (
-                <Box key={field.name}>
-                  <Link
-                    to={`/reference/${type.name}/${field.name}`}
-                    // TODO: can we use styled from Radix?
-                    // activeProps={{ style: { fontWeight: `bold` } }}
-                  >
-                    {field.name}
-                  </Link>
-                </Box>
-              )
-            )
-          })}
-        </Flex>
-      </Box>
-    )
+    <Box>
+      <Heading>{type.name}</Heading>
+      <Flex direction='column'>
+        {Object.values(type.getFields()).map(field => {
+          return (
+            <Box key={field.name}>
+              <ReferenceLink
+                type={type.name}
+                field={field.name}
+                // TODO: can we use styled from Radix?
+                // activeProps={{ style: { fontWeight: `bold` } }}
+              >
+                {field.name}
+              </ReferenceLink>
+            </Box>
+          )
+        })}
+      </Flex>
+    </Box>
   )
 }

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.js'
+import { ReferenceLink } from './ReferenceLink.js'
 
 export interface Props {
   schema: GraphQLSchema
@@ -31,16 +31,14 @@ const TypeSection: FC<{ title: string; types: GraphQLNamedType[] }> = ({ title,
 
 const TypeList: FC<{ types: GraphQLNamedType[] }> = ({ types }) => {
   return (
-    (
-      <Box>
-        {types.map(type => (
-          <Box key={type.name}>
-            <Link to={`/reference/${type.name}`}>
-              {type.name}
-            </Link>
-          </Box>
-        ))}
-      </Box>
-    )
+    <Box>
+      {types.map(type => (
+        <Box key={type.name}>
+          <ReferenceLink type={type.name}>
+            {type.name}
+          </ReferenceLink>
+        </Box>
+      ))}
+    </Box>
   )
 }

package/src/template/components/VersionSelector.tsx

@@ -0,0 +1,50 @@
+import { Select } from '@radix-ui/themes'
+import { useNavigate, useParams } from 'react-router'
+import { VERSION_LATEST } from '../lib/schema-utils/constants.js'
+
+interface VersionSelectorProps {
+  availableVersions: string[]
+  currentVersion: string
+}
+
+export const VersionSelector = ({ availableVersions, currentVersion }: VersionSelectorProps) => {
+  const navigate = useNavigate()
+  const params = useParams()
+
+  // Don't show selector if only one version
+  if (availableVersions.length <= 1) {
+    return null
+  }
+
+  const handleVersionChange = (newVersion: string) => {
+    // Build new path preserving the current type/field if any
+    const currentType = params[`type`]
+    const currentField = params[`field`]
+
+    let newPath = `/reference`
+    if (newVersion !== VERSION_LATEST) {
+      newPath += `/version/${newVersion}`
+    }
+    if (currentType) {
+      newPath += `/${currentType}`
+      if (currentField) {
+        newPath += `/${currentField}`
+      }
+    }
+
+    navigate(newPath)
+  }
+
+  return (
+    <Select.Root value={currentVersion} onValueChange={handleVersionChange}>
+      <Select.Trigger />
+      <Select.Content>
+        {availableVersions.map(version => (
+          <Select.Item key={version} value={version}>
+            {version === VERSION_LATEST ? `Latest` : version}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  )
+}

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

@@ -1,18 +1,19 @@
 import { Grafaid } from '#lib/grafaid/index'
 import { Code, Flex } from '@radix-ui/themes'
-import { Link } from '../Link.js'
+import { ReferenceLink } from '../ReferenceLink.js'
 import { TypeKindIcon } from './graphql.js'
 import { typeKindTokensIndex } from './type-kind-tokens.js'
 
 export const TypeLink: React.FC<{ type: Grafaid.Schema.TypesLike.Named }> = ({ type }) => {
   const kind = Grafaid.Schema.typeKindFromClass(type)
+
   return (
-    <Link to={`/reference/${type.name}`}>
+    <ReferenceLink type={type.name}>
       <Flex align='center' gap='1' display='inline-flex'>
         <TypeKindIcon kind={kind} />
         {` `}
         <Code color={typeKindTokensIndex[kind].color} variant='ghost'>{type.name}</Code>
       </Flex>
-    </Link>
+    </ReferenceLink>
   )
 }

package/src/template/hooks/useVersionPath.ts

@@ -0,0 +1,10 @@
+import { useParams } from 'react-router'
+
+/**
+ * Custom hook to generate version path for versioned routes
+ * Returns the appropriate path prefix for the current version
+ */
+export const useVersionPath = (): string => {
+  const params = useParams()
+  return params[`version`] ? `version/${params[`version`]}/` : ``
+}

package/src/template/{components → layouts}/ChangelogLayout.tsx

@@ -8,7 +8,7 @@ import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
 import { Box, Flex, Text } from '@radix-ui/themes'
 import type React from 'react'
 import { useEffect, useState } from 'react'
-import { renderDate } from './Changelog.js'
+import { renderDate } from '../components/Changelog.js'
 
 interface ChangelogLayoutProps {
   children: React.ReactNode

package/src/template/layouts/index.ts

@@ -1 +1,2 @@
+export * from './ChangelogLayout.js'
 export * from './SidebarLayout.js'

package/src/template/lib/fetch-text.ts

@@ -0,0 +1,13 @@
+/**
+ * Fetch text content from a URL
+ * @param url - The URL to fetch from
+ * @returns Promise that resolves to the text content
+ * @throws Error if the request fails
+ */
+export const fetchText = async (url: string): Promise<string> => {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Failed to fetch: ${url} (${response.status} ${response.statusText})`)
+  }
+  return response.text()
+}

package/src/template/lib/polen-url.ts

@@ -33,3 +33,23 @@ export const polenUrlPath = (...segments: string[]): string => {
 
   return basePath + path
 }
+
+/**
+ * Create a Polen URL path for assets.
+ *
+ * This is a convenience wrapper around `polenUrlPath` that automatically
+ * prepends the assets root path.
+ *
+ * @param segments - Path segments within the assets directory
+ * @returns Full URL path to the asset
+ *
+ * @example
+ * polenUrlPathAssets('schemas', 'latest.json') // '/demos/pokemon/assets/schemas/latest.json'
+ * polenUrlPathAssets('images/logo.png') // '/demos/pokemon/assets/images/logo.png'
+ */
+export const polenUrlPathAssets = (...segments: string[]): string => {
+  return polenUrlPath(
+    PROJECT_DATA.server.routes.assets,
+    ...segments,
+  )
+}

package/src/template/lib/schema-utils/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * Re-exports of schema constants for template usage
+ */
+export { dateToVersionString, VERSION_LATEST } from '#api/schema/schema'

package/src/template/lib/schema-utils/schema-utils.ts

@@ -0,0 +1,42 @@
+import { buildSchema, print } from 'graphql'
+import type { DocumentNode, GraphQLSchema } from 'graphql'
+
+/**
+ * Convert a GraphQL AST back to a GraphQL Schema object
+ */
+export const astToSchema = (ast: DocumentNode): GraphQLSchema => {
+  // Convert AST back to SDL string
+  const sdl = print(ast)
+  // Build schema from SDL
+  return buildSchema(sdl)
+}
+
+/**
+ * Simple cache for loaded schemas to avoid repeated conversions
+ */
+export const createSchemaCache = () => {
+  const cache = new Map<string, GraphQLSchema>()
+
+  return {
+    get(version: string): GraphQLSchema | undefined {
+      return cache.get(version)
+    },
+
+    set(version: string, schema: GraphQLSchema): void {
+      // Limit cache size to prevent memory issues
+      if (cache.size >= 10) {
+        const firstKey = cache.keys().next().value
+        if (firstKey) cache.delete(firstKey)
+      }
+      cache.set(version, schema)
+    },
+
+    has(version: string): boolean {
+      return cache.has(version)
+    },
+
+    clear(): void {
+      cache.clear()
+    },
+  }
+}

package/src/template/routes/changelog.tsx

@@ -1,30 +1,39 @@
-import { createRoute } from '#lib/react-router-aid/react-router-aid'
+import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
+import { route } 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.js'
-import { ChangelogLayout } from '../components/ChangelogLayout.js'
+import { ChangelogLayout } from '../layouts/index.js'
+import { schemaSource } from '../sources/schema-source.js'
+
+const loader = createLoader(async () => {
+  // Check if schema exists first
+  if (schemaSource.isEmpty) {
+    return { changesets: [] }
+  }
+
+  // Fetch all changesets with before/after/changes data
+  const changesets = await schemaSource.getAllChangesets()
 
-const loader = createLoader(() => {
   return {
-    schema: PROJECT_DATA.schema,
+    changesets,
   }
 })
 
 const Component = () => {
   const data = useLoaderData<typeof loader>()
 
-  if (!data.schema) {
-    return <div>No data to show. There is no schema is.</div>
+  if (data.changesets.length === 0) {
+    return <div>No schema versions available for changelog.</div>
   }
 
   return (
-    <ChangelogLayout versions={data.schema.versions}>
-      <Changelog schema={data.schema} />
+    <ChangelogLayout versions={data.changesets}>
+      <Changelog changesets={data.changesets as [GraphqlChangeset.ChangeSet, ...GraphqlChangeset.ChangeSet[]]} />
     </ChangelogLayout>
   )
 }
 
-export const changelog = createRoute({
+export const changelog = route({
   path: `changelog`,
   loader,
   Component,

package/src/template/routes/index.tsx

@@ -1,10 +1,10 @@
-import { createRouteIndex } from '#lib/react-router-aid/react-router-aid'
+import { routeIndex } from '#lib/react-router-aid/react-router-aid'
 import { Box } from '@radix-ui/themes'
 
 const Component = () => {
   return <Box>home todo</Box>
 }
 
-export const index = createRouteIndex({
+export const index = routeIndex({
   Component,
 })