Unnecessary escaping of tagged template literal output

[cknitt]

I was recently starting to modernize an old Gatsby project and moving more stuff to ReScript there. Gatsby uses graphql queries to fetch the content to render.

The following ReScript code

type graphqlQuery

@module("gatsby") @taggedTemplate
external graphql: (array<string>, array<string>) => graphqlQuery = "graphql"

let query = graphql`
  query LayoutQuery {
    tags: allMarkdownRemark {
      edges {
        node {
          frontmatter {
            tags
          }
        }
      }
    }
    recentPosts: allMarkdownRemark(
      filter: {frontmatter: {layout: {eq: "post"}}}
      sort: {frontmatter: {date: DESC}}
      limit: 4
    ) {
      edges {
        node {
          id
          fields {
            slug
          }
          frontmatter {
            title
            date(formatString: "YYYY-MM-DD")
            tags
          }
        }
      }
    }
  }
`

produced this output:

import * as Gatsby from "gatsby";

var query = Gatsby.graphql`\n  query LayoutQuery {\n    tags: allMarkdownRemark {\n      edges {\n        node {\n          frontmatter {\n            tags\n          }\n        }\n      }\n    }\n    recentPosts: allMarkdownRemark(\n      filter: {frontmatter: {layout: {eq: \"post\"}}}\n      sort: {frontmatter: {date: DESC}}\n      limit: 4\n    ) {\n      edges {\n        node {\n          id\n          fields {\n            slug\n          }\n          frontmatter {\n            title\n            date(formatString: \"YYYY-MM-DD\")\n            tags\n          }\n        }\n      }\n    }\n  }\n`;

which Gatsby didn't like at all:

Syntax Error: Unexpected character: "\".

I think we should emit the string for the template literal exactly as defined in the ReScript code, i.e., without escaping.

[cknitt]

What do you think @tsnobip (who did the tagged template literals implementation) and @zth (who uses more graphql than me AFAIK 🙂)?

And actually the same applies to normal (non-tagged) template literals.

[zth]

Yeah, at a glance I'd expect it to not escape line breaks etc, like you say.

[tsnobip]

it is indeed a regression, it worked on v11.1.0 to v11.1.1 and then got broken again in v11.1.2 as you can see in the playground.

The regression was likely introduced by #6810 that got shipped with v11.1.2-rc.1.

Unfortunately we didn't test for this case.

[tsnobip]

@cknitt what's is actually weird is that in JS

`
` == "\n" 

And if you try to access the character, it'll be the same too, so I don't even know how it can tell the difference.

> `\n`[0]
'\n'
> `
... `[0]
'\n'

[tsnobip]

after some investigation, the current output is actually correct in JS, it just breaks compatibility with some tools like gatsby that directly parse the JS file (cf comment).

My recommendation would be to not backport any fix to v11 because the current behavior is correct, but for v12 we could actually make backquoted string literals be output as backquoted string literals in JS too, and that would solve this kind of incompatibility issues.

What do you think @cknitt ?

[cometkim]

@cknitt Can you share the full trace of the Syntax Error coming from? It looks like it from some dangling code, but I don't think it's related with the template literal or escaping.