[sveltekit] Extend AdditionalPropertyKeyValidationError function options

Author: x0k

packages/sveltekit/src/lib/client/create-form.svelte.ts

@@ -1,5 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { isRecord } from '@sjsf/form/lib/object';
+import { some } from '@sjsf/form/lib/array';
+import {
+  isArrayOrObjectSchemaType,
+  isPrimitiveSchemaType,
+  isSchema,
+  typeOfSchema
+} from '@sjsf/form/core';
 import {
   DEFAULT_ID_SEPARATOR,
   DEFAULT_PSEUDO_ID_SEPARATOR,
@@ -9,7 +16,6 @@ import {
   type Schema,
   type FormOptions,
   groupErrors,
-  type Config,
   type IdentifiableFieldElement
 } from '@sjsf/form';
 
@@ -22,17 +28,26 @@ import {
 } from '../model.js';
 
 import type { SvelteKitFormMeta } from './meta.js';
-import {
-  isArrayOrObjectSchemaType,
-  isPrimitiveSchemaType,
-  isSchema,
-  typeOfSchema
-} from '@sjsf/form/core';
-import { some } from '@sjsf/form/lib/array';
+
+export enum AdditionalPropertyKeyValidationErrorType {
+  ForbiddenSequence = 'forbidden-sequence',
+  ForbiddenSuffix = 'forbidden-suffix'
+}
+
+export interface AdditionalPropertyKeyValidationErrorFnOptions {
+  key: string;
+  type: AdditionalPropertyKeyValidationErrorType;
+  /** @deprecated */
+  separator: string;
+  /** @deprecated */
+  separators: string[];
+  value: string;
+  values: string[];
+}
 
 export type AdditionalPropertyKeyValidationError2 =
   | string
-  | ((ctx: { key: string; separator: string; separators: string[] }) => string);
+  | ((ctx: AdditionalPropertyKeyValidationErrorFnOptions) => string);
 
 export type SvelteKitFormOptions2<V, E, SendSchema extends boolean> = Omit<
   FormOptions<V, E>,
@@ -89,12 +104,29 @@ export function createSvelteKitForm<
     additionalPropertyKeyValidator:
       additionalPropertyKeyValidationError !== undefined
         ? {
-            validateAdditionalPropertyKey(key: string, config: Config): string[] {
+            validateAdditionalPropertyKey(key: string, { additionalProperties }: Schema): string[] {
               const messages: string[] = [];
-              const { additionalProperties } = config.schema;
               if (additionalProperties === undefined) {
                 return messages;
               }
+              const pushMessage = (
+                type: AdditionalPropertyKeyValidationErrorType,
+                value: string,
+                values: string[]
+              ) =>
+                messages.push(
+                  typeof additionalPropertyKeyValidationError === 'string'
+                    ? additionalPropertyKeyValidationError
+                    : additionalPropertyKeyValidationError({
+                        type,
+                        key,
+                        value,
+                        values,
+                        separator: value,
+                        separators: values
+                      })
+                );
+              // TODO: handle `$ref` in `additionalProperties`
               const types = isSchema(additionalProperties)
                 ? typeOfSchema(additionalProperties)
                 : [];
@@ -107,24 +139,20 @@ export function createSvelteKitForm<
                     continue;
                   }
                 }
-                messages.push(
-                  typeof additionalPropertyKeyValidationError === 'string'
-                    ? additionalPropertyKeyValidationError
-                    : additionalPropertyKeyValidationError({ key, separator, separators })
+                pushMessage(
+                  AdditionalPropertyKeyValidationErrorType.ForbiddenSequence,
+                  separator,
+                  separators
                 );
               }
               for (const suffix of suffixes) {
                 if (!key.endsWith(suffix) || !some(types, isPrimitiveSchemaType)) {
                   continue;
                 }
-                messages.push(
-                  typeof additionalPropertyKeyValidationError === 'string'
-                    ? additionalPropertyKeyValidationError
-                    : additionalPropertyKeyValidationError({
-                        key,
-                        separator: suffix,
-                        separators: suffixes
-                      })
+                pushMessage(
+                  AdditionalPropertyKeyValidationErrorType.ForbiddenSuffix,
+                  suffix,
+                  suffixes
                 );
               }
               return messages;

packages/sveltekit/src/routes/+page.server.ts

@@ -46,7 +46,6 @@ export const actions = {
       request,
       schema
     });
-    console.log(data);
     return {
       form: await validateForm2({
         request,
@@ -57,7 +56,7 @@ export const actions = {
       })
     };
   },
-  register: async () => {
+  second: async () => {
     return {
       form2: validateForm({
         schema,

packages/sveltekit/src/routes/form1.svelte

@@ -1,4 +1,3 @@
-
 <script lang="ts">
   import { Content, setFromContext } from '@sjsf/form';
   import { createValidator2 } from '@sjsf/ajv8-validator';
@@ -9,6 +8,8 @@
 
   import type { PageData, ActionData } from './$types.js';
 
+  import { ERROR_TYPE_OBJECTS } from './model.js';
+
   const meta = createMeta<ActionData, PageData, 'form'>('form');
   const request = createSvelteKitRequest(meta, {
     onSuccess: console.log,
@@ -20,9 +21,9 @@
     translation,
     onSubmit: request.run,
     onSubmitError: console.warn,
-    additionalPropertyKeyValidationError({ separators }) {
-      return `The content of these sequences ("${separators.join('", "')}") is prohibited`;
-    },
+    additionalPropertyKeyValidationError({ type, values }) {
+      return `The presence of these ${ERROR_TYPE_OBJECTS[type]} ("${values.join('", "')}") is prohibited`;
+    }
   });
   setFromContext(form.context);
 </script>

packages/sveltekit/src/routes/form2.svelte

@@ -1,13 +1,15 @@
 
 <script lang="ts">
-  import { Content, RawForm, setFromContext } from '@sjsf/form';
+  import { RawForm, setFromContext } from '@sjsf/form';
   import { createValidator2 } from '@sjsf/ajv8-validator';
   import { theme } from '@sjsf/form/basic-theme';
   import { translation } from '@sjsf/form/translations/en';
 
   import { createMeta, createSvelteKitForm, createSvelteKitRequest } from '$lib/client/index.js';
 
   import type { PageData, ActionData } from './$types.js';
+  
+    import { ERROR_TYPE_OBJECTS } from './model.js';
 
   const meta = createMeta<ActionData, PageData, 'form2'>('form2');
   const request = createSvelteKitRequest(meta, {
@@ -31,11 +33,11 @@
     translation,
     onSubmit: request.run,
     onSubmitError: console.warn,
-    additionalPropertyKeyValidationError({ separators }) {
-      return `The content of these sequences ("${separators.join('", "')}") is prohibited`;
+    additionalPropertyKeyValidationError({ type, values }) {
+      return `The presence of these ${ERROR_TYPE_OBJECTS[type]} ("${values.join('", "')}") is prohibited`;
     },
   });
   setFromContext(form.context);
 </script>
 
-<RawForm {form} />
+<RawForm {form} method="POST" action="?/second" />

packages/sveltekit/src/routes/model.ts

@@ -0,0 +1,6 @@
+import { AdditionalPropertyKeyValidationErrorType } from '$lib/client/index.js';
+
+export const ERROR_TYPE_OBJECTS: Record<AdditionalPropertyKeyValidationErrorType, string> = {
+  [AdditionalPropertyKeyValidationErrorType.ForbiddenSequence]: 'sequences',
+  [AdditionalPropertyKeyValidationErrorType.ForbiddenSuffix]: 'suffixes'
+};