SvelteKit

Using Telefunc with SvelteKit.

Example

• /examples/svelte-kit

Add to existing app

Example of adding Telefunc to an existing app: 7178fec.

1. npm install telefunc (or pnpm/yarn) (example package.json)
2. Add Telefunc's Vite plugin (example vite.config.ts)
3. Add Telefunc's server middleware (example src/routes/_telefunc/+server.ts)
4. Define your first .telefunc.js file (example src/routes/Counter.telefunc.ts)

   .telefunc.js files are always server-only, regardless of where they are located. You don't need to place them in $lib/server nor add .server.

5. Optionally: globally define the type your context object (example src/telefunc.d.ts)

That's it. Enjoy end-to-end typesafety with automatic runtime validation.

Initial Data

For fetching the initial data of pages (SSR data) we use SvelteKit's built-in data fetching mechanism instead of Telefunc.

For example, we can use SvelteKit's load function in a +page.server.js file to fetch initial data directly from a database, see SvelteKit Docs > Loading data > Universal vs server.

We still use Telefunc for fetching data but only after the initial rendering of the page, for example for pagination or infinite scroll.

In case you're curious: we cannot use Telefunc for server-side rendered (SSR) data because only the framework can pass SSR data from the server to the client-side (which is needed for hydration). This is common to all SSR frameworks like SvelteKit.