Is there a way to get Pug templates working?

According to the Vite github issues, it should just require

pug

pug

to be installed. I've done that but VsCode seems to be formatting

pug

pug

markup incorrectly.
Pug is an indent-senstive format but it's taking this:

<ApplicationShell bind:elementRoot>
  .flexcol
    DocInput(attr={"name"})
    textarea(bind:value={$documentStore.system.description})
    textarea(bind:value={$documentStore.system.lore})
</ApplicationShell>

<ApplicationShell bind:elementRoot>
  .flexcol
    DocInput(attr={"name"})
    textarea(bind:value={$documentStore.system.description})
    textarea(bind:value={$documentStore.system.lore})
</ApplicationShell>

and converting it to this

<ApplicationShell bind:elementRoot>
  .flexcol DocInput(attr={"name"}) textarea(bind:value={$documentStore.system.description}) textarea(bind:value={$documentStore
    .system.lore})
</ApplicationShell>

<ApplicationShell bind:elementRoot>
  .flexcol DocInput(attr={"name"}) textarea(bind:value={$documentStore.system.description}) textarea(bind:value={$documentStore
    .system.lore})
</ApplicationShell>

... which is annoying and broken. Any thoughts?
It seems to be the

Svelte for VsCode

Svelte for VsCode

plugin that is doing this mal-formatting.

However, even if I disable it, the build does not seem to work with pug templates... it renders them as plaintext

TyphonJS (Michael)•1/31/23, 2:08 AM

I can't support the use of

pug

pug

, so you are left up to your own devices to working with it and getting it configured for Vite & Svelte compilation. I don't think anyone from this community is going to be able to help you with any questions regarding

pug

pug

, so you'll only complicate things for yourself in the near future and it is entirely unclear what benefits if any that

pug

pug

brings to the table other than being a different templating language.

Apparently, by default

pug

pug

is enabled in , but you need to mark your template in Svelte components as using pug like:

You can read more about enabling it in the configuration. See the following:
https://github.com/sveltejs/svelte-preprocess#built-in-support-for-commonly-used-languages
https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md#pug

This is just for the production build / Rollup side of things. I have zero information on aspects that require configuration for the dev server / HMR + pug. Again you are 100% on your own if you go down this path.

geoidesic [Aardvark Games]OP•1/31/23, 1:25 PM

It allows me to code about 4x faster than with HTML

geoidesic [Aardvark Games]OP•1/31/23, 1:26 PM

You're never alone!

geoidesic [Aardvark Games]OP•1/31/23, 1:29 PM

This seems to work!

geoidesic [Aardvark Games]OP•1/31/23, 1:39 PM

Hoorah!

TyphonJS (Michael)•1/31/23, 7:52 PM

It allows me to code about 4x faster than with HTML

That's great, but don't expect other folks to be able to easily answer any template related questions that you might have.