// CreateTodo.telefunc.ts
// Environment: Server
// Telefunc makes onNewTodo() remotely callable
// from the browser.
export { onNewTodo }
import { getContext } from 'telefunc'
// Telefunction arguments are automatically validated
// at runtime: `text` is guaranteed to be a string.
async function onNewTodo(text: string) {
const { user } = getContext()
// With an ORM
await Todo.create({ text, authorId: user.id })
// With SQL
await sql(
"INSERT INTO todo_items VALUES (:text, :authorId)",
{ text, authorId: user.id })
}
// CreateTodo.tsx
// Environment: Browser
// CreateTodo.telefunc.ts isn't actually loaded: Tele-
// func transforms it into a thin HTTP client.
import { onNewTodo } from './CreateTodo.telefunc.ts'
async function onClick(form) {
const text = form.input.value
// Behind the scenes, Telefunc makes an HTTP request
// to the server.
await onNewTodo(text)
}
function CreateTodo() {
return (
<form>
<input input="text"></input>
<button onClick={onClick}>Add To-Do</button>
</form>
)
}
With Telefunc, you get a simple frontend-backend relationship: it's just a set of remote functions.
Your frontend can directly use any SQL/ORM query to retrieve & mutate data.
Telefunc enables programmatically defined permissions. It's both simple and flexible.
Telefunc introduces new techniques to define advanced permissions and increase safety.
Telefunc supports Next.js, CRA, Nuxt, Vite, Vike, React Native and other frameworks based on Webpack, Babel, Parcel or Vite.
The frontend can directly tap into the full power of the server. Use tailored SQL/ORM queries for highly performant data retrieval and mutations.
Seamless TypeScript support out-of-the-box including all your favorite IDE features such as auto-import, replace-all-occurrences, etc.
Automatic runtime validation for end-to-end type safety.
The source code of Telefunc has no known bug (bugs are fixed swiftly) and every release is assailed against a heavy suite of automated tests.
Have a question? Want a feature? Found a bug? Join our Discord or open a GitHub ticket.