search

xiphux / svimg

Svelte image component with image preprocessing and lazy loading
ISC License
243 stars 15 forks source link

Does not work with multiline definition #14

Closed KamilPesek closed 2 years ago

KamilPesek commented 2 years ago

If defined in one line
<Image src="img/door_left.jpg" alt="Öffnungsrichtung von Türen - {openingType.label}" immediate/>

it works but it does not work when defined like

<Image
    src="img/door_right.jpg"
    alt="Öffnungsrichtung von Türen - {openingType.label}"
    immediate
/>

when using eg. Prettier.

image

xiphux commented 2 years ago

Very likely caused by d5464ca7b209374d77ff58bcb7b1f7ab4b6d6a7a - needs to do multiline matching.

xiphux commented 2 years ago

This actually seems to be working ok for me when I try it - are you using Unix or Windows line breaks in your files? Or, do you have a reproduction?

KamilPesek commented 2 years ago

I am using Windows and LF breaks. I've just tried CRLF for this specific file but result is the same.

image image

xiphux commented 2 years ago

Ok. It seems like there's some problem with the underlying node-html-parser library, which is used to parse the attributes out from the Image tag during preprocessing, being able to handle line breaks in the tag. It doesn't seem to be platform dependent since I do encounter it on both Windows and Linux. However, there's something more specific going on which is why I wasn't seeing it before; when running svimg locally with svimg's dependencies installed by pnpm (how I normally do development), it works fine. But when the dependencies are installed with npm or when svimg is packaged for the actual releases that normal dependents use, it doesn't. It's not clear to me why that difference affects a low-level behavior of node-html-parser like that... I'll try to investigate some more, but I might also just be able to work around it in the svimg preprocessor by stripping the line breaks before parsing.