From d499109a7faf5fc3c380d9ff4e627ab4d6615d65 Mon Sep 17 00:00:00 2001
From: DeclanBoller <declan.boller@3plearning.com>
Date: Tue, 17 Sep 2024 09:38:44 +1000
Subject: [PATCH] feat: support gts and gjs files

---
 packages/graphql-tag-pluck/src/config.ts |  6 ++++
 packages/graphql-tag-pluck/src/index.ts  | 39 +++++++++++++++++++++++-
 packages/loaders/code-file/src/index.ts  |  4 ++-
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/graphql-tag-pluck/src/config.ts b/packages/graphql-tag-pluck/src/config.ts
index 5091aae312b..acdf9d5344d 100644
--- a/packages/graphql-tag-pluck/src/config.ts
+++ b/packages/graphql-tag-pluck/src/config.ts
@@ -80,6 +80,12 @@ export default function generateConfig(
     case '.astro':
       plugins.push('typescript', 'jsx');
       break;
+    case '.gts':
+      plugins.push('typescript');
+      break;
+    case '.gjs':
+      plugins.push('jsx');
+      break;
     default:
       plugins.push('jsx', ...dynamicFlowPlugins);
       break;
diff --git a/packages/graphql-tag-pluck/src/index.ts b/packages/graphql-tag-pluck/src/index.ts
index 4906097a2d7..a8af897b8e5 100644
--- a/packages/graphql-tag-pluck/src/index.ts
+++ b/packages/graphql-tag-pluck/src/index.ts
@@ -147,6 +147,8 @@ const supportedExtensions = [
   '.vue',
   '.svelte',
   '.astro',
+  '.gts',
+  '.gjs',
 ];
 
 // tslint:disable-next-line: no-implicit-dependencies
@@ -196,6 +198,12 @@ function parseWithAstroSync(
   return fileInTsx.code;
 }
 
+function parseWithGlimmer(glimmerSyntax: typeof import('@glimmer/syntax'), fileData: string) {
+  const ast = glimmerSyntax.preprocess(fileData);
+  // You may want to traverse the AST or extract specific elements
+  return glimmerSyntax.print(ast);
+}
+
 /**
  * Asynchronously plucks GraphQL template literals from a single file.
  *
@@ -238,7 +246,7 @@ export const gqlPluckFromCodeString = async (
 /**
  * Synchronously plucks GraphQL template literals from a single file
  *
- * Supported file extensions include: `.js`, `.mjs`, `.cjs`, `.jsx`, `.ts`, `.mjs`, `.cjs`, `.tsx`, `.flow`, `.flow.js`, `.flow.jsx`, `.vue`, `.svelte`, `.astro`
+ * Supported file extensions include: `.js`, `.mjs`, `.cjs`, `.jsx`, `.ts`, `.mjs`, `.cjs`, `.tsx`, `.flow`, `.flow.js`, `.flow.jsx`, `.vue`, `.svelte`, `.astro`, `.gts`, `.gjs`
  *
  * @param filePath Path to the file containing the code. Required to detect the file type
  * @param code The contents of the file being parsed.
@@ -263,6 +271,8 @@ export const gqlPluckFromCodeStringSync = (
     code = pluckSvelteFileScriptSync(code);
   } else if (fileExt === '.astro') {
     code = pluckAstroFileScriptSync(code);
+  } else if (fileExt === '.gts' || fileExt === '.gjs') {
+    code = pluckGlimmerFileScriptSync(code);
   }
 
   const sources = parseCode({ code, filePath, options }).map(
@@ -359,6 +369,21 @@ const MissingAstroCompilerError = new Error(
   `),
 );
 
+const MissingGlimmerCompilerError = new Error(
+  freeText(`
+        GraphQL template literals cannot be plucked from a Glimmer template code without having the "@glimmer/syntax" package installed.
+        Please install it and try again.
+
+        Via NPM:
+
+            $ npm install @glimmer/syntax
+
+        Via Yarn:
+
+            $ yarn add @glimmer/syntax
+      `),
+);
+
 async function loadVueCompilerAsync() {
   try {
     // eslint-disable-next-line import/no-extraneous-dependencies
@@ -445,3 +470,15 @@ function pluckAstroFileScriptSync(fileData: string) {
 
   return parseWithAstroSync(astroCompiler, fileData);
 }
+
+function pluckGlimmerFileScriptSync(fileData: string) {
+  let glimmerSyntax: typeof import('@glimmer/syntax');
+  try {
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    glimmerSyntax = require('@glimmer/syntax');
+  } catch {
+    throw MissingGlimmerCompilerError;
+  }
+
+  return parseWithGlimmer(glimmerSyntax, fileData);
+}
diff --git a/packages/loaders/code-file/src/index.ts b/packages/loaders/code-file/src/index.ts
index b5cc486a3ed..0fd8f2ac610 100644
--- a/packages/loaders/code-file/src/index.ts
+++ b/packages/loaders/code-file/src/index.ts
@@ -55,6 +55,8 @@ const FILE_EXTENSIONS = [
   '.vue',
   '.svelte',
   '.astro',
+  '.gts',
+  '.gjs',
 ];
 
 function createGlobbyOptions(options: CodeFileLoaderOptions): GlobbyOptions {
@@ -76,7 +78,7 @@ const buildIgnoreGlob = (path: string) => `!${path}`;
  * ```
  *
  * Supported extensions include: `.ts`, `.mts`, `.cts`, `.tsx`, `.js`, `.mjs`,
- * `.cjs`, `.jsx`, `.vue`, `.svelte`, `.astro`
+ * `.cjs`, `.jsx`, `.vue`, `.svelte`, `.astro`, `.gts`, `.gjs`.
  */
 export class CodeFileLoader implements Loader<CodeFileLoaderOptions> {
   private config: CodeFileLoaderConfig;