Open kswang2400 opened 6 years ago
to clarify, the issue that we are having is that it is not clear how to escape mustache syntax. looking at the docs for mustache, their recommendation is to use Custom Delimiters:
If you want {{name}} not to be interpreted as a mustache tag, but rather to appear exactly as {{name}} in the output, you must change and then restore the default delimiter. See the Custom Delimiters section for more information.
but custom delimiters are not supported in AMP. Other than stripping this markup altogether, we don't see a way forward.
We can look into supporting a different delimiter. One possible workaround in the meantime is to pass curly brace character in your JSON data and render it with your other templated data.
This issue hasn't been updated in awhile. @choumx Do you have any updates?
I have hit this problem as well. I am trying to use Nuxt.js to generate AMP pages (an experiment). One of the things that is going wrong is Nuxt.js uses mustache to do templating as well. So I cannot have a element with {{ and }} in it because Nuxt/Vue parses them. Worse, Nuxt outputs an error message if you use {{ and }} in attribute values because it thinks you are doing things “old style”.
I can work around the problem but its ugly.
This issue hasn't been updated in awhile. @choumx Do you have any updates?
/to @alabiaga A possible next project.
@choumx
I propose adding a data-custom-delimiter
to the template
or script
element like so.
<script type="text/plain" type="amp-mustache" data-custom-delimiter="<!,!>">
...
</script>
I was able to get something working with very little changes for the script tag as supporting the template tag will be a bit more tricky, the delimiters being escaped when the template is retrieved via innerHTML, thus it will require special handling. Let me know if I should briefly bring this up during a design review or can go ahead with these changes. Thanks
More recently I have been using Next.js (instead of Nuxt.js). Just noting the good old "everyone loves braces" problem still comes up in React as well. It would look nicer if could change the AMP Mustache delimiters, but it is a less serious problem than it was with Vue.
Example workaround in React. The following is a syntax error in React, because React assumes braces are for it.
<template type="amp-mustache">
{{#xxx}}
<li>...</li>
{{/xxx}}
</template>
Instead the best approach seems to be to use a React string literal to output braces for Mustache to later process.
<template type="amp-mustache">
{`{{#xxx}}`}
<li>...</li>
{`{{/xxx}}`}
</template>
Being able to change the delimiter would be nicer as you don't have to layer React and AMP-mustache quoting. For example,
<template type="amp-mustache" data-custom-delimiter="[,]">
[[#xxx]]
<li>...</li>
[[/xxx]]
</template>
This is still useful for Vue, but for React the result needs to look better than the React string literal (otherwise not worth the change for React).
Side note: I had not realized there is {{{
and {%raw%}
markup as well in Mustache.
@alabiaga , it looks like you're doing the <script>
implementation described by @choumx.
Can we get the data-custom-delimiter
attribute for <template>
as well? It will be hard to explain to anyone that they need to work around this by using <script>
instead of the usual <template>
!
Thanks!
/cc @demianrenzulli @antoinebisch
@alabiaga , it looks like you're doing the
<script>
implementation described by @choumx.
Yes, though I am not sure what you mean by described by @choumx. Did you he propose this same fix somewhere that I am not aware of?
Can we get the
data-custom-delimiter
attribute for<template>
as well? It will be hard to explain to anyone that they need to work around this by using<script>
instead of the usual<template>
!
Absolutely, I quickly prototyped a working solution using script as it was very easy to do. I will work on the template solution this coming week. Thanks
That's excellent - thanks!
(@choumx mentioned the <script>
fix elsewhere, but it may well be that he did so after seeing this issue.)
(@choumx mentioned the
<script>
fix elsewhere, but it may well be that he did so after seeing this issue.)
Ah yes, I believe it might have been related to the text node hoisting issue and that's when the support for script was first introduced. Thanks
Just wanted to note here that from the design review, we are going with the safer route of allowing a restricted set of custom delimiters and start with non curly brace containing delimiter #-
and -#
.
e.g.
Given: Hello #- name -#
Data: { "name" : "world" }
Output: Hello world
We can grow the list when the need for more custom delimiters is required. Thanks.
@alabiaga the design review highlighted the difficulties on HTML parses if we allow delimiters to include <
. We need to choose anything else.
@jridgewell ah yes, I meant to put #-, -#. We even briefly discussed not using the erb style delimiters in stand-up. I guess subconsciously I would still prefer it. Updated, thanks.
Just to drop a note here about AMP for Email: we reference the existing delimiter in various parts of the protoascii
spec to ban the use of Mustache in various places (e.g., we don't allow use of Mustache variables inside URLs such as the src
attribute of amp-list
or action-xhr
attribute of amp-form
). If we allow custom delimiter, we would have to have a clear path forward for how we can continue to enforce this.
@zhangsu Thanks for the note Su. Unfortunately my PR became stale. But if anyone decides to take this on again, this is useful info.
Taking this up again. This will help unblock several partners and help with a launch.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.
If anyone has a moment to look at this issue and check out @alabiaga 's old PR, it would still be a useful feature! See especially @alankent 's comment here about Nuxt.js.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.
What's the issue?
We are getting unescaped Mustache template syntax errors in from the AMP validator but there doesn't seem to be an obvious solution for escaping curly braces. We've tried several replaces (i.e.
{ { { { '\{', '\\{'
) and none of them seem to workThe docs don't reference escaping characters and the tests don't seem to accounting for this edge case.
https://www.ampproject.org/docs/reference/components/amp-mustache https://ampbyexample.com/components/amp-mustache/ amphtml/extensions/amp-mustache/0.1/test/test-amp-mustache.js
What browsers are affected?
All browsers
Which AMP version is affected?
1516337355291