commit 037e8c095547520dda6fbd96a85f74e633712cca · kitten.sh/graphqlsp

+15

README.md

···

       24
       24
        
       ```

     

       25
       25
        
       

     

       26
       26
        
       now restart your TS-server and you should be good to go

     

       27
       27
       +
       

     

       28
       28
       +
       ## Local development

     

       29
       29
       +
       

     

       30
       30
       +
       Run `yarn` in both `/` as well as `/example`.

     

       31
       31
       +
       

     

       32
       32
       +
       Open two terminal tabs, one where you run the build command which is `yarn tsc` and one

     

       33
       33
       +
       intended to open our `/example`, most of the debugging will happen through setting breakpoints.

     

       34
       34
       +
       

     

       35
       35
       +
       Run `TSS_DEBUG_BRK=9559 code example` and ensure that the TypeScript used is the one from the workspace

     

       36
       36
       +
       the `.vscode` folder should ensure that but sometimes it fails. When we use `TSS_DEBUG_BRK` the plugin

     

       37
       37
       +
       won't run until we attach the debugger from our main editor.

     

       38
       38
       +
       

     

       39
       39
       +
       After makiing changes you'll have to re-open said editor or restart the TypeScript server and re-attach the

     

       40
       40
       +
       debugger. Breakpoints have to be set in the transpiled JS-code hence using `tsc` currently so the code is a

     

       41
       41
       +
       bit easier to navigate.

+1 -4

example/src/fragment.generated.ts

···

       104
       104
        
       

     

       105
       105
        
       export type PokemonFieldsFragment = { __typename?: 'Pokemon', id: string, name: string };

     

       106
       106
        
       

     

       107
       107
       -
       export type MorePokemonFieldsFragment = { __typename?: 'Pokemon', id: string, name: string };

     

       108
       108
       -
       

     

       109
       109
       -
       export const PokemonFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"pokemonFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Pokemon"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<PokemonFieldsFragment, unknown>;

     

       110
       110
       -
       export const MorePokemonFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"morePokemonFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Pokemon"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<MorePokemonFieldsFragment, unknown>;
     

       107
       107
       +
       export const PokemonFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"pokemonFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Pokemon"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<PokemonFieldsFragment, unknown>;

+1 -2

example/src/fragment.ts

···

       5
       5
        
           id

     

       6
       6
        
           name

     

       7
       7
        
         }

     

       8
       8
       -
       `

     

       9
       9
       -
       

     

       8
       8
       +
       ` as typeof import('./fragment.generated').PokemonFieldsFragmentDoc

     

       10
       9
        
       // TODO: how to type

     

       11
       10
        
       // export const PokemonFields = gql`

     

       12
       11
        
       //   fragment pokemonFields on Pokemon {

+11 -2

example/src/index.ts

