Improve types for optional props and params

packages/qwik/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the library will be documented in this file.
 
+## vX.X.X (Month DD, YYYY)
+
+- Improve types for optional properties and parameters
+
 ## v0.4.0 (March 25, 2023)
 
 - Extend parameter of `zodField$` and `zodForm$` to allow passing a function (issue #38)

packages/qwik/src/actions/formAction$.ts

@@ -10,6 +10,7 @@ import type {
   FormDataInfo,
   FormErrors,
   FormResponse,
+  Maybe,
   MaybePromise,
   PartialValues,
   ValidateForm,
@@ -18,7 +19,7 @@ import { getFormDataValues } from '../utils';
 
 export type FormActionResult<TFieldValues extends FieldValues> =
   FormResponse & {
-    errors?: FormErrors<TFieldValues>;
+    errors?: Maybe<FormErrors<TFieldValues>>;
   };
 
 type FormActionFunc<TFieldValues extends FieldValues> = (
@@ -29,15 +30,15 @@ type FormActionFunc<TFieldValues extends FieldValues> = (
 type FormActionArg2<TFieldValues extends FieldValues> =
   | QRL<ValidateForm<TFieldValues>>
   | (FormDataInfo<TFieldValues> & {
-      validate?: QRL<ValidateForm<TFieldValues>>;
+      validate?: Maybe<QRL<ValidateForm<TFieldValues>>>;
     });
 
 /**
  * See {@link formAction$}
  */
 export function formActionQrl<TFieldValues extends FieldValues>(
   action: QRL<FormActionFunc<TFieldValues>>,
-  arg2?: FormActionArg2<TFieldValues>
+  arg2?: Maybe<FormActionArg2<TFieldValues>>
 ): Action<FormActionStore<TFieldValues>, PartialValues<TFieldValues>, true> {
   return globalActionQrl(
     $(
@@ -116,6 +117,6 @@ export function formActionQrl<TFieldValues extends FieldValues>(
  */
 export const formAction$: <TFieldValues extends FieldValues>(
   actionQrl: FormActionFunc<TFieldValues>,
-  arg2?: FormActionArg2<TFieldValues>
+  arg2?: Maybe<FormActionArg2<TFieldValues>>
 ) => Action<FormActionStore<TFieldValues>, PartialValues<TFieldValues>, true> =
   implicit$FirstArg(formActionQrl);

packages/qwik/src/components/Field.tsx

@@ -10,6 +10,7 @@ import type {
   FieldStore,
   FieldValues,
   FormStore,
+  Maybe,
   MaybeArray,
   ValidateField,
 } from '../types';
@@ -32,12 +33,12 @@ export type FieldProps<
     store: FieldStore<TFieldValues, TFieldName>,
     props: FieldElementProps<TFieldValues, TFieldName>
   ) => JSX.Element;
-  validate?: MaybeArray<
-    QRL<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>
+  validate?: Maybe<
+    MaybeArray<QRL<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>>
   >;
-  keepActive?: boolean;
-  keepState?: boolean;
-  key?: string | number;
+  keepActive?: Maybe<boolean>;
+  keepState?: Maybe<boolean>;
+  key?: Maybe<string | number>;
 };
 
 /**

packages/qwik/src/components/FieldArray.tsx

@@ -8,6 +8,7 @@ import type {
   FieldArrayStore,
   ValidateFieldArray,
   MaybeArray,
+  Maybe,
 } from '../types';
 import { getFieldArrayStore } from '../utils';
 import { Lifecycle } from './Lifecycle';
@@ -22,9 +23,9 @@ export type FieldArrayProps<
   children: (
     store: FieldArrayStore<TFieldValues, TFieldArrayName>
   ) => JSX.Element;
-  validate?: MaybeArray<QRL<ValidateFieldArray<number[]>>>;
-  keepActive?: boolean;
-  keepState?: boolean;
+  validate?: Maybe<MaybeArray<QRL<ValidateFieldArray<number[]>>>>;
+  keepActive?: Maybe<boolean>;
+  keepState?: Maybe<boolean>;
 };
 
 /**

packages/qwik/src/components/Form.tsx

@@ -10,6 +10,7 @@ import type {
   SubmitHandler,
   FormActionStore,
   PartialValues,
+  Maybe,
 } from '../types';
 import { setErrorResponse } from '../utils';
 
@@ -20,25 +21,27 @@ export type FormProps<
 > = {
   // Custom props
   of: FormStore<TFieldValues, TFieldName, TFieldArrayName>;
-  action?: ActionStore<
-    FormActionStore<TFieldValues>,
-    PartialValues<TFieldValues>,
-    true
+  action?: Maybe<
+    ActionStore<
+      FormActionStore<TFieldValues>,
+      PartialValues<TFieldValues>,
+      true
+    >
   >;
-  onSubmit$?: SubmitHandler<TFieldValues>;
-  keepResponse?: boolean;
-  shouldActive?: boolean;
-  shouldTouched?: boolean;
-  shouldDirty?: boolean;
-  shouldFocus?: boolean;
-  reloadDocument?: boolean;
+  onSubmit$?: Maybe<SubmitHandler<TFieldValues>>;
+  keepResponse?: Maybe<boolean>;
+  shouldActive?: Maybe<boolean>;
+  shouldTouched?: Maybe<boolean>;
+  shouldDirty?: Maybe<boolean>;
+  shouldFocus?: Maybe<boolean>;
+  reloadDocument?: Maybe<boolean>;
 
   // HTML props
-  id?: string;
-  class?: string;
-  autoComplete?: 'on' | 'off';
-  encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data';
-  name?: string;
+  id?: Maybe<string>;
+  class?: Maybe<string>;
+  autoComplete?: Maybe<'on' | 'off'>;
+  encType?: Maybe<'application/x-www-form-urlencoded' | 'multipart/form-data'>;
+  name?: Maybe<string>;
   children: any;
 };
 

packages/qwik/src/components/Lifecycle.tsx

@@ -15,6 +15,7 @@ import type {
   FieldStore,
   FieldValues,
   FormStore,
+  Maybe,
   MaybeArray,
   ValidateField,
   ValidateFieldArray,
@@ -27,8 +28,8 @@ type FieldProps<
   TFieldName extends FieldPath<TFieldValues>
 > = {
   store: FieldStore<TFieldValues, TFieldName>;
-  validate?: MaybeArray<
-    QRL<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>
+  validate?: Maybe<
+    MaybeArray<QRL<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>>
   >;
 };
 
@@ -37,7 +38,7 @@ type FieldArrayProps<
   TFieldArrayName extends FieldArrayPath<TFieldValues>
 > = {
   store: FieldArrayStore<TFieldValues, TFieldArrayName>;
-  validate?: MaybeArray<QRL<ValidateFieldArray<number[]>>>;
+  validate?: Maybe<MaybeArray<QRL<ValidateFieldArray<number[]>>>>;
 };
 
 type LifecycleProps<
@@ -50,8 +51,8 @@ type LifecycleProps<
 ) & {
   key: string | number;
   of: FormStore<TFieldValues, TFieldName, TFieldArrayName>;
-  keepActive?: boolean;
-  keepState?: boolean;
+  keepActive?: Maybe<boolean>;
+  keepState?: Maybe<boolean>;
 };
 
 /**

packages/qwik/src/methods/getValues.ts

@@ -3,6 +3,7 @@ import type {
   FieldPath,
   FieldValues,
   FormStore,
+  Maybe,
   PartialValues,
 } from '../types';
 import { getFieldValues, getFilteredNames, getOptions } from '../utils';
@@ -29,8 +30,10 @@ export function getValues<
   TFieldArrayName extends FieldArrayPath<TFieldValues>
 >(
   form: FormStore<TFieldValues, TFieldName, TFieldArrayName>,
-  arg2?: TFieldArrayName | (TFieldName | TFieldArrayName)[] | ValuesOptions,
-  arg3?: ValuesOptions
+  arg2?: Maybe<
+    TFieldArrayName | (TFieldName | TFieldArrayName)[] | ValuesOptions
+  >,
+  arg3?: Maybe<ValuesOptions>
 ): PartialValues<TFieldValues> {
   // Destructure options and set default values
   const {

packages/qwik/src/methods/insert.ts

@@ -4,6 +4,7 @@ import type {
   FieldPath,
   FieldValues,
   FormStore,
+  Maybe,
 } from '../types';
 import {
   getFieldArrayStore,
@@ -24,7 +25,7 @@ type InsertOptions<
   TFieldArrayName extends FieldArrayPath<TFieldValues>,
   TFieldArrayValues extends FieldArrayPathValue<TFieldValues, TFieldArrayName>
 > = {
-  at?: number;
+  at?: Maybe<number>;
   value: TFieldArrayValues[number];
 };
 

packages/qwik/src/methods/reset.ts

@@ -5,6 +5,7 @@ import type {
   FieldValues,
   FormStore,
   InitialValues,
+  Maybe,
 } from '../types';
 import {
   getFieldArrayStore,
@@ -48,12 +49,13 @@ export function reset<
   TFieldArrayName extends FieldArrayPath<TFieldValues>
 >(
   form: FormStore<TFieldValues, TFieldName, TFieldArrayName>,
-  arg2?:
+  arg2?: Maybe<
     | TFieldName
     | TFieldArrayName
     | (TFieldName | TFieldArrayName)[]
-    | ResetOptions<TFieldValues, TFieldName>,
-  arg3?: ResetOptions<TFieldValues, TFieldName>
+    | ResetOptions<TFieldValues, TFieldName>
+  >,
+  arg3?: Maybe<ResetOptions<TFieldValues, TFieldName>>
 ): void {
   // Filter names between field and field arrays
   const [fieldNames, fieldArrayNames] = getFilteredNames(form, arg2);

packages/qwik/src/methods/validate.ts

@@ -4,6 +4,7 @@ import type {
   FieldValues,
   FormErrors,
   FormStore,
+  Maybe,
 } from '../types';
 import {
   getFieldStore,
@@ -38,12 +39,13 @@ export async function validate<
   TFieldArrayName extends FieldArrayPath<TFieldValues>
 >(
   form: FormStore<TFieldValues, TFieldName, TFieldArrayName>,
-  arg2?:
+  arg2?: Maybe<
     | TFieldName
     | TFieldArrayName
     | (TFieldName | TFieldArrayName)[]
-    | ValidateOptions,
-  arg3?: ValidateOptions
+    | ValidateOptions
+  >,
+  arg3?: Maybe<ValidateOptions>
 ): Promise<boolean> {
   // Filter names between field and field arrays
   const [fieldNames, fieldArrayNames] = getFilteredNames(form, arg2);

packages/qwik/src/types/form.ts

@@ -24,7 +24,9 @@ export type SubmitHandler<TFieldValues extends FieldValues> = MaybeQRL<
  * Value type of the form errors.
  */
 export type FormErrors<TFieldValues extends FieldValues> = {
-  [name in FieldPath<TFieldValues> | FieldArrayPath<TFieldValues>]?: string;
+  [name in
+    | FieldPath<TFieldValues>
+    | FieldArrayPath<TFieldValues>]?: Maybe<string>;
 } & { [name: string]: string };
 
 /**
@@ -121,14 +123,16 @@ export type FormActionStore<TFieldValues extends FieldValues> = {
  */
 export type FormOptions<TFieldValues extends FieldValues> = {
   loader: Signal<InitialValues<TFieldValues>>;
-  action?: ActionStore<
-    FormActionStore<TFieldValues>,
-    PartialValues<TFieldValues>,
-    true
+  action?: Maybe<
+    ActionStore<
+      FormActionStore<TFieldValues>,
+      PartialValues<TFieldValues>,
+      true
+    >
   >;
-  validate?: QRL<ValidateForm<TFieldValues>>;
-  validateOn?: ValidationMode;
-  revalidateOn?: ValidationMode;
+  validate?: Maybe<QRL<ValidateForm<TFieldValues>>>;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
 };
 
 /**

packages/qwik/src/utils/getFieldValues.ts

@@ -3,12 +3,13 @@ import type {
   FieldPath,
   FieldValues,
   FormStore,
+  Maybe,
 } from '../types';
 import { getFieldStore } from './getFieldStore';
 
 type FieldValuesOptions<TInitialValue> = {
   initialValue: TInitialValue;
-  replacePrefix?: string;
+  replacePrefix?: Maybe<string>;
   shouldActive: boolean;
   shouldTouched: boolean;
   shouldDirty: boolean;

packages/qwik/src/utils/getFilteredNames.ts

@@ -3,6 +3,7 @@ import type {
   FieldPath,
   FieldValues,
   FormStore,
+  Maybe,
 } from '../types';
 import { getFieldArrayNames } from './getFieldArrayNames';
 import { getFieldNames } from './getFieldNames';
@@ -25,11 +26,9 @@ export function getFilteredNames<
   TOptions extends Record<string, any>
 >(
   form: FormStore<TFieldValues, TFieldName, TFieldArrayName>,
-  arg2?:
-    | TFieldName
-    | TFieldArrayName
-    | (TFieldName | TFieldArrayName)[]
-    | TOptions
+  arg2?: Maybe<
+    TFieldName | TFieldArrayName | (TFieldName | TFieldArrayName)[] | TOptions
+  >
 ): [TFieldName[], TFieldArrayName[]] {
   // Get all field and field array names of form
   const allFieldNames = getFieldNames(form);

packages/qwik/src/utils/getFormDataValues.ts

@@ -1,5 +1,5 @@
 import { noSerialize } from '@builder.io/qwik';
-import type { FieldValues, FormDataInfo, PartialValues } from '../types';
+import type { FieldValues, FormDataInfo, Maybe, PartialValues } from '../types';
 
 /**
  * Returns the values of a form data object. Information that is lost during
@@ -88,7 +88,10 @@ export function getFormDataValues<TFieldValues extends FieldValues>(
     // If path contains an array, add ever array path
     if (path.includes('.$.')) {
       // Create recusive function to find and add every array path
-      const addArrayPaths = (currentPath: string, parentPath?: string) => {
+      const addArrayPaths = (
+        currentPath: string,
+        parentPath?: Maybe<string>
+      ) => {
         const [präfixPath, ...suffixPaths] = currentPath.split('.$.');
         const suffixPath = suffixPaths.join('.$.');
         const arrayPath = parentPath