Add support for Apollo Connectors Mapping Syntax #230

phryneas · 2024-10-18T13:29:30Z

No description provided.

syntaxes/graphql.connectors.json

github-actions · 2024-10-18T13:30:19Z

You can download the latest build of the extension for this PR here:
vscode-apollo-0.0.0-build-1730376475.pr-230.commit-036c822.zip.

To install the extension, download the file, unzip it and install it in VS Code by selecting "Install from VSIX..." in the Extensions view.

Alternatively, run

code --install-extension vscode-apollo-0.0.0-build-1730376475.pr-230.commit-036c822.vsix --force

from the command line.

For older builds, please see the edit history of this comment.

syntaxes/graphql.connectors.json

dylan-apollo

I'll be honest, I don't really understand how this works, but your demo looked great! Added a few questions/comments

dylan-apollo · 2024-10-28T16:46:46Z

syntaxes/connectors.jsonselection.yaml

@@ -0,0 +1,270 @@
+# use 'js-yaml' to convert to json
+# npx js-yaml syntaxes/connectors.jsonselection.yaml >| syntaxes/connectors.jsonselection.json
+name: "Apollo Connectors JSONSelection"


Is this user-facing at all? We've avoided using this name anywhere user-facing for now, since we're going to change it, we just haven't decided to what yet 😅

That's a good call-out - the only "user-facing" thing right now is that we introdude a new language to VSCode:

vscode-graphql/package.json

Lines 159 to 165 in 0ea12de

{

"id": "apollo.jsonselection",

"filenames": [

"test.apollo.jsonselection"

],

"configuration": "./apollo.jsonselection.configuration.json"

},

That means it will pop up if you edit a file called test.apollo.jsonselection, but also if you use the "change file language" dropdown:

We might want to give that language a better user-facing name.

It's technically also visible if you inspect syntax highlighting tokens, but I would not really consider that "user-facing":

What should I better name this instead? apollo.connectors.syntax?

Yeah, that sounds generic enough to be okay. We also use the term "mapping" a lot when referring to it right now, like "Apollo Connectors Mapping Syntax", though that's really verbose.

Renamed it, and also put it into [] because that will sort it alphabetically at the bottom of the list. There's no need for this implementation detail to be the first thing on the list every time people open it :)

dylan-apollo · 2024-10-28T16:47:54Z

syntaxes/connectors.jsonselection.yaml

+      "1":
+        name: "string.unquoted.NamedPathSelection.alias"


So can each of these sections get their own colors? I'd love to have one color for the "output" name (alias in this case) and another for things that are inputs.

Yes, they can!

Open a text editor and execute the "Developer: inspect editor tokens and scopes" command

that will give you this pop-up:

And then you can move your cursor around and see what tokens things in other languages have, as an inspiration.

You see that GraphQL uses string.unquoted and variable as highlighting scopes here, but I also see that the alias is never applied because variable.KeyPath.key.identifier seems to have a higher priority somehow.

I'll debug that :)

So... with some changes:

Amazing! A couple more notes on what we might want to add in future iterations:

$ and @ as well as an identifier following $, like $args, $this, etc. are sort of our keywords? They're special, at very least, and might be worth highlighting separately.

Anything in $() or as an argument to a method is sort of a different language mode. We call them literals, but they can also have some expressions within them. So ${ blah: $.blah } and $({ blah: $.blah }) are both valid, and look very similar, but do different things. It'd be nice to highlight that difference somehow (effectively, just the presence of the parens causes it).

I can configure {( and )} as a special kind of bracket pairs (this is VSCode, not TextMate!) so they will always have the same color and highlight in pairs together:

@lennyburdette then I'm undoing that change and we go back to this:

Honestly I don't know if I can do a lot to visually highlight that difference more, apart from adding a full other "sub-language", which I'd rather avoid as this would become even more unmaintainable 😅

Maybe we just color parens differently than {} for now, since parens always represent entering literal mode? We could do something special with semantic tokens or something if we really want in the future

The @ and $ stuff looks great!

Maybe we just color parens differently than {} for now, since parens always represent entering literal mode? We could do something special with semantic tokens or something if we really want in the future

We'll need to test that out in the non-VSCode editors. VSCode pretty much ignores everything else and applies its "bracket pair coloring" logic over the top of configured bracket pairs (which we want to have so it highlights start and end).

Then maybe it's just fine 😅. Certainly shouldn't block getting the highlighting of the rest of the language out there

syntaxes/graphql.connectors.json

@connect

```graphql type Mutation { createListing: String @connect( http: { body: """ foo: bar """ } ) } type Query { user(id: ID!): User } ```

phryneas · 2024-10-31T12:08:56Z

syntaxes/graphql.json

