[sveltekit] Add SvelteKitForm component

Author: x0k

.changeset/popular-trainers-lick.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/sveltekit": minor
+---
+
+Add `SvelteKitForm` component

packages/sveltekit/src/lib/client/create-form.svelte.ts

@@ -99,7 +99,7 @@ export function createSvelteKitForm<
   const additionalPropertyKeyValidationError = $derived(
     options.additionalPropertyKeyValidationError
   );
-  const proto = {
+  const defaults = {
     ...initialFormData,
     additionalPropertyKeyValidator:
       additionalPropertyKeyValidationError !== undefined
@@ -160,8 +160,18 @@ export function createSvelteKitForm<
           }
         : undefined
   };
-  const form = createForm3<FormOptions<Meta['__formValue'], E>>(
-    Object.setPrototypeOf(options, proto)
+  const form = createForm3(
+    new Proxy(options, {
+      has(target, p) {
+        return Reflect.has(target, p) || p in defaults
+      },
+      get(target, p, receiver) {
+        if (!(p in target)) {
+          return defaults[p as keyof typeof defaults];
+        }
+        return Reflect.get(target, p, receiver);
+      }
+    }) as unknown as FormOptions<Meta['__formValue'], E>
   );
   $effect(() => {
     if (!isRecord(page.form)) {

packages/sveltekit/src/lib/client/form.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" generics="Meta extends SvelteKitFormMeta<any, any, string, any>">
+  import { RawForm } from '@sjsf/form';
+
+  import type { SvelteKitFormMeta } from './meta.js';
+  import { createSvelteKitForm, type SvelteKitFormOptions2 } from './create-form.svelte.js';
+  import { createSvelteKitRequest, type SveltekitRequestOptions } from './create-request.svelte.js';
+
+  type Props = {
+    meta: Meta;
+  } & SveltekitRequestOptions<Meta['__actionData'], Meta['__formValue']> &
+    Omit<
+      SvelteKitFormOptions2<Meta['__formValue'], Meta['__validationError'], Meta['__sendSchema']>,
+      'onSubmit'
+    >;
+
+  const props: Props = $props();
+
+  const request = createSvelteKitRequest(props.meta, props);
+
+  const form = createSvelteKitForm(
+    props.meta,
+    // @ts-expect-error
+    new Proxy(props, {
+      has(target, p) {
+        if (p === 'onSubmit') {
+          return true;
+        }
+        return Reflect.has(target, p);
+      },
+      get(target, p, receiver) {
+        if (p === 'onSubmit') {
+          return request.run;
+        }
+        return Reflect.get(target, p, receiver);
+      }
+    })
+  );
+</script>
+
+<RawForm {form} method="POST" />

packages/sveltekit/src/lib/client/index.ts

@@ -3,3 +3,4 @@ export * from './create-request.svelte';
 export * from './create-form.svelte';
 export * from './use-mutation.svelte';
 export * from './use-form.svelte';
+export { default as SvelteKitForm } from './form.svelte'

packages/sveltekit/src/routes/+page.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import Form1 from './form1.svelte';
   import Form2 from './form2.svelte';
+    import Form3 from './form3.svelte';
 </script>
 
 <Form1 />
 
 <Form2 />
+
+<Form3 />

packages/sveltekit/src/routes/form3.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { SvelteKitForm, createMeta } from '$lib/client/index.js';
+  import { theme } from '@sjsf/form/basic-theme';
+  import { createValidator2 } from '@sjsf/ajv8-validator';
+  import { translation } from '@sjsf/form/translations/en';
+
+  import type { ActionData, PageData } from './$types.js';
+
+  import { ERROR_TYPE_OBJECTS } from './model.js';
+
+  const meta = createMeta<ActionData, PageData, 'form'>('form');
+</script>
+
+<SvelteKitForm
+  {...theme}
+  {meta}
+  idPrefix="form3"
+  validator={createValidator2()}
+  {translation}
+  onSubmitError={console.warn}
+  onSuccess={console.log}
+  onFailure={console.error}
+  additionalPropertyKeyValidationError={({ type, values }) =>
+    `The presence of these ${ERROR_TYPE_OBJECTS[type]} ("${values.join('", "')}") is prohibited`}
+  uiSchema={{
+    'ui:formElement': {
+      'ui:options': {
+        form: {
+          action: "?/first",
+          novalidate: true
+        }
+      }
+    }
+  }}
+/>