Removed server forms and added client forms

Author: Tommertom

demo-app/src/lib/components/Menu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
+	import { dev } from '$app/environment';
 
 	import { pwaBeforeInstallPrompt, canInstall } from '$lib/services/pwa';
 	import { showMenu } from '$lib/services/menu';
@@ -138,15 +139,13 @@
 					<p>
 						Raise issues on Github - <a
 							href="https://github.com/Tommertom/svelte-ionic-app/issues"
-							target="_new">https://github.com/Tommertom/svelte-ionic-app/issues</a
-						>
+							target="_new">https://github.com/Tommertom/svelte-ionic-app/issues</a>
 					</p>
 					<br />
 					<p>
 						Join <a
 							href="https://discordapp.com/channels/520266681499779082/1049388501629681675"
-							target="_new">Ionic-Svelte channel</a
-						> on Ionic's official discord
+							target="_new">Ionic-Svelte channel</a> on Ionic's official discord
 					</p>
 					<br /><br />
 					<p>Thanks!!! Tommertom</p>
@@ -162,8 +161,7 @@
 				}}
 				on:click={() => {
 					inlineModalOpen = false;
-				}}
-			>
+				}}>
 				Close modal
 			</ion-button>
 			vite v4.
@@ -186,8 +184,7 @@
 						window.gtag('event', 'Feedback open');
 						inlineModalOpen = true;
 					}}
-					slot="end">About...</ion-button
-				>
+					slot="end">About...</ion-button>
 			</ion-toolbar>
 		</ion-header>
 		<ion-content>
@@ -199,8 +196,7 @@
 						}}
 						on:click={() => {
 							closeAndNavigate(menuItem.url);
-						}}
-					>
+						}}>
 						<ion-icon icon={menuItem.icon} slot="start" color={getRandomColor()} />
 						<ion-label>{menuItem.label}</ion-label>
 					</ion-item>
@@ -223,8 +219,7 @@
 						on:click={() => {
 							const prompt = $pwaBeforeInstallPrompt;
 							prompt.prompt();
-						}}
-					>
+						}}>
 						<ion-icon icon={allIonicIcons['download']} slot="start" />
 						<ion-label>Install this app as PWA</ion-label>
 					</ion-item>
@@ -241,8 +236,7 @@
 						//@ts-ignore
 						window.gtag('event', 'github-svelte-ionic-app');
 						window.open('https://github.com/Tommertom/svelte-ionic-app', '_blank');
-					}}
-				>
+					}}>
 					<ion-icon icon={allIonicIcons['star']} slot="start" />
 					<ion-label>Go to GitHub for this app</ion-label>
 				</ion-item>

demo-app/src/routes/components/Inputs/+page.server.ts

@@ -1,26 +1,20 @@
 <script lang="ts">
-	import { applyAction, enhance, type SubmitFunction } from '$app/forms';
-	import { page } from '$app/stores';
 	import SourceButton from '$lib/components/SourceButton.svelte';
 	import { alertController, IonPage } from 'ionic-svelte';
-	import type { ActionData } from './$types';
+	import { onMount } from 'svelte';
 
-	const patchForm: SubmitFunction = () => {
-		return async ({ result }) => {
-			await applyAction(result);
-		};
-	};
+	import { accountSchema as schema } from './account.interface';
+	import { enhance, getFormWritable, validate } from './spa-enhance';
 
-	export let form: ActionData;
+	const form = getFormWritable();
 
-	$: console.log('Form received', form);
-	$: console.log('Page form', $page.form);
+	$: console.log('Form received', $form);
 
