feat: add transparent nested path autocomplete to via PathsOf<F>

Author: foxhound87

src/Form.ts

@@ -18,6 +18,7 @@ import {
   FormInterface,
   FieldsDefinitions,
   FormConfig,
+  PathsOf,
 } from "./models/FormInterface";
 import { FieldPropsEnum } from "./models/FieldProps";
 import { OptionsEnum } from "./models/OptionsModel";
@@ -184,21 +185,20 @@ export default class Form<F extends Record<string, any> = Record<string, any>> e
 
   /**
    * Select a field by key with type inference.
-   * Provides autocomplete for field keys when the form is typed with a generic `F`.
+   * Provides transparent autocomplete for both top-level keys (`keyof F`)
+   * AND nested paths (`PathsOf<F>`) without any type annotations needed.
    *
    * @example
-   * // Top-level keys get autocomplete from keyof F:
+   * // Top-level keys — autocomplete from keyof F:
    * form.$('username'); // returns Field<string>
    *
    * @example
-   * // For nested paths, use the `PathsOf` utility type:
-   * import { PathsOf } from 'mobx-react-form';
-   *
-   * function getField(form: Form<NestedClubFields>, path: PathsOf<NestedClubFields>) {
-   *   return form.$(path); // path autocompletes to "club" | "club.name" | "members[].firstname" | ...
-   * }
+   * // Nested paths — autocomplete from PathsOf<F>:
+   * form.$('club');                // "club"
+   * form.$('club.name');           // "club.name"  ← autocomplete after dot!
+   * form.$('members[].firstname'); // "members[].firstname"
    */
-  override $(key: keyof F): Field<F[keyof F]> {
+  override $(key: keyof F | PathsOf<F>): Field<F[keyof F]> {
     return super.$(key as string) as Field<F[keyof F]>;
   }
 

tests/fixtures/nested/form.m1.ts

@@ -23,11 +23,11 @@ const fields = {
 };
 
 const input = {
-  "club": (value) => (value === null ? "" : value),
+  club: (value) => (value === null ? "" : value),
   "memebers[].firstname": (value) => (value === null ? "" : value),
   "memebers[].yearOfBirth": (value) => (value === null ? "" : value),
   "memebers[].hobbies[]": (value) => (value === null ? "" : value),
-}
+};
 
 const labels = {
   club: "The Club",
@@ -47,7 +47,7 @@ const schema = (y) =>
         lastname: y.string().required(),
         yearOfBirth: y.number().required().positive().integer().nullable(),
         hobbies: y.array().of(y.string().required().nullable()),
-      })
+      }),
     ),
   });
 
@@ -64,5 +64,5 @@ const options: OptionsModel = {
 
 export default new Form(
   { fields, labels, input },
-  { plugins, options, name: "Nested-M1" }
+  { plugins, options, name: "Nested-M1" },
 );