Added support for the graph ql comment tag

[tjallingt]

As described in the issue #4360
Prettier still adds a space in between the comment tag and the template literal.

[duailibe]

After reading #4395 (comment) I don't think we should do this. Feels really hack-ish. The suggestion in #4360 (comment) seems like a better solution

const gql = String.raw;

gql`query MyQuery {}`;

[tjallingt]

@duailibe well I mean this is the way those other tools do this as well, so its not more or less hacky than those other tools ("would you jump off a bridge if your friends did" fallacy i know...) additionally

const gql = String.raw;

gql`query MyQuery {}`;

also feels kinda hacky...

but its your call, I understand your hesitation to merge this 😕

[tjallingt]

Actually after thinking about it, the String.raw workaround doesn't work if you are using the actual gql tag in the same file. (Which i guess you could fix by using one of the other template tags prettier formats as graph ql but thats a workaround ontop of a workaround...)

Additionally I dislike it as a workaround because of someone sees gql`...` but doesn't see the const gql = String.raw part they might get a completely wrong idea of what the code is doing only because prettier doesnt support formatting arbitraty template literals as graph ql...

[jaydenseric]

@duailibe #4360 (comment)

[suchipi]

@duailibe could you expound on why you think we shouldn't do this?

[duailibe]

@suchipi Just because we already have a pretty consistent way to format non-JS stuff in JS, that is using template literals or <style> JSX tags and it's been working really well.

Comments is an area of Prettier that works good enough for the effort we've put in but we still get reports of it's behavior so it seems a fragile strategy to rely on them for this kind of stuff.

That said, I changed my mind and I don't oppose to it. If other maintainers are comfortable with adding this functionality, I'm on board.

[tjallingt]

So what is the status of this discussion?
Are you willing to merge this provided I fix the failing test?

[j-f1]

I’m 👍 on the change, and @duailibe seems have changed their mind and is also 👍 (or at least not 👎).

[duailibe]

@tjallingt to fix the test, you probably need to skip the check of the AST here: https://github.com/prettier/prettier/blob/master/src/language-js/clean.js

More specifically, something along these lines:

prettier/src/language-js/clean.js

Lines 111 to 132 in 8e1b60e

	// styled-components, graphql, markdown
	if (
	ast.type === "TaggedTemplateExpression" &&
	(ast.tag.type === "MemberExpression" ||
	(ast.tag.type === "Identifier" &&
	(ast.tag.name === "gql" ||
	ast.tag.name === "graphql" ||
	ast.tag.name === "css" ||
	ast.tag.name === "md" ||
	ast.tag.name === "markdown")) ||
	ast.tag.type === "CallExpression")
	) {
	newObj.quasi.quasis.forEach(quasi => delete quasi.value);
	}
	if (
	ast.type === "TemplateLiteral" &&
	parent.type === "CallExpression" &&
	parent.callee.name === "graphql"
	) {
	newObj.quasis.forEach(quasi => delete quasi.value);
	}
	}

[tjallingt]

That should fix the failing test 👍

I really dislike that I had to duplicate the hasGraphQLComment stuff so maybe that should be exported to clean.js? (don't know what your stance on this is)

EDIT: this also still adds an undesired space between the comment tag and the template literal, I could take a look at fixing that if desired but I have a hunch that might be kinda tricky 😕

[suchipi]

@tjallingt let's not worry about the space between the comment and the template literal tag for now. Also, I'm not sure we have a consistent approach with duplicated logic in clean; do whatever you feel is best.

[tjallingt]

The it's ready for review and merge I think

[lydell]

@tjallingt There are some merge conflicts to fix before merging, though

[suchipi]

Fixed the conflicts

[tjallingt]

oh mb didn't see them 😕
Thanks for fixing @suchipi 👍