Rename ArrayForm/ChildForm occurences with ArrayField/ObjectField

Author: CodeStix

docs/advanced/Array-fields.md

@@ -6,18 +6,18 @@ title: Array fields
 
 # Array fields
 
-To create dynamic array fields, you should use the [`ArrayForm`](/typed-react-form/reference/ArrayForm) component or [`useArrayForm`](/typed-react-form/useArrayForm) hook. These are wrappers around [`useObjectField`](/typed-react-form/reference/useObjectField) which provide useful functions and optimizations for arrays.
+To create dynamic array fields, you should use the [`ArrayField`](/typed-react-form/reference/ArrayField) component or [`useArrayField`](/typed-react-form/useArrayField) hook. These are wrappers around [`useObjectField`](/typed-react-form/reference/useObjectField) which provide useful functions and optimizations for arrays.
 
--   [ArrayForm](/typed-react-form/reference/ArrayForm)
--   [useArrayForm](/typed-react-form/reference/useArrayForm)
+-   [ArrayField](/typed-react-form/reference/ArrayField)
+-   [useArrayField](/typed-react-form/reference/useArrayField)
 
 If you have an array field with a constant size, you should probably just use [`ObjectField`](/typed-react-form/reference/ObjectField). (See bottom for examples)
 
 **Note on keys**: you **should** use the index as key, this seems against nature at first, but remember that this library does not rerender each time something in the array changes. When 2 array items get swapped, it does not rerender either, only when the array size changes, it rerenders. For this reason, it is not a problem (and it's recommended) to use index as the key. (This can change in the future)
 
 ## Dynamic array examples
 
-✔️ **Dynamic string array field using `ArrayForm`**
+✔️ **Dynamic string array field using `ArrayField`**
 
 ```tsx
 function NotesList() {
@@ -31,7 +31,7 @@ function NotesList() {
                 console.log("submit", form.values);
             }}
         >
-            <ArrayForm
+            <ArrayField
                 form={form}
                 name="notes"
                 render={({ form, values, append, remove }) => (
@@ -57,7 +57,7 @@ function NotesList() {
 }
 ```
 
-✔️ **Dynamic object array field using `ArrayForm`**
+✔️ **Dynamic object array field using `ArrayField`**
 
 Remember: this is all type checked!
 
@@ -80,7 +80,7 @@ function ShoppingListForm() {
 
             {/* Create an array child form for the 'items' field */}
             <h2>Items</h2>
-            <ArrayForm
+            <ArrayField
                 form={form}
                 name="items"
                 render={({ form, values, append, remove }) => (
@@ -119,7 +119,7 @@ function ShoppingListForm() {
 }
 ```
 
-✔️ **Dynamic object array field with seperate component for each child form and using `useArrayForm`**
+✔️ **Dynamic object array field with seperate component for each child form and using `useArrayField`**
 
 ```tsx
 interface ShoppingListItem {
@@ -156,7 +156,7 @@ function ShoppingListForm() {
 }
 
 function ShoppingListItemsForm(props: { parent: FormState<ShoppingList> }) {
-    const { form, values, append, remove } = useArrayForm(props.parent, "items");
+    const { form, values, append, remove } = useArrayField(props.parent, "items");
     // This component only rerenders when the whole array changes.
     return (
         <>

docs/advanced/Object-fields.md

@@ -6,16 +6,16 @@ title: Object fields
 
 # Object fields
 
-To be able to create inputs for fields in objects, child form are used. You can create child forms using the `ChildForm` component or `useChildForm` hook.
+To be able to create inputs for fields in objects, child form are used. You can create child forms using the `ObjectField` component or `useObjectField` hook.
 
--   [useChildForm](/typed-react-form/reference/useChildForm)
--   [ChildForm](/typed-react-form/reference/ChildForm)
+-   [useObjectField](/typed-react-form/reference/useObjectField)
+-   [ObjectField](/typed-react-form/reference/ObjectField)
 
 This design choice makes complete type checking possible.
 
 ## Examples
 
-✔️ **Object field using `ChildForm`**
+✔️ **Object field using `ObjectField`**
 
 ```tsx
 function PersonForm() {
@@ -38,7 +38,7 @@ function PersonForm() {
                 name="info"
                 render={(form) => (
                     <>
-                        {/* Inputs on child form, use new form provided by the render function of ChildForm */}
+                        {/* Inputs on child form, use new form provided by the render function of ObjectField */}
                         <Field form={form} type="text" name="email" />
                         <Field form={form} type="number" name="age" />
                     </>
@@ -50,14 +50,14 @@ function PersonForm() {
 }
 ```
 
-**✔️ `useChildForm` without seperate component**
+**✔️ `useObjectField` without seperate component**
 
 ```tsx
 function PersonForm() {
     // Create root form
     const form = useForm({ name: "John", info: { email: "john@example.com", age: 20 } });
     // Create child form
-    const personInfoForm = useChildForm(form, "info");
+    const personInfoForm = useObjectField(form, "info");
     return (
         <form
             onSubmit={(ev) => {
@@ -76,7 +76,7 @@ function PersonForm() {
 }
 ```
 
-**✔️ `useChildForm` with seperate component**
+**✔️ `useObjectField` with seperate component**
 
 ```tsx
 interface Person {
@@ -112,7 +112,7 @@ function PersonForm() {
 
 function PersonInfoForm(props: { parent: FormState<Person> }) {
     // Create a new child form from the info field
-    const form = useChildForm(props.parent, "info");
+    const form = useObjectField(props.parent, "info");
     return (
         <>
             <Field form={form} type="text" name="email" />
@@ -124,7 +124,7 @@ function PersonInfoForm(props: { parent: FormState<Person> }) {
 
 **✔️ You can keep nesting children in children in children ....**
 
-This is also possible with `ChildForm`.
+This is also possible with `ObjectField`.
 
 ```tsx
 function PersonForm() {
@@ -142,11 +142,11 @@ function PersonForm() {
         }
     });
     // Create child form
-    const personInfoForm = useChildForm(form, "info");
+    const personInfoForm = useObjectField(form, "info");
     // Create child form on child form
-    const personMoreInfoForm = useChildForm(personInfoForm, "moreInfo");
+    const personMoreInfoForm = useObjectField(personInfoForm, "moreInfo");
     // Create child form on child form
-    const personMoreMoreInfoForm = useChildForm(personMoreInfoForm, "moreMoreInfo"); // This is all type-checked!!
+    const personMoreMoreInfoForm = useObjectField(personMoreInfoForm, "moreMoreInfo"); // This is all type-checked!!
     return (
         <form
             onSubmit={(ev) => {

docs/advanced/Toggling-a-field.md

@@ -55,7 +55,7 @@ function ToggleForm() {
 
             {/* Use the setNullOnUncheck prop. The value prop contains the value that is set when the box gets checked again, you can omit it to use the default value */}
             <Field form={form} name="location" type="checkbox" setNullOnUncheck />
-            {/* ChildForm hides its contents when null/undefined by default */}
+            {/* ObjectField hides its contents when null/undefined */}
             <ObjectField
                 form={form}
                 name="location"

docs/reference/ArrayForm.md

@@ -1,12 +1,12 @@
 ---
 layout: default
 parent: Reference
-title: ArrayForm component
+title: ArrayField component
 ---
 
-# `<ArrayForm />`
+# `<ArrayField />`
 
-A component that provides array manipulation functions and optimizations. This is a wrapper around [`useArrayForm`](/typed-react-form/reference/useArrayForm). The only difference is that this component does not render its content when the array is null/undefined ([is togglable](/typed-react-form/advanced/Toggling-a-field)).
+A component that provides array manipulation functions and optimizations. This is a wrapper around [`useArrayField`](/typed-react-form/reference/useArrayField). The only difference is that this component does not render its content when the array is null/undefined ([is togglable](/typed-react-form/advanced/Toggling-a-field)).
 
 ## Props
 

docs/reference/ChildForm.md

@@ -1,12 +1,12 @@
 ---
 layout: default
 parent: Reference
-title: ChildForm component
+title: ObjectField component
 ---
 
 # `<ObjectField />`
 
-Use the `ChildForm` component if you want to make fields inside an object field available to inputs. This is a wrapper around [`useChildForm`](/typed-react-form/reference/useChildForm).
+Use the `ObjectField` component if you want to make fields inside an object field available to inputs. This is a wrapper around [`useObjectField`](/typed-react-form/reference/useObjectField).
 
 ## Props
 
@@ -24,6 +24,6 @@ A function that renders, and creates inputs for the child form, which is passed
 
 ## Advanced
 
-You can also use this component on array fields (index as name), but [`ArrayForm`](/typed-react-form/reference/ArrayForm) or [`useArrayForm`](/typed-react-form/reference/useArrayForm) is preferred when you want to create [dynamic array fields](/typed-react-form/advanced/Array-fields). It provides useful array manipulation functions and optimizations.
+You can also use this component on array fields (index as name), but [`ArrayField`](/typed-react-form/reference/ArrayField) or [`useArrayField`](/typed-react-form/reference/useArrayField) is preferred when you want to create [dynamic array fields](/typed-react-form/advanced/Array-fields). It provides useful array manipulation functions and optimizations.
 
 This component does not render its content when the form is empty (happens when its parent field has been assigned `null`, `undefined` or `{}`).

docs/reference/FormState.md

@@ -6,7 +6,7 @@ title: FormState class
 
 # `FormState`
 
-The `FormState` class contains all the state of a form. This includes values, default values, errors, dirty flags and form state. You should always use the `useForm` or `useChildForm` hooks to create an instance of this class.
+The `FormState` class contains all the state of a form. This includes values, default values, errors, dirty flags and form state. You should always use the `useForm` or `useObjectField` hooks to create an instance of this class.
 
 This class provides a lot of useful functions to manipulate form values and state.
 

docs/reference/useArrayForm.md

@@ -1,18 +1,18 @@
 ---
 layout: default
 parent: Reference
-title: useArrayForm hook
+title: useArrayField hook
 ---
 
-# `useArrayForm`
+# `useArrayField`
 
-A hook that provides array manipulation functions and optimizations for an array field. This is the array-optimized version of [`useChildform`](/typed-react-form/reference/useChildForm). This hook only causes a rerender when the array size changes (this is why `values.map((e) => ...)` works when adding/removing a value).
+A hook that provides array manipulation functions and optimizations for an array field. This is the array-optimized version of [`useObjectField`](/typed-react-form/reference/useObjectField). This hook only causes a rerender when the array size changes (this is why `values.map((e) => ...)` works when adding/removing a value).
 
 This hook must be called, unconditionally, at the start of your component, just like the normal React hooks.
 
-**If your array field can/will be null or undefined**, you should use the [`ArrayForm`](/typed-react-form/reference/ArrayForm) component instead, which does not render when the array is null/undefined.
+**If your array field can/will be null or undefined**, you should use the [`ArrayField`](/typed-react-form/reference/ArrayField) component instead, which does not render when the array is null/undefined.
 
-`useArrayForm(parentForm, nameOfArrayField)`
+`useArrayField(parentForm, nameOfArrayField)`
 
 ## Parameters
 

docs/reference/useChildForm.md

@@ -1,18 +1,18 @@
 ---
 layout: default
 parent: Reference
-title: useChildForm hook
+title: useObjectField hook
 ---
 
-# `useChildForm`
+# `useObjectField`
 
 Creates a form based on another form's field. Use this with nested objects. This hook does not cause a rerender.
 
 This hook must be called, unconditionally, at the start of your component, just like the normal React hooks.
 
-**If your field can/will be null or undefined**, you should use the [`ChildForm`](/typed-react-form/reference/ChildForm) component instead, which does not render when the field is null/undefined.
+**If your field can/will be null or undefined**, you should use the [`ObjectField`](/typed-react-form/reference/ObjectField) component instead, which does not render when the field is null/undefined.
 
-`useChildForm(parentForm, name)`
+`useObjectField(parentForm, name)`
 
 ## Parameters
 

src/Components.tsx

@@ -3,7 +3,7 @@ import { ChildFormState, DefaultError, DefaultState, DirtyMap, ErrorMap, FieldsO
 import { useArrayField, useListener, useAnyListener, useObjectField, useTruthyListener } from "./hooks";
 
 /**
- * Wrapper around useArrayForm (which is a wrapper around useObjectField).
+ * Wrapper around useArrayField (which is a wrapper around useObjectField).
  * Exports useful functions to manipulate arrays.
  * This hook does cause a rerender, but only if the whole array becomes null/undefined.
  * @param parent The parent form.
@@ -78,7 +78,7 @@ export function AnyListener<T extends object, State = DefaultState, Error extend
 
 /**
  * Wrapper around useObjectField
- * Creates a child form for another root or child form. You must use this for object and array (see useArrayForm) fields.
+ * Creates a child form for another root or child form. You must use this for object and array (see useArrayField) fields.
  * This hook does cause a rerender, but only if the object field becomes null/undefined.
  * @param parentForm The parent form.
  * @param name The parent's field to create a child form for.
@@ -89,7 +89,7 @@ export function ObjectField<
     ParentState = DefaultState,
     ParentError extends string = DefaultError
 >(props: {
-    form: FormState<T, ParentState, ParentError>; // Use the parent prop instead of the form prop when using ChildForm.
+    form: FormState<T, ParentState, ParentError>; // Use the parent prop instead of the form prop when using ObjectField.
     name: K;
     render?: (props: ChildFormState<T, K, ParentState, ParentError>) => React.ReactNode;
 }) {

src/Field.tsx

@@ -105,7 +105,7 @@ export type SerializeProps<V = any> = {
     value?: V extends any[] ? V[number] : V;
 };
 
-function defaultSerializer<T>(currentValue: T, props: SerializeProps<T>): boolean | string {
+export function defaultSerializer<T>(currentValue: T, props: SerializeProps<T>): boolean | string {
     switch (props.type) {
         case "datetime-local":
         case "date": {
@@ -141,7 +141,7 @@ function defaultSerializer<T>(currentValue: T, props: SerializeProps<T>): boolea
     }
 }
 
-function defaultDeserializer<T>(inputValue: string | boolean, currentValue: T, props: SerializeProps<T>) {
+export function defaultDeserializer<T>(inputValue: string | boolean, currentValue: T, props: SerializeProps<T>) {
     switch (props.type) {
         case "number": {
             return parseFloat(inputValue as any);