Custom component IFrame Code box interprets double curly braces

I'm writing a custom non-React component using the handlebars templating library, which uses {{ }} as template delimiters, like Retool. When I type {{ anywhere in the custom component "IFrame Code" box, it pops up Retool autocomplete for my queries, as if that syntax is supported in custom component code. However, documentation and my own experience tells me you have to pass data into custom components through a model, not by referencing Retool objects directly in your code, so I think Retool autocomplete should be disabled on that input box.

When I have double curly braces anywhere in the code box, even if I ignore the autocomplete box, it looks like the code is still passed through Retool's parser, and I sometimes get Retool console errors.

To reproduce:

  1. Open the browser's dev console
  2. Create a custom component
  3. Paste this code in the "IFrame Code" box:
<script type="text/javascript">
  const data = "{{ /each }}";
</script>
  1. Observe a console error from Retool's CodeEditor library: error in computeTemplateStringDependencies /each SyntaxError: Unterminated regular expression

For now, I'm ignoring the extra console errors in my app, but I'm concerned that using handlebars or mustache templates may cause side effects from that extra parsing.

Hi geometric, thanks for raising this! I have forwarded this to our engineers. I will reply here once it's fixed.

1 Like