Backtick/grave (`) in component breaks SSR render method

[taylorzane]

When a backtick/grave accent is used in a component, and one uses generate: 'ssr', the output function breaks due to the render() method using backticks to allow for a multi-line string.

This also appears to fail with the HTML escaped representation of the grave (`) as svelte evaluates it back to a backtick.

Smallest failing example:

<code>
const url = `${protocol}://duckduckgo.com`
</code>
<!-- OR -->
<code>
const url = &#96;${protocol}://duckduckgo.com&#96;
</code>

Output:

MyComponent.render = function ( root, options ) {
	root = root || {};

	return `<code>const url = `\${protocol}://duckduckgo.com`</code>`;
};

I'm not sure how the generator determines to use template strings vs double-quotes, because it seems like it differs (unless I was looking at different functions at the time).

Workaround: "Escape" the backticks in the component html file.

Input:

<code>
const url = \`${protocol}://duckduckgo.com\`
</code>

Output:

MyComponent.render = function ( root, options ) {
	root = root || {};

	return `<code>const url = \`\${protocol}://duckduckgo.com\`</code>`;
};

[Conduitry]

The text visitor for SSR is already escaping things that look like embedded expressions. This might be as simple as also escaping the backquotes here.

[taylorzane]

Yep, I'm definitely seeing that in the output, but the reason why I can't simply escape the backticks forever is because the non-SSR version of the app displays the backslashes before the backticks.

[Conduitry]

Right, escaping the back-ticks definitely shouldn't be the user's job. I've submitted a PR to also escape ` and \ in the code for text nodes in SSR mode. I don't think there's anything else that would have to be escaped.

[taylorzane]

I would have to agree, I can't think of anything else that would need to be escaped in a template string. Or in a regular string for that matter.

[Rich-Harris]

thanks all — released 1.22.2 with the fix