Allow passing wider type to more narrow type

[aspirisen]

In current implementation it is not possible to pass lens with wide type to lens with narrow type.

For example this code will not work:

function Form() {
  const { control } = useForm<{ child: 'a' | 'b' | 'c' }>();
  const lens = useLens({ control });

  // Will be a type error, however it should be fine
  return <ChildForm lens={lens} />;
}

function ChildForm({ lens }: { lens: Lens<{ child: 'a' | 'b' }> }) {
  return null;
}

Because of that it is not possible to pass a union type:

function Form() {
  const { control } = useForm<{ type: 'a'; a: string } | { type: 'b'; b: string }>();
  const lens = useLens({ control });

  // Has a type error
  return <ChildForm lens={lens} />;
}

function ChildForm({ lens }: { lens: Lens<{ type: 'a'; a: string }> }) {
  return null;
}

And the same with optional fields:

function Form() {
  const { control } = useForm<{ child?: string }>();
  const lens = useLens({ control });

  // Still an error, but should work
  return <ChildForm lens={lens} />;
}

function ChildForm({ lens }: { lens: Lens<{ child: string }> }) {
  return null;
}

[SeokminHong]

I came up with an idea for an interface similar to ts-pattern.

https://stackblitz.com/edit/stackblitz-starters-gtwawew2?file=src%2FApp.tsx

2025-08-07.4.40.40.mov

interface StringValue {
  type: 'string';
  stringValue: string;
}
interface BooleanValue {
  type: 'boolean';
  booleanValue: boolean;
}
interface EnumValue {
  type: 'enum';
  enumValue: 'a' | 'b' | 'c';
}
type Value = StringValue | BooleanValue | EnumValue;


const unionPrism = usePrism(
  lens.focus('unionValue'),
  // Predicates are passed to `useWatch.compute` field.
  (value): value is EnumValue => value.type === 'enum',
  (value): value is BooleanValue => value.type === 'boolean',
  (value): value is StringValue => value.type === 'string'
);

unionPrism
  .match((l) => (
    <select
      {...l
        .focus('enumValue')
        .interop((ctrl, name) => ctrl.register(name))}
    >
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
    </select>
  ))
  .match((l) => <Checkbox lens={l.focus('booleanValue')} />)
  .match((l) => (
    <input
      type="text"
      {...l
        .focus('stringValue')
        .interop((ctrl, name) => ctrl.register(name))}
      placeholder="Unknown value"
    />
  ))
  .exhaustive()

It leverages the compute API from useWatch to subscribe only to a smaller scope of form changes, reducing unnecessary re-renders. (maybe?)

In this example, the unionValue.type field should be controlled using useController or setValue. However, this pattern becomes useful when the initial type is populated from the server and won't be changed on client.

[aspirisen]

@SeokminHong the added methods are just a workaround, it should be a natural behavior of lenses where you can pass wider type to narrow type

Your Idea of pattern matching looks interesting, however I have two concerns:

• according to the provided example lens should get values from react-hook-form, this is no go https://github.com/react-hook-form/lenses?tab=readme-ov-file#do-not-operate-values-directly
• pattern matching is super complex task and probably goes beyond the purpose of lenses, I am not sure that it would be possible to build well-typed pattern matching solution like ts-pattern

You can use watch from react hook form and then unleash the full power of the dedicated pattern matching library

[SeokminHong]

@SeokminHong the added methods are just a workaround, it should be a natural behavior of lenses where you can pass wider type to narrow type

Your Idea of pattern matching looks interesting, however I have two concerns:

* according to the provided example lens should get values from react-hook-form, this is no go https://github.com/react-hook-form/lenses?tab=readme-ov-file#do-not-operate-values-directly

* pattern matching is super complex task and probably goes beyond the purpose of lenses, I am not sure that it would be possible to build well-typed pattern matching solution like `ts-pattern`

You can use watch from react hook form and then unleash the full power of the dedicated pattern matching library

I agree with your first point. That’s why I’m also considering making this as a third-party library compatible with lenses. Alternatively, instead of calling useWatch directly inside something like a usePrism hook, it could be exposed as useWatch(prism.interop()), so that the lenses package itself would not operate on values directly.

Your second concern is also valid. I understand that ts-pattern was created after a lot of careful consideration, and it would indeed be difficult for the lenses package to handle the full complexity of pattern matching. However, I think that even supporting a limited level of matching could still provide a type-safe and high-quality lens interface.

[aspirisen]

I do not see an importance of creating pattern matching specially for lenses, you can use useWatch on a value and then use ts-pattern as is. What would be a benefit of creating pattern matching for lenses?

[SeokminHong]

I think it would be nice if type narrowing inside a Lens could be achieved in a safe way, for example with a predicate. Pattern matching was just one possible idea, and I believe there could be other approaches as well.

The advantage of this idea is that within a match block it becomes possible to work with a narrowed Lens, which means both the benefits of Lenses and safe type narrowing can be combined.