syntax error 'expected attribute value' at line 26, column 1 at src/components/Accordion.astro

[bjgavilanes]

pnpm check outputs

pnpm check

> [email protected] check /home/bjgavilanes/Documents/ecuador_in_tech/www
> biome check --fix && dprint fmt

Checked 36 files in 22ms. Fixed 1 file.
Error formatting /home/bjgavilanes/Documents/ecuador_in_tech/www/src/components/Accordion.astro. Message: syntax error 'expected attribute value' at line 26, column 13
Had 1 error formatting

This is error is raised during dprint fmt invokation.

---

It just tested: this may be a bug inside dprint invocation.

I tried to replace biome for typescript and json plugins in dprint.json, and the error does get raised. We need those plugins for the markup_fmt dprint plugin, that I suspect is the culprit. More information, here:

https://github.com/g-plane/markup_fmt

---

I might do some testing -- for example, removing markup_fmt as plugin and see if the error does get raised -- and report back.

[nsandoya]

[email protected] check /home/bjgavilanes/Documents/ecuador_in_tech/www
biome check --fix && dprint fmt

Checked 36 files in 22ms. Fixed 1 file.
Error formatting /home/bjgavilanes/Documents/ecuador_in_tech/www/src/components/Accordion.astro. Message: syntax error 'expected attribute value' at line 26, column 13
Had 1 error formatting

Hi @bjgavilanes ,

After running pnpm check locally, I found the same error. Upon try out some tweaks based on Biome error message, I found bug is caused by a syntax issue related to Alpine.js directives:
When using dynamic expressions in directives like x-on (shortened as @) and x-bind (shortened as :), these expressions need to be enclosed in curly braces for Alpine.js to interpret them correctly. Here's an example:

<!-- Wrong  -->
@click=`toggle(${id})`
:class=`isVisible(${id}) && 'text-blue-500'`
<!-- Fixed -->
@click={`toggle(${id})`}
:class={`isVisible(${id}) && 'text-blue-500'`}

After trying this solution in whole Accordion.astro code, fixing one css conflict related to this change, and testing again, the pnpm check command ran without any issues.

Hope this info helps to resolve the problem. Sorry for this unexpected bug :(

P.S.: Since this solution involves modifying Alpine.js directives in Accordion.astro, and there's another PR related to this issue (and other topics), what should we do next?

[bjgavilanes]

Hello, hello!,

After running `pnpm check` locally, I found the same error. Upon try out some tweaks based on Biome error message, I found bug is caused by a syntax issue related to Alpine.js directives: When using dynamic expressions in directives like `x-on` (shortened as `@`) and `x-bind` (shortened as `:`), these expressions need to be enclosed in curly braces for Alpine.js to interpret them correctly. Here's an example: ```astro <!-- Wrong --> @click=`toggle(${id})` :class=`isVisible(${id}) && 'text-blue-500'` <!-- Fixed --> @click={`toggle(${id})`} :class={`isVisible(${id}) && 'text-blue-500'`}

I would not say "wrong", per se. Problem is: we use markup_fmt dprint plugin to format markdown, HTML + supersets -- that includes .astro. When we invoke `biome check --write`, it does not rise this issue; but, when invoking dprint, it does rises it -- dprint invoques markup_fmt plugin; that invokes biomejs plugin, from dprint, to format TS/JS inside HTML supersets. My checklist to resolve this would be: - [ ] Check AlpineJS documentation on dynamic expresiones - If our "wrong" implementation does match what's provided in docs, we should assume it's a problem with our formatter - Rise an issue in https://github.com/g-plane/markup_fmt, detailing our findings. - If not, we should indeed change our codebase. This is a formatter problem, not a linting one. However, biomejs has partial support for HTML+supersets, so this is indeed a problem, but biomejs doesn't rise an issue 'cause it cant'.

``` After trying this solution in whole `Accordion.astro` code, fixing one css conflict related to this change, and testing again, the `pnpm check` command ran without any issues. Hope this info helps to resolve the problem. P.S.: Since this solution involves modifying Alpine.js directives in `Accordion.astro`, and there's another PR related to this issue (and other topics), what should we do next?

If we do confirm this is a codebase problem, we should rise a PR. Would recommend "fix!(components): syntax error 'expected attribute value'" as PR title. However, we should consider rising up a issue in /g-plane/markup_fmt, if we are implementing according to docs.