SvelteKit integration

[x0k]

Example

+page.svelte.ts

<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 } from '@sjsf/sveltekit/client';

  import type { PageData, ActionData } from './$types';

  const { form } = useSvelteKitForm<ActionData, PageData>({
    ...theme,
    name: 'form',
    validator: createValidator(),
    translation
  });
</script>

<form 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>

+page.server.ts

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'],
  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;

[changeset-bot]

🦋 Changeset detected

Latest commit: ed43046

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
@sjsf/form	Minor
playground	Minor
@sjsf/ajv8-validator	Minor
docs	Minor
@sjsf/daisyui-theme	Minor
@sjsf/flowbite-icons	Minor
@sjsf/flowbite-theme	Minor
@sjsf/lucide-icons	Minor
@sjsf/radix-icons	Minor
@sjsf/shadcn-theme	Minor
@sjsf/skeleton-theme	Minor
@sjsf/sveltekit	Minor
testing	Patch
@sjsf/zod-integration	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR