SvelteKit

Using Telefunc with SvelteKit.

1. Install

npm install telefunc

pnpm add telefunc

bun add telefunc

yarn add telefunc

2. Vite plugin

// vite.config.js
 
import { sveltekit } from '@sveltejs/kit/vite'
import { telefunc } from 'telefunc/vite'
import { defineConfig } from 'vite'
 
export default defineConfig({
  plugins: [sveltekit(), telefunc()]
})

// vite.config.ts
 
import { sveltekit } from '@sveltejs/kit/vite'
import { telefunc } from 'telefunc/vite'
import { defineConfig } from 'vite'
 
export default defineConfig({
  plugins: [sveltekit(), telefunc()],
})

3. Server integration

// src/routes/_telefunc/+server.js
// Environment: server
 
import { telefunc } from 'telefunc'
 
const handler = async (event) => {
  const httpResponse = await telefunc({ request: event.request })
  return new Response(httpResponse.body, {
    headers: new Headers({ 'content-type': httpResponse.contentType }),
    status: httpResponse.statusCode
  })
}
export { handler as GET, handler as POST }

// src/routes/_telefunc/+server.ts
// Environment: server
 
import { telefunc } from 'telefunc'
import type { RequestHandler } from './$types'
 
const handler: RequestHandler = async (event) => {
  const httpResponse = await telefunc({ request: event.request })
  return new Response(httpResponse.body, {
    headers: new Headers({ 'content-type': httpResponse.contentType }),
    status: httpResponse.statusCode,
  })
}
export { handler as GET, handler as POST }

4. Create a telefunction

Create your first telefunction, for example:

// src/routes/Counter.telefunc.js
// Environment: server
 
export async function onIncrement(diff) {
  database.value += diff
  return database.value
}

// src/routes/Counter.telefunc.ts
// Environment: server
 
export async function onIncrement(diff: number) {
  database.value += diff
  return database.value
}

.telefunc.ts files are always server-only, regardless of where they are located. You don't need $lib/server or .server.

Call it from the client:

<!-- src/routes/Counter.svelte -->
<!-- Environment: client -->
 
<script lang="ts">
import { onIncrement } from './Counter.telefunc'
 
let count = 0
</script>
 
<button on:click={async () => { count = await onIncrement(+1) }}>+1</button>
<span>{count}</span>

To pass contextual information (e.g. the logged-in user) to your telefunctions, see API > getContext().

Example

/examples/svelte-kit

Initial Data

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

For example, you 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.

You can 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: you 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.