add telefunc

Author: brillout

examples/svelte-kit/package.json

@@ -11,6 +11,9 @@
 		"lint": "prettier --plugin-search-dir . --check .",
 		"format": "prettier --plugin-search-dir . --write ."
 	},
+	"dependencies": {
+		"telefunc": "0.1.36"
+	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",

examples/svelte-kit/src/lib/database.ts

@@ -0,0 +1,3 @@
+export const database = {
+	value: 42
+};

examples/svelte-kit/src/routes/+page.server.ts

@@ -0,0 +1,11 @@
+import { database } from '$lib/database';
+
+export { load };
+
+// For the page's initial data, we use SvelteKit instead of Telefunc; see https://telefunc.com/svelte-kit#initial-page-data
+const load: import('./$types').PageServerLoad = async () => {
+	const { value } = database;
+	return {
+		value
+	};
+};

examples/svelte-kit/src/routes/+page.svelte

@@ -1,2 +1,10 @@
+<script>
+	import Counter from './Counter.svelte';
+	/** @type {import('./$types').PageData} */
+	export let data;
+</script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<p><Counter count={data.value} /></p>
+<p>Refresh the page and observe that the counter value is preserved.</p>

examples/svelte-kit/src/routes/Counter.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { onCounterIncrement } from './Counter.telefunc';
+	export let count: number;
+</script>
+
+<div class="counter">
+	<span>Counter: {count}</span>
+	<button on:click={async () => {count = await onCounterIncrement(-1)}}>-1</button>
+	<button on:click={async () => {count = await onCounterIncrement(+1)}}>+1</button>
+	<button on:click={async () => {count = await onCounterIncrement(-10)}}>-10</button>
+	<button on:click={async () => {count = await onCounterIncrement(+10)}}>+10</button>
+</div>

examples/svelte-kit/src/routes/Counter.telefunc.ts

@@ -0,0 +1,9 @@
+import { database } from '$lib/database';
+
+export { onCounterIncrement };
+
+// Telefunc ensures that `diff` is a `number` at runtime, see https://telefunc.com/shield#typescript
+async function onCounterIncrement(diff: number) {
+	database.value = database.value + diff;
+	return database.value;
+}

examples/svelte-kit/src/routes/_telefunc/+server.ts

@@ -0,0 +1,20 @@
+import { telefunc } from 'telefunc';
+import type { RequestHandler } from './$types';
+
+const GET: RequestHandler = async (event) => {
+	const response = await telefunc({
+		url: event.request.url,
+		method: event.request.method,
+		body: await event.request.text(),
+		context: {
+			// We pass the `context` object here, see https://telefunc.com/getContext
+			someContext: 'hello'
+		}
+	});
+	return new Response(response.body, {
+		headers: new Headers({ contentType: response.contentType }),
+		status: response.statusCode
+	});
+};
+
+export { GET, GET as POST };

examples/svelte-kit/src/telefunc.d.ts

@@ -0,0 +1,12 @@
+import 'telefunc';
+
+declare module 'telefunc' {
+	namespace Telefunc {
+		interface Context {
+			/* Globally define the type of the `context` object here, see https://telefunc.com/getContext#typescript
+			 * For example:
+			user: null | { id: number, name: string }
+			*/
+		}
+	}
+}

examples/svelte-kit/vite.config.ts

@@ -1,8 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
+import { telefunc } from 'telefunc/vite';
 
 const config: UserConfig = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit(), telefunc()]
 };
 
 export default config;