Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix escaping of literal .graphql files #88

Merged
merged 2 commits into from
Sep 7, 2017
Merged

Fix escaping of literal .graphql files #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05e3f7a
Fix escaping of literal .graphql files
lydell Aug 26, 2017
9a5ba19
Merge branch 'master' into literal-escaping
jnwng Sep 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# Change log
### vNEXT
- Fix escaping of literal .graphql files [Simon Lydell](https://github.com/lydell/) in [#88](https://github.com/apollographql/eslint-plugin-graphql/pull/88)
- Fix ESLint config validation [Simon Lydell](https://github.com/lydell/) in [#86](https://github.com/apollographql/eslint-plugin-graphql/pull/86)

### v1.3.0
Expand Down
12 changes: 10 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,8 +463,16 @@ function strWithLen(len) {

const gqlProcessor = {
preprocess: function(text) {
const escaped = text.replace(/`/g, '\\`');

// Wrap the text in backticks and prepend the internal tag. First the text
// must be escaped, because of the three sequences that have special
// meaning in JavaScript template literals, and could change the meaning of
// the text or cause syntax errors.
// https://tc39.github.io/ecma262/#prod-TemplateCharacter
//
// - "`" would end the template literal.
// - "\" would start an escape sequence.
// - "${" would start an interpolation.
const escaped = text.replace(/[`\\]|\$\{/g, '\\$&');
return [`${internalTag}\`${escaped}\``];
},
postprocess: function(messages) {
Expand Down
6 changes: 3 additions & 3 deletions test/makeProcessors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ describe('processors', () => {
assert(includes(extensions, '.graphql'));
});

it('should escape backticks and prepend internalTag', () => {
const query = 'query { someValueWith` }';
const expected = 'ESLintPluginGraphQLFile`query { someValueWith\\` }`';
it('should wrap with backticks, escape properly and prepend internalTag', () => {
const query = 'query { search(q: "` \\n ${}") { title } }';
const expected = 'ESLintPluginGraphQLFile`query { search(q: "\\` \\\\n \\${}") { title } }`';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as a general comment i think this addition would be clearer as its own test case — im having some trouble parsing what's actually being added here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I did here is:

  • Updated the test description. This could have been done as a separate commit – the first commit, since the updated test description is valid for the old test as well.
  • Beefed up the test case with more stuff that needs escaping than backticks.

So I don't see how a separate test case would make sense :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just to double-check here - the \\n is getting escaped as \\\\n but is \\n the already escaped version of \n?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Welcome to backslash hell :) I have dealt with this in several projects such as CoffeeScript and Prettier :)

The real input is:

query { search(q: "` \n ${}") { title } }

and the real output is:

ESLintPluginGraphQLFile`query { search(q: "\` \\n \${}") { title } }`

const preprocess = processors['.gql'].preprocess;
const result = preprocess(query);

Expand Down