[form] Migrate to custom deep equal functions

Author: x0k

.changeset/early-mails-itch.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Add `isSchemaValueDeepEqual` and `isSchemaDeepEqual` functions

packages/form/src/core/deep-equal.ts

@@ -0,0 +1,47 @@
+import { isObject } from "@/lib/object.js";
+
+import type { Schema, SchemaValue } from "./schema.js";
+
+export function isSchemaValueDeepEqual(
+  a: SchemaValue | undefined,
+  b: SchemaValue | undefined
+): boolean {
+  if (a === b) {
+    return true;
+  }
+  if (isObject(a) && isObject(b)) {
+    if (Array.isArray(a)) {
+      if (!Array.isArray(b)) {
+        return false;
+      }
+      const { length } = a;
+      if (length !== b.length) {
+        return false;
+      }
+      for (let i = length; i-- !== 0; ) {
+        if (!isSchemaValueDeepEqual(a[i], b[i])) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (Array.isArray(b)) {
+      return false;
+    }
+    const aKeys = Object.keys(a);
+    let key;
+    for (let i = aKeys.length; i-- !== 0; ) {
+      key = aKeys[i]!;
+      if (!isSchemaValueDeepEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+    return Object.keys(b).length === aKeys.length;
+  }
+  return a !== a && b !== b
+}
+
+export const isSchemaDeepEqual = isSchemaValueDeepEqual as (
+  a: Schema | undefined,
+  b: Schema | undefined
+) => boolean;

packages/form/src/core/index.ts

@@ -22,5 +22,6 @@ export * from "./merger.js";
 export * from "./default-merger.js";
 export * from "./schema-traverser.js";
 export * from "./schema-value-traverser.js";
-export * from './schema-transformer.js';
+export * from "./schema-transformer.js";
 export * from "./path.js";
+export * from "./deep-equal.js";

packages/form/src/core/path-schema.ts

@@ -2,8 +2,6 @@
 // Licensed under the Apache License, Version 2.0.
 // Modifications made by Roman Krasilnikov.
 
-import { deepEqual } from "@/lib/deep-equal.js";
-
 import { retrieveSchema2 } from "./resolve.js";
 import {
   ALL_OF_KEY,
@@ -22,6 +20,7 @@ import { isSchemaObjectValue } from "./value.js";
 import type { Merger2 } from './merger.js';
 import { defaultMerger } from './merger.js';
 import { getClosestMatchingOption2 } from './matching.js';
+import { isSchemaDeepEqual } from './deep-equal.js';
 
 export const SJSF_ADDITIONAL_PROPERTIES_FLAG = "__sjsf_additionalProperties";
 
@@ -88,7 +87,7 @@ function toPathSchemaInternal(
   if (REF_KEY in schema || DEPENDENCIES_KEY in schema || ALL_OF_KEY in schema) {
     const _schema = retrieveSchema2(validator, merger, schema, rootSchema, formData);
     const sameSchemaIndex = _recurseList.findIndex((item) =>
-      deepEqual(item, _schema)
+      isSchemaDeepEqual(item, _schema)
     );
     if (sameSchemaIndex === -1) {
       return toPathSchemaInternal(

packages/form/src/core/resolve.ts

@@ -2,7 +2,6 @@
 // Licensed under the Apache License, Version 2.0.
 // Modifications made by Roman Krasilnikov.
 
-import { deepEqual } from "@/lib/deep-equal.js";
 import { array } from "@/lib/array.js";
 
 import {
@@ -30,6 +29,7 @@ import { getDiscriminatorFieldFromSchema } from "./discriminator.js";
 import { getFirstMatchingOption } from "./matching.js";
 import { isSchemaObjectValue } from "./value.js";
 import { defaultMerger, type Merger2 } from "./merger.js";
+import { isSchemaDeepEqual } from './deep-equal.js';
 
 /**
  * @deprecated use `retrieveSchema2`
@@ -157,7 +157,7 @@ export function resolveReference2(
   formData?: SchemaValue
 ): Schema[] {
   const resolvedSchema = resolveAllReferences(schema, rootSchema, stack);
-  if (!deepEqual(schema, resolvedSchema)) {
+  if (!isSchemaDeepEqual(schema, resolvedSchema)) {
     return retrieveSchemaInternal(
       validator,
       merger,

packages/form/src/form/fields/multi-field.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { proxy } from "@/lib/svelte.svelte";
-  import { deepEqual } from '@/lib/deep-equal.js'
   import {
     getDiscriminatorFieldFromSchema,
+    isSchemaValueDeepEqual,
     mergeSchemas,
     type EnumOption,
     type SchemaValue,
@@ -53,7 +53,7 @@
       retrievedOptions;
       return -1;
     }
-    if (currentSelected !== undefined && deepEqual(lastValue, value)) {
+    if (currentSelected !== undefined && isSchemaValueDeepEqual(lastValue, value)) {
       return currentSelected
     }
     lastValue = $state.snapshot(value)

packages/form/src/form/fields/object/object-field.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { untrack } from "svelte";
 
-  import { deepEqual } from "@/lib/deep-equal.js";
   import {
     getDefaultValueForType,
     getSimpleSchemaType,
     isAdditionalProperty,
+    isSchemaDeepEqual,
     isSchemaExpandable,
     isSchemaObjectValue,
     orderProperties,
@@ -94,7 +94,7 @@
 
   let lastSchemaProperties: Schema["properties"] = undefined;
   const schemaProperties = $derived.by(() => {
-    if (!deepEqual(lastSchemaProperties, retrievedSchema.properties)) {
+    if (!isSchemaDeepEqual(lastSchemaProperties, retrievedSchema.properties)) {
       lastSchemaProperties = $state.snapshot(retrievedSchema.properties);
     }
     return lastSchemaProperties;

packages/form/src/form/id-schema.ts

@@ -2,8 +2,6 @@
 // Licensed under the Apache License, Version 2.0.
 // Modifications made by Roman Krasilnikov.
 
-import { deepEqual } from "@/lib/deep-equal.js";
-
 import {
   ALL_OF_KEY,
   defaultMerger,
@@ -12,6 +10,7 @@ import {
   ID_KEY,
   isNormalArrayItems,
   isSchema,
+  isSchemaDeepEqual,
   isSchemaObjectValue,
   ITEMS_KEY,
   PROPERTIES_KEY,
@@ -93,7 +92,7 @@ export function toIdSchema2(
       formData
     );
     const sameSchemaIndex = _recurseList.findIndex((item) =>
-      deepEqual(item, _schema)
+      isSchemaDeepEqual(item, _schema)
     );
     if (sameSchemaIndex === -1) {
       return toIdSchema2(

packages/form/src/form/options.svelte.ts

@@ -1,14 +1,20 @@
-import { deepEqual } from "@/lib/deep-equal.js";
-import { isObject } from '@/lib/object.js';
+import { isObject } from "@/lib/object.js";
 
-import type { EnumOption, SchemaArrayValue, SchemaValue } from '@/core/index.js';
+import {
+  isSchemaValueDeepEqual,
+  type EnumOption,
+  type SchemaArrayValue,
+  type SchemaValue,
+} from "@/core/index.js";
 
 export interface OptionsMapper<V> {
   fromValue: (value: SchemaValue | undefined) => V;
   toValue: (value: V) => SchemaValue | undefined;
 }
 
-export function indexMapper(options: EnumOption<SchemaValue>[]): OptionsMapper<number> {
+export function indexMapper(
+  options: EnumOption<SchemaValue>[]
+): OptionsMapper<number> {
   const map = new Map(options.map((option, index) => [option.value, index]));
   return {
     fromValue(value: SchemaValue | undefined) {
@@ -22,15 +28,19 @@ export function indexMapper(options: EnumOption<SchemaValue>[]): OptionsMapper<n
       if (!isObject(value)) {
         return options.findIndex((option) => option.value === value);
       }
-      return options.findIndex((option) => deepEqual(option.value, value));
+      return options.findIndex((option) =>
+        isSchemaValueDeepEqual(option.value, value)
+      );
     },
     toValue(index: number) {
       return options[index]?.value;
     },
   };
 }
 
-export function stringIndexMapper(options: EnumOption<SchemaValue>[]): OptionsMapper<string> {
+export function stringIndexMapper(
+  options: EnumOption<SchemaValue>[]
+): OptionsMapper<string> {
   const { fromValue, toValue } = indexMapper(options);
   return {
     fromValue(value) {
@@ -47,9 +57,9 @@ export function singleOption<V>({
   value,
   update,
 }: {
-  mapper: () => OptionsMapper<V>,
-  value: () => SchemaValue | undefined,
-  update: (value: SchemaValue | undefined) => void,
+  mapper: () => OptionsMapper<V>;
+  value: () => SchemaValue | undefined;
+  update: (value: SchemaValue | undefined) => void;
 }) {
   const { fromValue, toValue } = $derived(mapper());
   return {
@@ -58,18 +68,18 @@ export function singleOption<V>({
     },
     set value(v) {
       update(toValue(v));
-    }
-  }
+    },
+  };
 }
 
 export function multipleOptions<V>({
   mapper,
   value,
   update,
 }: {
-  mapper: () => OptionsMapper<V>,
-  value: () => SchemaArrayValue | undefined,
-  update: (value: SchemaArrayValue) => void,
+  mapper: () => OptionsMapper<V>;
+  value: () => SchemaArrayValue | undefined;
+  update: (value: SchemaArrayValue) => void;
 }) {
   const { fromValue, toValue } = $derived(mapper());
   return {
@@ -78,6 +88,6 @@ export function multipleOptions<V>({
     },
     set value(v) {
       update(v.map(toValue));
-    }
-  }
+    },
+  };
 }

packages/form/src/lib/deep-equal.ts

@@ -1 +1,6 @@
-export { deepEqual } from 'fast-equals'
+import { deepEqual } from "fast-equals";
+
+export {
+  /** @deprecated use `isSchemaValueDeepEqual` or `isSchemaDeepEqual` from `form/core` */
+  deepEqual,
+};