Add support for Apollo Connectors Mapping Syntax

[phryneas]

No description provided.

[github-actions]

You can download the latest build of the extension for this PR here:
vscode-apollo-0.0.0-build-1752596687.pr-230.commit-a561ce6.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-1752596687.pr-230.commit-a561ce6.vsix --force

from the command line.

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

[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]

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.

[phryneas]

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 :)

[phryneas]

So... with some changes:

[dylan-apollo]

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

1. $ 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.
2. 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).

[phryneas]

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:

[phryneas]

@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 😅

[dylan-apollo]

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

[dylan-apollo]

The @ and $ stuff looks great!

[phryneas]

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).

[dylan-apollo]

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

[phryneas]

Okay, finalizing the colors. Here are a few impressions:

Here you can see that the object syntax (top) is different from the selection syntax (bottom).
This mimicks the colors that GraphQL syntax is using:

Another thing to point out is that builtin functions are highlighted differently:

The colors look very different here, but that's theme-specific. I'm using entity.name.function for a random function name and keyword.builtin, entity.name.function for known function names.

[dylan-apollo]

I don't know much about the implementation, but I'm thrilled to have syntax highlighting!

My only note stylistically is I feel like the identifier on the left side of a : and the value on the right should have their colors swapped. In the screenshot, it makes sense to be that the short form is the same as the property side of objects (in headers). But in the long form, it seems like the key side should match the keys in objects and the value side should match the literal value $("blah").

If that doesn't make sense, happy to huddle on it!

[dylan-apollo]

Is this intentionally a full clone of that repo? Should we trim out some bits like this one?

[phryneas]

Yes, it's a subtree as that's the easiest way to keep those in sync.

git subtree pull --prefix sampleWorkspace/connectors-community https://github.com/apollographql/connectors-community.git main --squash

There are ways of syncing with subfolders of subtrees, but honestly that didn't seem to be worth the added complexity.

[phryneas]

Yeah, happy to huddle on that property colorization issue.

From how I've interpreted it, most languages have two approaches and highlight them differently:

JavaScript:

const value = 1
// object construction (props and values)
const foo = {
  prop: value
}
// object destructuring (props and aliases)
const { 
  prop,
  prop: alias 
} = foo

query (value: "1000") {
  # objects in arguments (props and values)
  field(arg: {
    prop: $value
  }) {
    # field selections (fields and aliases)
    field
    alias: field
  }
}

And in the connectors syntax I tried to apply that similarly:

# inside lit: object construction with props and values
$({
  prop: $value
})

# outside lit: field selection with aliases
alias: field
field

As that doesn't exist in a vacuum, here the GraphQL example from above next to it so you can see how the color choices are similar:

And the JS example:

PS: interesting to see how GitHub itself doesn't make that distinction in their code highlighting