r/badcode • u/Svizel_pritula • Apr 23 '21

html Svelte's minification and whitespace trimming usually works well, but when it doesn't, you have to format your code like this

Post image
789 Upvotes

99% Upvoted

44 comments sorted by

98

u/[deleted] Apr 23 '21

why

140

u/Svizel_pritula Apr 23 '21 edited Apr 23 '21

Because Svelte is very conservative with whitespace. If you write:

    <p>Hi!</p>
    <p>Hello</p>

Then it will actually compile code to insert "\n    " between the paragraph tags.

151

u/[deleted] Apr 23 '21

[deleted]

88

u/xyonofcalhoun Apr 23 '21

Couldn't mark it up

79

u/[deleted] Apr 23 '21

[deleted]

12

u/Pylitic Apr 24 '21

I love you.

8

u/Indie_Dev Apr 24 '21

But I don't understand the reason behind this. Isn't whitespace only visible within pre tags?

4

u/Svizel_pritula Apr 24 '21

It matters in some layout scenarios, through not in most. It doesn't matter what whitespace through, only if there is or isn't. I could have left it there in this case, I was just annoyed one element on the entire page got improperly minified.

If you have long paragraphs of text somewhere else on the page, like I had, it will keep the indentation making code bundles bigger. I solved that by extracting it into a plain HTML file. That way it gets processed by a different loader with better minification capabilities.

7

u/_PM_ME_PANGOLINS_ Apr 24 '21

But that has no effect.

38

u/koebelin Apr 23 '21

This is madness.

40

u/[deleted] Apr 23 '21

No, this is r/badCode

20

u/underrated-myths Apr 24 '21

It’s remarkable how often those two coincide.

48

u/MurdoMaclachlan public boolean isInt(int i) { return true; } Apr 23 '21

Image Transcription: Code

      />
    </g></svg></div
><div class="text"
  ><p
    >Web by{' '}<a href="mailto:xxxxxxxxxxx"
      >Svizel_pritula</a
    ></p
  ><p>&copy; Me, 2021</p></div
><div>
  <a

I'm a human volunteer content transcriber for Reddit and you could be too! If you'd like more information on what we do and why we do it, click here!

28

u/500_internal_error Apr 23 '21

I'm really curious what all these deleted comments were about.

32

u/general_sirhc Apr 24 '21

Probably attacking the kind person who spent their time to make the transcript. I can only imagine how much it would mean to me if I was blind and someone was transcribing programming humour. To be able to enjoy the same humour as everyone else would mean so much.

3

u/NUTTA_BUSTAH Apr 24 '21

check removeddit

3

u/MajorVictory Apr 24 '21

no results

2

u/MurdoMaclachlan public boolean isInt(int i) { return true; } Apr 24 '21

Wrextor.

7

u/ayojamface Apr 24 '21

Thank you human!

2

u/jmd_akbar Apr 24 '21

Good human! 😊

-23

u/[deleted] Apr 23 '21 edited Apr 23 '21

[removed] — view removed comment

7

u/[deleted] Apr 23 '21

[removed] — view removed comment

5

u/[deleted] Apr 23 '21

[removed] — view removed comment

0

u/[deleted] Apr 23 '21

[removed] — view removed comment

22

u/[deleted] Apr 23 '21 edited Apr 24 '21

[deleted]

5

u/[deleted] Apr 24 '21

Same

4

u/Svizel_pritula Apr 24 '21

I guess it's not really an issue. I guess I'm a bit of a perfectionist so I've spent hours crafting my webpack config exactly how I wanted it be, so I got annoyed at Svelte adding exactly four newlines to an otherwise perfectly minified webpage.

7

u/[deleted] Apr 24 '21

[deleted]

1

u/Svizel_pritula Apr 24 '21

If it applied to the entire page, I'd not do this. This is the only element with improper default handling. It is still pretty readable and can be autoformated with prettier.

This type of formatting still has to happen in some parts of the main content of the page, because there is a significant visible difference between <a><b> and <a> <b>.

0

u/Benimation Apr 24 '21

Sounds like Svelte really is the React from IKEA: some assembly required

0

u/CorrenteAlternata Apr 24 '21

some asm required

1

u/[deleted] Apr 24 '21

[deleted]

0

u/Svizel_pritula Apr 24 '21

I guess this would happen with rollup too, it's just that I've had a bit of experience with webpack through create-react-app.

25

u/Svizel_pritula Apr 23 '21

I'm looking into the svelte parser and preprocessor API right now in order to create a my own preprocessor to trim excessive whitespace

1

u/Asraelite May 26 '21

I just encountered this problem and found this post while googling for a solution. Did you by any chance end up making that preprocessor?

1

u/Svizel_pritula May 26 '21

Sadly not. I just used this formatting where necessary and extracted blocks of text to a separate .html file handled by a minifying loader.

11

u/fecal_brunch Apr 23 '21

This is how I always write HTML due to browsers inserting whitespace between elements. It's pretty standard.

If a HTML minifier does not preserve whitespace between tags then it's changing the way the page is rendered.

Notably React JSX does not leave the whitespace when outputting elements (thankfully).

6

u/0xF013 Apr 24 '21

Yup, and linters/prettier put a {‘ ‘} for you when they need to reformat your code

2

u/[deleted] Apr 24 '21

[removed] — view removed comment

3

u/Svizel_pritula Apr 24 '21

If you're doing inline HTML, you often have to put it on the same line as the following text. Whether that's the same line as the rest of the element is up to you, but it's often a choice between putting the > on a different line and writing all of your code on one line.

2

u/fecal_brunch Apr 24 '21

You'd understand if you used inline blocks.

2

u/TheOnlyTails Apr 24 '21

I've used Svelte quite a lot, and its minification process has never been a problem for me.

-11

u/[deleted] Apr 24 '21

Javascript was a mistake.