fix: astro parsing in LSP by allowing async parsers (#3671)

.changeset/seven-scissors-guess.md

@@ -0,0 +1,8 @@
+---
+'graphql-language-service-server': patch
+---
+
+- switch to using just @astrojs/compiler instead of the more complex "sync" adaptation using workers
+- upgrade vue SFC parser to use the new reccomended import from vue package itself
+- fix prettier config related to prettier & format on save for parseDocument tests
+- fix jest/babel config related to some of the parsers

.eslintignore

@@ -6,3 +6,4 @@ packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql
 CHANGELOG.md
 **/CHANGELOG.md
 packages/vscode-graphql-syntax/tests/__fixtures__/
+packages/graphql-language-service-server/src/__tests__/parseDocument.test.ts

.prettierignore

@@ -0,0 +1,2 @@
+# removing this will break tests b/c of whitespace changes + format on save/commit, etc
+packages/graphql-language-service-server/src/__tests__/parseDocument.test.ts

babel.config.js

@@ -6,7 +6,7 @@ const envConfig = {
 
 if (process.env.ESM) {
   envConfig.modules = false;
-  envConfig.targets = { node: true };
+  envConfig.targets = { node: 'current' };
   envConfig.bugfixes = true;
 }
 
@@ -36,7 +36,10 @@ module.exports = {
   },
   plugins: [
     require.resolve('@babel/plugin-proposal-class-properties'),
+
     require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
     require.resolve('@babel/plugin-proposal-optional-chaining'),
+    require.resolve('@babel/plugin-transform-private-methods'),
+    ['babel-plugin-transform-import-meta', { module: 'ES6' }],
   ],
 };

jest.config.base.js

@@ -37,6 +37,7 @@ module.exports = (dir, env = 'jsdom') => {
     testEnvironment: env,
     testPathIgnorePatterns: ['node_modules', 'dist', 'cypress'],
     collectCoverageFrom: ['**/src/**/*.{js,jsx,ts,tsx}'],
+    transformIgnorePatterns: ['node_modules/(!@astrojs/compiler)'],
     coveragePathIgnorePatterns: [
       'dist',
       'esm',

package.json

@@ -84,6 +84,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-private-methods": "^7.24.7",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
@@ -104,6 +105,7 @@
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
     "babel-jest": "^29.4.3",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "concurrently": "^7.0.0",
     "copy": "^0.3.2",
     "cspell": "^5.15.2",

packages/graphql-language-service-server/package.json

@@ -38,12 +38,10 @@
   },
   "COMMENT": "please do not remove dependencies without thorough testing. many dependencies are not imported directly, as they are peer dependencies",
   "dependencies": {
-    "@astrojs/compiler": "^2.8.0",
+    "@astrojs/compiler": "^2.10.1",
     "@babel/parser": "^7.23.6",
     "@babel/types": "^7.23.5",
     "@graphql-tools/code-file-loader": "8.0.3",
-    "@vue/compiler-sfc": "^3.4.5",
-    "astrojs-compiler-sync": "^1.0.0",
     "cosmiconfig-toml-loader": "^1.0.0",
     "dotenv": "10.0.0",
     "fast-glob": "^3.2.7",
@@ -61,7 +59,8 @@
     "vscode-jsonrpc": "^8.0.1",
     "vscode-languageserver": "^8.0.1",
     "vscode-languageserver-types": "^3.17.2",
-    "vscode-uri": "^3.0.2"
+    "vscode-uri": "^3.0.2",
+    "vue": "^3.2.0"
   },
   "devDependencies": {
     "@types/glob": "^8.1.0",

packages/graphql-language-service-server/src/MessageProcessor.ts

@@ -98,7 +98,7 @@ export class MessageProcessor {
   private _isGraphQLConfigMissing: boolean | null = null;
   private _willShutdown = false;
   private _logger: Logger | NoopLogger;
-  private _parser: (text: string, uri: string) => CachedContent[];
+  private _parser: (text: string, uri: string) => Promise<CachedContent[]>;
   private _tmpDir: string;
   private _tmpDirBase: string;
   private _loadConfigOptions: LoadConfigOptions;
@@ -130,7 +130,7 @@ export class MessageProcessor {
     }
     this._connection = connection;
     this._logger = logger;
-    this._parser = (text, uri) => {
+    this._parser = async (text, uri) => {
       const p = parser ?? parseDocument;
       return p(text, uri, fileExtensions, graphqlFileExtensions, this._logger);
     };

packages/graphql-language-service-server/src/__tests__/GraphQLCache.test.ts

@@ -177,7 +177,7 @@ describe('GraphQLCache', () => {
         '    `,\n' +
         '  },\n' +
         '});';
-      const contents = parseDocument(text, 'test.js');
+      const contents = await parseDocument(text, 'test.js');
       const result = await cache.getFragmentDependenciesForAST(
         parse(contents[0].query),
         fragmentDefinitions,

packages/graphql-language-service-server/src/__tests__/findGraphQLTags.test.ts

@@ -20,9 +20,9 @@ describe('findGraphQLTags', () => {
   const findGraphQLTags = (text: string, ext: SupportedExtensionsEnum) =>
     baseFindGraphQLTags(text, ext, '', logger);
 
-  it('returns empty for files without asts', () => {
+  it('returns empty for files without asts', async () => {
     const text = '// just a comment';
-    const contents = findGraphQLTags(text, '.js');
+    const contents = await findGraphQLTags(text, '.js');
     expect(contents.length).toEqual(0);
   });
 
@@ -45,7 +45,7 @@ query Test {
 
 export function Example(arg: string) {}`;
 
-    const contents = findGraphQLTags(text, '.js');
+    const contents = await findGraphQLTags(text, '.js');
     expect(contents[0].template).toEqual(`
 query Test {
     test {
@@ -75,7 +75,7 @@ query Test {
     
     export function Example(arg: string) {}`;
 
-    const contents = findGraphQLTags(text, '.js');
+    const contents = await findGraphQLTags(text, '.js');
     expect(contents[0].template).toEqual(`
     query Test {
       test {
@@ -105,7 +105,7 @@ query Test {
     
     export function Example(arg: string) {}`;
 
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
     expect(contents[0].template).toEqual(`
   query Test {
       test {
@@ -134,7 +134,7 @@ query Test {
 
 export function Example(arg: string) {}`;
 
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
     expect(contents[0].template).toEqual(`#graphql
 query Test {
   test {
@@ -165,7 +165,7 @@ query Test {
 
 export function Example(arg: string) {}`;
 
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
     expect(contents[0].template).toEqual(`
 query Test {
   test {
@@ -180,7 +180,7 @@ query Test {
   it('finds queries with nested graphql.experimental template tag expression', async () => {
     const text = 'const query = graphql.experimental` query {} `';
 
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
     expect(contents[0].template).toEqual(' query {} ');
   });
 
@@ -191,7 +191,7 @@ query Test {
       const query = graphql\` query {} \` 
     
     `;
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
 
     expect(contents[0].template).toEqual(' query {} ');
   });
@@ -242,7 +242,7 @@ class Todo2{}
    class AppModule {}
       const query = graphql\` query {} \` 
     `;
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
 
     expect(contents[0].template).toEqual(' query {} ');
   });
@@ -252,7 +252,7 @@ class Todo2{}
   else: () => gql\` query {} \`
 }`;
 
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
     expect(contents[0].template).toEqual(' query {} ');
   });
 
@@ -261,7 +261,7 @@ class Todo2{}
   else: () => graphql\` query {} \`
 })`;
 
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
     expect(contents[0].template).toEqual(' query {} ');
   });
 
@@ -273,7 +273,7 @@ query {id}
 \`;
 </script>
 `;
-    const contents = findGraphQLTags(text, '.vue');
+    const contents = await findGraphQLTags(text, '.vue');
     expect(contents[0].template).toEqual(`
 query {id}`);
     expect(contents[0].range.start.line).toEqual(2);
@@ -290,7 +290,7 @@ query {id}
 \`;
 </script>
 `;
-    const contents = findGraphQLTags(text, '.vue');
+    const contents = await findGraphQLTags(text, '.vue');
     expect(contents[0].template).toEqual(`
 query {id}`);
     expect(contents[0].range.start.line).toEqual(4);
@@ -305,7 +305,7 @@ query {id}
 \`;
 </script>
 `;
-    const contents = findGraphQLTags(text, '.vue');
+    const contents = await findGraphQLTags(text, '.vue');
     expect(contents[0].template).toEqual(`
 query {id}`);
     expect(contents[0].range.start.line).toEqual(2);
@@ -322,7 +322,7 @@ query {id}
 \`;
 </script>
 `;
-    const contents = findGraphQLTags(text, '.vue');
+    const contents = await findGraphQLTags(text, '.vue');
     expect(contents[0].template).toEqual(`
 query {id}`);
     expect(contents[0].range.start.line).toEqual(4);
@@ -346,7 +346,7 @@ export default defineComponent({
 </script>
 `;
 
-    const contents = findGraphQLTags(text, '.vue');
+    const contents = await findGraphQLTags(text, '.vue');
     expect(contents[0].template).toEqual(`
 query {id}`);
   });
@@ -377,7 +377,7 @@ query {id}`);
   
 </script>
 `;
-    const contents = findGraphQLTags(text, '.svelte');
+    const contents = await findGraphQLTags(text, '.svelte');
     expect(contents[0].template).toEqual(`
     query AllCharacters {
         characters {
@@ -402,7 +402,12 @@ query {id}`);
       .spyOn(process.stderr, 'write')
       .mockImplementation(() => true);
 
-    const contents = baseFindGraphQLTags(text, '.svelte', '', new NoopLogger());
+    const contents = await baseFindGraphQLTags(
+      text,
+      '.svelte',
+      '',
+      new NoopLogger(),
+    );
     // We should have no contents
     expect(contents).toMatchObject([]);
 
@@ -419,7 +424,12 @@ query {id}`);
       .spyOn(process.stderr, 'write')
       .mockImplementation(() => true);
 
-    const contents = baseFindGraphQLTags(text, '.svelte', '', new NoopLogger());
+    const contents = await baseFindGraphQLTags(
+      text,
+      '.svelte',
+      '',
+      new NoopLogger(),
+    );
     // We should have no contents
     expect(contents).toMatchObject([]);
 
@@ -436,7 +446,12 @@ query {id}`);
       .spyOn(process.stderr, 'write')
       .mockImplementation(() => true);
 
-    const contents = baseFindGraphQLTags(text, '.svelte', '', new NoopLogger());
+    const contents = await baseFindGraphQLTags(
+      text,
+      '.svelte',
+      '',
+      new NoopLogger(),
+    );
     // We should have no contents
     expect(contents).toMatchObject([]);
 
@@ -452,7 +467,7 @@ query {id}`);
 })
 const query = graphql\`query myQuery {}\``;
 
-    const contents = findGraphQLTags(text, '.ts');
+    const contents = await findGraphQLTags(text, '.ts');
 
     expect(contents.length).toEqual(2);
 
@@ -491,7 +506,7 @@ query Test {
 
 export function Example(arg: string) {}`;
 
-    const contents = findGraphQLTags(text, '.js');
+    const contents = await findGraphQLTags(text, '.js');
     expect(contents.length).toEqual(0);
   });
 
@@ -514,10 +529,10 @@ query Test {
 
 export function Example(arg: string) {}`;
 
-    const contents = findGraphQLTags(text, '.js');
+    const contents = await findGraphQLTags(text, '.js');
     expect(contents.length).toEqual(0);
   });
-  it('handles full svelte example', () => {
+  it('handles full svelte example', async () => {
     const text = `
     <script>
     import { ApolloClient, gql } from '@apollo/client';
@@ -556,11 +571,11 @@ export function Example(arg: string) {}`;
     {/if}
 </div>
     `;
-    const contents = findGraphQLTags(text, '.svelte');
+    const contents = await findGraphQLTags(text, '.svelte');
     expect(contents.length).toEqual(1);
   });
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('handles full astro example', () => {
+
+  it('handles full astro example', async () => {
     const text = `
     ---
     const gql = String.raw;
@@ -589,7 +604,7 @@ export function Example(arg: string) {}`;
     <h1>Fetching information about Star Wars: A New Hope</h1>
     <h2>Title: {film.title}</h2>
     <p>Year: {film.releaseDate}</p>`;
-    const contents = findGraphQLTags(text, '.astro');
+    const contents = await findGraphQLTags(text, '.astro');
     expect(contents.length).toEqual(1);
   });
 });