[🐞] How to Prevent URL Encoding of & to & in Qwik SSR?

[arensade]

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

When I add a link containing & in my HTML and build my project, the & gets escaped to &, which breaks some URLs we use.

For example, in the following Qwik component:

export default component$(() => {return (
<div>Hello Qwik<a href="/about?v=1&page=1&filetype=pdf"></a></div>
);});

After rendering on the server (SSR) and inspecting the source (view-source), it changes to:

<div q:key="4e_0">
  Hello Qwik
  <a href="/about?v=1&amp;page=1&amp;filetype=pdf"></a>
</div>

This transformation causes issues, especially with some CDN services and image optimization systems that don't handle & correctly. For these scenarios, the & must remain unescaped as it was entered.

Question: Is there a way to prevent this behavior and ensure that & remains unescaped in URLs?

Playground Example: You can test this behavior in the Qwik Playground here: https://qwik.dev/playground/#f=Q040ZsY0TTSg9gOSVxIh1b2SfiKwtC%2BxL7M1VANV%2FEAqLRNYvgIThm1BSpqSHbC%2BBWKQ5tFUNlRTGQA

Reproduction

https://qwik.dev/playground/#f=Q040ZsY0TTSg9gOSVxIh1b2SfiKwtC%2BxL7M1VANV%2FEAqLRNYvgIThm1BSpqSHbC%2BBWKQ5tFUNlRTGQA

Steps to reproduce

No response

System Info

Browsers

Additional Information

No response

[wmertens]

This is intended behavior, as per W3C spec. You'll find that & must always be converted when parsing attribute values. While Qwik could avoid encoding & as & when it's not followed by [a-zA-Z]+;, that would be extra work to do the lookahead, and it would still result in & in some cases.

So the bug is with the tooling that can't handle correct HTML5. You could consider post-processing the HTML to remove &.