[docs] Add SvelteKit integration page

Author: x0k

.changeset/tricky-crews-behave.md

@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+Add SvelteKit integration page

apps/docs/package.json

@@ -16,6 +16,7 @@
     "@sjsf/form": "workspace:*",
     "@sjsf/shadcn-theme": "workspace:*",
     "@sjsf/skeleton-theme": "workspace:*",
+    "@sjsf/sveltekit": "workspace:*",
     "@sjsf/zod-integration": "workspace:*",
     "ajv": "catalog:",
     "mermaid": "^11.4.0",

apps/docs/src/content/docs/_validator.ts

@@ -5,7 +5,14 @@ import {
   DEFAULT_AJV_CONFIG,
 } from "@sjsf/ajv8-validator";
 import { isSchemaObjectValue } from "@sjsf/form/core";
-import type { Schema, SchemaValue, ValidationError } from "@sjsf/form";
+import {
+  DEFAULT_ID_PREFIX,
+  DEFAULT_ID_SEPARATOR,
+  pathToId,
+  type Schema,
+  type SchemaValue,
+  type ValidationError,
+} from "@sjsf/form";
 
 class StarValidator extends AjvValidator {
   validateFormData(
@@ -15,7 +22,9 @@ class StarValidator extends AjvValidator {
     const errors = super.validateFormData(schema, formData);
     return isSchemaObjectValue(formData) && !formData["star"]
       ? errors.concat({
-          instanceId: "root_star",
+          instanceId: pathToId(DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, [
+            "star",
+          ]),
           propertyTitle: "Star",
           message: "I will try my best!",
           error: {} as ErrorObject,

apps/docs/src/content/docs/integrations/_sveltekit-client.svelte.invalid

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { FormContent } from "@sjsf/form";
+  import { createValidator } from "@sjsf/ajv8-validator";
+  import { theme } from "@sjsf/form/basic-theme";
+  import { translation } from "@sjsf/form/translations/en";
+  import { useSvelteKitForm, meta } from "@sjsf/sveltekit/client";
+
+  import type { PageData, ActionData } from "./$types";
+
+  const { form, enhance } = useSvelteKitForm(
+    meta<ActionData, PageData>(),
+    "form",
+    {
+      ...theme,
+      validator: createValidator(),
+      translation,
+    }
+  );
+</script>
+
+<form
+  use:enhance
+  method="POST"
+  novalidate
+  style="display: flex; flex-direction: column; gap: 1rem"
+>
+  <FormContent bind:value={form.formValue} />
+  <button type="submit" style="padding: 0.5rem;">Submit</button>
+</form>

apps/docs/src/content/docs/integrations/_sveltekit-server.ts.invalid

@@ -0,0 +1,55 @@
+import type { Schema } from "@sjsf/form";
+import { createValidator } from "@sjsf/ajv8-validator";
+import {
+  initForm,
+  makeFormDataParser,
+  validateForm,
+} from "@sjsf/sveltekit/server";
+
+import type { Actions } from "./$types";
+
+const validator = createValidator();
+
+const parseFormData = makeFormDataParser({
+  validator,
+});
+
+const schema: Schema = {
+  title: "Registration form",
+  type: "object",
+  required: ["firstName", "lastName"],
+  additionalProperties: {
+    type: "string",
+  },
+  properties: {
+    firstName: {
+      type: "string",
+      title: "First name",
+    },
+    lastName: {
+      type: "string",
+      title: "Last name",
+    },
+  },
+};
+
+export const load = async () => {
+  const form = initForm({ schema, validator, sendSchema: true });
+  return { form };
+};
+
+export const actions = {
+  default: async ({ request }) => {
+    return {
+      form: validateForm({
+        schema,
+        validator,
+        data: await parseFormData({
+          schema,
+          request,
+        }),
+        sendData: true,
+      }),
+    };
+  },
+} satisfies Actions;

apps/docs/src/content/docs/integrations/sveltekit.mdx

@@ -0,0 +1,27 @@
+---
+title: SvelteKit
+sidebar:
+  position: 2
+---
+
+import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
+
+import Npm from '@/components/npm.astro';
+
+import clientCode from './_sveltekit-client.svelte.invalid?raw';
+import serverCode from './_sveltekit-server.ts.invalid?raw';
+
+## Installation
+
+<Npm pkg="@sjsf/form @sjsf/sveltekit" />
+
+## Example
+
+<Tabs>
+  <TabItem label='+page.svelte' >
+    <Code code={clientCode} lang='svelte' />
+  </TabItem>
+  <TabItem label='+page.server.ts'>
+    <Code code={serverCode} lang='typescript' />
+  </TabItem>
+</Tabs>

mkfile

@@ -27,7 +27,7 @@ f/:
     pnpm run test $@
   popd
 
-ds/:
+docs/:
   pushd apps/docs
   c:
     pnpm run check
@@ -39,7 +39,7 @@ ds/:
     pnpm run preview
   popd
 
-pl/:
+pg/:
   pushd apps/playground
   d:
     pnpm run dev