-	$: if (form?.success) {
+	$: if ($form?.success) {
 		const controller = alertController
 			.create({
 				header: 'Account Created',
-				message: `Created account for: <b>${form.formData.firstName} ${form.formData.lastName}</b>`,
+				message: `Created account for: <b>${$form.data.firstName} ${$form.data.lastName}</b>`,
 				buttons: [
 					{
 						text: 'OK'
@@ -30,7 +24,7 @@
 			.then((alert) => alert.present());
 	}
 
-	$: if (form !== null && !form?.success) {
+	$: if ($form !== null && !$form?.success) {
 		const controller = alertController
 			.create({
 				header: 'Account Not Created',
@@ -43,6 +37,10 @@
 			})
 			.then((alert) => alert.present());
 	}
+
+	onMount(() => {
+		console.log('Validate', validate);
+	});
 </script>
 
 <svelte:head>
@@ -63,22 +61,24 @@
 	</ion-header>
 
 	<ion-content fullscreen class="ion-padding">
-		<form method="POST" use:enhance={patchForm}>
+		<form use:enhance={{ form, schema }} id="accountform">
 			<ion-list lines="full" class="ion-no-margin ion-no-padding">
-				<ion-item>
+				<ion-item class:ion-invalid={$form?.errors?.firstName}>
 					<ion-label position="stacked">
 						First Name
 						<ion-text color="danger">*</ion-text>
 					</ion-label>
-					<ion-input name="firstName" type="text" value={form?.formData?.firstName ?? ''} />
+					<ion-input name="firstName" type="text" value={$form?.data.firstName ?? ''} />
+					<ion-note slot="error">First name must be not empty and valid</ion-note>
 				</ion-item>
 
-				<ion-item>
+				<ion-item class:ion-invalid={$form?.errors?.lastName}>
 					<ion-label position="stacked">
 						Last Name
 						<ion-text color="danger">*</ion-text>
 					</ion-label>
 					<ion-input name="lastName" required type="text" />
+					<ion-note slot="error">FLast name must be not empty and valid</ion-note>
 				</ion-item>
 
 				<ion-item>
@@ -107,9 +107,3 @@
 		</form>
 	</ion-content>
 </IonPage>
-
-<style>
-	input {
-		color: red;
-	}
-</style>

demo-app/src/routes/components/Inputs/+page.svelte

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import { writable, type Writable } from "svelte/store";
+
+// https://zod.dev/
+// https://morioh.com/p/cc9d89e8a10b
+import type { ZodTypeAny } from 'zod';
+
+interface ErrorObject {
+    [key: string]: string[];
+}
+export interface FormType {
+    success?: boolean;
+    errors?: ErrorObject;
+    data: { [key: string]: string };
+    validate?: () => void;
+}
+
+export function getFormWritable() {
+    return writable<FormType | null>(null);
+}
+
+// export let validate: () => void;
+
+// export function validateFromEvent(ev) {
+//     console.log('sss', ev);
+//     return true;
+// }
+
+export function enhance(
+    formNode: HTMLFormElement,
+    bar: { form: Writable<FormType | null>; schema?: ZodTypeAny }
+) {
+    const { form, schema } = bar;
+
+    function validateForm() {
+
+        function formToObject() {
+            //@ts-ignore
+            const form = document.forms[formNode.id];
+            const formData = new FormData(form);
+            const keys = Array.from(formData.keys());
+
+            const output: { [key: string]: string } = {};
+            keys.forEach((key) => {
+                output[key] = formData.get(key) as string;
+            });
+
+            return output;
+        }
+
+        let success = false;
+        let errors: undefined | ErrorObject = undefined;
+        let data = formToObject();
+
+        if (schema) {
+            const result = schema.safeParse(data);
+            success = result.success;
+
+            // add errros
+            if (!result.success) {
+                const errorsArray = result.error.errors.map((error) => {
+                    return {
+                        field: error.path[0],
+                        message: error.message
+                    };
+                });
+
+                errors = errorsArray.reduce((acc, obj) => {
+                    //@ts-ignore
+                    if (!acc[obj.field]) {
+                        //@ts-ignore
+                        acc[obj.field] = [];
+                    }
+                    //@ts-ignore
+                    acc[obj.field].push(obj.message);
+                    return acc;
+                }, {});
+            }
+
+            if (result.success) data = result.data;
+        }
+
+        form.set({
+            success,
+            errors,
+            data,
+            validate: validateForm
+        });
+    }
+
+    const submitHandler = (event: SubmitEvent) => {
+        event.preventDefault();
+        validateForm();
+    };
+
+    formNode.addEventListener('submit', submitHandler);
+
+
+    return {
+        destroy() {
+            formNode.removeEventListener('submit', submitHandler);
+        }
+    };
+}