Vike

Using Telefunc with Vike.

You can use vike.dev/new to scaffold a new Vike app that uses Telefunc.

1. Install

npm install telefunc

pnpm add telefunc

bun add telefunc

yarn add telefunc

npmpnpmBunYarn

2. Vite plugin

// vite.config.js
 
import react from '@vitejs/plugin-react'
import vike from 'vike/plugin'
import telefunc from 'telefunc/vite'
 
export default {
  plugins: [react(), vike(), telefunc()],
}

3. Server integration

Install the Telefunc server middleware. For example, with Hono:

// server.js
// Environment: server
 
import { Hono } from 'hono'
import { serve } from '@hono/node-server'
import { Telefunc } from 'telefunc/node'
 
const app = new Hono()
const telefunc = new Telefunc()
 
app.all('/_telefunc', async (c) => {
  const response = await telefunc.serve({ request: c.req.raw })
  return response ?? c.notFound()
})
 
const server = serve({ fetch: app.fetch, port: 3000 })
telefunc.installWebSocket(server)

// server.ts
// Environment: server
 
import { Hono } from 'hono'
import { serve } from '@hono/node-server'
import { Telefunc } from 'telefunc/node'
 
const app = new Hono()
const telefunc = new Telefunc()
 
app.all('/_telefunc', async (c) => {
  const response = await telefunc.serve({ request: c.req.raw })
  return response ?? c.notFound()
})
 
const server = serve({ fetch: app.fetch, port: 3000 })
telefunc.installWebSocket(server)

4. Create a telefunction

Create your first telefunction, for example:

// pages/index/TodoList.telefunc.js
// Environment: server
 
export async function onNewTodo({ text }) {
  todoItems.push({ text })
  return { todoItems }
}

// pages/index/TodoList.telefunc.ts
// Environment: server
 
export async function onNewTodo({ text }: { text: string }) {
  todoItems.push({ text })
  return { todoItems }
}

JavaScriptTypeScript

Call it from the client:

// pages/index/TodoList.jsx
// Environment: client
 
import { onNewTodo } from './TodoList.telefunc'
 
function TodoList() {
  const onSubmit = async (text) => {
    const { todoItems } = await onNewTodo({ text })
    // ...
  }
}

// pages/index/TodoList.tsx
// Environment: client
 
import { onNewTodo } from './TodoList.telefunc'
 
function TodoList() {
  const onSubmit = async (text: string) => {
    const { todoItems } = await onNewTodo({ text })
    // ...
  }
}

JavaScriptTypeScript

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

Examples

Initial Data

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

For example, you can use Vike's +data() hook to fetch initial data directly from a database, see vike.dev > Data Fetching.

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 Vike.