[form] Add additional property key validator

Author: x0k

.changeset/old-llamas-cry.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Add additional property key validator

packages/form/src/form/context/context.ts

@@ -14,6 +14,7 @@ import type { Errors } from "../errors.js";
 import type { FormValidator } from "../validator.js";
 import type { Icons } from "../icons.js";
 import type { FormMerger } from "../merger.js";
+import type { Config } from '../config.js';
 
 export type IconOrTranslationData = {
   [L in Label]: [L, ...Labels[L]];
@@ -42,6 +43,7 @@ export interface FormContext {
   IconOrTranslation: Component<{ data: IconOrTranslationData }>;
   /** @deprecated use `IconOrTranslation` instead */
   iconOrTranslation: Snippet<[IconOrTranslationData]>;
+  validateAdditionalPropertyKey(config: Config, key: string): boolean;
 }
 
 const FORM_CONTEXT = Symbol("form-context");

packages/form/src/form/fields/object/object-key-input.svelte

@@ -61,6 +61,9 @@
           return;
         }
         const newKey = generateNewKey(key.value, objCtx.newKeySeparator, obj);
+        if (!ctx.validateAdditionalPropertyKey(config, newKey)) {
+          return;
+        }
         obj[newKey] = obj[property];
         delete obj[property];
       },

packages/form/src/form/form-base.svelte

@@ -168,6 +168,9 @@
     get inputsValidationMode() {
       return inputsValidationMode
     },
+    validateAdditionalPropertyKey() {
+      return true
+    },
     get isChanged() {
       return isChanged
     },

packages/form/src/form/use-form.svelte.ts

@@ -5,7 +5,13 @@ import { SvelteMap } from "svelte/reactivity";
 import type { SchedulerYield } from "@/lib/scheduler.js";
 import type { Schema, SchemaValue } from "@/core/schema.js";
 
-import { type FormValidator, type ValidationError } from "./validator.js";
+import {
+  ADDITIONAL_PROPERTY_KEY_ERROR,
+  type AdditionalPropertyKeyError,
+  type AdditionalPropertyKeyValidator,
+  type FormValidator,
+  type ValidationError,
+} from "./validator.js";
 import type { Components } from "./component.js";
 import type { Widgets } from "./widgets.js";
 import type { Translation } from "./translation.js";
@@ -30,7 +36,11 @@ import {
   pathToId,
 } from "./id-schema.js";
 import IconOrTranslation from "./icon-or-translation.svelte";
+import type { Config } from "./config.js";
 
+/**
+ * @deprecated use `UseFormOptions2`
+ */
 export interface UseFormOptions<T, E> {
   validator: FormValidator<E>;
   schema: Schema;
@@ -98,6 +108,10 @@ export interface UseFormOptions<T, E> {
   schedulerYield?: SchedulerYield;
 }
 
+export interface UseFormOptions2<T, E> extends UseFormOptions<T, E> {
+  additionalPropertyKeyValidator?: AdditionalPropertyKeyValidator;
+}
+
 export interface FormState<T, E> {
   value: T | undefined;
   formValue: SchemaValue | undefined;
@@ -119,9 +133,31 @@ export interface FormAPI<T, E> extends FormState<T, E> {
 
 type Value = SchemaValue | undefined;
 
+/**
+ * @deprecated use `createForm2`
+ */
 export function createForm<T, E>(
   options: UseFormOptions<T, E>
 ): [FormContext, FormAPI<T, E>] {
+  return createForm2(options);
+}
+
+type FormValueFromOptions<O extends UseFormOptions2<any, any>> =
+  O extends UseFormOptions2<infer T, any> ? T : never;
+
+type ValidatorErrorFromOptions<O extends UseFormOptions2<any, any>> =
+  O extends UseFormOptions2<any, infer E> ? E : never;
+
+export function createForm2<
+  const O extends UseFormOptions2<any, any>,
+  T = FormValueFromOptions<O>,
+  VE = ValidatorErrorFromOptions<O>,
+  E = O extends {
+    additionalPropertyKeyValidator: AdditionalPropertyKeyValidator;
+  }
+    ? VE | AdditionalPropertyKeyError
+    : VE,
+>(options: O): [FormContext, FormAPI<T, E>] {
   const merger = $derived(
     options.merger ?? new DefaultFormMerger(options.validator, options.schema)
   );
@@ -213,12 +249,34 @@ export function createForm<T, E>(
             }, 0);
           })
   );
+  const additionalPropertyKeyValidator = $derived.by(() => {
+    const validator = options.additionalPropertyKeyValidator;
+    return validator
+      ? (config: Config, key: string) => {
+          const instanceId = config.idSchema.$id;
+          const messages = validator.validateAdditionalPropertyKey(key);
+          errors.set(
+            instanceId,
+            messages.map((message) => ({
+              instanceId,
+              propertyTitle: config.title,
+              message,
+              error: ADDITIONAL_PROPERTY_KEY_ERROR as E,
+            }))
+          );
+          return messages.length === 0;
+        }
+      : () => true;
+  });
 
   return [
     {
       get inputsValidationMode() {
         return inputsValidationMode;
       },
+      get validateAdditionalPropertyKey() {
+        return additionalPropertyKeyValidator;
+      },
       get isSubmitted() {
         return isSubmitted;
       },
@@ -358,11 +416,19 @@ export function createForm<T, E>(
   ];
 }
 
+/**
+ * Create a FormAPI and set form context
+ * @deprecated use `useForm2`
+ */
+export function useForm<T, E>(options: UseFormOptions<T, E>): FormAPI<T, E> {
+  return useForm2(options);
+}
+
 /**
  * Create a FormAPI and set form context
  */
-export function useForm<T, E>(options: UseFormOptions<T, E>) {
-  const [ctx, api] = createForm(options);
+export function useForm2<O extends UseFormOptions2<any, any>>(options: O) {
+  const [ctx, api] = createForm2(options);
   setFromContext(ctx);
   return api;
 }

packages/form/src/form/validator.ts

@@ -29,3 +29,15 @@ export interface FormValidator<E = unknown> extends Validator {
     fieldData: SchemaValue | undefined
   ): ValidationError<E>[];
 }
+
+export const ADDITIONAL_PROPERTY_KEY_ERROR = Symbol(
+  "additional-property-key-error"
+);
+export type AdditionalPropertyKeyError = typeof ADDITIONAL_PROPERTY_KEY_ERROR;
+
+export interface AdditionalPropertyKeyValidator {
+  /**
+   * Additional property key validation
+   */
+  validateAdditionalPropertyKey: (key: string) => string[];
+}