+      "contentName": "meta.embedded.block.directive.graphql",
+      "begin": "\\s*(?=@)",
+      "end": "(?=.)",
+      "applyEndPatternLast": 1,
+      "patterns": [{ "include": "#graphql-directive-body" }]
+    },
+    "graphql-directive-body": {
+      "begin": "((@)\\s*([_A-Za-z][_0-9A-Za-z]*))",


I managed to get this down to a minimum amount of changes, but unfortunately not down to none.

phryneas · 2024-10-31T12:09:39Z

syntaxes/graphql.connectors.yaml

+scopeName: source.apollo.connectors.graphql
+# inject these rules into source.graphql#graphql-directive, before all other patterns (:L), ignoring strings and comments
+injectionSelector: L:meta.embedded.block.directive.graphql -string -comment
+patterns:
+  - include: "#connect-directive"
+repository:
+  # if we encounter a `@connect` directive, move forward into this set of rules, otherwise it will just follow the default graphql rules


I added a good bunch of comments to this file, please let me know if they are helpful or if I could make something more clear here.

phryneas · 2024-10-31T12:10:50Z

.vscode/settings.json

-  "debug.node.autoAttach": "on"
+  "debug.node.autoAttach": "on",
+  "yaml.schemas": {
+    "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json": "/syntaxes/*.yaml"


I found this JSONSchema which somehow adds a tiny little bit of documentation to the textmate format.

phryneas · 2024-10-31T12:11:53Z

src/language-server/__tests__/fixtures/documents/functionCall.ts.snap

+>  `query Q11 { test }`
 #^^ source.ts
 #  ^ source.ts string.template.ts punctuation.definition.string.template.begin.ts
-#   ^^^^^^^^^^^^^^ source.ts string.template.ts
-#                 ^ source.ts string.template.ts punctuation.definition.string.template.end.ts
+#   ^^^^^^^^^^^^^^^^^^ source.ts string.template.ts
+#                     ^ source.ts string.template.ts punctuation.definition.string.template.end.ts


Unrelated, it seems I haven't updated some test snapshots in a while.

phryneas · 2024-10-31T12:13:11Z

I think this is in a good state right now, so I'll wait a bit for feedback from testing before we can hopefully get this in next week or so :)

phryneas added 2 commits October 18, 2024 14:49

minimal changes to inject new grammar into directives

d0098ce

minimal (wrong) syntax highlighting for body & selection

2637e5c

phryneas commented Oct 18, 2024

View reviewed changes

syntaxes/graphql.connectors.json Outdated Show resolved Hide resolved

phryneas added 3 commits October 18, 2024 15:52

body...

1ae4203

first attempt at jsonselection textmate grammar

5e7f3dd

injection not working yet

839a650

phryneas commented Oct 22, 2024

View reviewed changes

syntaxes/graphql.connectors.json Show resolved Hide resolved

phryneas added 10 commits October 23, 2024 17:01

embed jsonselection as language

53c4a31

some minor highlighting

e4c6c87

change to new ebnf, start over

60814f7

progress

c30aaf4

progress

bda40e6

getting somewhere

d0d2c77

JSONSelectionString

ab78a30

add comments, snapshot tests

e20832b

update one grammar, move things

b1ff896

uncomment

0ea12de

phryneas marked this pull request as ready for review October 28, 2024 14:38

phryneas requested review from lennyburdette, trevor-scheer and dylan-apollo October 28, 2024 14:39

dylan-apollo approved these changes Oct 28, 2024

View reviewed changes

phryneas added 4 commits October 29, 2024 12:10

flip some priorities

5b85408

allow leading underscore in identifiers/keys/aliases

51c573d

allow PUT|PATCH|DELETE

39c29d2

split out connect-jsonselection-nested-argument, test

2a72811

phryneas requested a review from dylan-apollo October 29, 2024 12:29

add schema ref

8711cf3

dylan-apollo approved these changes Oct 29, 2024

View reviewed changes

phryneas added 12 commits October 30, 2024 14:58

fix: correct handling of nested objects

7c1fd89

```graphql type Mutation { createListing: String @connect( http: { body: """ foo: bar """ } ) } type Query { user(id: ID!): User } ```

special highlighting for ({ }) bracket pairs

1483930

fix typo

073162f

highlighting of @, $. and $.foo

4deca72

undo {( grouping

810cf1a

set apart { in JSONSelectionString visually

5c2ea2f

redo accidental wrong edit

07b9f61

update snapshots, run more tests in CI

f433e14

also write graphql.connectors with a yaml source

304b70c

rename scope according to recommendations

5738e9a

rename things to "Apollo Connectors Mapping Syntax"

c84606b

sort the language at the end of the list

4280f23

phryneas changed the title ~~experiment: Textmate connectors highlighting~~ Add support for Apollo Connectors Mapping Syntax Oct 31, 2024

phryneas added 2 commits October 31, 2024 12:53

reduce diff to original graphql grammar

9c2ede1

add comments to document injection logic

ca52e1f

phryneas commented Oct 31, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for Apollo Connectors Mapping Syntax #230

Add support for Apollo Connectors Mapping Syntax #230

phryneas commented Oct 18, 2024

github-actions bot commented Oct 18, 2024 •

edited

Loading

dylan-apollo left a comment

dylan-apollo Oct 28, 2024

phryneas Oct 29, 2024 •

edited

Loading

dylan-apollo Oct 29, 2024

phryneas Oct 31, 2024

dylan-apollo Oct 28, 2024

phryneas Oct 29, 2024

phryneas Oct 29, 2024

dylan-apollo Oct 29, 2024

phryneas Oct 30, 2024

phryneas Oct 30, 2024

dylan-apollo Oct 30, 2024

dylan-apollo Oct 30, 2024

phryneas Oct 30, 2024

dylan-apollo Oct 30, 2024

phryneas Oct 31, 2024

phryneas Oct 31, 2024

phryneas Oct 31, 2024

phryneas Oct 31, 2024

phryneas commented Oct 31, 2024

	{
	"id": "apollo.jsonselection",
	"filenames": [
	"test.apollo.jsonselection"
	],
	"configuration": "./apollo.jsonselection.configuration.json"
	},

Add support for Apollo Connectors Mapping Syntax #230

Are you sure you want to change the base?

Add support for Apollo Connectors Mapping Syntax #230

Conversation

phryneas commented Oct 18, 2024

github-actions bot commented Oct 18, 2024 • edited Loading

dylan-apollo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

phryneas Oct 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

phryneas commented Oct 31, 2024

github-actions bot commented Oct 18, 2024 •

edited

Loading

phryneas Oct 29, 2024 •

edited

Loading