chore: server actions example

theleanweb · Mar 11, 2024 · 3f5123e · 3f5123e
1 parent faa38dd
commit 3f5123e
Show file tree

Hide file tree

Showing 8 changed files with 2,725 additions and 4,021 deletions.
diff --git a/playground/basic/package.json b/playground/basic/package.json
@@ -20,6 +20,7 @@
     "mdsvex": "^0.11.0",
     "svelte": "^4.2.8",
     "svelte-preprocess": "^5.1.3",
+    "telefunc": "^0.1.71",
     "unocss": "^0.58.5"
   },
   "devDependencies": {

diff --git a/playground/basic/src/actions/count.ts b/playground/basic/src/actions/count.ts
@@ -0,0 +1,7 @@
+let count = 0;
+
+export const getCount = () => count;
+
+export const setCount = (num: number) => {
+    count = num
+}
diff --git a/playground/basic/src/actions/counter.telefunc.ts b/playground/basic/src/actions/counter.telefunc.ts
@@ -0,0 +1,11 @@
+import { getCount, setCount } from "./count";
+
+
+// Telefunc ensures that `diff` is a `number` at runtime, see https://telefunc.com/shield#typescript
+async function onCounterIncrement(diff: number) {
+	const c = getCount() + diff
+	setCount(c);
+	return c
+}
+
+export { onCounterIncrement };
diff --git a/playground/basic/src/entry.ts b/playground/basic/src/entry.ts
@@ -1,8 +1,12 @@
-import { Hono } from "hono";
+import { Hono, type Handler } from "hono";
 
 import { Render } from "@leanweb/fullstack/runtime";
 import { createCookieSessionStorage } from "@leanweb/fullstack/runtime/Session";
 
+import { telefunc } from 'telefunc';
+
+import {getCount} from './actions/count'
+
 import Async from "./views/async.svelte?ssr";
 import Home from "./views/home.svelte?ssr";
 // import About from "./views/about.svx?ssr";
@@ -40,6 +44,26 @@ console.log(Async);
 
 const app = new Hono();
 
+const tele: Handler = async ctx => {
+  const response = await telefunc({
+		url: ctx.req.url,
+		method: ctx.req.method,
+		body: await ctx.req.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
+	});
+}
+
+app.get('/_telefunc', tele)
+app.post('/_telefunc', tele)
+
 app.get("/", async (ctx) => {
   const session = await getSession(ctx.req.raw.headers.get("Cookie"));
 
@@ -51,7 +75,7 @@ app.get("/", async (ctx) => {
     console.log(error);
   }
 
-  return ctx.html('Go to <a href="/home">About 4</a>', {
+  return ctx.html(Render.unsafeRenderToString(Home, {count: getCount()}), {
     headers: {
       "Set-Cookie": await commitSession(session),
     },

diff --git a/playground/basic/src/views/home.svelte b/playground/basic/src/views/home.svelte
@@ -1,24 +1,20 @@
 <script lang="ts">
-  import Footer from "./footer.svelte";
-  import Island from "./Island.svelte";
-  // import Inner from "./inner.svelte";
-
-  import math, { pi } from "./math";
-
-  export let count: number;
-  export let counter: string;
-
-  const data = JSON.stringify(count);
-
-  const list = [{ age: 100 }];
-
-  const num = new Array(100).fill(0).map((_, i) => i);
-
-  function hydrate(node: any) {
-    console.log("use: ", node, math);
-  }
-
-  const href = "./style.css";
+	export let count: number;
 </script>
 
-<Footer {count} />
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module" src="./script.ts"></script>
+  <title>Telefunc</title>
+</head>
+<body>
+  <div class="counter">
+    <span>Counter: <span class='dis'>{count}</span></span>
+    <button class='dec'>-1</button>
+    <button class='inc'>+1</button>
+  </div>
+</body>
+</html>
diff --git a/playground/basic/src/views/script.ts b/playground/basic/src/views/script.ts
@@ -1,19 +1,15 @@
-import "virtual:uno.css";
+import { onCounterIncrement } from "../actions/counter.telefunc"
 
-import Footer from "./footer.svelte";
+const dis = document.querySelector('.dis')
+const inc = document.querySelector('.inc')
+const dec = document.querySelector('.dec')
 
-import Island from "./Island.svelte";
+inc?.addEventListener('click', async () => {
+    const r = await onCounterIncrement(+1)
+    dis!.textContent = r.toString()
+})
 
-// import { SERVER } from "$env/private";
-
-// const data = JSON.parse(document.getElementById("data")!.textContent!);
-
-// const counter = new Island({
-//   hydrate: true,
-//   props: { count: 0 },
-//   target: document.querySelector(".island")!,
-// });
-
-// console.log(Island);
-
-// console.log(SERVER);
+dec?.addEventListener('click', async () => {
+    const r = await onCounterIncrement(-1)
+    dis!.textContent = r.toString()
+})
diff --git a/playground/basic/vite.config.ts b/playground/basic/vite.config.ts
@@ -1,17 +1,19 @@
 import { defineConfig } from "vite";
 
-import UnoCSS from "unocss/vite";
 import extractorSvelte from "@unocss/extractor-svelte";
+import UnoCSS from "unocss/vite";
+
+import { telefunc } from 'telefunc/vite';
 
 import { fullstack } from "@leanweb/fullstack";
 import simpleScope from "vite-plugin-simple-scope";
-import tailwindcss from "@vituum/vite-plugin-tailwindcss";
 
 export default defineConfig({
   // base: "/static",
   plugins: [
     UnoCSS({ extractors: [extractorSvelte()] }),
     fullstack(),
     simpleScope(),
+    telefunc()
   ],
 });