Merge pull request #52 from x0k/fix-validators-docs

Fix validators docs

Author: x0k

.changeset/silly-readers-invent.md

@@ -0,0 +1,6 @@
+---
+"docs": minor
+---
+
+- Fix validators instantiation code on `Multiple forms` page
+- Add API section to validator pages

apps/docs/src/content/docs/advanced/_multiple-forms.svelte

@@ -14,20 +14,25 @@
     ...theme,
     schema,
     translation,
-    validator: createValidator2(),
     onSubmit: (v: string) => window.alert(v),
   };
 
   const [form1, form1Ctx] = createForm2({
     ...common,
     initialValue: "foo",
     idPrefix: "form1",
+    validator: createValidator2({
+      idPrefix: "form1",
+    }),
   });
 
   const [form2, form2Ctx] = createForm2({
     ...common,
     initialValue: "bar",
     idPrefix: "form2",
+    validator: createValidator2({
+      idPrefix: "form2",
+    })
   });
 </script>
 

apps/docs/src/content/docs/advanced/custom-validation.mdx

@@ -88,7 +88,9 @@ function createCustomValidator(
   };
 }
 
-const validator = createCustomValidator(createValidator2());
+const validator = createCustomValidator(createValidator2({
+  // validator options
+}));
 ```
 
 <LinkCard title="Validator API reference" href="../../api-reference/validator/" />

…rations/_sveltekit-client.svelte.invalid …ntegrations/_sveltekit-client.api.svelteapps/docs/src/content/docs/integrations/_sveltekit-client.svelte.invalid renamed to apps/docs/src/content/docs/integrations/_sveltekit-client.api.svelte apps/docs/src/content/docs/integrations/_sveltekit-client.svelte.invalid renamed to apps/docs/src/content/docs/integrations/_sveltekit-client.api.svelte

@@ -9,8 +9,8 @@ import { DEFAULT_ID_SEPARATOR, DEFAULT_PSEUDO_ID_SEPARATOR } from '@sjsf/form';
 
 import Npm from '@/components/npm.astro';
 
-import clientCode from './_sveltekit-client.svelte.invalid?raw';
-import serverCode from './_sveltekit-server.ts.invalid?raw';
+import clientCode from './_sveltekit-client.api.svelte?raw';
+import serverCode from './_sveltekit-server.api.ts?raw';
 
 :::caution
 

…ntegrations/_sveltekit-server.ts.invalid …cs/integrations/_sveltekit-server.api.tsapps/docs/src/content/docs/integrations/_sveltekit-server.ts.invalid renamed to apps/docs/src/content/docs/integrations/_sveltekit-server.api.ts apps/docs/src/content/docs/integrations/_sveltekit-server.ts.invalid renamed to apps/docs/src/content/docs/integrations/_sveltekit-server.api.ts

@@ -0,0 +1,48 @@
+import type { Options, Ajv, ValidateFunction, AsyncValidateFunction } from "ajv";
+import type { UiSchemaRoot, Schema, Config } from '@sjsf/form'
+import type { AsyncValidator, Validator } from '@sjsf/ajv8-validator'
+
+interface AbstractValidatorOptions {
+  ajv: Ajv;
+  /**
+   * Necessary for correct inference of the field title
+   * @default {}
+   */
+  uiSchema?: UiSchemaRoot;
+  /** @default DEFAULT_ID_PREFIX */
+  idPrefix?: string;
+  /** @default DEFAULT_ID_SEPARATOR */
+  idSeparator?: string;
+  /** @default DEFAULT_PSEUDO_ID_SEPARATOR */
+  idPseudoSeparator?: string;
+}
+
+interface ValidatorOptions extends AbstractValidatorOptions {
+  /** @default makeSchemaCompiler(ajv, false) */
+  compileSchema?: (schema: Schema, rootSchema: Schema) => ValidateFunction;
+  /** @default makeFieldSchemaCompiler(ajv, false) */
+  compileFieldSchema?: (config: Config) => ValidateFunction;
+}
+
+type FactoryOptions<O> = Omit<O, "ajv"> & {
+  /** @default DEFAULT_AJV_CONFIG */
+  ajvOptions?: Options;
+  /** @default addFormComponents(new Ajv(ajvOptions)) */
+  ajv?: Ajv;
+};
+
+function createValidator2(options?: FactoryOptions<ValidatorOptions>): Validator
+
+interface AsyncValidatorOptions extends AbstractValidatorOptions {
+  /** @default makeSchemaCompiler(ajv, false) */
+  compileSchema?: (schema: Schema, rootSchema: Schema) => ValidateFunction;
+  /** @default makeSchemaCompiler(ajv, true) */
+  compileAsyncSchema?: (
+    schema: Schema,
+    rootSchema: Schema
+  ) => AsyncValidateFunction;
+  /** @default makeFieldSchemaCompiler(ajv, true) */
+  compileAsyncFieldSchema?: (config: Config) => AsyncValidateFunction;
+}
+
+function createAsyncValidator(options?: FactoryOptions<AsyncValidatorOptions>): AsyncValidator

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

@@ -6,7 +6,9 @@
 
   import { schema, uiSchema } from './_shared';
 
-  const validator = createValidator2();
+  const validator = createValidator2({
+    uiSchema
+  });
 
   const form = useCustomForm({
     schema,

apps/docs/src/content/docs/validators/_ajv.api.ts

@@ -0,0 +1,26 @@
+import type { Validator as CfValidator } from "@cfworker/json-schema";
+import type { Schema, UiSchemaRoot, Config } from "@sjsf/form";
+import type { Validator } from '@sjsf/cfworker-validator'
+
+type CfValidatorFactory = (schema: Schema) => CfValidator;
+
+interface ValidatorOptions {
+  factory: CfValidatorFactory;
+  /** @default {} */
+  uiSchema?: UiSchemaRoot;
+  /** @default DEFAULT_ID_PREFIX */
+  idPrefix?: string;
+  /** @default DEFAULT_ID_SEPARATOR */
+  idSeparator?: string;
+  /** @default makeValidatorFactory(factory) */
+  createValidator?: (schema: Schema, rootSchema: Schema) => CfValidator;
+  /** @default makeFieldValidatorFactory(factory) */
+  createFieldValidator?: (config: Config) => CfValidator;
+}
+
+type ValidatorFactoryOptions = Omit<ValidatorOptions, "factory"> & {
+  /** @default () => new CfValidator(schema, "7", false) */
+  factory?: CfValidatorFactory;
+};
+
+function createValidator(options?: ValidatorFactoryOptions): Validator

apps/docs/src/content/docs/validators/_ajv.svelte

@@ -6,7 +6,7 @@
 
   import { schema, uiSchema } from './_shared';
 
-  const validator = createValidator();
+  const validator = createValidator({ uiSchema });
 
   const form = useCustomForm({
     schema,