Fix caching using when focusing the same field name after reflect (#29)

Author: aspirisen

src/LensCore.ts

@@ -1,6 +1,6 @@
 import { type Control, type FieldValues, get, set } from 'react-hook-form';
 
-import type { LensesStorage } from './LensesStorage';
+import type { LensesStorage, LensesStorageComplexKey } from './LensesStorage';
 import type { Lens } from './types';
 
 export interface LensCoreInteropBinding<T extends FieldValues> {
@@ -18,9 +18,10 @@ export class LensCore<T extends FieldValues> {
   public path: string;
   public cache?: LensesStorage<T> | undefined;
 
-  private isArrayItemReflection?: boolean;
-  private override?: Record<string, LensCore<T>> | [Record<string, LensCore<T>>];
-  private interopCache?: LensCoreInteropBinding<T>;
+  protected isArrayItemReflection?: boolean;
+  protected override?: Record<string, LensCore<T>> | [Record<string, LensCore<T>>];
+  protected interopCache?: LensCoreInteropBinding<T>;
+  protected reflectedKey?: LensesStorageComplexKey;
 
   constructor(control: Control<T>, path: string, cache?: LensesStorage<T> | undefined) {
     this.control = control;
@@ -39,7 +40,7 @@ export class LensCore<T extends FieldValues> {
     const propString = prop.toString();
     const nestedPath = this.path ? `${this.path}.${propString}` : propString;
 
-    const fromCache = this.cache?.get(nestedPath);
+    const fromCache = this.cache?.get(nestedPath, this.reflectedKey);
 
     if (fromCache) {
       return fromCache;
@@ -112,11 +113,13 @@ export class LensCore<T extends FieldValues> {
       const result = new LensCore(this.control, this.path, this.cache);
       template.path = '';
       result.override = getter(dictionary, template);
+      result.reflectedKey = getter;
       this.cache?.set(result, this.path, getter);
       return result;
     } else {
       template.override = override;
       template.path = this.path;
+      template.reflectedKey = getter;
       this.cache?.set(template, this.path, getter);
       return template;
     }
@@ -147,7 +150,7 @@ export class LensCore<T extends FieldValues> {
     return this.interopCache;
   }
 
-  private getTransformer(value: unknown): unknown {
+  protected getTransformer(value: unknown): unknown {
     const [template] = Array.isArray(this.override) ? this.override : [this.override];
 
     if (!value || !template) {
@@ -170,7 +173,7 @@ export class LensCore<T extends FieldValues> {
     return newValue;
   }
 
-  private setTransformer(value: unknown): unknown {
+  protected setTransformer(value: unknown): unknown {
     const [template] = Array.isArray(this.override) ? this.override : [this.override];
 
     if (!value || !template) {

src/LensesStorage.ts

@@ -15,7 +15,7 @@ export type LensCache<T extends FieldValues> = Map<string, LensesStorageValue<T>
  * Cache storage for lenses.
  */
 export class LensesStorage<T extends FieldValues> {
-  private cache: LensCache<T>;
+  protected cache: LensCache<T>;
 
   constructor(control: Control<T>) {
     this.cache = new Map();

src/types/Lens.ts

@@ -5,6 +5,24 @@ import type { HookFormControlShim } from './Interop';
 import type { ObjectLens } from './ObjectLens';
 import type { PrimitiveLens } from './PrimitiveLens';
 
+export interface LensBase<T> {
+  assert: T;
+}
+
+/**
+ * This is a type that allows you to hold the type of a form element.
+ *
+ * ```ts
+ * type LensWithArray = Lens<string[]>;
+ * type LensWithObject = Lens<{ name: string; age: number }>;
+ * type LensWithPrimitive = Lens<string>;
+ * ```
+ *
+ * In runtime it has `control` and `name` to use latter in react-hook-form.
+ * Each time you do `lens.focus('propPath')` it creates a lens that keeps nesting of paths.
+ */
+export type Lens<T> = LensBase<Exclude<T, null | undefined>> & LensSelector<T>;
+
 /**
  * Why not use `T extends any[] ...`, instead of `[T] extends [any[]]`?:
  * Because of @see {@link https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#distributive-conditional-types}
@@ -23,21 +41,6 @@ export type LensSelector<T> = [T] extends [any[]]
         ? never
         : PrimitiveLens<T>;
 
-/**
- * This is a type that allows you to hold the type of a form element.
- *
- * ```ts
- * type LensWithArray = Lens<string[]>;
- * type LensWithObject = Lens<{ name: string; age: number }>;
- * type LensWithPrimitive = Lens<string>;
- * ```
- *
- * In runtime it has `control` and `name` to use latter in react-hook-form.
- * Each time you do `lens.focus('propPath')` it creates a lens that keeps nesting of paths.
- */
-
-export type Lens<T> = { assert: boolean } & LensSelector<T>;
-
 export type LensesDictionary<T> = {
   [P in keyof T]: Lens<T[P]>;
 };

tests/cache.test.ts

@@ -44,3 +44,22 @@ test('lens cannot be cache by function without useCallback', () => {
 
   expect(a).not.toBe(b);
 });
+
+test('interop return non cached name when override', () => {
+  const { result } = renderHook(() => {
+    const form = useForm<{ a: string; b: number }>();
+    const lens = useLens({ control: form.control });
+
+    return { lens };
+  });
+
+  const aLens = result.current.lens.focus('a');
+  const bLens = result.current.lens.focus('b');
+
+  expect(aLens.interop().name).toEqual('a');
+  expect(bLens.interop().name).toEqual('b');
+
+  const reflect = result.current.lens.reflect((l) => ({ a: l.b }));
+
+  expect(reflect.focus('a').interop().name).toEqual('b');
+});