[bug] svelte attributes with inline interpolated template expressions cause deno fmt to fail unexpectedly
Edit: @marvinhagemeister was kind enough to transcribe my original lazy screenshot into a bona-fide code snippet below. I've updated the OP to include this snippet for visibility. I've also replaced the screenshot of the error encountered with the output text from my terminal, and updated some of the wording to make things a bit easier to understand.
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox="-0.5 -1 32 32"
aria-hidden={true}
{fill}
class="drop-shadow-lg filter {$$restProps.class || ''}"
>
{#if title}
<title>{title}</title>
{/if}
</svg>
</div>
More specifically, the problem lies in that last line in the opening tag:
class="drop-shadow-1g filter {$$restProps.class || ""}"
While the code above is ugly, it is 100% valid syntax in the svelte language. But it causes the formatter to throw this error:
Error formatting: /Users/nb/Downloads/svelte-app (13)/src/Logo.svelte
Syntax error (expected attribute name) at file:///Users/nb/Downloads/svelte-app%20(13)/src/Logo.svelte:23:57
/Users/nb/Downloads/svelte-app (13)/src/main.js
/Users/nb/Downloads/svelte-app (13)/public/index.html
/Users/nb/Downloads/svelte-app (13)/rollup.config.js
/Users/nb/Downloads/svelte-app (13)/scripts/setupTypeScript.js
/Users/nb/Downloads/svelte-app (13)/src/fuzzy.d.ts
/Users/nb/Downloads/svelte-app (13)/src/config.js
/Users/nb/Downloads/svelte-app (13)/src/Config-svelte
It appears that using template expressions inside of double quotes is not compatible with Deno's new markup formatter. As soon as I remove that template expression (or nuke the whole className it resides in), everything works just as one would expect. Notice that despite the failed formatting attempt, Deno moves on to other files and simply skips the one with the syntax it can't understand.
Here is the code in copy & paste-able form for whoever is going to tackle this issue.
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox="-0.5 -1 32 32"
aria-hidden={true}
{fill}
class="drop-shadow-lg filter {$$restProps.class || ''}"
>
{#if title}
<title>{title}</title>
{/if}
</svg>
</div>
@marvinhagemeister Oof, I was in such a rush earlier when I opened this and I didn't realize I failed to include anything aside from 2 screenshots and a superficial description. That's embarrassing 😬
Thanks for picking up the slack for me, Marvin! Much appreciated.
Also, I was digging around tonight trying to figure this thing out.... I'm fairly confident now that the problem is not in Deno itself; it more than likely stems from the dprint markup_fmt plugin responsible for formatting svelte/vue/astro files. Would it be better if I took this issue to the dprint repo instead?
cc: @g-plane maybe you'd be able to shed some light on what's causing this?
I guess there's something wrong in https://github.com/denoland/deno/blob/main/cli/tools/fmt.rs . I don't see any errors when using in dprint.
I can't reproduce this error on Deno v2.0.3 - tried both snippets from @nberlette and @marvinhagemeister and both of them appears to already be correctly formatted. I think this might have been fixed by an upgrade of dprint-plugin-typescript?
Yup, this seems to have been resolved. I can no longer reproduce it on 2.0.3+. Thanks everyone!