Remote functions

Installation

npm i @sjsf/sveltekit

yarn add @sjsf/sveltekit

pnpm add @sjsf/sveltekit

bun add @sjsf/sveltekit

Required peer dependencies: @sjsf/form@^3.3.0 @sveltejs/kit@^2.48.3 esm-env@^1.2.0 svelte@^5.44.0

Example

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";
  // WARN: You must export this ID Builder in your `defaults` file
  import { createFormIdBuilder } from "@sjsf/sveltekit/rf";
  import { connect } from "@sjsf/sveltekit/rf/client";

  import * as defaults from "$lib/form-defaults";

  import { createPost, getInitialData } from "./data.remote";

  const initialData = await getInitialData();

  const form = createForm(
    await connect(createPost, {
      ...defaults,
      ...initialData,
      idBuilder: createFormIdBuilder,
    })
  );
</script>

<BasicForm {form} novalidate />

<script lang="ts">
  import { tick } from "svelte";
  import { BasicForm, createForm } from "@sjsf/form";
  // WARN: You must export this ID Builder in your `defaults` file
  import { createFormIdBuilder } from "@sjsf/sveltekit/rf";
  import { connect } from "@sjsf/sveltekit/rf/client";

  import * as defaults from "$lib/form-defaults";

  import { createPost, getInitialData } from "./data.remote";

  const initialData = await getInitialData();

  const form = createForm(
    await connect(
      createPost.enhance(async ({ submit }) => {
        await submit();
        if (createPost.fields.allIssues()) {
          return;
        }
        console.log(createPost.result);
        // Waiting for an update from remote function
        await tick();
        form.reset();
      }),
      {
        ...defaults,
        ...initialData,
        idBuilder: createFormIdBuilder,
        // Required due to the use of `enhance`
        fields: createPost.fields,
      }
    )
  );
</script>

<BasicForm {form} novalidate />

import { invalid } from '@sveltejs/kit';
import type { InitialFormData } from "@sjsf/sveltekit";
import { createServerValidator } from "@sjsf/sveltekit/rf/server";

import { form, query } from "$app/server";
import * as defaults from "$lib/form-defaults";
import { schema, type CreatePost } from "$lib/post";

export const getInitialData = query(async () => {
  return {
    schema,
    initialValue: { title: "New post", content: "" },
  } satisfies InitialFormData<CreatePost>;
});

export const createPost = form(
  createServerValidator<CreatePost>({
    ...defaults,
    schema,
  }),
  ({ data: { title, content } }) => {
    if (title.length > 100) {
      invalid({ path: ["title"], message: "Title is too long" });
    }
    return { id: "new-post", title, content };
  }
);

import type { FromSchema } from "json-schema-to-ts";
import type { Schema } from "@sjsf/form";

export const schema = {
  title: "Post",
  type: "object",
  properties: {
    title: {
      title: "Title",
      type: "string",
    },
    content: {
      title: "Content",
      type: "string",
      minLength: 5,
    },
  },
  required: ["title", "content"],
} as const satisfies Schema;

export type CreatePost = FromSchema<typeof schema>;

Known issues

experimental.async does not apply to dependency code - issue.

Add this to your vite.config.js
```
optimizeDeps: {
  exclude: ['@sjsf/form', '@sjsf/sveltekit/rf/client'],
}
```
The form.value type on the client side is unknown because the RemoteForm type does not include information about the validator’s output type. For now, you need to specify the type manually: createForm<FormValue>(...).