Compiler: Incorrect parsing when string contains }} (two closing braces)

[glen-84]

Version

3.0.5

Reproduction link

Vue 3 Template Explorer (credit: @ota-meshi)

Steps to reproduce

Use two consecutive closing braces in a string, inside a template.

What is expected?

Correct parsing.

What is actually happening?

Vue template compilation error: Error parsing JavaScript expression: Unterminated string constant (1:5)

---

This will happen frequently when using something like ICU message formatting, as seen in the example at the URL above.

(initially reported @ vuejs/vue-eslint-parser#94)

[HcySunYang]

The Vue compiler is not a JavaScript compiler, and the state machine does not include the JavaScript syntax environment, otherwise it will be very complicated. This still doesn't work in Vue2, and I think it can be solved by configuring delimiters.

[edison1105]

it will be very complicated

yes, it's very complicated to determine which is the end tag in this case.

function parseInterpolation(
  context: ParserContext,
  mode: TextModes
): InterpolationNode | undefined {
  const [open, close] = context.options.delimiters
  __TEST__ && assert(startsWith(context.source, open))

  //  it's very complicated to determine which is the end tag.

  const closeIndex = context.source.indexOf(close, open.length)
  if (closeIndex === -1) {
    emitError(context, ErrorCodes.X_MISSING_INTERPOLATION_END)
    return undefined
  }

[longlho]

Is there a way to escape?

[HcySunYang]

Ah, just use the backslash to escape.
https://vue-next-template-explorer.netlify.app/#%7B%22src%22%3A%22%20%20%3Cp%3E%7B%7B%20%24fm('%7BserverCount%2C%20plural%2C%20one%20%7BServer%7D%20other%20%7BServers%7D%5C%5C%7D')%20%7D%7D%3C%2Fp%3E%22%2C%22ssr%22%3Afalse%2C%22options%22%3A%7B%22mode%22%3A%22module%22%2C%22prefixIdentifiers%22%3Afalse%2C%22optimizeImports%22%3Afalse%2C%22hoistStatic%22%3Atrue%2C%22cacheHandlers%22%3Afalse%2C%22scopeId%22%3Anull%2C%22inline%22%3Afalse%2C%22ssrCssVars%22%3A%22%7B%20color%20%7D%22%2C%22bindingMetadata%22%3A%7B%22TestComponent%22%3A%22setup%22%2C%22foo%22%3A%22setup%22%2C%22bar%22%3A%22props%22%7D%2C%22optimizeBindings%22%3Afalse%7D%7D

[longlho]

hmm that's not escaping, that's just making invalid syntax. I can do the same with } } (space). With escaping, the AST text node is not supposed to contain the escape character.

[HcySunYang]

Not the same, for example:

console.log('}\}') // '}}'

But the following is not:

console.log('} }') // '} }'

[posva]

I think what @HcySunYang said makes sense and escaping them inside strings is the way to go. Especially because it's only needed when two curly braces are together