Svelte Kit

Vite

Build with Vite with 2 plugins

• vite-plugin-svelte (e.g. transform .svelte files)
• vite-plugin-svelte-kit (e.g. handle SSR and data requests)

SSR

ssr.externals

• modules (typically node_modules e.g. react/vue) that exclude from esm -> cjs downgrade
• used by vite.ssrLoadModule
• compare to optimizeDeps.include (serve esm in Browser, cjs in Node = Vite serve)

Typings

Generated types

https://github.com/sveltejs/kit/discussions/4571 (opens in a new tab)

For each src/routes/[foo]/[bar]/[baz].js, there is generated type file under e.g. .svelte-kit/types/src/routes/[foo]/[bar]/[baz].d.ts.

It works as

• rootDirs (opens in a new tab) allows multiple type resolution roots, e.g. src/, .svelte-kit/types/src/)
• moduleResolution (opens in a new tab) node resolves imports in order of (e.g. index.ts, index.d.ts, package.json)

/** @type {import('./[baz]').RequestHandler} */
export async function get({ params }) {
  // ...
}

app-level types

https://github.com/sveltejs/kit/issues/3569 (opens in a new tab)

// global.d.ts
 
declare module '$app/stores' {
  export interface Session {
     whatever: 'i want';
   }
}

Endpoint

Page vs Standalone

Load function vs Get/Post for loading page data (issue https://github.com/sveltejs/kit/issues/3532 (opens in a new tab))

Module script (<script context='module' />)

https://codechips.me/svelte-module-scripts-explained/ (opens in a new tab)

• Runs per script load (instead of per component instance created)
• Export functions

Conceptually similar to ES Modules, while script is similar to props/data/methods/hooks in vue.