chore(examples): make all server functions async

examples/11_form/src/components/App.tsx

@@ -3,23 +3,14 @@ import { Form } from './Form';
 import { ServerForm } from './ServerForm';
 import { getMessage, greet, increment } from './funcs';
 
-type ServerFunction<T> = T extends (...args: infer A) => infer R
-  ? (...args: A) => Promise<R>
-  : never;
-
 const App = ({ name }: { name: string }) => {
   return (
     <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
       <title>Waku</title>
       <h1>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
-      <Counter
-        increment={increment as unknown as ServerFunction<typeof increment>}
-      />
-      <Form
-        message={getMessage()}
-        greet={greet as unknown as ServerFunction<typeof greet>}
-      />
+      <Counter increment={increment} />
+      <Form message={getMessage()} greet={greet} />
       <ServerForm />
     </div>
   );

examples/11_form/src/components/Form.tsx

@@ -21,7 +21,7 @@ export const Form = ({
   message,
   greet,
 }: {
-  message: string;
+  message: Promise<string>;
   greet: (formData: FormData) => Promise<void>;
 }) => (
   <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>

examples/11_form/src/components/funcs.ts

@@ -5,11 +5,11 @@ import { rerender } from 'waku/server';
 // module state on server
 let message = '';
 
-export const getMessage = () => message;
+export const getMessage = async () => message;
 
-export const greet = (formData: FormData) => {
+export const greet = async (formData: FormData) => {
   message = `Hello ${formData.get('name') || 'Anonymous'} from server!`;
   rerender('');
 };
 
-export const increment = (count: number) => count + 1;
+export const increment = async (count: number) => count + 1;

examples/23_actions/src/components2/App.tsx

@@ -4,21 +4,14 @@ import Counter from './Counter';
 import { greet, getCounter, increment } from './funcs';
 import ButtonServer from './ButtonServer';
 
-type ServerFunction<T> = T extends (...args: infer A) => infer R
-  ? (...args: A) => Promise<R>
-  : never;
-
 const App = ({ name }: { name: string }) => {
   return (
     <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
       <title>Waku</title>
       <h1>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
       <p>Server counter: {getCounter()}</p>
-      <Counter
-        greet={greet}
-        increment={increment as unknown as ServerFunction<typeof increment>}
-      />
+      <Counter greet={greet} increment={increment} />
       <Balancer>My Awesome Title</Balancer>
       <ButtonServer name="Button1" />
       <ButtonServer name="Button2" />

examples/23_actions/src/components2/funcs.ts

@@ -14,9 +14,9 @@ export const greet = async (name: string) => {
 // module state on server
 let counter = 0;
 
-export const getCounter = () => counter;
+export const getCounter = async () => counter;
 
-export const increment = () => {
+export const increment = async () => {
   counter += 1;
   rerender('Waku');
 };