T

TyphonJS

typhonjs-runtime

Join Server

Is there a way to get Pug templates working?

Ggeoidesic1/30/2023
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>

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>

... 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
Mmleahy1/31/2023
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>


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.
Ggeoidesic1/31/2023
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
Ggeoidesic1/31/2023
Again you are 100% on your own if you go down this path.
You're never alone!
Ggeoidesic1/31/2023
This seems to work!
<template lang="pug">
  ApplicationShell(bind:elementRoot)
    p test
</template>
Ggeoidesic1/31/2023
Hoorah!
Mmleahy1/31/2023
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.