[v4] some refactoring (#3726)

* some refactoring * use `right: var(--px-16)` instead of `right: 0` for `.graphiql-logo` * more * try to fix * fix join is not defined * Update packages/graphiql/cypress/e2e/incremental-delivery.cy.ts Co-authored-by: Ted Thibodeau Jr <[email protected]> --------- Co-authored-by: Ted Thibodeau Jr <[email protected]>
graphql · Aug 14, 2024 · 196e9a0 · 196e9a0
1 parent f8b719f
commit 196e9a0
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 34 deletions.
diff --git a/.changeset/strong-ears-bake.md b/.changeset/strong-ears-bake.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+use `right: var(--px-16)` instead of `right: 0` for `.graphiql-logo`
diff --git a/packages/graphiql/cypress/e2e/incremental-delivery.cy.ts b/packages/graphiql/cypress/e2e/incremental-delivery.cy.ts
@@ -105,7 +105,7 @@ describeOrSkip('IncrementalDelivery support via fetcher', () => {
       This tests that;
       1. user ({name}) => { name }
       2. user ({age}) => { name, age }
-      3. user.friends.0 ({name}) => { name, age, friends: [{name}] } <- can sometimes happen before 4, due the the promise race
+      3. user.friends.0 ({name}) => { name, age, friends: [{name}] } <- can sometimes happen before 4, due to the promise race
       4. user.friends.0 ({age}) => { name, age, friends: [{name, age}] }
 
       This shows us that we can deep merge defers, deep merge streams, and also deep merge defers inside streams

diff --git a/packages/graphiql/cypress/e2e/init.cy.ts b/packages/graphiql/cypress/e2e/init.cy.ts
@@ -15,7 +15,7 @@ const mockSuccess = {
   data: {
     longDescriptionType: {
       id: 'abc123',
-      image: '/images/logo.svg',
+      image: '/resources/logo.svg',
       hasArgs: '{"defaultValue":"test default value"}',
       test: {
         id: 'abc123',

diff --git a/packages/graphiql/cypress/e2e/tabs.cy.ts b/packages/graphiql/cypress/e2e/tabs.cy.ts
@@ -61,7 +61,7 @@ describe('Tabs', () => {
       query: 'query Foo {image}',
       variablesString: '{"someVar":42}',
       headersString: '{"someHeader":"someValue"}',
-      response: { data: { image: '/images/logo.svg' } },
+      response: { data: { image: '/resources/logo.svg' } },
     });
 
     // Close tab

diff --git a/packages/graphiql/index.html b/packages/graphiql/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/test/images/logo.svg" />
+    <link rel="icon" type="image/svg+xml" href="/resources/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GraphiQL</title>
     <style>
       body {
         margin: 0;
+        overflow: hidden; /* in Firefox */
       }
 
       #graphiql {
@@ -25,11 +26,11 @@
     <!--vite-replace-start-->
     <script
       crossorigin
-      src="https://unpkg.com/react@18/umd/react.development.js"
+      src="https://unpkg.com/react@18/umd/react.production.min.js"
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
     ></script>
     <script src="/dist/index.umd.js"></script>
     <link href="/dist/style.css" rel="stylesheet" />

diff --git a/packages/graphiql/test/images/logo.svg → packages/graphiql/resources/logo.svg b/packages/graphiql/test/images/logo.svg → packages/graphiql/resources/logo.svg
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -86,7 +86,7 @@ button.graphiql-tab-add {
 /* The GraphiQL logo */
 .graphiql-container .graphiql-logo {
   position: absolute;
-  right: 0;
+  right: var(--px-16);
   color: hsla(var(--color-neutral), var(--alpha-secondary));
   font-size: var(--font-size-h4);
   font-weight: var(--font-weight-medium);

diff --git a/packages/graphiql/test/schema.js b/packages/graphiql/test/schema.js
@@ -130,9 +130,7 @@ const UnionSecond = new GraphQLObjectType({
 const TestUnion = new GraphQLUnionType({
   name: 'TestUnion',
   types: [UnionFirst, UnionSecond],
-  resolveType() {
-    return UnionFirst;
-  },
+  resolveType: () => UnionFirst,
 });
 
 const Greeting = new GraphQLObjectType({
@@ -192,7 +190,7 @@ const Person = new GraphQLObjectType({
     friends: {
       type: new GraphQLList(Person),
       async *resolve(_value, _args) {
-        const names = ['James', 'Mary', 'John', 'Patrica']; // Top 4 names https://www.ssa.gov/oact/babynames/decades/century.html
+        const names = ['James', 'Mary', 'John', 'Patrica']; // Top 4 names https://ssa.gov/oact/babynames/decades/century.html
         for (const name of names) {
           await sleep(100);
           yield { name };
@@ -202,14 +200,15 @@ const Person = new GraphQLObjectType({
   }),
 });
 
-const sleep = async timeout => new Promise(res => setTimeout(res, timeout));
+const sleep = async timeout =>
+  new Promise(resolve => setTimeout(resolve, timeout));
 
 const longDescription = `
 The \`longDescriptionType\` field on the \`Test\` type has a long, verbose, description to test inline field docs.
 
 > We want to test several \`markdown\` styles!
 
-Check out [Markdown](https://www.markdownguide.org/) by the way.
+Check out [Markdown](https://markdownguide.org) by the way.
 
 Some notes:
 - Lists
@@ -218,14 +217,14 @@ Some notes:
   - and with very very very very very very very very very very long items that span multiple lines
 - you get the gist
 
-To-Do's:
+TO-DO's:
 1. Open GraphiQL
-2. Write a query
+1. Write a query
    1. Maybe add some variables
-   2. Could also add headers
-3. Send the request
+   1. Could also add headers
+1. Send the request
 
-Example quey:
+Example query:
 \`\`\`graphql
 {
   test {
@@ -237,7 +236,7 @@ Example quey:
 
 And we have a cool logo:
 
-![](/images/logo.svg)
+![](/resources/logo.svg)
 `.trim();
 
 const TestType = new GraphQLObjectType({
@@ -306,7 +305,7 @@ const TestType = new GraphQLObjectType({
     image: {
       type: GraphQLString,
       description: 'field that returns an image URI.',
-      resolve: () => '/images/logo.svg',
+      resolve: () => '/resources/logo.svg',
     },
     deprecatedField: {
       type: TestType,
@@ -371,7 +370,7 @@ const TestMutationType = new GraphQLObjectType({
 const TestSubscriptionType = new GraphQLObjectType({
   name: 'SubscriptionType',
   description:
-    'This is a simple subscription type. Learn more at https://www.npmjs.com/package/graphql-ws',
+    'This is a simple subscription type. Learn more at https://npmjs.com/package/graphql-ws',
   fields: {
     message: {
       type: GraphQLString,

diff --git a/packages/graphql-language-service-server/src/__tests__/MessageProcessor.spec.ts b/packages/graphql-language-service-server/src/__tests__/MessageProcessor.spec.ts
@@ -1,5 +1,4 @@
 import mockfs from 'mock-fs';
-import { join } from 'node:path';
 import { MockFile, MockProject } from './__utils__/MockProject';
 import { FileChangeType } from 'vscode-languageserver';
 import { serializeRange } from './__utils__/utils';
@@ -30,9 +29,7 @@ jest.mock('@whatwg-node/fetch', () => {
 
 const mockSchema = (schema: GraphQLSchema) => {
   const introspectionResult = {
-    data: introspectionFromSchema(schema, {
-      descriptions: true,
-    }),
+    data: introspectionFromSchema(schema, { descriptions: true }),
   };
   return fetchMock.mock({
     matcher: '*',
@@ -45,10 +42,10 @@ const mockSchema = (schema: GraphQLSchema) => {
   });
 };
 
-const defaultFiles = [
+const defaultFiles: MockFile[] = [
   ['query.graphql', 'query { bar ...B }'],
   ['fragments.graphql', 'fragment B on Foo { bar }'],
-] as MockFile[];
+];
 const schemaFile: MockFile = [
   'schema.graphql',
   'type Query { foo: Foo, test: Test }\n\ntype Foo { bar: String }\n\ntype Test { test: Foo }',
@@ -290,7 +287,7 @@ describe('MessageProcessor with config', () => {
     expect(result.diagnostics[0].message).toEqual(
       'Cannot query field "bar" on type "Foo". Did you mean "bad"?',
     );
-    const generatedFile = existsSync(join(genSchemaPath));
+    const generatedFile = existsSync(genSchemaPath);
     // this generated file should not exist because the schema is local!
     expect(generatedFile).toEqual(false);
     // simulating codegen
@@ -391,7 +388,7 @@ describe('MessageProcessor with config', () => {
     expect(await project.lsp._graphQLCache.getSchema('default')).toBeDefined();
 
     // schema file is present and contains schema
-    const file = await readFile(join(genSchemaPath), { encoding: 'utf-8' });
+    const file = await readFile(genSchemaPath, 'utf8');
     expect(file.split('\n').length).toBeGreaterThan(10);
 
     // hover works
@@ -406,9 +403,10 @@ describe('MessageProcessor with config', () => {
 
     // ensure that fragment definitions work
     const definitions = await project.lsp.handleDefinitionRequest({
-      textDocument: { uri: project.uri('query.graphql') }, // console.log(project.uri('query.graphql'))
+      textDocument: { uri: project.uri('query.graphql') },
       position: { character: 26, line: 0 },
     });
+
     expect(definitions[0].uri).toEqual(project.uri('fragments.graphql'));
     expect(serializeRange(definitions[0].range)).toEqual({
       start: {
@@ -559,9 +557,7 @@ describe('MessageProcessor with config', () => {
       (await project.lsp._graphQLCache.getSchema('a')).getType('example100'),
     ).toBeTruthy();
     await sleep(1000);
-    const file = await readFile(join(genSchemaPath.replace('default', 'a')), {
-      encoding: 'utf-8',
-    });
+    const file = await readFile(genSchemaPath.replace('default', 'a'), 'utf8');
     expect(file).toContain('example100');
     // add a new typescript file with empty query to the b project
     // and expect autocomplete to only show options for project b