Remote functions

Caution

Remote functions integration is experimental

Installation

npm

npm i @sjsf/sveltekit

pnpm

pnpm add @sjsf/sveltekit

yarn

yarn add @sjsf/sveltekit

bun

bun add @sjsf/sveltekit

deno

deno add @sjsf/sveltekit

Required peer dependencies: @sjsf/form@3.5.0 @sveltejs/kit@2.61.0 esm-env@1.2.0 svelte@5.44.0

Example

Note

For correct operation, you must use ID Builder from the @sjsf/sveltekit/rf.

+page.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";
  import { connect } from "@sjsf/sveltekit/rf/client";

  import type { Model } from "$lib/post";
  import * as defaults from "$lib/sjsf/remote-defaults";

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

  const initialData = await getInitialData();

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

<BasicForm {form} novalidate />

+page.svelte (enhance)

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";
  import { connect } from "@sjsf/sveltekit/rf/client";

  import type { Model } from "$lib/post";
  import * as defaults from "$lib/sjsf/remote-defaults";

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

  const initialData = await getInitialData();

  createPost.enhance(async ({ submit }) => {
    if (await submit()) {
      console.log(createPost.result);
      form.reset();
    }
  });

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

<BasicForm {form} novalidate />

data.remote.ts

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

import { form, query } from "$app/server";
import * as post from "$lib/post";
import * as defaults from "$lib/sjsf/remote-defaults";

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

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

lib/post.ts

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

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 Model = FromSchema<typeof schema>;

export const uiSchema: UiSchema = {
  content: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
  },
};

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. Specify the type via connect generic: createForm(await connect<FormValue>(...)).