deno icon indicating copy to clipboard operation
deno copied to clipboard

[bug] svelte attributes with inline interpolated template expressions cause deno fmt to fail unexpectedly

Open nberlette opened this issue 1 year ago • 5 comments

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.

nberlette avatar Sep 27 '24 23:09 nberlette

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 avatar Sep 28 '24 07:09 marvinhagemeister

@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?

nberlette avatar Sep 28 '24 07:09 nberlette

cc: @g-plane maybe you'd be able to shed some light on what's causing this?

nberlette avatar Sep 28 '24 07:09 nberlette

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.

g-plane avatar Oct 08 '24 06:10 g-plane

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?

bartlomieju avatar Oct 26 '24 19:10 bartlomieju

Yup, this seems to have been resolved. I can no longer reproduce it on 2.0.3+. Thanks everyone!

nberlette avatar Oct 30 '24 18:10 nberlette