refactor: simplify dev-tools registration by removing formId parameter

formwerkjs · Feb 22, 2025 · 26cecb7 · 26cecb7
1 parent 7be32b5
commit 26cecb7
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 61 deletions.
diff --git a/packages/core/src/useCheckbox/useCheckbox.ts b/packages/core/src/useCheckbox/useCheckbox.ts
@@ -1,4 +1,4 @@
-import { computed, inject, nextTick, Ref, ref, toValue, watch } from 'vue';
+import { computed, inject, nextTick, Ref, ref, toValue } from 'vue';
 import { hasKeyCode, isEqual, isInputElement, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
 import {
   AriaLabelableProps,
@@ -13,8 +13,7 @@ import { CheckboxGroupContext, CheckboxGroupKey } from './useCheckboxGroup';
 import { useFormField, exposeField, FormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 import { useInputValidity } from '../validation';
-import { refreshInspector, registerCheckboxWithDevtools } from '@dev-tools/index';
-import { FormKey } from '@core/useForm';
+import { registerCheckboxWithDevtools } from '@dev-tools/index';
 
 export interface CheckboxProps<TValue = string> {
   /**
@@ -102,8 +101,6 @@ export function useCheckbox<TValue = string>(
   _props: Reactivify<CheckboxProps<TValue>, 'schema'>,
   elementRef?: Ref<HTMLElement | undefined>,
 ) {
-  const form = inject(FormKey, null);
-
   const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.Checkbox);
   const getTrueValue = createTrueValueGetter(props);
@@ -314,19 +311,7 @@ export function useCheckbox<TValue = string>(
 
   if (__DEV__) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    registerCheckboxWithDevtools({ ...exposedField, ...field } as any, form?.id);
-
-    watch(
-      () => ({
-        errors: errorMessage.value,
-        isValid: !errorMessage.value,
-        value: fieldValue.value,
-      }),
-      refreshInspector,
-      {
-        deep: true,
-      },
-    );
+    registerCheckboxWithDevtools({ ...exposedField, ...field } as any);
   }
 
   return exposedField;

diff --git a/packages/core/src/useFormField/useFormField.ts b/packages/core/src/useFormField/useFormField.ts
@@ -37,6 +37,7 @@ export type FormField<TValue> = {
   setTouched: (touched: boolean) => void;
   setErrors: (messages: Arrayable<string>) => void;
   displayError: () => string | undefined;
+  form?: FormContext | null;
 };
 
 export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<TValue>>): FormField<TValue> {
@@ -200,7 +201,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     form.setFieldDisabled(path, disabled);
   });
 
-  return field;
+  return { ...field, form };
 }
 
 function useFieldValidity(getPath: Getter<string | undefined>, isDisabled: Ref<boolean>, form?: FormContext | null) {

diff --git a/packages/core/src/useRadio/useRadioGroup.ts b/packages/core/src/useRadio/useRadioGroup.ts
@@ -1,4 +1,4 @@
-import { InjectionKey, toValue, computed, onBeforeUnmount, reactive, provide, ref, inject, watch } from 'vue';
+import { InjectionKey, toValue, computed, onBeforeUnmount, reactive, provide, ref } from 'vue';
 import { useInputValidity } from '../validation/useInputValidity';
 import { useLabel, useErrorMessage } from '../a11y';
 import {
@@ -22,8 +22,7 @@ import {
 import { useLocale } from '../i18n';
 import { useFormField, exposeField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
-import { FormKey } from '@core/useForm';
-import { refreshInspector, registerRadioWithDevtools } from '@dev-tools/index';
+import { registerRadioWithDevtools } from '@dev-tools/index';
 
 export interface RadioGroupContext<TValue> {
   name: string;
@@ -129,8 +128,6 @@ function getOrientationArrows(dir: Direction | undefined) {
 }
 
 export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProps<TValue>, 'schema'>) {
-  const form = inject(FormKey, null);
-
   const props = normalizeProps(_props, ['schema']);
   const groupId = useUniqId(FieldTypePrefixes.RadioButtonGroup);
   const { direction } = useLocale();
@@ -300,19 +297,7 @@ export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProp
 
   if (__DEV__) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    registerRadioWithDevtools({ ...exposedField, ...field } as any, form?.id);
-
-    watch(
-      () => ({
-        errors: errorMessage.value,
-        isValid: !errorMessage.value,
-        value: fieldValue.value,
-      }),
-      refreshInspector,
-      {
-        deep: true,
-      },
-    );
+    registerRadioWithDevtools({ ...exposedField, ...field } as any);
   }
 
   return exposedField;

diff --git a/packages/core/src/useTextField/useTextField.ts b/packages/core/src/useTextField/useTextField.ts
@@ -1,4 +1,4 @@
-import { Ref, computed, inject, shallowRef, toValue, watch } from 'vue';
+import { Ref, computed, shallowRef, toValue } from 'vue';
 import { createDescribedByProps, normalizeProps, propsToValues, useUniqId, withRefCapture } from '../utils/common';
 import {
   AriaDescribableProps,
@@ -14,8 +14,7 @@ import { useLabel, useErrorMessage } from '../a11y';
 import { useFormField, exposeField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 import { StandardSchema } from '../types';
-import { refreshInspector, registerTextFieldWithDevtools } from '@dev-tools/index';
-import { FormKey } from '@core/useForm';
+import { registerTextFieldWithDevtools } from '@dev-tools/index';
 
 export type TextInputDOMType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 
@@ -118,8 +117,6 @@ export function useTextField(
   _props: Reactivify<TextFieldProps, 'schema'>,
   elementRef?: Ref<HTMLInputElement | HTMLTextAreaElement>,
 ) {
-  const form = inject(FormKey, null);
-
   const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.TextField);
   const inputEl = elementRef || shallowRef<HTMLInputElement>();
@@ -212,19 +209,7 @@ export function useTextField(
   );
 
   if (__DEV__) {
-    registerTextFieldWithDevtools({ ...exposedField, ...field }, form?.id);
-
-    watch(
-      () => ({
-        errors: errorMessage.value,
-        isValid: !errorMessage.value,
-        value: fieldValue.value,
-      }),
-      refreshInspector,
-      {
-        deep: true,
-      },
-    );
+    registerTextFieldWithDevtools({ ...exposedField, ...field });
   }
 
   return exposedField;

diff --git a/packages/dev-tools/src/registery.ts b/packages/dev-tools/src/registery.ts
@@ -1,12 +1,13 @@
 import { initDevTools, refreshInspector } from './init';
-import { onUnmounted } from 'vue';
+import { onUnmounted, watch } from 'vue';
 import { CheckboxField, FIELD_TYPES, FormContext, RadioField, TextField } from './types';
 import { DEVTOOLS_FIELDS, DEVTOOLS_FORMS } from './storage';
 
-export function registerTextFieldWithDevtools(field: Omit<TextField, 'type'>, formId?: string) {
+export function registerTextFieldWithDevtools(field: Omit<TextField, 'type'>) {
   const vm = initDevTools();
 
   const id = field.getPath() ?? field.getName() ?? '';
+  const formId = field.form?.id;
 
   // if the field is part of a form, we need to register to add the field to the form
   if (formId && DEVTOOLS_FORMS[formId]) {
@@ -21,6 +22,18 @@ export function registerTextFieldWithDevtools(field: Omit<TextField, 'type'>, fo
     DEVTOOLS_FIELDS[id] = { ...field, type: FIELD_TYPES.TextField, _vm: vm };
   }
 
+  watch(
+    () => ({
+      errors: field.errorMessage.value,
+      isValid: !field.errorMessage.value,
+      value: field.fieldValue.value,
+    }),
+    refreshInspector,
+    {
+      deep: true,
+    },
+  );
+
   onUnmounted(() => {
     delete DEVTOOLS_FIELDS[id];
     refreshInspector();
@@ -29,11 +42,11 @@ export function registerTextFieldWithDevtools(field: Omit<TextField, 'type'>, fo
   refreshInspector();
 }
 
-export function registerCheckboxWithDevtools(field: Omit<CheckboxField, 'type'>, formId?: string) {
+export function registerCheckboxWithDevtools(field: Omit<CheckboxField, 'type'>) {
   const vm = initDevTools();
 
   const id = field.getPath() ?? field.getName() ?? '';
-
+  const formId = field.form?.id;
   // if the field is part of a form, we need to register to add the field to the form
   if (formId && DEVTOOLS_FORMS[formId]) {
     DEVTOOLS_FORMS[formId].children = DEVTOOLS_FORMS[formId].children ?? [];
@@ -47,6 +60,18 @@ export function registerCheckboxWithDevtools(field: Omit<CheckboxField, 'type'>,
     DEVTOOLS_FIELDS[id] = { ...field, type: FIELD_TYPES.Checkbox, _vm: vm };
   }
 
+  watch(
+    () => ({
+      errors: field.errors.value,
+      isValid: !field.errorMessage.value,
+      value: field.fieldValue.value,
+    }),
+    refreshInspector,
+    {
+      deep: true,
+    },
+  );
+
   onUnmounted(() => {
     delete DEVTOOLS_FIELDS[id];
     refreshInspector();
@@ -55,11 +80,11 @@ export function registerCheckboxWithDevtools(field: Omit<CheckboxField, 'type'>,
   refreshInspector();
 }
 
-export function registerRadioWithDevtools(field: Omit<RadioField, 'type'>, formId?: string) {
+export function registerRadioWithDevtools(field: Omit<RadioField, 'type'>) {
   const vm = initDevTools();
 
   const id = field.getPath() ?? field.getName() ?? '';
-
+  const formId = field.form?.id;
   // if the field is part of a form, we need to register to add the field to the form
   if (formId && DEVTOOLS_FORMS[formId]) {
     DEVTOOLS_FORMS[formId].children = DEVTOOLS_FORMS[formId].children ?? [];
@@ -73,6 +98,18 @@ export function registerRadioWithDevtools(field: Omit<RadioField, 'type'>, formI
     DEVTOOLS_FIELDS[id] = { ...field, type: FIELD_TYPES.Radio, _vm: vm };
   }
 
+  watch(
+    () => ({
+      errors: field.errorMessage.value,
+      isValid: !field.errorMessage.value,
+      value: field.fieldValue.value,
+    }),
+    refreshInspector,
+    {
+      deep: true,
+    },
+  );
+
   onUnmounted(() => {
     delete DEVTOOLS_FIELDS[id];
     refreshInspector();