feat: graphql-tag-pluck support for .gts & .gjs files [Issue #6519]

.changeset/thirty-parents-walk.md

@@ -0,0 +1,6 @@
+---
+'@graphql-tools/graphql-tag-pluck': patch
+'@graphql-tools/code-file-loader': patch
+---
+
+add `.gts` and `.gjs` file support

packages/graphql-tag-pluck/package.json

@@ -66,6 +66,7 @@
     "@types/babel__traverse": "7.20.6",
     "@vue/compiler-sfc": "3.5.6",
     "astrojs-compiler-sync": "^1.0.0",
+    "content-tag": "^2.0.1",
     "svelte": "4.2.19",
     "svelte2tsx": "0.7.19"
   },

packages/graphql-tag-pluck/src/config.ts

@@ -80,6 +80,15 @@ export default function generateConfig(
     case '.astro':
       plugins.push('typescript', 'jsx');
       break;
+    case '.gts':
+      plugins.push('typescript');
+      break;
+    case '.gjs':
+      // .gjs files need to be parsed as TypeScript because Ember relies on decorators, which are handled by TypeScript.
+      // without this, it throws a SyntaxError: Unexpected token, expected "{"
+      // when native decorators are supported, we should remove this
+      plugins.push('typescript');
+      break;
     default:
       plugins.push('jsx', ...dynamicFlowPlugins);
       break;

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,11 @@ function parseWithAstroSync(
   return fileInTsx.code;
 }
 
+function transformGlimmerFile(glimmerSyntax: typeof import('content-tag'), fileData: string) {
+  const processor = new glimmerSyntax.Preprocessor();
+  return processor.process(fileData);
+}
+
 /**
  * Asynchronously plucks GraphQL template literals from a single file.
  *
@@ -224,6 +231,8 @@ export const gqlPluckFromCodeString = async (
     code = await pluckSvelteFileScript(code);
   } else if (fileExt === '.astro') {
     code = await pluckAstroFileScript(code);
+  } else if (fileExt === '.gts' || fileExt === '.gjs') {
+    code = await pluckGlimmerFileScript(code);
   }
 
   const sources = parseCode({ code, filePath, options }).map(
@@ -238,7 +247,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 +272,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 +370,21 @@ const MissingAstroCompilerError = new Error(
   `),
 );
 
+const MissingGlimmerCompilerError = new Error(
+  freeText(`
+        GraphQL template literals cannot be plucked from a Glimmer template code without having the "content-tag" package installed.
+        Please install it and try again.
+
+        Via NPM:
+
+            $ npm install content-tag
+
+        Via Yarn:
+
+            $ yarn add content-tag
+      `),
+);
+
 async function loadVueCompilerAsync() {
   try {
     // eslint-disable-next-line import/no-extraneous-dependencies
@@ -445,3 +471,25 @@ function pluckAstroFileScriptSync(fileData: string) {
 
   return parseWithAstroSync(astroCompiler, fileData);
 }
+
+async function pluckGlimmerFileScript(fileData: string) {
+  let contentTag: typeof import('content-tag');
+  try {
+    contentTag = await import('content-tag');
+  } catch {
+    throw MissingGlimmerCompilerError;
+  }
+
+  return transformGlimmerFile(contentTag, fileData);
+}
+
+function pluckGlimmerFileScriptSync(fileData: string) {
+  let contentTag: typeof import('content-tag');
+  try {
+    contentTag = require('content-tag');
+  } catch {
+    throw MissingGlimmerCompilerError;
+  }
+
+  return transformGlimmerFile(contentTag, fileData);
+}