Backtics in script break compile step in v8go

[jimafisk]

This lifecycle example uses backtics for the API url:

import { onMount } from 'svelte';

let photos = [];
onMount(async () => {
	const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
	photos = await res.json();
});

That should work, but it breaks the build:

V8go could not compile ssrJs.code: SyntaxError: missing ) after argument list
Can't render htmlComponent: TypeError: Cannot read property 'length' of undefined

[netaisllc]

Yep. Here's a simpler test case using index.svelte from the 'default' site from plenti new site:

  export let title, intro, components, allContent;
  import Grid from '../components/grid.svelte';
  import Uses from '../components/template.svelte';
  const foo = `bar`;
</script>

The value of foo - which you may know - is now technically referred to as a JS template literal.

[roobyz]

hi @jimafisk ,
Any idea on when the back tick bug will be resolved? I just encountered it when trying to use template literals and environment variables.

[jimafisk]

Hey @roobyz, this is a pesky bug! @joas8211 and I have been hitting it recently too on some of the git-cms work we're doing. I'll take another look at this to see if it's something I can resolve. Thanks for the ping!

[jimafisk]

So the problem here is nested template literals. The svelte.compile() function takes a string as its first argument, since we're reading that directly from a component file, we wrap the <script>, the <style> and any HTML in a template string (with backticks) so it can be run by the Svelte compiler. The call to the Svelte compiler itself is also a string because we need to run that in v8go like this:

ctx.RunScript("var { js, css } = svelte.compile(`"+componentStr+"`, {css: false, hydratable: true});", "compile_svelte")

The problem is if the component we read has backticks, the componentStr will close early and throw syntax errors. I could escape the backticks we read in like so:

componentStr = strings.ReplaceAll(componentStr, "`", "\\`")

That would allow us to use simple template strings like:

<script>
  let test = `Hi.
I'm
Jim
`;
</script>
<h1>{test}</h1>

But won't work with expressions like:

<script>
  let name = "Jim";
  let test = `Hi.
I'm
${name}
`;
</script>
<h1>{test}</h1>

That'll throw: javascript stack trace: ReferenceError: name is not defined

Originally I thought we might be able to nest templates by preprocessing the backticks and putting them inside a placeholder ${ }. For example, this is valid JS:

let  e = "expression";
console.log(`template within ${`template with ${e}`}`);
// prints "template within template with expression"

This doesn't seem to work because the actual compiling of the component chokes on this syntax. Is there an easy solution here I'm missing?

[jimafisk]

Release v0.5.1 should allow the use of simple backtics without blowing up the build, unfortunately it still won't be able to evaluate expressions in replacement patterns ${ }.

[jimafisk]

Template strings with replacements should finally be fixed in v0.6.12 🎉

Just let me know if you hit issues when testing!