Svelte Typescript Tailwind Pug Starter Template

A starter template to help you quickly launch a new project with Svelte / Sveltekit, Typescript, TailwindCSS, Pug. I call it the "Skinnypug" stack.  

0. Contents

1. About this Template
2. Dependencies
3. Getting Started
4. About Sveltekit
5. Using Pug with Svelte
6. Folder Shortcuts
7. Editor & Extensions

1. About This Template

This starter was developed for the Lightning Jar team. It's designed to get one up and running quickly on a new project using the core technologies Svelte, Sveltekit, Typescript, TailwindCSS, Pug + a few other bells and whistles ( see the full breakdown below).

2. Dependencies

A. Frameworks & Build

• Svelte - component framework
• Sveltekit - application framework
• Vite - front-end build tool

B. Scripting / Typescript

• Typescript - JS preprocessor
• tslib - TS runtime library

C. Templating / Pug

• Pug - HTML template engine

D. CSS / TailwindCSS

• Autoprefixer - CSS vendor prefixing

• PostCSS - CSS transformations

• TailwindCSS - CSS framework

• Tailwind Plugins (optional)

• tailwindcss/typography - prose styling

• tailwindcss/forms - form styling

E. Formatting / Prettier

• Prettier - formatter

• Prettier Plugins

• @prettier/plugin-pug - Pug formatting
  

• prettier-plugin-svelte - Svelte formatting
  

F. Linting / ESLint

• ESLint - linter

• ESLint Parsers & Plugins

• eslint-config-prettier - compatibility w/ prettier

• typescript-eslint/parser - TS parsing

• typescript-eslint/eslint-plugin - TS

G. Testing

• Playwright - cross-browser testing
• Vitest - unit testing

3. Getting Started

A. Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

B. Building

To create a production version of your app:

npm run build

C. Preview

You can preview the production build with npm run preview.

4. About SvelteKit

Sveltekit is a new framework for building web applications. It's built on top of Svelte, which is a component framework for building user interfaces. Sveltekit is a great tool for building modern web applications.

If you get stuck working with SvelteKit you can reach out for help in the SvelteKit Discord chatroom.

5. Using Pug with Svelte

I love Pug, and the first thing I figured out when I started working with Svelte, was how to use Pug inside Svelte files. Thankfully other devs had already solved the technical challenges for me.

This starter uses the svelte-preprocess package.It is a Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more.

Note: Special syntax is required to write Pug inside Svelte templates. Some basics are included below. You can learn more here.**

A. How to write Svelte's Template Syntax using Pug Mixins

Because some of Svelte's template syntax is invalid in Pug svelte-preprocess provides some pug mixins to represent svelte's {#...}{/...} blocks: +if(), +else(), +elseif(), +each(), +key(), +await(), +then(), +catch(), +html(), +const(), +debug().

ul
    +if('posts && posts.length > 1')
        +each('posts as post')
            li
                a(
                    href="blog/{post.slug}",
                    rel="prefetch") {  post.title  }
        +else
            span No posts :c

B. Svelte Element Attributes and Callbacks Using Pug

Pug encodes everything inside an element attribute to html entities, so attr="{foo && bar}" becomes attr="foo && bar". To prevent this from happening, instead of using the = operator use != which won't encode your attribute value:

button(disabled!="{ foo && bar }")

This is also necessary to pass callbacks:

button(on:click!="{ (e) => doTheThing(e) }")

It is not possible to use template literals for attribute values. You can't write attr=`Hello ${value ? 'Foo' : 'Bar'}`, instead write attr="Hello {value ? 'Foo' : 'Bar'}".

C. Spreading props in Svelte using Pug

To spread props into a pug element, wrap the {...object} expression with quotes ".

This:

button.big(
    disabled,
    type="button",
    {...slide.props}) Send

Becomes:

<button
    class="big"
    type="button"
    disabled
    {...slide.props}
>
    Send
</button>

D. Svelte Element Directives using Pug

Syntax to use Svelte Element directives with Pug

input(bind:value="{ foo }")
input(on:input="{ bar }")

6. Folder Shortcuts

The following shortcuts and corresponding folders come pre-configured in this template:

• $atoms: './src/lib/components/atoms'
• $assets: "./src/lib/assets",
• $components: './src/lib/components'
• $data: '.src/lib/data'
• $lib: './src/lib'
• $molecules: './src/lib/components/molecules'
• $organisms: './src/lib/components/organisms'
• $stores: './src/lib/stores'
• $tools: './src/lib/tools'
• $types: './src/lib/types'
• $utils: './src/lib/utils'

7. Editor & Extensions

If you are using VSCode, we recommend these extensions:

• Svelte for VS Code
• ESLint
• Prettier ESLint
• Tailwind CSS Intellisense
• Playwright Test for VSCode