TyphonJS•17mo ago

Is there a way to get Pug templates working?

According to the Vite github issues, it should just require pug to be installed. I've done that but VsCode seems to be formatting 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 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

3 Replies

TyphonJS (Michael)•17mo ago

I can't support the use of 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, so you'll only complicate things for yourself in the near future and it is entirely unclear what benefits if any that pug brings to the table other than being a different templating language. Apparently, by default pug is enabled in svelte-preprocess, but you need to mark your template in Svelte components as using pug like:

<template lang=pug>
  <!-- Your Svelte pug template -->
</template>

<template lang=pug>
  <!-- Your Svelte pug template -->
</template>

You can read more about enabling it in the svelte-preprocess 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•17mo ago

unclear what benefits if any that pug brings to the table other than being a different templating language. It allows me to code about 4x faster than with HTML Again you are 100% on your own if you go down this path. You're never alone! This seems to work!

<template lang="pug">
  ApplicationShell(bind:elementRoot)
    p test
</template>

<template lang="pug">
  ApplicationShell(bind:elementRoot)
    p test
</template>

Hoorah!

TyphonJS (Michael)•17mo ago

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.

Gaming

Programming

Is there a way to get Pug templates working?