chore: register with devtools in useFormField (#214)

* chore: register with devtools in `useFormField`

* refactor: update registerField to accept Ref type and use

* feat: introduce BuiltInControlTypes for consistent control type

* chore: fix typo

* fix: types and type reactivity in devtools

---------

Co-authored-by: Abdelrahman Awad <[email protected]>

Author: genu

packages/core/src/types/controls.ts

@@ -4,6 +4,7 @@ import { StandardSchema } from './forms';
 export interface ControlApi {
   getControlElement(): HTMLElement | undefined;
   getControlId(): string | undefined;
+  getControlType(): string | undefined;
 }
 
 export interface ControlProps<TValue = unknown, TInitialValue = TValue> {
@@ -42,3 +43,23 @@ export interface ControlProps<TValue = unknown, TInitialValue = TValue> {
    */
   required?: boolean;
 }
+
+export const BuiltInControlTypes = {
+  Text: 'Text',
+  Calendar: 'Calendar',
+  Date: 'Date',
+  Time: 'Time',
+  File: 'File',
+  Select: 'Select',
+  Number: 'Number',
+  OTP: 'OTP',
+  Slider: 'Slider',
+  Switch: 'Switch',
+  Checkbox: 'Checkbox',
+  CheckboxGroup: 'CheckboxGroup',
+  RadioGroup: 'RadioGroup',
+  ComboBox: 'ComboBox',
+  Hidden: 'Hidden',
+  Search: 'Search',
+  Custom: 'Custom',
+} as const;

packages/core/src/useCalendar/useCalendarControl.ts

@@ -1,7 +1,7 @@
 import { computed, inject, nextTick, provide, Ref, shallowRef, toValue, watch } from 'vue';
 import { CalendarContext, CalendarViewType } from './types';
 import { hasKeyCode, normalizeProps, useCaptureProps, useUniqId } from '../utils/common';
-import { ControlProps, Maybe, Reactivify } from '../types';
+import { BuiltInControlTypes, ControlProps, Maybe, Reactivify } from '../types';
 import { useLocale } from '../i18n';
 import { FieldTypePrefixes } from '../constants';
 import { blockEvent } from '../utils/events';
@@ -17,7 +17,6 @@ import { createDisabledContext } from '../helpers/createDisabledContext';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useConstraintsValidator, useInputValidity } from '../validation';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface CalendarControlProps extends ControlProps<Date | undefined> {
   /**
@@ -128,6 +127,7 @@ export function useCalendarControl(_props: Reactivify<CalendarControlProps, 'fie
     controller?.registerControl({
       getControlId: () => calendarId,
       getControlElement: () => calendarEl.value,
+      getControlType: () => BuiltInControlTypes.Calendar,
     });
   }
 
@@ -340,13 +340,6 @@ export function useCalendarControl(_props: Reactivify<CalendarControlProps, 'fie
     };
   }, gridEl);
 
-  if (__DEV__) {
-    // If it is its own field, we should register it with devtools.
-    if (!props.field) {
-      registerField(field, 'Calendar');
-    }
-  }
-
   return {
     /**
      * The id of the calendar element.

packages/core/src/useCheckbox/useCheckbox.ts

@@ -1,5 +1,4 @@
 import { computed, inject, nextTick, toValue, shallowRef } from 'vue';
-import { registerField } from '@formwerk/devtools';
 import { hasKeyCode, isEqual, isInputElement, normalizeProps, useUniqId, useCaptureProps } from '../utils/common';
 import {
   AriaLabelableProps,
@@ -274,10 +273,6 @@ export function useCheckbox<TValue = string>(_props: Reactivify<CheckboxProps<TV
 
   const isGrouped = !!group;
 
-  if (__DEV__) {
-    registerField(field.state, 'Checkbox');
-  }
-
   return exposeField(
     {
       /**

packages/core/src/useCheckbox/useCheckboxGroup.ts

@@ -9,6 +9,7 @@ import {
   Arrayable,
   StandardSchema,
   ControlProps,
+  BuiltInControlTypes,
 } from '../types';
 import {
   useUniqId,
@@ -119,6 +120,7 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
   field.registerControl({
     getControlId: () => groupId,
     getControlElement: () => undefined,
+    getControlType: () => BuiltInControlTypes.CheckboxGroup,
   });
 
   const { fieldValue, setValue, isTouched, setTouched, isDisabled } = field.state;

packages/core/src/useComboBox/useComboBoxControl.ts

@@ -1,5 +1,5 @@
 import { ref, toValue, watch, shallowRef, computed } from 'vue';
-import { ControlProps, InputEvents, Maybe, Reactivify } from '../types';
+import { BuiltInControlTypes, ControlProps, InputEvents, Maybe, Reactivify } from '../types';
 import { Orientation } from '../types';
 import {
   debounce,
@@ -18,7 +18,6 @@ import { FilterFn } from '../collections';
 import { useControlButtonProps } from '../helpers/useControlButtonProps';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface ComboBoxControlProps<TOption, TValue = TOption> extends ControlProps<TValue> {
   /**
@@ -79,6 +78,7 @@ export function useComboBoxControl<TOption, TValue = TOption>(
   controller?.registerControl({
     getControlElement: () => inputEl.value,
     getControlId: () => inputId,
+    getControlType: () => BuiltInControlTypes.ComboBox,
   });
 
   const {
@@ -318,10 +318,6 @@ export function useComboBoxControl<TOption, TValue = TOption>(
     watch(inputValue, debounce(filter.debounceMs, updateHiddenState));
   }
 
-  if (__DEV__) {
-    registerField(field, 'ComboBox');
-  }
-
   return {
     /**
      * The id of the input element.

packages/core/src/useCustomField/useCustomControl.ts

@@ -5,7 +5,6 @@ import { resolveFieldState } from '../useFormField';
 import { normalizeProps, propsToValues, useUniqId, useCaptureProps } from '../utils/common';
 import { useInputValidity } from '../validation';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface CustomControlProps<TValue = unknown> extends ControlProps<TValue> {
   /**
@@ -33,6 +32,7 @@ export function useCustomControl<TValue = unknown>(
   controller?.registerControl({
     getControlElement: () => controlEl.value,
     getControlId: () => controlId,
+    getControlType: () => props.controlType ?? 'Custom',
   });
 
   const controlProps = useCaptureProps(() => {
@@ -47,10 +47,6 @@ export function useCustomControl<TValue = unknown>(
     };
   }, controlEl);
 
-  if (__DEV__) {
-    registerField(field, props.controlType ?? 'Custom');
-  }
-
   return {
     /**
      * The id of the control element.

packages/core/src/useCustomField/useCustomField.ts

@@ -1,3 +1,4 @@
+import { toValue } from 'vue';
 import { Reactivify } from '../types';
 import { exposeField, getFieldInit, useFormField, WithFieldProps } from '../useFormField';
 import { normalizeProps } from '../utils/common';
@@ -7,7 +8,7 @@ export type CustomFieldProps<TValue = unknown> = WithFieldProps<CustomControlPro
 
 export function useCustomField<TValue = unknown>(_props: Reactivify<CustomFieldProps<TValue>, 'schema'>) {
   const props = normalizeProps(_props, ['schema']);
-  const field = useFormField(getFieldInit<TValue>(props));
+  const field = useFormField(getFieldInit<TValue>(props), toValue(props.controlType) ?? 'Custom Field');
   const control = useCustomControl<TValue>({
     ...(props as CustomControlProps<TValue>),
     _field: field,

packages/core/src/useDateTime/useDateControl.ts

@@ -1,4 +1,4 @@
-import { ControlProps, Reactivify } from '../types';
+import { BuiltInControlTypes, ControlProps, Reactivify } from '../types';
 import type { CalendarProps } from '../useCalendar';
 import { normalizeProps, useUniqId, useCaptureProps } from '../utils/common';
 import { computed, shallowRef, toValue } from 'vue';
@@ -12,7 +12,6 @@ import { useInputValidity } from '../validation';
 import { useConstraintsValidator } from '../validation/useConstraintsValidator';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface DateControlProps extends ControlProps<Date | undefined> {
   /**
@@ -84,6 +83,7 @@ export function useDateControl(_props: Reactivify<DateControlProps, '_field' | '
   controller?.registerControl({
     getControlElement: () => controlEl.value,
     getControlId: () => controlId,
+    getControlType: () => BuiltInControlTypes.Date,
   });
 
   const min = computed(() => fromDateToCalendarZonedDateTime(toValue(props.min), calendar.value, timeZone.value));
@@ -146,10 +146,6 @@ export function useDateControl(_props: Reactivify<DateControlProps, '_field' | '
     };
   }, controlEl);
 
-  if (__DEV__) {
-    registerField(field, 'Date');
-  }
-
   return {
     /**
      * The id of the control element.

packages/core/src/useDateTime/useTimeControl.ts

@@ -1,4 +1,4 @@
-import { ControlProps, Maybe, Reactivify } from '../types';
+import { BuiltInControlTypes, ControlProps, Maybe, Reactivify } from '../types';
 import { isNullOrUndefined, normalizeProps, useUniqId, useCaptureProps } from '../utils/common';
 import { computed, shallowRef, toValue } from 'vue';
 import { resolveFieldState } from '../useFormField';
@@ -14,7 +14,6 @@ import { merge } from '../../../shared/src';
 import { Simplify } from 'type-fest';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export type TimeFormatOptions = Simplify<
   Pick<Intl.DateTimeFormatOptions, 'hour' | 'minute' | 'second' | 'dayPeriod' | 'timeZone' | 'hour12'>
@@ -88,6 +87,7 @@ export function useTimeControl(_props: Reactivify<TimeControlProps, '_field' | '
   controller?.registerControl({
     getControlElement: () => controlEl.value,
     getControlId: () => controlId,
+    getControlType: () => BuiltInControlTypes.Time,
   });
 
   const temporalValue = useTemporalStore({
@@ -128,10 +128,6 @@ export function useTimeControl(_props: Reactivify<TimeControlProps, '_field' | '
     };
   }, controlEl);
 
-  if (__DEV__) {
-    registerField(field, 'Time');
-  }
-
   return {
     /**
      * The id of the control element.

packages/core/src/useFileField/useFileControl.ts

@@ -1,5 +1,5 @@
 import { computed, markRaw, nextTick, provide, readonly, ref, toValue, shallowRef } from 'vue';
-import { Arrayable, ControlProps, Reactivify } from '../types';
+import { Arrayable, BuiltInControlTypes, ControlProps, Reactivify } from '../types';
 import {
   isNullOrUndefined,
   normalizeArrayable,
@@ -18,7 +18,6 @@ import { FileEntryCollectionKey, FilePickerOptions } from './types';
 import { useControlButtonProps } from '../helpers/useControlButtonProps';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface FileUploadContext {
   /**
@@ -91,6 +90,7 @@ export function useFileControl(_props: Reactivify<FileControlProps, 'onUpload' |
   controller?.registerControl({
     getControlElement: () => inputEl.value,
     getControlId: () => inputId,
+    getControlType: () => BuiltInControlTypes.File,
   });
 
   function isMultiple() {
@@ -339,10 +339,6 @@ export function useFileControl(_props: Reactivify<FileControlProps, 'onUpload' |
     getRemoveButtonLabel: () => toValue(props.removeButtonLabel) ?? 'Remove file',
   });
 
-  if (__DEV__) {
-    registerField(field, 'File');
-  }
-
   return {
     /**
      * The id of the input element.