Error when handlebars are in javascript comments

[jorodi]

Some JavaScript/TypeScript libraries use JSDoc which uses {} in the comments to describe the tag's type.

Double handlebars are created when objects are used as a type. This is parsed and causes an error.

For example:

/**
 * @return {{s:string,n:number}}
 */

[tylerablackham]

@jorodi There is some documentation on escaping handlebars expressions so they aren't parsed. It's a little hard to find because following the url to it is broken. Here's how you get to it:

• go to https://handlebarsjs.com/guide/
• click on the expressions tab under language guid
• scroll to the bottom to find a section about escaping handlerbars expressions

If you go directly to https://handlebarsjs.com/guide/expressions.html, the section won't show up for some reason. Anyway, could this potentially solve your problem?

[jaylinski]

@tylerablackham Thanks for the heads-up, fixed the issue in the documentation with this PR: handlebars-lang/docs#172

Regarding the original issue: yes, you have to escape curly braces.

[jorodi]

@tylerablackham and @jaylinski No this doesn't solve the issue.

This issue pertains to dependencies that use JSDoc and use objects in their comments. This unintentionally creates double handlebars which the handlebars library incorrectly interprets.

Currently, handlebars processes all the dependency's code including comments.

I understand I can comment out my own code, but is there a way for handlebar's to disable processing comments from external libraries?

That would solve this issue. Otherwise, I have to either run a script to (1) first remove comments from dependencies and then run handlebars or (2) first modify the dependencies comments to prevent this issue with handlebars. This increases build times a lot during development especially when using webpack.

Another solution is to contact each library to ask them to comment out their JSDoc object comments to be compatible with handlebars: obviously untenable.

[jaylinski]

@jorodi Handlebars is language agnostic, it doesn't know if the input is HTML or JavaScript with JSDoc comments.

So you have to pre-process your input and escape {{ accordingly:
https://handlebarsjs.com/playground.html#format=1&currentExample=%7B%22template%22%3A%22%2F**%5Cn%20*%20%40return%20%5C%5C%7B%7Bs%3Astring%2Cn%3Anumber%7D%7D%5Cn%20*%2F%5Cnfunction%20foo(bar)%20%7B%5Cn%20%20return%20bar%3B%5Cn%7D%22%2C%22partials%22%3A%5B%5D%2C%22input%22%3A%22%22%2C%22output%22%3A%22%2F**%5Cn%20*%20%40return%20%7B%7Bs%3Astring%2Cn%3Anumber%7D%7D%5Cn%20*%2F%5Cnfunction%20foo(bar)%20%7B%5Cn%20%20return%20bar%3B%5Cn%7D%22%2C%22preparationScript%22%3A%22%5Cn%22%2C%22handlebarsVersion%22%3A%224.7.8%22%7D

[jorodi]

That should be in the documentation.

That is, it is recommended to preprocess input to ensure 3rd-party dependencies are escaped or potential conflicts with handlebars are removed.