fix: Added prerender step for cloudflare.

Author: dlabaj

src/__tests__/pages/api/__tests__/[version]/icons/index.test.ts

@@ -1,5 +1,4 @@
 import { GET } from '../../../../../../pages/api/[version]/icons/index'
-import { getAllIcons } from '../../../../../../utils/icons/reactIcons'
 
 const mockApiIndex = {
   versions: ['v5', 'v6'],
@@ -35,8 +34,18 @@ const mockIcons = [
   },
 ]
 
+function createFetchMock(): typeof fetch {
+  return jest.fn((input: RequestInfo | URL) => {
+    const url = typeof input === 'string' ? input : input.toString()
+    const json = () =>
+      Promise.resolve(
+        url.includes('iconsIndex.json') ? { icons: mockIcons } : mockApiIndex
+      )
+    return Promise.resolve({ ok: true, json } as Response)
+  }) as typeof fetch
+}
+
 jest.mock('../../../../../../utils/icons/reactIcons', () => ({
-  getAllIcons: jest.fn(() => Promise.resolve(mockIcons)),
   filterIcons: jest.fn((icons: typeof mockIcons, filter: string) => {
     if (!filter || !filter.trim()) {
       return icons
@@ -51,12 +60,7 @@ jest.mock('../../../../../../utils/icons/reactIcons', () => ({
 }))
 
 it('returns all icons with metadata', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6' },
@@ -83,12 +87,7 @@ it('returns all icons with metadata', async () => {
 })
 
 it('filters icons when filter parameter is provided', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6' },
@@ -106,12 +105,7 @@ it('filters icons when filter parameter is provided', async () => {
 })
 
 it('filter is case-insensitive', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6' },
@@ -126,12 +120,7 @@ it('filter is case-insensitive', async () => {
 })
 
 it('returns empty icons array when filter yields no matches', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6' },
@@ -147,12 +136,7 @@ it('returns empty icons array when filter yields no matches', async () => {
 })
 
 it('returns 404 error for nonexistent version', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v99' },
@@ -169,12 +153,7 @@ it('returns 404 error for nonexistent version', async () => {
 })
 
 it('returns 400 error when version parameter is missing', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: {},
@@ -189,15 +168,17 @@ it('returns 400 error when version parameter is missing', async () => {
   jest.restoreAllMocks()
 })
 
-it('returns 500 error when getAllIcons throws', async () => {
-  ;(getAllIcons as jest.Mock).mockRejectedValueOnce(new Error('Load failed'))
-
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
+it('returns 500 error when fetchIconsIndex throws', async () => {
+  global.fetch = jest.fn((input: RequestInfo | URL) => {
+    const url = typeof input === 'string' ? input : input.toString()
+    if (url.includes('iconsIndex.json')) {
+      return Promise.resolve({ ok: false, status: 500, statusText: 'Internal Server Error' } as Response)
+    }
+    return Promise.resolve({
       ok: true,
       json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+    } as Response)
+  }) as typeof fetch
 
   const response = await GET({
     params: { version: 'v6' },

src/pages/api/[version]/icons/index.ts

@@ -1,7 +1,8 @@
 import type { APIRoute } from 'astro'
 import { createJsonResponse } from '../../../../utils/apiHelpers'
 import { fetchApiIndex } from '../../../../utils/apiIndex/fetch'
-import { getAllIcons, filterIcons } from '../../../../utils/icons/reactIcons'
+import { fetchIconsIndex } from '../../../../utils/icons/fetch'
+import { filterIcons } from '../../../../utils/icons/reactIcons'
 
 export const prerender = false
 
@@ -29,7 +30,7 @@ export const GET: APIRoute = async ({ params, url }) => {
     }
 
     const filter = url.searchParams.get('filter') ?? ''
-    const icons = await getAllIcons()
+    const icons = await fetchIconsIndex(url)
     const filtered = filterIcons(icons, filter)
 
     return createJsonResponse({

src/pages/iconsIndex.json.ts

@@ -0,0 +1,31 @@
+import type { APIRoute } from 'astro'
+import { getAllIcons } from '../utils/icons/reactIcons'
+
+/**
+ * Prerender at build time so this doesn't run in the Cloudflare Worker.
+ * getAllIcons() uses dynamic imports of react-icons which fail in Workers
+ * due to bundle size and Node.js compatibility.
+ */
+export const prerender = true
+
+export const GET: APIRoute = async () => {
+  try {
+    const icons = await getAllIcons()
+    return new Response(JSON.stringify({ icons }), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  } catch (error) {
+    return new Response(
+      JSON.stringify({ error: 'Failed to load icons index', details: String(error) }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+  }
+}

src/utils/icons/fetch.ts

@@ -0,0 +1,27 @@
+import type { IconMetadata } from './reactIcons'
+
+export interface IconsIndex {
+  icons: IconMetadata[]
+}
+
+/**
+ * Fetches the icons index from the server as a static asset.
+ * Used by API routes at runtime instead of calling getAllIcons() which uses
+ * dynamic imports that fail in Cloudflare Workers.
+ *
+ * @param url - The URL object from the API route context
+ * @returns Promise resolving to the icons index structure
+ */
+export async function fetchIconsIndex(url: URL): Promise<IconMetadata[]> {
+  const iconsIndexUrl = new URL('/iconsIndex.json', url.origin)
+  const response = await fetch(iconsIndexUrl)
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to load icons index: ${response.status} ${response.statusText}`
+    )
+  }
+
+  const data = (await response.json()) as IconsIndex
+  return data.icons
+}