feat(codegen): add groq finder methods. (#5980)

Adds methods that parses a js/ts source file and returns all groq queries.

Co-authored-by: Tonina Zhelyazkova <zhelyazkova.tonina@gmail.com>

Author: sgulseth

packages/@sanity/codegen/babel.config.json

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["@babel/preset-env", {"targets": "maintained node versions"}],
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ]
+}

packages/@sanity/codegen/package.json

@@ -57,8 +57,24 @@
     "watch": "pkg-utils watch --tsconfig tsconfig.lib.json",
     "test": "jest"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/register": "^7.23.7",
+    "@babel/traverse": "^7.23.5",
+    "@babel/types": "^7.23.9",
+    "debug": "^4.3.4",
+    "tsconfig-paths": "^4.2.0"
+  },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__register": "^7.17.3",
+    "@types/babel__traverse": "^7.18.1",
+    "@types/debug": "^4.1.12",
+    "groq": "workspace:*",
     "rimraf": "^3.0.2"
   },
   "engines": {

packages/@sanity/codegen/src/_exports/index.ts

@@ -1 +1,3 @@
-export const TODO = 1
+export {findQueriesInSource} from '../typescript/findQueriesInSource'
+export {getResolver} from '../typescript/moduleResolver'
+export {registerBabel} from '../typescript/registerBabel'

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

@@ -0,0 +1,113 @@
+import path from 'node:path'
+
+import {describe, expect, test} from '@jest/globals'
+
+import {findQueriesInSource} from '../findQueriesInSource'
+
+describe('findQueries', () => {
+  describe('should find queries in source', () => {
+    test('plain string', () => {
+      const source = `
+      import { groq } from "groq";
+      const postQuery = groq\`*[_type == "author"]\`
+      const res = sanity.fetch(postQuery);
+    `
+
+      const queries = findQueriesInSource(source, 'test.ts')
+      const queryResult = queries[0]
+
+      expect(queryResult?.result).toEqual('*[_type == "author"]')
+    })
+
+    test('with variables', () => {
+      const source = `
+      import { groq } from "groq";
+      const type = "author";
+      const authorQuery = groq\`*[_type == "\${type}"]\`
+      const res = sanity.fetch(authorQuery);
+    `
+
+      const queries = findQueriesInSource(source, 'test.ts')
+      const queryResult = queries[0]
+
+      expect(queryResult?.result).toEqual('*[_type == "author"]')
+    })
+
+    test('with function', () => {
+      const source = `
+      import { groq } from "groq";
+      const getType = () => () => () => "author";
+      const query = groq\`*[_type == "\${getType()()()}"]\`
+      const res = sanity.fetch(query);
+    `
+
+      const queries = findQueriesInSource(source, 'test.ts')
+
+      const queryResult = queries[0]
+
+      expect(queryResult?.result).toEqual('*[_type == "author"]')
+    })
+
+    test('with block comment', () => {
+      const source = `
+        import { groq } from "groq";
+        const type = "author";
+        const query = /* groq */ groq\`*[_type == "\${type}"]\`;
+        const res = sanity.fetch(query);
+      `
+
+      const queries = findQueriesInSource(source, 'test.ts')
+      const queryResult = queries[0]
+
+      expect(queryResult?.result).toEqual('*[_type == "author"]')
+    })
+  })
+
+  test('should not find inline queries in source', () => {
+    const source = `
+        import { groq } from "groq";
+        const res = sanity.fetch(groq\`*[_type == "author"]\`);
+      `
+
+    const queries = findQueriesInSource(source, 'test.ts')
+
+    expect(queries.length).toBe(0)
+  })
+
+  test("should name queries with 'Result' at the end", () => {
+    const source = `
+      import { groq } from "groq";
+      const postQuery = groq\`*[_type == "author"]\`
+      const res = sanity.fetch(postQueryResult);
+    `
+
+    const queries = findQueriesInSource(source, 'test.ts')
+    const queryResult = queries[0]
+
+    expect(queryResult?.name.substr(-6)).toBe('Result')
+  })
+
+  test('should import', () => {
+    const source = `
+      import { groq } from "groq";
+      import {foo}  from "./fixtures/exportVar";
+      const postQuery = groq\`*[_type == "\${foo}"]\`
+      const res = sanity.fetch(postQueryResult);
+    `
+
+    const resolver: NodeJS.RequireResolve = (id) => {
+      if (id === 'foo') {
+        return path.resolve(__dirname, 'fixtures', 'exportVar')
+      }
+      return require.resolve(id)
+    }
+    resolver.paths = (request: string): string[] | null => {
+      return require.resolve.paths(request)
+    }
+
+    const queries = findQueriesInSource(source, 'test.ts', undefined, resolver)
+    const queryResult = queries[0]
+
+    expect(queryResult?.name.substr(-6)).toBe('Result')
+  })
+})

packages/@sanity/codegen/src/typescript/__tests__/fixtures/exportStar.ts

@@ -0,0 +1 @@
+export * from './exportVar'

packages/@sanity/codegen/src/typescript/__tests__/fixtures/exportVar.ts

@@ -0,0 +1 @@
+export const foo = 'foo'

packages/@sanity/codegen/src/typescript/__tests__/fixtures/source1.ts

@@ -0,0 +1,3 @@
+import groq from 'groq'
+
+export const postQuery = groq`*[_type == "author"]`

packages/@sanity/codegen/src/typescript/__tests__/fixtures/source2.ts

@@ -0,0 +1,3 @@
+import groq from 'groq'
+
+const postQuery = groq`*[_type == "author"]`

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

@@ -0,0 +1,64 @@
+import {createRequire} from 'node:module'
+import {join} from 'node:path'
+
+import {type TransformOptions, traverse} from '@babel/core'
+import * as babelTypes from '@babel/types'
+
+import {type NamedQueryResult, resolveExpression} from './expressionResolvers'
+import {parseSourceFile} from './parseSource'
+
+const require = createRequire(__filename)
+
+const groqTagName = 'groq'
+
+const defaultBabelOptions = {
+  extends: join(__dirname, '..', '..', 'babel.config.json'),
+}
+
+/**
+ * findQueriesInSource takes a source string and returns all GROQ queries in it.
+ * @param source - The source code to search for queries
+ * @param filename - The filename of the source code
+ * @param babelConfig - The babel configuration to use when parsing the source
+ * @param resolver - A resolver function to use when resolving module imports
+ * @returns
+ * @beta
+ * @internal
+ */
+export function findQueriesInSource(
+  source: string,
+  filename: string,
+  babelConfig: TransformOptions = defaultBabelOptions,
+  resolver: NodeJS.RequireResolve = require.resolve,
+): NamedQueryResult[] {
+  const queries: NamedQueryResult[] = []
+  const file = parseSourceFile(source, filename, babelConfig)
+
+  traverse(file, {
+    // Look for variable declarations, e.g. `const myQuery = groq`... and extract the query.
+    // The variable name is used as the name of the query result type
+    VariableDeclarator({node, scope}) {
+      const init = node.init
+      // Look for tagged template expressions that are called with the `groq` tag
+      if (
+        babelTypes.isTaggedTemplateExpression(init) &&
+        babelTypes.isIdentifier(init.tag) &&
+        babelTypes.isIdentifier(node.id) &&
+        init.tag.name === groqTagName
+      ) {
+        const queryName = `${node.id.name}Result`
+        const queryResult = resolveExpression({
+          node: init,
+          file,
+          scope,
+          babelConfig,
+          filename,
+          resolver,
+        })
+        queries.push({name: queryName, result: queryResult})
+      }
+    },
+  })
+
+  return queries
+}

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

@@ -0,0 +1,41 @@
+import createDebug from 'debug'
+import {createMatchPath, loadConfig as loadTSConfig} from 'tsconfig-paths'
+
+const debug = createDebug('sanity:codegen:moduleResolver')
+
+/**
+ * This is a custom implementation of require.resolve that takes into account the paths
+ * configuration in tsconfig.json. This is necessary if we want to resolve paths that are
+ * custom defined in the tsconfig.json file.
+ * Resolving here is best effort and might not work in all cases.
+ * @beta
+ */
+export function getResolver(cwd?: string): NodeJS.RequireResolve {
+  const tsConfig = loadTSConfig(cwd)
+
+  if (tsConfig.resultType === 'failed') {
+    debug('Could not load tsconfig, using default resolver: %s', tsConfig.message)
+    return require.resolve
+  }
+
+  const matchPath = createMatchPath(
+    tsConfig.absoluteBaseUrl,
+    tsConfig.paths,
+    tsConfig.mainFields,
+    tsConfig.addMatchAll,
+  )
+
+  const resolve = function (request: string, options?: {paths?: string[]}): string {
+    const found = matchPath(request)
+    if (found !== undefined) {
+      return require.resolve(found, options)
+    }
+    return require.resolve(request, options)
+  }
+
+  // wrap the resolve.path function to make it available.
+  resolve.paths = (request: string): string[] | null => {
+    return require.resolve.paths(request)
+  }
+  return resolve
+}

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

@@ -0,0 +1,20 @@
+import {parse, type TransformOptions} from '@babel/core'
+import type * as babelTypes from '@babel/types'
+
+// helper function to parse a source file
+export function parseSourceFile(
+  source: string,
+  filename: string,
+  babelOptions: TransformOptions,
+): babelTypes.File {
+  const result = parse(source, {
+    ...babelOptions,
+    filename,
+  })
+
+  if (!result) {
+    throw new Error(`Failed to parse ${filename}`)
+  }
+
+  return result
+}

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

@@ -0,0 +1,17 @@
+import {join} from 'node:path'
+
+import {type TransformOptions} from '@babel/core'
+import register from '@babel/register'
+
+const defaultBabelOptions = {
+  extends: join(__dirname, '..', '..', 'babel.config.json'),
+}
+
+/**
+ * Register Babel with the given options
+ * @param babelOptions - The options to use when registering Babel
+ * @beta
+ */
+export function registerBabel(babelOptions: TransformOptions = defaultBabelOptions): void {
+  register({...babelOptions, extensions: ['.ts', '.tsx', '.js', '.jsx']})
+}