feat(typegen): add support for astro (#8098)

Author: sgulseth

packages/@sanity/codegen/src/typescript/__tests__/findQueriesInPath.test.ts

@@ -40,4 +40,18 @@ describe('findQueriesInPath', () => {
     assert(result.value.type === 'error') // workaround for TS
     expect(result.value.error.message).toMatch(/Duplicate query name found:/)
   })
+
+  test('can find and handle .astro files', async () => {
+    const stream = findQueriesInPath({
+      path: [path.join('**', 'typescript', '__tests__', 'fixtures', '*.astro')],
+    })
+    const res = []
+    for await (const result of stream) {
+      res.push(result)
+    }
+    expect(res.length).toBe(1)
+    expect(res[0].type).toBe('queries')
+    assert(res[0].type === 'queries') // workaround for TS
+    expect(res[0].queries.length).toBe(1)
+  })
 })

packages/@sanity/codegen/src/typescript/__tests__/fixtures/import.astro

@@ -0,0 +1,9 @@
+---
+import groq from 'groq'
+import { type Client } from '@sanity/client'
+
+export const query = groq`*[_type == "myType"]`
+---
+<MyComponent>
+  <div>{query}</div>
+</MyComponent>

packages/@sanity/codegen/src/typescript/__tests__/parseSource.test.ts

@@ -0,0 +1,31 @@
+import {describe, expect, test} from 'vitest'
+
+import {parseSourceFile} from '../parseSource'
+
+describe('parseSource', () => {
+  test('should parse astro', () => {
+    const source = `
+---
+import Layout from '../layouts/Layout.astro';
+import { project_dir } from '../libs/utils';
+
+
+const proj = "10_prerender"
+const render_time = new Date()
+export const prerender = true
+---
+
+<Layout title="Prerendered">
+  <main>
+    <h1>Prerendered</h1>
+      <p>This page was prerendered at {render_time.toISOString()}</p>
+  </main>
+</Layout>
+    `
+
+    const parsed = parseSourceFile(source, 'foo.astro', {})
+
+    expect(parsed.type).toBe('File')
+    expect(parsed.program.body.length).toBe(5)
+  })
+})

packages/@sanity/codegen/src/typescript/parseSource.ts

@@ -3,10 +3,17 @@ import type * as babelTypes from '@babel/types'
 
 // helper function to parse a source file
 export function parseSourceFile(
-  source: string,
-  filename: string,
+  _source: string,
+  _filename: string,
   babelOptions: TransformOptions,
 ): babelTypes.File {
+  let source = _source
+  let filename = _filename
+  if (filename.endsWith('.astro')) {
+    // append .ts to the filename so babel will parse it as typescript
+    filename += '.ts'
+    source = parseAstro(source)
+  }
   const result = parse(source, {
     ...babelOptions,
     filename,
@@ -18,3 +25,17 @@ export function parseSourceFile(
 
   return result
 }
+
+function parseAstro(source: string): string {
+  // find all code fences, the js code is between --- and ---
+  const codeFences = source.match(/---\n([\s\S]*?)\n---/g)
+  if (!codeFences) {
+    return ''
+  }
+
+  return codeFences
+    .map((codeFence) => {
+      return codeFence.split('\n').slice(1, -1).join('\n')
+    })
+    .join('\n')
+}