Sapper template

THIS PROJECT IS DEPRECATED. SVELTE NOW SUPPORTS TYPESCRIPT NATIVELY.

Introduction

This template is built to support TypeScript, pug and SCSS in a sapper project.

Setup

git clone https://github.com/Kruhlmann/sapper-preprocess-template
cd sapper-preprocess-template
yarn install
yarn run dev

package.json scripts

• yarn run dev Runs the development server with hot reload.
• yarn run build Builds the project for production. The build can be run with node sapper/__sapper__/build or yarn run start
• yarn run start Runs the built solution in production mode
• yarn run lint Lints all TS, JS and SVELTE files in the src directory. Ignores files in src/core.
• yarn run cy:run Opens the cypress runner for all integration tests in cypress
• yarn run cy:open Runs an interactive cypress window for running integration tests
• yarn run test Executes cypress integration tests

External source files

Typescript source files are located in the src/typescript/ directory. The naming convention follows the routes naming convention such that

All values and functions defined in included typescript source files are avaliable for use in both svelte routes and included pug templates.

File locations

• Typescript src/typescript/file.ts
• pug src/pug/file.pug
• SCSS src/scss/routes/file.scss

Naming convention

The naming convention for external files follows the routes naming convention such that src/routes/index.svelte references

• src/typescript/index.ts.
• src/pug/index.pug.
• src/scss/routes/index.scss.

<script lang="ts" src="../typescript/index.ts"></script>
<template lang="pug" src="../pug/index.pug"></template>
<style lang="scss" src="../scss/routes/index.scss"></style>

Svelte properties in pug

Adding complicated tag parameters can be tricky when supporting pug. For instance the following syntax will be escaped such that () => row_click(row) becomes () => row_click(row). This can be circumvented by using the long ECMAScript function declaration such that

+each('data_rows as row')
  row(on:click="{() => row_click(row)}")

becomes

+each('data_rows as row')
  row(on:click="{function() {row_click(row)}}")

This is only relevant for functions that require no parameter or only the event paramater as the following pug snippet will compile and execute as expected:

button(on:click="{btn_click}")

This snippet will simply execute a function, btn_click with the click event as the only parameter, simmilarly to regular svelte behavior.

Reactive variables

Reactive variables are currently not supported in svelte-preprocess (Source).