···

       1
       1
       -
       import { gql } from '@urql/core'

     

       1
       1
       +
       import { createClient, gql } from '@urql/core'

     

       2
       2
        
       import { PokemonFields } from './fragment'

     

       3
       3
        
       

     

       4
       4
        
       const Pokemons = gql`

     
···

       11
       11
        
       

     

       12
       12
        
         ${PokemonFields}

     

       13
       13
        
       ` as typeof import('./index.generated').PokemonsDocument

     

       14
       14
       +
       

     

       14
       15
        
       const Pokemon = gql`

     

       15
       16
        
         query Pokemon {

     

       16
       17
        
           pokemon(id: "1") {

     
···

       20
       21
        
         }

     

       21
       22
        
       

     

       22
       23
        
         ${PokemonFields}

     

       23
       23
       -
       `
     

       24
       24
       +
       ` as typeof import('./index.generated').PokemonDocument

     

       25
       25
       +
       

     

       26
       26
       +
       const urqlClient = createClient({

     

       27
       27
       +
         url: 'http://localhost:3000/api'

     

       28
       28
       +
       });

     

       29
       29
       +
       

     

       30
       30
       +
       urqlClient.query(Pokemons).toPromise().then(result => {

     

       31
       31
       +
         result.data?.pokemons;

     

       32
       32
       +
       });

+55 -60

src/index.ts

···

       1
       1
        
       import ts from "typescript/lib/tsserverlibrary";

     

       2
       2
       -
       import { isNoSubstitutionTemplateLiteral, ScriptElementKind, isIdentifier, isTaggedTemplateExpression, isToken, isTemplateExpression} from "typescript";

     

       2
       2
       +
       import { isNoSubstitutionTemplateLiteral, ScriptElementKind, isIdentifier, isTaggedTemplateExpression, isToken, isTemplateExpression, isImportTypeNode, ImportTypeNode } from "typescript";

     

       3
       3
        
       import { getHoverInformation, getAutocompleteSuggestions, getDiagnostics, Diagnostic } from 'graphql-language-service'

     

       4
       4
        
       import { GraphQLSchema, parse, Kind, FragmentDefinitionNode, OperationDefinitionNode } from 'graphql'

     

       5
       5
        
       

     
···

       63
       63
        
             return resolveTemplate(node, filename, info)

     

       64
       64
        
           })

     

       65
       65
        
       

     

       66
       66
       -
           try {

     

       67
       67
       -
             // TODO: we might only want to run this when there are no

     

       68
       68
       -
             // diagnostic issues.

     

       69
       69
       -
             // TODO: we might need to issue warnings for docuemnts without an operationName

     

       70
       70
       -
             // TODO: we will need to check for renamed operations that _do contain_ a type definition

     

       71
       71
       -
             const parts = source.fileName.split('/');

     

       72
       72
       -
             const name = parts[parts.length - 1];

     

       73
       73
       -
             const nameParts = name.split('.');

     

       74
       74
       -
             nameParts[nameParts.length - 1] = 'generated.ts'

     

       75
       75
       -
             parts[parts.length - 1] = nameParts.join('.')

     

       76
       76
       -
             generateTypedDocumentNodes(schema, parts.join('/'), texts.join('\n')).then(() => {

     

       77
       77
       -
               nodes.forEach((node, i) => {

     

       78
       78
       -
                 const queryText = texts[i] || '';

     

       79
       79
       -
                 const parsed = parse(queryText);

     

       80
       80
       -
                 const isFragment = parsed.definitions.every(x => x.kind === Kind.FRAGMENT_DEFINITION);

     

       81
       81
       -
                 let name = '';

     

       82
       82
       -
                 if (isFragment) {

     

       83
       83
       -
                   const fragmentNode = parsed.definitions[0] as FragmentDefinitionNode;

     

       84
       84
       -
                   name = fragmentNode.name.value;

     

       85
       85
       -
                 } else {

     

       86
       86
       -
                   const operationNode = parsed.definitions[0] as OperationDefinitionNode;

     

       87
       87
       -
                   name = operationNode.name!.value;

     

       88
       88
       -
                 }

     

       89
       89
       -
         

     

       90
       90
       -
                 name = name.charAt(0).toUpperCase() + name.slice(1);

     

       91
       91
       -
                 const parentChildren = node.parent.getChildren();

     

       92
       92
       -
                 if (parentChildren.find(x => x.kind === 200)) {

     

       93
       93
       -
                   return;

     

       94
       94
       -
                 }

     

       95
       95
       -
         

     

       96
       96
       -
                 // TODO: we'll have to combine writing multiple exports when we are dealing with more than

     

       97
       97
       -
                 // one tagged template in a file

     

       98
       98
       -
                 const exportName = isFragment ? `${name}FragmentDoc` : `${name}Document`;

     

       99
       99
       -
                 const imp = ` as typeof import('./${nameParts.join('.').replace('.ts', '')}').${exportName}`;

     

       100
       100
       -
         

     

       101
       101
       -
                 const span = { length: 1, start: node.end };

     

       102
       102
       -
                 const prefix = source.text.substring(0, span.start);

     

       103
       103
       -
                 const suffix = source.text.substring(span.start + span.length, source.text.length);

     

       104
       104
       -
                 const text = prefix + imp + suffix;

     

       105
       105
       -
         

     

       106
       106
       -
                 const scriptInfo = info.project.projectService.getScriptInfo(filename);

     

       107
       107
       -
                 const snapshot = scriptInfo!.getSnapshot();

     

       108
       108
       -
                 const length = snapshot.getLength();

     

       109
       109
       -
         

     

       110
       110
       -
                 source.update(text, { span, newLength: imp.length })

     

       111
       111
       -
                 scriptInfo!.editContent(0, length, text);

     

       112
       112
       -
                 info.languageServiceHost.writeFile!(source.fileName, text);

     

       113
       113
       -
                 scriptInfo!.registerFileUpdate();

     

       114
       114
       -
               })

     

       115
       115
       -
             });

     

       116
       116
       -
           } catch (e) {

     

       117
       117
       -
             console.error(e)

     

       118
       118
       -
             throw e

     

       119
       119
       -
           }

     

       120
       120
       -
       

     

       121
       66
        
           const diagnostics = nodes.map(x => {

     

       122
       67
        
             let node = x;

     

       123
       68
        
             if (isNoSubstitutionTemplateLiteral(node) || isTemplateExpression(node)) {

     
···

       168
       113
        
             return result;

     

       169
       114
        
           })

     

       170
       115
        
       

     

       116
       116
       +
           if (!newDiagnostics.length) {

     

       117
       117
       +
             try {

     

       118
       118
       +
               // TODO: we might need to issue warnings for documents without an operationName

     

       119
       119
       +
               // as we can't generate types for those

     

       120
       120
       +
               const parts = source.fileName.split('/');

     

       121
       121
       +
               const name = parts[parts.length - 1];

     

       122
       122
       +
               const nameParts = name.split('.');

     

       123
       123
       +
               nameParts[nameParts.length - 1] = 'generated.ts'

     

       124
       124
       +
               parts[parts.length - 1] = nameParts.join('.')

     

       125
       125
       +
         

     

       126
       126
       +
               // TODO: we might only want to run this onSave/when file isn't dirty

     

       127
       127
       +
               generateTypedDocumentNodes(schema, parts.join('/'), texts.join('\n')).then(() => {

     

       128
       128
       +
                 nodes.forEach((node, i) => {

     

       129
       129
       +
                   const queryText = texts[i] || '';

     

       130
       130
       +
                   const parsed = parse(queryText);

     

       131
       131
       +
                   const isFragment = parsed.definitions.every(x => x.kind === Kind.FRAGMENT_DEFINITION);

     

       132
       132
       +
                   let name = '';

     

       133
       133
       +
                   if (isFragment) {

     

       134
       134
       +
                     const fragmentNode = parsed.definitions[0] as FragmentDefinitionNode;

     

       135
       135
       +
                     name = fragmentNode.name.value;

     

       136
       136
       +
                   } else {

     

       137
       137
       +
                     const operationNode = parsed.definitions[0] as OperationDefinitionNode;

     

       138
       138
       +
                     name = operationNode.name?.value || '';

     

       139
       139
       +
                   }

     

       140
       140
       +
         

     

       141
       141
       +
                   if (!name) return;

     

       142
       142
       +
           

     

       143
       143
       +
                   name = name.charAt(0).toUpperCase() + name.slice(1);

     

       144
       144
       +
                   const parentChildren = node.parent.getChildren();

     

       145
       145
       +
       

     

       146
       146
       +
                   const exportName = isFragment ? `${name}FragmentDoc` : `${name}Document`;

     

       147
       147
       +
                   const imp = ` as typeof import('./${nameParts.join('.').replace('.ts', '')}').${exportName}`;

     

       148
       148
       +
         

     

       149
       149
       +
                   // This checks whether one of the children is an import-type

     

       150
       150
       +
                   // which is a short-circuit if there is no as

     

       151
       151
       +
                   const typeImport = parentChildren.find(x => isImportTypeNode(x)) as ImportTypeNode

     

       152
       152
       +
                   if (typeImport && typeImport.getText() === exportName) return;

     

       153
       153
       +
           

     

       154
       154
       +
                   const span = { length: 1, start: node.end };

     

       155
       155
       +
                   const text = source.text.substring(0, span.start) + imp + source.text.substring(span.start + span.length, source.text.length);

     

       156
       156
       +
           

     

       157
       157
       +
                   const scriptInfo = info.project.projectService.getScriptInfo(filename);

     

       158
       158
       +
                   const snapshot = scriptInfo!.getSnapshot();

     

       159
       159
       +
           

     

       160
       160
       +
                   // TODO: potential optimisation is to write only one script-update

     

       161
       161
       +
                   source.update(text, { span, newLength: imp.length })

     

       162
       162
       +
                   scriptInfo!.editContent(0, snapshot.getLength(), text);

     

       163
       163
       +
                   info.languageServiceHost.writeFile!(source.fileName, text);

     

       164
       164
       +
                   scriptInfo!.registerFileUpdate();

     

       165
       165
       +
                 })

     

       166
       166
       +
               });

     

       167
       167
       +
             } catch (e) {}

     

       168
       168
       +
           }

     

       169
       169
       +
       

     

       171
       170
        
           return [

     

       172
       171
        
             ...newDiagnostics,

     

       173
       172
        
             ...originalDiagnostics

     
···

       271
       270
        
             return originalInfo

     

       272
       271
        
           }

     

       273
       272
        
         }

     

       274
       274
       -
       

     

       275
       275
       -
         // to research:

     

       276
       276
       -
         // proxy.getTypeDefinitionAtPosition

     

       277
       277
       -
         // proxy.getCompletionEntryDetails

     

       278
       273
        
       

     

       279
       274
        
         logger('proxy: ' + JSON.stringify(proxy));

     

       280
       275

+4 -1

src/resolve.ts

···

       1
       1
       -
       import { isIdentifier, isNoSubstitutionTemplateLiteral, isTaggedTemplateExpression, NoSubstitutionTemplateLiteral, TaggedTemplateExpression, TemplateExpression, TemplateLiteral } from "typescript";

     

       1
       1
       +
       import { isAsExpression, isIdentifier, isNoSubstitutionTemplateLiteral, isTaggedTemplateExpression, NoSubstitutionTemplateLiteral, TaggedTemplateExpression, TemplateExpression, TemplateLiteral } from "typescript";

     

       2
       2
        
       import ts from "typescript/lib/tsserverlibrary";

     

       3
       3
        
       import { findNode, getSource } from "./utils";

     

       4
       4
        
       

     
···

       22
       22
        
             if (ts.isVariableDeclaration(parent)) {

     

       23
       23
        
               if (parent.initializer && isTaggedTemplateExpression(parent.initializer)) {

     

       24
       24
        
                 const text = resolveTemplate(parent.initializer, def.fileName, info)

     

       25
       25
       +
                 templateText = templateText.replace('${' + span.expression.escapedText + '}', text)

     

       26
       26
       +
               } else if (parent.initializer && isAsExpression(parent.initializer) && isTaggedTemplateExpression(parent.initializer.expression)) {

     

       27
       27
       +
                 const text = resolveTemplate(parent.initializer.expression, def.fileName, info)

     

       25
       28
        
                 templateText = templateText.replace('${' + span.expression.escapedText + '}', text)

     

       26
       29
        
               }

     

       27
       30
        
             }