plugin is parsing JS comments and throws errors

[hmajoros]

JS comments are being parsed by the plugin, and if the plugin finds invalid syntax, it throws errors. This is common in our codebase when people write example usages of a component invocation, and it even catches on some JSDoc comments. really, any JS comment with {{ will attempt to be parsed by the plugin.

example: this JSDoc comment with a type annotation containing an object, which looks like a double-curly template invocation:

  /**
   * Error message from loading the suggestions and whether the user can retry.
   * @type {{ errorMessage: string, canRetry: boolean} | undefined }}
   */

this breaks the prettier plugin

✖ yarn prettier:
[error] packages/addons/profile-shared/addon/components/generated-suggestions/generated-suggestion-edit-view.gjs: SyntaxError: Unexpected token (544:9)
[error]   542 |
[error]   543 |
[error] > 544 |  export default [__GLIMMER_TEMPLATE(`{{!voyager-i18n-resource}}
[error]       |         ^
[error]   545 | {{t-def "Original" key="i18n_original"}}
[error]   546 | {{t-def "Dismiss" key="i18n_dismiss"}}
[error]   547 | {{t-def "Something went wrong. Please try again." key="failure_toast"}}

something about the double-curly in the comment block is throwing off prettier, because when i delete that line it works fine

recommendation: just don't parse the contents of JS comment blocks

Originally posted by @hmajoros in #42 (comment)

[gitKrystan]

Thanks @hmajoros .

I won't be able to look into this for a few weeks, but if someone has time to investigate, I'd look into...

• Is this a real thing? preprocessEmbeddedTemplates appears to be processing jsdoc comments ember-cli/ember-template-imports#183
• This megahax:
  

  prettier-plugin-ember-template-tag/src/parse.ts

  Lines 165 to 219 in 1ab2de0

  	/**
  	* Desugar template tag default exports because they parse as
  	* ExpressionStatement, which has a bunch of irrelevant custom semicolon
  	* handling in Prettier that is very difficult to undo. We can optionally
  	* re-sugar on print. See `templateExportDefault` option.
  	*
  	* HACK: An attempt was made to do this via babel transforms but it destroyed
  	* Prettier's newline preservation logic.
  	*/
  	function desugarDefaultExportTemplates(preprocessed: string): string {
  	const placeholderOpen = `[${TEMPLATE_TAG_PLACEHOLDER}`; // intentionally missing ]
  	// (^|;)\s*(\()?\s*\[__GLIMMER_TEMPLATE
  	const sugaredDefaultExport = new RegExp(
  	`(^|;)\\s*(\\()?\\s*\\${placeholderOpen}`,
  	);
  	const desugaredDefaultExport = `$1 export default $2${placeholderOpen}`;
  	const lines = preprocessed.split(/\r?\n/);
  	const desugaredLines: string[] = [];
  	let previousLine = '';
  	let blockLevel = 0;
  	for (let line of lines) {
  	// HACK: This is pretty fragile as it will increment for, e.g., "{" which
  	// doesn't actually increment the block level IRL
  	const inc = (line.match(/{/g) ?? []).length;
  	blockLevel += inc;
  	const dec = (line.match(/}/g) ?? []).length;
  	blockLevel -= dec;
  	let squished = squish(line);
  	if (
  	!squished.endsWith('// prettier-ignore') &&
  	!squished.endsWith('/* prettier-ignore */') &&
  	previousLine !== '// prettier-ignore' &&
  	previousLine !== '/* prettier-ignore */' &&
  	!previousLine.endsWith('=') &&
  	blockLevel === 0
  	) {
  	line = line.replace(sugaredDefaultExport, desugaredDefaultExport);
  	squished = squish(line);
  	}
  	desugaredLines.push(line);
  	if (squished.length > 0) {
  	previousLine = squished;
  	}
  	}
  	return desugaredLines.join('\r\n');
  	}

...to see what the root cause is.

[gitKrystan]

Can you confirm this is still an issue with the latest version?