From 6c3f7be5fc4d01f1617ab2dfed9c9a9bbe6db341 Mon Sep 17 00:00:00 2001 From: dbssman Date: Sat, 15 Jul 2023 10:51:21 +0200 Subject: [PATCH 1/4] work on type suggestions for build fn --- docs/api/use-form-handler/build.md | 39 +++++++++++++++++------------- src/types/formHandler.ts | 8 +++--- src/useFormHandler.ts | 14 ++++++----- tsconfig.json | 2 +- vue.d.ts | 5 ++++ 5 files changed, 39 insertions(+), 29 deletions(-) create mode 100644 vue.d.ts diff --git a/docs/api/use-form-handler/build.md b/docs/api/use-form-handler/build.md index fee4812..f14eea3 100644 --- a/docs/api/use-form-handler/build.md +++ b/docs/api/use-form-handler/build.md @@ -23,8 +23,12 @@ Coming soon... ``` @@ -68,9 +75,7 @@ Notice how the template looks much cleaner with this approach, and this helps us ## Type Declarations ```ts -export interface Build> { - (configuration: T | Ref | ComputedRef): ComputedRef< - Record - > -} +export type Build = >( + configuration: T | Ref | ComputedRef +) => ComputedRef>> ``` diff --git a/src/types/formHandler.ts b/src/types/formHandler.ts index c4e1295..0415efd 100644 --- a/src/types/formHandler.ts +++ b/src/types/formHandler.ts @@ -77,11 +77,9 @@ export type HandleSubmit = ( errorFn?: HandleSubmitErrorFn ) => void -export interface Build> { - (configuration: T | Ref | ComputedRef): ComputedRef< - Record - > -} +export type Build = >( + configuration: T | Ref | ComputedRef +) => ComputedRef>> export interface InterceptorParams { /** Name of the field that is currently about to be set*/ diff --git a/src/useFormHandler.ts b/src/useFormHandler.ts index 9953e3e..c9165db 100644 --- a/src/useFormHandler.ts +++ b/src/useFormHandler.ts @@ -24,7 +24,6 @@ import { ValidationsConfiguration, Unregister, FieldReference, - RegisterOptions, RegisterReturn, } from './types' import { @@ -305,12 +304,15 @@ export const useFormHandler: UseFormHandler = ({ } const build: Build = (configuration) => { - const staticConfig = unref(configuration) as Record + const staticConfig = unref(configuration) return computed(() => - Object.keys(staticConfig).reduce((acc, key) => { - acc[key] = register(key, staticConfig[key]) - return acc - }, {} as Record) + (Object.keys(staticConfig) as (keyof typeof staticConfig)[]).reduce( + (acc, key) => { + acc[key] = register(key as string, staticConfig[key]) + return acc + }, + {} as Record> + ) ) } diff --git a/tsconfig.json b/tsconfig.json index 0a05be0..6bdcb0b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,7 +22,7 @@ "noImplicitAny": true, "types": ["vitest/importMeta"] }, - "include": ["src/**/*.ts", "src/**/*.d.ts"], + "include": ["src/**/*.ts", "src/**/*.d.ts", "./*d.ts"], "references": [ { "path": "./tsconfig.node.json" diff --git a/vue.d.ts b/vue.d.ts new file mode 100644 index 0000000..d6df012 --- /dev/null +++ b/vue.d.ts @@ -0,0 +1,5 @@ +import { ComputedRef, Ref } from '@vue/runtime-core' + +declare module '@vue/runtime-core' { + export function unref(ref: T | Ref | ComputedRef): T +} From 81a34110caf4e070d4631b159ca796ef403de817 Mon Sep 17 00:00:00 2001 From: dbssman Date: Sat, 15 Jul 2023 22:35:02 +0200 Subject: [PATCH 2/4] add objectkeys util --- src/useFormHandler.ts | 13 +++++-------- src/utils/index.ts | 1 + src/utils/objectKeys.ts | 1 + 3 files changed, 7 insertions(+), 8 deletions(-) create mode 100644 src/utils/objectKeys.ts diff --git a/src/useFormHandler.ts b/src/useFormHandler.ts index c9165db..b53a919 100644 --- a/src/useFormHandler.ts +++ b/src/useFormHandler.ts @@ -43,7 +43,7 @@ import { refFn, transformValidations, } from './logic' -import { isNativeControl } from './utils' +import { isNativeControl, objectKeys } from './utils' export const initialState = () => ({ touched: {}, @@ -306,13 +306,10 @@ export const useFormHandler: UseFormHandler = ({ const build: Build = (configuration) => { const staticConfig = unref(configuration) return computed(() => - (Object.keys(staticConfig) as (keyof typeof staticConfig)[]).reduce( - (acc, key) => { - acc[key] = register(key as string, staticConfig[key]) - return acc - }, - {} as Record> - ) + objectKeys(staticConfig).reduce((acc, key) => { + acc[key] = register(String(key), staticConfig[key]) + return acc + }, {} as Record>) ) } diff --git a/src/utils/index.ts b/src/utils/index.ts index d5424ed..79be72c 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -8,3 +8,4 @@ export { default as min } from './min' export { default as minLength } from './minLength' export { default as pattern } from './pattern' export { default as required } from './required' +export { default as objectKeys } from './objectKeys' diff --git a/src/utils/objectKeys.ts b/src/utils/objectKeys.ts new file mode 100644 index 0000000..69ffb9c --- /dev/null +++ b/src/utils/objectKeys.ts @@ -0,0 +1 @@ +export default (obj: T) => Object.keys(obj) as (keyof T)[] From 65d100f45f970ca567121a27712f07e10b57193c Mon Sep 17 00:00:00 2001 From: dbssman Date: Sat, 15 Jul 2023 23:19:03 +0200 Subject: [PATCH 3/4] remove expected error message return --- src/types/baseControl.ts | 3 --- src/useFormHandler.ts | 1 - 2 files changed, 4 deletions(-) diff --git a/src/types/baseControl.ts b/src/types/baseControl.ts index 95f5042..cc3eb00 100644 --- a/src/types/baseControl.ts +++ b/src/types/baseControl.ts @@ -3,9 +3,6 @@ export interface BaseControlProps { /** Name of the control */ name: string - /** Current error of the control */ - error: string | undefined - /** Value binding for native inputs */ ref: (fieldRef: any) => void diff --git a/src/useFormHandler.ts b/src/useFormHandler.ts index b53a919..61c1f90 100644 --- a/src/useFormHandler.ts +++ b/src/useFormHandler.ts @@ -270,7 +270,6 @@ export const useFormHandler: UseFormHandler = ({ return { name, modelValue: values[name], - error: formState.errors[name], 'onUpdate:modelValue': async (value: any) => await handleChange(name, value), ref: refFn(name, _refs, values), From 78889380084c3d4825eef5325d2ee336e55db6a8 Mon Sep 17 00:00:00 2001 From: dbssman Date: Sat, 15 Jul 2023 23:26:49 +0200 Subject: [PATCH 4/4] adjust tests after error removal --- src/test/handler.test.ts | 1 - src/test/register.test.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/test/handler.test.ts b/src/test/handler.test.ts index ff32695..8855171 100644 --- a/src/test/handler.test.ts +++ b/src/test/handler.test.ts @@ -99,7 +99,6 @@ describe('useFormHandler()', () => { }) expect(form.value.field.name).toBe('field') - expect(form.value.field.error).toBeUndefined() expect(form.value.field.onBlur).toBeDefined() expect(form.value.field.isDirty).toBeUndefined() expect(form.value.field.isTouched).toBeUndefined() diff --git a/src/test/register.test.ts b/src/test/register.test.ts index bbe342a..f2f4c1c 100644 --- a/src/test/register.test.ts +++ b/src/test/register.test.ts @@ -6,7 +6,6 @@ describe('register()', () => { const { values, register } = useFormHandler() const field = register('field') expect(field.name).toBe('field') - expect(field.error).toBeUndefined() expect(field.onBlur).toBeDefined() expect(field.isDirty).toBeUndefined() expect(field.isTouched).toBeUndefined()