Reusable defaults

Even with a simple setup, resulting code is very verbose. Therefore, it is convenient to create a file that re-exports the selected resolver, theme, validator, merger and translation.

lib/sjsf/defaults.ts

export { resolver } from "@sjsf/form/resolvers/basic";
import "@sjsf/form/fields/extra/enum-include";
import "@sjsf/form/fields/extra/multi-enum-include";
import "@sjsf/form/fields/extra/file-include";
import "@sjsf/form/fields/extra/unknown-native-file-include";

export { theme } from "@sjsf/basic-theme";
import "@sjsf/basic-theme/extra-widgets/textarea-include";
import "@sjsf/basic-theme/extra-widgets/file-include";
import "@sjsf/basic-theme/extra-widgets/checkboxes-include";

export { createFormIdBuilder as idBuilder } from "@sjsf/form/id-builders/modern";

import { addFormComponents, createFormValidator } from "@sjsf/ajv8-validator";
import type { ValidatorFactoryOptions } from "@sjsf/form";
import addFormats from "ajv-formats";

export { createFormMerger as merger } from "@sjsf/form/mergers/modern";

export { translation } from "@sjsf/form/translations/en";

export function validator<T>(options: ValidatorFactoryOptions) {
  return createFormValidator<T>({
    ...options,
    ajvPlugins: (ajv) => addFormats(addFormComponents(ajv)),
  });
}

And use it like this:

Caution

At the moment, Svelte has an issue with overwriting module properties used as component properties (<SimpleForm {...defaults} resolver={myResolver} >) during SSR.

As a workaround, you can use a shallow clone of defaults object or define export const defaults = { ... } in a defaults file.

import * as defaults from '$lib/sjsf/defaults'

const form = createForm({ ...defaults, <your-options> })